*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-width: 320px;
}
a{
    outline: none;
}
img,
svg,
video,
canvas {
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

.page-bg {
    overflow-x: clip;
}

.main-container,
.top-header,
.footer-container,
.landing-header,
.landing-wrap,
.landing-card,
.document-card,
.personal-card,
.bank-card,
.photo-panel,
.esign-summary-card,
.esign-visual-card {
    min-width: 0;
}

.btn,
button,
select,
input,
textarea,
.choice-option,
.segment-check {
    -webkit-tap-highlight-color: transparent;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

fieldset{
  border: none;
    padding: 0px;
    margin: 0px;  
}
input[type=number] {
  -moz-appearance: textfield;
}
input:focus-visible{
    outline: 0;
}

/* ===========================
   Custom Reveal Popup
=========================== */

#popmodel {
    max-width: 430px;
    width: 92%;
    padding: 0;
    border: none;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
    animation: popupScale .25s ease;
}

/* Header */
#title_alert {
    margin: 0;
    padding: 18px 20px;
    background: #fff;
    border-bottom: 1px solid #dfe5f1;
    color: #4b5563;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    /* border: none; */
}

/* Body */
#popmodel .insidepopup {
    padding: 28px 24px;
    text-align: center;
}

/* Message */
#content_alert {
    margin: 0;
    color: #4b5563;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 500;
}

/* Button row */
#popmodel .row {
    margin-top: 28px;
}

/* OK Button */
#popmodel .button.success {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 120px;
    height: 50px;
    min-height: 50px;
    border-radius: 7px;
    margin-bottom: 0px;
}

#input-password{
    width: 100%;  
    padding: 0px 20px;
}
.doc-modal  .btnsec{
    justify-content: center;
}
.doc-modal .btnsec .btn{
    min-width: 160px;
    height: 50px;
    min-height: 50px;
}
.document-heading h2{
    font-size: 16px;
    line-height: 1;
}
.document-icon i{
    font-size: 22px;
    color: var(--red);
}


.doc-modal-backdrop
.doc-modal-backdrop {
    -webkit-backdrop-filter: blur(2px);
}
.ui-section-heading {
    text-align: center;
}
.ui-title {
    margin: 0;
    color: var(--navy);
    font-size: 28px;
    line-height: 1;
    letter-spacing: 0;
    font-weight: 600;
}
.ui-title-rule {
    width: 55px;
    height: 3px;
    display: block;
    margin: 22px auto 0;
    border-radius: 3px;
    background: var(--red);
    position: relative;
}
.ui-title-rule.has-dot::after {
    content: "";
    position: absolute;
    right: -13px;
    top: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--red);
}
.btn {
    min-height: 44px;
    border-radius: 7px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease, color .22s ease, filter .22s ease;
}
.btn:hover {
    transform: translateY(-2px);
}
.btn:active {
    transform: translateY(0);
}
.btn-primary {
    border: 0;
    background: linear-gradient(180deg, #ff171f, #ee0008);
    box-shadow: 0 12px 24px rgba(255, 0, 0, 0.18);
    color: #fff;
}
.btn-primary:hover {
    box-shadow: 0 16px 30px rgba(255, 0, 0, 0.28);
    filter: brightness(1.03);
}
.btn-outline {
    background: #fff;
    border-color: #dfe6f4;
    color: var(--navy);
}
.btn-outline:hover {
    border-color: #b8c8f8;
    box-shadow: 0 8px 18px rgba(18, 88, 255, 0.1);
}
.btn-outline-red {
    background: #fff;
    border-color: var(--red);
    color: var(--red);
}
.btn-outline-red:hover {
    background: #fff5f6;
    box-shadow: 0 8px 18px rgba(255, 16, 24, 0.1);
}
.btn-success-outline {
    border-color: #22c55e;
    background: #ecfff3;
    color: #14a545;
}
.btn-success-outline:hover {
    border-color: #16b34e;
    background: #e3ffed;
    box-shadow: 0 8px 18px rgba(34, 197, 94, 0.14);
}
.btn-link {
    min-height: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--red);
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 5px;
}
.btn-link:hover {
    box-shadow: none;
}
.status-card {
    min-height: 60px;
    border: 1px solid #91dda7;
    border-radius: 7px;
    background: linear-gradient(90deg, #f3fff5 0%, #fbfffc 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 26px;
}
.status-card-content {
    display: flex;
    align-items: center;
    gap: 24px;
}
.status-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #28c04d;
    color: #fff;
    font-size: 19px;
    box-shadow: 0 8px 18px rgba(40, 192, 77, 0.22);
}
.status-card strong {
    color: #141520;
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
}
.status-action {
    width: fit-content;
    height: 32px;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 5px;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
}
.form-grid {
    display: grid;
    gap: 15px 37px;
}
.form-grid.two-col {
    grid-template-columns: 1fr 1fr;
}
.form-field {
    display: block;
    margin: 0;
}
.form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.input-with-icon {
    height: 58px;
    min-height: 58px;
    border: 1px solid #cbd3e5;
    border-radius: 7px;
    background: #fff;
    display: grid;
    grid-template-columns: 34px 1fr 30px;
    align-items: center;
    padding: 0 14px;
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.input-with-icon:hover,
.input-with-icon:focus-within {
    border-color: #aebced;
    box-shadow: 0 8px 18px rgba(40, 66, 119, 0.08);
}
.input-with-icon > i {
    color: #1e2749;
    font-size: 14px;
    opacity: 0.5;
}
.input-with-icon .form-control {
    min-height: 0;
    height: 56px;
    border: 0;
    padding: 0;
    box-shadow: none;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
}
.input-with-icon .form-control:hover,
.input-with-icon .form-control:focus {
    box-shadow: none;
    transform: none;
}
.input-with-icon > .form-control:first-child {
    grid-column: 1 / 3;
}
.input-valid b {
    width: 19px;
    height: 19px;
    border: 2px solid #16bf4f;
    border-radius: 50%;
    color: #16bf4f;
    display: grid;
    place-items: center;
    font-size: 11px;
    justify-self: end;
}
.fetchinput .form-error {
    position: relative;
}
.form-error {
    position: absolute;
    margin: 0px;
    margin-top: 3px;
    margin-bottom: 5px;
    font-weight: 500;
    display: none;
    font-size: 0.75rem;
    color: red !important;
}

.lang-select-wrap,
.logout-btn,
.mobile-line button,
.verify-btn,
.status-action,
.pan-verify,
.pan-prev,
.pan-next {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease, color .22s ease;
}
.lang-select-wrap:hover,
.logout-btn:hover,
.mobile-line button:hover,
.verify-btn:hover,
.status-action:hover,
.pan-verify:hover,
.pan-prev:hover,
.pan-next:hover {
    transform: translateY(-2px);
}
.lang-select-wrap:hover .chosen-container{
    border-color: #b8c8f8;
    box-shadow: 0 8px 18px rgba(18, 88, 255, 0.1);
}
.logout-btn:hover,
.mobile-line button:hover,
.pan-prev:hover {
    border-color: var(--red);
    background: #fff5f6;
    box-shadow: 0 8px 18px rgba(255, 16, 24, 0.1);
}
.verify-btn:hover,
.pan-verify:hover,
.pan-next:hover {
    box-shadow: 0 16px 30px rgba(255, 0, 0, 0.28);
    filter: brightness(1.03);
}
.status-action:hover {
    border-color: #16b34e;
    background: #e3ffed;
    box-shadow: 0 8px 18px rgba(34, 197, 94, 0.14);
}
.lang-select-wrap:active,
.logout-btn:active,
.mobile-line button:active,
.verify-btn:active,
.status-action:active,
.pan-verify:active,
.pan-prev:active,
.pan-next:active {
    transform: translateY(0);
}
.form-label {
    display: block;
    margin: 0 0 13px;
    color: var(--navy);
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    transition: color .22s ease, transform .22s ease;
}
.form-label em {
    color: var(--red);
    font-style: normal;
}
.form-control,
select.form-control,
textarea.form-control {
    width: 100%;
    height: 58px;
    min-height: 58px;
    border: 1px solid #cbd3e5;
    border-radius: 7px;
    background: #fff;
    padding: 0 23px;
    outline: 0;
    color: var(--navy);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 12px rgba(40, 66, 119, 0.03);
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease, background-color .22s ease, color .22s ease;
}
textarea.form-control {
    min-height: 116px;
    height: auto;
    padding-top: 17px;
    resize: vertical;
}
select.form-control {
    appearance: none;
    padding-right: 48px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2307145f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
}
.form-control::placeholder {
    color: #a8aec0;
    opacity: 1;
    transition: color .22s ease, opacity .22s ease;
}
.form-control:hover {
    border-color: #aebced;
    box-shadow: 0 8px 18px rgba(40, 66, 119, 0.08);
}
.form-control:focus { 
    /* border-color: #315edb; */
    background: #fff;
    box-shadow: 0 0 0 4px rgba(49, 94, 219, 0.1), 0 10px 22px rgba(40, 66, 119, 0.1);
    transform: translateY(-1px);
}
.form-control:focus::placeholder {
    color: #c4c9d6;
    opacity: 0.78;
}
.form-help {
    margin: 16px 0 28px;
    color: #586083;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 500;
    transition: color .22s ease, opacity .22s ease;
}
.form-note {
    border: 1px solid #b9cdfa;
    border-radius: 6px;
    background: linear-gradient(90deg, #f2f6ff, #f8fbff);
    box-shadow: 0 8px 18px rgba(49, 94, 219, 0.05);
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease, background-color .22s ease;
}
.form-note:hover {
    border-color: #91aff9;
    box-shadow: 0 12px 24px rgba(49, 94, 219, 0.09);
    transform: translateY(-1px);
}
.form-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--navy);
    font-size: 14px;
    line-height: 1.5;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
    appearance: none;
    width: 19px;
    height: 19px;
    min-width: 19px;
    border: 1px solid #cbd3e5;
    background: #fff;
    margin: 1px 0 0;
    position: relative;
    transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
}
.form-check input[type="checkbox"] {
    border-radius: 4px;
}
.form-check input[type="radio"] {
    border-radius: 50%;
}
.form-check input[type="checkbox"]:checked,
.form-check input[type="radio"]:checked {
    border-color: var(--red);
    background: var(--red);
}
.form-check input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.form-check input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: #fff;
}
.form-check input[type="checkbox"]:focus,
.form-check input[type="radio"]:focus {
    box-shadow: 0 0 0 4px rgba(255, 16, 24, 0.08);
}
.otp-input {
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease, background-color .22s ease;
}
.otp-input:hover {
    border-color: #aebced;
    box-shadow: 0 8px 18px rgba(40, 66, 119, 0.08);
}
.otp-input:focus {
    box-shadow: 0 0 0 4px rgba(255, 16, 24, 0.08), 0 10px 22px rgba(40, 66, 119, 0.1);
    transform: translateY(-1px);
}

.step {
    position: relative;
    width: 76px;
    text-align: center;
}
.step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 58px;
    top: 15px;
    width: 60px;
    border-top: 2px dashed #c5d2ed;
}
.step span {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--navy);
    display: grid;
    place-items: center;
    margin: 0 auto 9px;
    background: white;
    color: var(--navy);
    font-size: 12px;
    font-weight: 500;
    box-shadow: 0 3px 10px rgba(19, 56, 140, .08);
}
.step p {
    margin: 0;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
}
.step.active span {
    border: 0;
    background: linear-gradient(135deg, #ff3131, #ee0000);
    color: #fff;
    box-shadow: 0 9px 18px rgba(255, 0, 0, 0.22);
}
.step.active p {
    color: var(--red);
}
.step.completed span {
    border-color: #16bf4f;
    background: #16bf4f;
    color: #fff;
    box-shadow: 0 6px 14px rgba(22, 191, 79, 0.18);
}
.step.completed p {
    color: #11883a;
}
/* Flow stepper: mark completed steps before the active step in green. */
.step:has(+ .step.active) span,
.step:has(+ .step + .step.active) span,
.step:has(+ .step + .step + .step.active) span,
.step:has(+ .step + .step + .step + .step.active) span,
.step:has(+ .step + .step + .step + .step + .step.active) span,
.step:has(+ .step + .step + .step + .step + .step + .step.active) span,
.step:has(+ .step + .step + .step + .step + .step + .step + .step.active) span {
    border-color: #16bf4f;
    background: #16bf4f;
    color: #fff;
    box-shadow: 0 6px 14px rgba(22, 191, 79, 0.18);
}

.step:has(+ .step.active) p,
.step:has(+ .step + .step.active) p,
.step:has(+ .step + .step + .step.active) p,
.step:has(+ .step + .step + .step + .step.active) p,
.step:has(+ .step + .step + .step + .step + .step.active) p,
.step:has(+ .step + .step + .step + .step + .step + .step.active) p,
.step:has(+ .step + .step + .step + .step + .step + .step + .step.active) p {
    color: #11883a;
}
.helpline {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    margin-bottom: 1px;
    justify-content: flex-end;
}
.helpline strong{
    font-weight: 700;
}
.helpline i {
    color: var(--red);
    font-size: 22px;
    margin-right: 1px;
    margin-left: 5px;
}
.helpline a{
    color: #1258ff;
    font-weight: 700;
    letter-spacing: 1px;
}
.helpline span {
    color: #1258ff;
    font-weight: 700;
    letter-spacing: 1px;
}
.actions-row {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.logout-btn {
    height: 44px;      
    border-radius: 9px;
    background: #fff;
    border: 1px solid #dfe6f4;
    font-size: 14px;
    font-weight: 700; 
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.lang-select-wrap {
    min-width: 100px;
}
.lang-select-wrap {
    position: relative;
    cursor: pointer;
     width: auto !important;
    min-width: 175px;
    max-width: 185px; 
}
.lang-select-wrap::after {
    content: "\f078";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 6 Free";
    font-size: 12px;
    font-weight: 900;
    color: var(--navy);
    pointer-events: none;
    z-index: 2;
}
.lang-select-wrap::before {
    content: "\f0ac";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 6 Free";
    font-size: 20px;
    font-weight: 900;
    color: var(--red);
    pointer-events: none;
    z-index: 2;
}

.lang-select-wrap > i {
    color: #1258ff;
    font-size: 20px;
}
.lang-select {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.logout-btn {
    width: fit-content;
    border-color: #ffd4d4;
    color: var(--red);
    padding: 0px 15px;
}
.logout-btn i {
    font-size: 20px;
}
.info-panel {
    height: auto;
    background: linear-gradient(135deg, #fff6f6 0%, #fff 62%, #fff7f7 100%);
    border-radius: 15px;
    padding: 30px 42px;
    text-align: center;
}
.illustration-card {
    height: 174px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.illustration-card img {
    width: 174px;
    height: 151px;
    object-fit: contain;
}
.info-panel h1 {
    font-size: 28px;
    line-height: 1.25;
    letter-spacing: -0.6px;
    margin: 18px 0 17px;
    font-weight: 800;
}
.info-panel h1 span {
    color: var(--red);
}
.intro {
    font-size: 15px;
    line-height: 1.3;
    margin: 0 0 39px;
    color: var(--navy);
}
.tips-card { 
    /* height: 198px; */
    border: 1px solid #dfe5f1;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 8px 18px rgba(47, 77, 132, 0.04);
    padding: 0 22px;
}
.tip {
    height: 60px;
    border-bottom: 1px solid #dfe5f1;
    display: flex;
    align-items: center;
    text-align: left;
    gap: 25px;
    font-size: 14px;
    font-weight: 700;
}
.tip:last-child {
    border-bottom: 0;
}
.tip i {
    width: 22px;
    text-align: center;
    color: var(--red);
    font-size: 21px;
}
.otp-panel {
    text-align: center;
    padding: 20px 66px 0;
}
.phone-badge {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #ffe0e3;
    margin: 10px auto 30px;
    display: grid;
    place-items: center;
}
.phone-badge i {
    font-size: 30px;
    color: var(--red);
    transform: rotate(10deg);
}
.mobile-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}
.mobile-line strong { 
    font-size: 22px;
    letter-spacing: 0.5px;
    line-height: 1;
    font-weight: 900;
}
.mobile-line .btn-link{
    text-decoration: none;
    gap: 6px;
}
.mobile-line button {
    border: 0;
    background: transparent;
    color: var(--red);
    font-size: 15px;
    font-weight: 900;
    display: flex;
    gap: 9px;
    align-items: center;
}
.mobile-line i {
    font-size: 19px;
}
.sent-copy {
    font-size: 14px;
    margin: 14px 0 36px;
}
.otp-inputs {
    display: flex;
    justify-content: center;
    gap: 15px;
}
.otp-input {
    width: 70px;
    height: 70px;
    border: 2px solid #dfe5f1;
    border-radius: 8px;
    background: #fff;
    text-align: center;
    font-size: 22px;
    color: var(--navy);
    font-weight: 700;
    outline: 0;
    box-shadow: 0 5px 13px rgba(40, 66, 119, 0.04);
}


.otp-input:focus {
    border-color: var(--red);
}
.resend {
    margin: 39px 0 27px;
    font-size: 16px;
}
.resend b {
    color: var(--red);
    margin-left: 8px;
}
.resend span{
    text-decoration: underline;
    cursor: pointer;
}
.verify-btn {
    height: 64px;
    width: 626px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(180deg, #ff171f, #ee0008);
    box-shadow: 0 12px 24px rgba(255, 0, 0, 0.2);
    color: #fff;
    font-size: 22px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 68px;
}
.agree-line {
    margin: 37px auto 0;
    display: flex;
    text-align: left;
    gap: 12px;
    max-width: 650px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--navy);
} 
.agree-line a {
    text-decoration: underline;
}
.agree-line.form-check input {
    margin-top: 5px;
}
.voice-assist { 
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
}
.voice-assist strong{
    font-weight: 700;
}
.mic-circle {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(#ff1c25, #e4000b);
    color: white;
    display: grid;
    place-items: center;
    font-size: 22px;
    box-shadow: 0 9px 18px rgba(255, 0, 0, 0.24);
}
.play-dot {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    color: var(--red);
    display: grid;
    place-items: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    margin-left: 6px;
    font-size: 18px;
    cursor: pointer;
}
.footer-divider { 
    width: 1px;
    height: 52px;
    background: #dfe5f1;
}
.powered,
.built {
    display: flex;
    align-items: center;
    gap: 18px;
}
.outline-badge,
.code-badge {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    color: #1258ff;
    border: 2px solid #e0e7ff;
    font-size: 23px;
} 
.powered strong,
.built strong {
    font-size: 14px;
    font-weight: 700;
}
.powered p {
    margin: 6px 0 0;
    color: #555c75;
    font-size: 13px;
    font-weight: 500;
}
.built,.powered {
    justify-content: center;
}
.code-badge {
    font-size: 18px;
}

.pan-page .page-bg {
    padding-bottom: 46px;
}
.pan-page .main-container {
    min-height: auto;
    margin: 20px auto 0;
    padding: 28px 42px 22px;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 22px;
    box-shadow: var(--shadow);
    display: block;
    grid-template-columns: none;
}
.pan-section {
    padding-top: 26px;
}
.pan-workspace {
    display: grid;
    grid-template-columns: 368px 608px;
    column-gap: 90px;
    align-items: center;
    padding: 55px 0px 0 20px;
}
.pan-visual {
    min-height: 260px;
    position: relative;
}
.pan-visual::before,
.pan-visual::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(230, 236, 255, 0.78);
}
.pan-visual::before {
    width: 234px;
    height: 234px;
    left: -8px;
    top: -54px;
}
.pan-visual::after {
    width: 197px;
    height: 197px;
    right: 0;
    top: 29px;
}
.pan-dot-pattern {
    position: absolute;
    width: 72px;
    height: 42px;
    right: -7px;
    top: -24px;
    background-image: radial-gradient(#d4dcff 2.6px, transparent 2.6px);
    background-size: 14px 14px;
}
.pan-spark,
.pan-spark::before {
    position: absolute;
    width: 21px;
    height: 21px;
    z-index: 2;
}
.pan-spark::before {
    content: "";
    inset: 0;
    background: #becaff;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.spark-one {
    left: -20px;
    top: 88px;
}
.spark-two {
    right: 71px;
    bottom: 76px;
}
.pan-ring {
    position: absolute;
    border-radius: 50%;
    z-index: 3;
}
.ring-blue {
    right: -16px;
    bottom: 38px;
    width: 94px;
    height: 94px;
    border-right: 2px solid #2e68ff;
    border-bottom: 2px solid #2e68ff;
    transform: rotate(26deg);
}
.ring-red {
    right: -28px;
    bottom: 14px;
    width: 82px;
    height: 82px;
    border-right: 2px solid var(--red);
    transform: rotate(38deg);
}
.pan-card {
    width: 338px;
    height: 222px;
    position: relative;
    z-index: 4;
    margin: 0;
    padding: 22px 23px;
    border: 2px solid #315edb;
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(240, 244, 255, 0.96), rgba(220, 229, 255, 0.91));
    box-shadow: 0 18px 34px rgba(55, 82, 169, 0.13);
}
.pan-card > strong {
    display: block;
    color: var(--navy);
    font-size: 27px;
    line-height: 1;
    letter-spacing: 0;
    font-weight: 900;
}
.pan-card-body {
    display: grid;
    grid-template-columns: 64px 1fr 80px;
    gap: 22px;
    align-items: center;
    margin-top: 22px;
}
.pan-avatar {
    width: 64px;
    height: 74px;
    border-radius: 5px;
    background: #dae4ff;
    position: relative;
    overflow: hidden;
}
.pan-avatar::before {
    content: "";
    position: absolute;
    width: 31px;
    height: 37px;
    border-radius: 50%;
    left: 17px;
    top: 8px;
    background: linear-gradient(180deg, #7593ec, #5571d8);
}
.pan-avatar span {
    position: absolute;
    width: 69px;
    height: 44px;
    left: -2px;
    bottom: -7px;
    border-radius: 50% 50% 10px 10px;
    background: linear-gradient(180deg, #7390eb, #536dd2);
}
.pan-lines span {
    display: block;
    height: 9px;
    border-radius: 10px;
    background: #c8d4f7;
}
.pan-lines span:nth-child(1) {
    width: 91px;
}
.pan-lines span:nth-child(2) {
    width: 63px;
    margin-top: 13px;
}
.pan-lines span:nth-child(3) {
    width: 89px;
    margin-top: 12px;
}
.pan-lines span:nth-child(4) {
    width: 52px;
    margin-top: 12px;
}
.pan-card-body i {
    color: var(--navy);
    font-size: 76px;
    line-height: 1;
}
.pan-card p {
    margin: 29px 0 0;
    color: var(--navy);
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
}
.pan-form {
    padding-top: 5px;
}
.pan-field {
    display: block;
}
.pan-field em {
    color: var(--red);
    font-style: normal;
}
.pan-input {
    width: 608px;
    max-width: 100%;
    text-transform: uppercase;
}
.pan-help {
    margin: 16px 0 28px;
    color: #586083;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 500;
}
.pan-note {
    width: 608px;
    min-height: 76px;
    max-width: 100%;
    border: 1px solid #b9cdfa;
    border-radius: 6px;
    background: linear-gradient(90deg, #f2f6ff, #f8fbff);
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 15px 18px;
    margin-top: 20px;
}
.pan-note span {
    width: 35px;
    height: 35px;
    min-width: 35px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #2e68ff;
    color: #fff;
    font-size: 19px;
}
.pan-note p {
    margin: 0;
    color: var(--navy);
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
}
.pan-verify {
    width: 608px;
    height: 62px;
    max-width: 100%;
    margin-top: 33px;
    border: 0;
    border-radius: 7px;
    background: linear-gradient(180deg, #ff171f, #ee0008);
    box-shadow: 0 12px 24px rgba(255, 0, 0, 0.22);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    font-size: 18px;
    line-height: 1;
    font-weight: 600;
}
.pan-verify i,
.pan-prev i,
.pan-next i {
    font-size: 22px;
}
.personal-page .pan-bottom-nav{
    border-top:none;
}
.pan-bottom-nav {
    border-top: 1px solid #d9dfec;
    margin-top: 25px;
    padding-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pan-prev,
.pan-next {
    height: 58px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 16px;
    font-weight: 600;
}
.pan-prev {
    width: 166px;
    border: 1px solid var(--red);
    background: #fff;
    color: var(--red);
}
.pan-next {
    width: 158px;
    border: 0;
    background: linear-gradient(180deg, #ff171f, #ee0008);
    box-shadow: 0 12px 24px rgba(255, 0, 0, 0.18);
    color: #fff;
}

.email-page .page-bg {
    padding-bottom: 33px;
}
.email-page .main-container {
    min-height: auto;
    display: block;
    grid-template-columns: none;
    margin: 20px auto 0;
    padding: 28px 42px 22px;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 22px;
    box-shadow: var(--shadow);
}
.email-section {
    text-align: center;
}
.email-hero {
    width: 160px;
    height: 130px;
    display: block;
    object-fit: contain;
    margin: 0 auto 9px;
}
.email-subtitle {
    margin: 19px 0 0;
    color: #46619a;
    font-size: 18px; 
    line-height: 1.25;
    font-weight: 500;
    display: none;
}
.email-form {
    text-align: left;
}

.email-or {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 19px;
    margin: 34px 0 27px;
    color: #111;
    text-align: center;
}
.email-or span {
    height: 1px;
    background: #d9dfec;
}
.email-or b {
    color: #111;
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
}
.email-providers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
}
.email-provider {
    height: 62px;
    border: 1px solid #cbd3e5;
    border-radius: 7px;
    background: #fff;
    color: var(--navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 0 18px;
    font-size: 17px;
    line-height: 1;
    font-weight: 600;
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.email-provider:hover {
    border-color: #aebced;
    box-shadow: 0 8px 18px rgba(40, 66, 119, 0.08);
    transform: translateY(-2px);
}
.google-mark {
    color: #4285f4;
    font-size: 26px;
    line-height: 1;
    font-weight: 900;
}
.microsoft-mark {
    width: 26px;
    height: 26px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}
.microsoft-mark i:nth-child(1) {
    background: #f35325;
}
.microsoft-mark i:nth-child(2) {
    background: #81bc06;
}
.microsoft-mark i:nth-child(3) {
    background: #05a6f0;
}
.microsoft-mark i:nth-child(4) {
    background: #ffba08;
}
.email-security {
    margin: 34px 0 0; 
    color: #395486;
    display: flex;
    align-items: center;
    gap: 17px;
    font-size: 14px;
    justify-content: center;
    line-height: 1.35;
    font-weight: 500;
}
.email-security i {
    width: 20px;
    color: var(--navy);
    font-size: 20px;
    text-align: center;
}

.bank-page .page-bg {
    padding-bottom: 20px;
   
}
.bank-page .main-container {
    min-height: auto;
    display: block;
    grid-template-columns: none;
    margin: 20px auto 0;
    padding: 28px 42px 22px;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 22px;
    box-shadow: var(--shadow);
}
.bank-status-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    margin: 0 0px;
}
.bank-status-card {
    width: 100%;
}
.bank-section {
    padding-top: 26px;
}

.bank-heading span {
    position: relative;
}
.bank-heading span::after {
    content: "";
    position: absolute;
    right: -13px;
    top: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--red);
}
.bank-view {
    animation: bankViewIn .28s ease both;
}
.bank-view[hidden] {
    display: none !important;
}
@keyframes bankViewIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.bank-qr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 42px;
    margin-top: 31px;
}
.bank-card {
    min-height: 432px;
    border: 1px solid #dbe3f2;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 10px 22px rgba(40, 66, 119, 0.03);
}
.bank-qr-card {
    padding: 28px 23px 18px;
    text-align: center;
}
.bank-qr-card h2 {
    margin: 0 0 18px;
    color: var(--navy);
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
}
.upi-apps {
    min-height: 92px;
    border-bottom: 1px dashed #d8e0ef;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    align-items: start;
}
.upi-app {
    display: grid;
    justify-items: center;
    gap: 9px;
}
.upi-app b {
    color: var(--navy);
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
}
.upi-logo {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
}
.upi-logo.phonepe {
    border-radius: 50%;
    background: #6419b7;
    color: #fff;
    font-size: 27px;
    font-weight: 900;
}
.upi-logo.gpay {
    position: relative;
}
.upi-logo.gpay i {
    position: absolute;
    width: 20px;
    height: 33px;
    border-radius: 13px;
    transform-origin: center;
}
.upi-logo.gpay i:nth-child(1) {
    background: #4285f4;
    transform: rotate(35deg);
    left: 7px;
    top: 6px;
}
.upi-logo.gpay i:nth-child(2) {
    background: #34a853;
    transform: rotate(35deg);
    left: 18px;
    top: 6px;
}
.upi-logo.gpay i:nth-child(3) {
    background: #fbbc05;
    transform: rotate(35deg);
    left: 22px;
    top: 12px;
}
.upi-logo.gpay i:nth-child(4) {
    background: #ea4335;
    transform: rotate(35deg);
    left: 11px;
    top: 12px;
}
.upi-logo.paytm {
    width: 78px;
    color: #00a3df;
    font-size: 23px;
    font-weight: 900;
}
.upi-logo.bhim {
    position: relative;
}
.upi-logo.bhim::before,
.upi-logo.bhim::after {
    content: "";
    position: absolute;
    border-style: solid;
}
.upi-logo.bhim::before {
    left: 12px;
    top: 2px;
    border-width: 22px 0 22px 18px;
    border-color: transparent transparent transparent #f9a51a;
}
.upi-logo.bhim::after {
    left: 22px;
    top: 2px;
    border-width: 22px 0 22px 18px;
    border-color: transparent transparent transparent #0a9f55;
}
.upi-logo.whatsapp {
    border-radius: 50%;
    background: #20cf45;
    color: #fff;
    font-size: 34px;
}
.bank-qr-box {
    width: 229px;
    height: 226px;
    margin: 16px auto 17px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    display: grid;
    place-items: center;
}
.bank-qr-box img {
    width: 228px;
    height: 226px;
    display: block;
    object-fit: contain;
}
.bank-qr-card > p {
    margin: 0;
    color: var(--navy);
    font-size: 15px;
    font-weight: 700;
}
.bank-scan-card {
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    padding: 30px;
}
.scan-art {
    width: 292px;
    height: 285px;
    position: relative;
    display: grid;
    place-items: center;
}
.scan-art img {
    width: 292px;
    height: 285px;
    display: block;
    object-fit: contain;
}
.bank-scan-card h2 {
    margin: 8px 0 6px;
    color: var(--navy);
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
}
.bank-scan-card p {
    margin: 0;
    color: var(--navy);
    font-size: 16px;
    line-height: 1.1;
    font-weight: 500;
}
.charge-note {
    width: 670px;
    max-width: 100%;
    min-height: 46px;
    margin: 15px auto 20px;
    border-radius: 8px;
    background: linear-gradient(90deg, #fff2f2, #fff7f7);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-size: 13px;
    font-weight: 700;
}
.charge-note > span:first-child {
    color: var(--red);
    font-size: 27px;
}
.charge-note > span:not(:first-child) {
    color: var(--navy);
    font-size: 13px;
    line-height: 1.25;
}
.bank-page .mobileupi {
    display: none;
}

@media (max-width: 760px) {
    .bank-page .bank-qr-grid { display: block; margin-top: 12px; }
    .bank-page .bank-qr-card { display: none; }
    .bank-page .bank-scan-card { min-height: 260px; padding: 18px 14px 8px; }
    .bank-page .bank-scan-card h2,
    .bank-page .bank-scan-card p { display: none; }
    .bank-page .scan-art,
    .bank-page .scan-art img { width: 220px; height: 215px; }
    .bank-page .mobileupi { display: block; margin: 0 auto 12px; text-align: center; }
    .bank-page .mobileupibtn { min-height: 46px; padding: 0 18px; font-size: 13px; }
}

.bank-actions {
    display: grid;
    grid-template-columns: 190px 1fr 177px;
    align-items: center;
    gap: 24px;
}
.qr-actions {
    grid-template-columns: 1fr;
    justify-items: center;
}
.bank-prev,
.bank-continue,
.bank-proceed {
    height: 55px;
    width: 100%;
}
.bank-manual-link,
.bank-back-link,
.bank-error-box button {
    border: 0;
    background: transparent;
    color: var(--red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 5px;
}
.bank-back-link {
    color: #005cff;
    text-decoration: none;
    justify-self: end;
}
.bank-manual-card {
    margin-top: 12px;
    border: 1px solid #dbe3f2;
    border-radius: 8px;
    padding: 19px 17px 0;
}
.manual-head {
    display: grid;
    grid-template-columns: 1fr 210px;
    align-items: start;
    gap: 24px;
    margin-bottom: 30px;
}
.manual-title {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}
.manual-title > span {
    color: #005cff;
    font-size: 31px;
    line-height: 1;
}
.manual-title h2 {
       margin: 0;
    color: var(--navy);
    font-size: 20px;
    line-height: 1;
    font-weight: 600;
}
.manual-title p {
    margin: 11px 0 0;
    color: #586083;
    font-size: 15px;
    line-height: 1;
    font-weight: 500;
}
.bank-field {
    margin: 0;
}
.bank-field-account {
    grid-column: 1;
    grid-row: 1;
}
.bank-field-ifsc {
    grid-column: 2;
    grid-row: 1;
}
.bank-field-name {
    grid-column: 1;
    grid-row: 2;
}
.bank-field-branch {
    grid-column: 1;
    grid-row: 3;
}
.bank-field-pincode {
    grid-column: 2;
    grid-row: 3;
}
.bank-field-wide {
    grid-column: 1 / -1;
    grid-row: 4;
}
.bank-error-box {
    min-height: 76px;
    margin-top: 14px;
    border: 1px solid #ffc9c9;
    border-radius: 8px;
    background: linear-gradient(90deg, #fff2f2, #fff8f8);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
.bank-error-box > div {
    padding-left: 20px;
}
.bank-error-box strong {
    display: block;
    margin-bottom: 12px;
    color: var(--red);
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
}
.bank-error-box p {
    height: 47px;
    border-left: 1px solid #ffd6d6;
    margin: 0;
    color: var(--red);
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    padding-left: 20px;
}
.bank-error-box p span {
    width: 29px;
    height: 29px;
    border: 2px solid var(--red);
    border-radius: 50%;
    display: grid;
    place-items: center;
}
.bank-error-box small {
    font-size: 13px;
    font-weight: 700;
}

.bank-page .bank-error-box p.img_icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-width: 0;
    padding-left: 34px;
}

.bank-page .bank-error-box p.img_icon > span:first-child {
    flex: 0 0 29px;
    width: 29px;
    height: 29px;
    border: 2px solid var(--red);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--red);
    line-height: 1;
}

.bank-page .bank-error-box p.verify_bank > span:first-child {
    border-color: #00a650;
    color: #00a650;
}
.bank-page .bank-error-box p.img_icon .bankverified{
   text-decoration: none;
}
.bank-page .bank-error-box p.img_icon > span:not(:first-child),
.bank-page .bank-error-box p.img_icon .bankverified,
.bank-page .bank-error-box p.img_icon .bankverified1,
.bank-page .bank-error-box p.img_icon .bank_percent {
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    display: inline;
    place-items: initial;
    color: inherit;
    line-height: 1.25;
}

.bank-page .bank-error-box p.verify_bank,
.bank-page .bank-error-box p.verify_bank .bankverified {
    color: #00a650;
}

.bank-page .bank-error-box p.verify_bank_s,
.bank-page .bank-error-box p.verify_bank_s .bankverified1,
.bank-page .bank-error-box p.verify_bank_s small {
    color: var(--red);
}
.manual-charge {
    width: 560px;
    margin: 9px auto 0;
    min-height: 34px;
    background: transparent;
    color: #586083;
}
.manual-charge span {
    color: #005cff;
    font-size: 22px;
}
.manual-actions {
    grid-template-columns: 180px 260px;
    justify-content: space-between;
    margin-top: 18px;
}
.manual-actions .bank-proceed {
    justify-self: end;
}
.bank-manual-link,
.bank-back-link,
.bank-error-box button {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease, color .22s ease;
}
.bank-manual-link:hover,
.bank-back-link:hover,
.bank-error-box button:hover {
    transform: translateY(-2px);
}

/* Compact form controls shared by dense form pages. */
.form-label-compact {
    display: block;
    margin: 0 0 10px;
    color: var(--navy);
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
}
.form-label-compact em {
    color: var(--red);
    font-style: normal;
}
.form-control-compact,
select.form-control-compact {
    width: 100%;
    height: 58px;
    min-height: 58px;
    margin: 0;
    border: 1px solid #bdcbe6;
    border-radius: 6px;
    background-color: #fff;
    color: var(--navy);
    font-size: 15px;
    line-height: 58px;
    font-weight: 600;
    box-shadow: none;
}
.form-control-compact {
    padding: 0 20px;
}
select.form-control-compact {
    padding: 0 48px 0 20px;
}
.form-control-compact::placeholder {
    color: #8e9abb;
    font-weight: 700;
}
.field-with-count {
    position: relative;
    display: block;
}
.field-with-count .form-control-compact {
    padding-right: 52px;
}
.field-with-count b {
    position: absolute;
    right: 16px;
    top: 50%;
    color: #8d98bd;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    transform: translateY(-50%);
}
.choice-grid {
    display: grid;
    gap: 14px;
}
.choice-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 58px;
    min-height: 58px;
    min-width: 0;
    padding: 0 16px;
    border: 1px solid #bdcbe6;
    border-radius: 6px;
    background: #fff;
    color: var(--navy);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.15;
    font-weight: 600;
    text-align: center;
    white-space: normal;
    cursor: pointer;
    /* transition: border-color .22s ease, color .22s ease, background-color .22s ease, box-shadow .22s ease, transform .22s ease; */
}
.choice-option input[type="radio"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.choice-option span {
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
}
.choice-option:has(input[type="radio"]:checked) {
    border-color: var(--red);
    color: #fff;
    background: var(--red);
}
/* .choice-option:has(input[type="radio"]:checked) {
    border-color: var(--red);
    color: var(--red);
    background: #fff6f7;
} */
.choice-option:hover {
    /* border-color: var(--red);
    color: #fff;
    background: var(--red); */
}
.choice-option:focus-within {
    outline: 0;
}

.personal-page .page-bg { 
    padding-bottom: 33px;
}
.personal-page .main-container {
    display: block;
    padding: 28px 42px 22px;
}
.personal-page .form-control-compact,
.personal-page select.form-control-compact,
.personal-page .choice-option {
    height: 50px;
    min-height: 50px;
}
.personal-page .form-control-compact,
.personal-page select.form-control-compact {
    line-height: 50px;
}
.personal-section {
    width: 100%;
}
.personal-heading {
    margin-bottom: 0;
    text-align: center;
}

.personal-subtitle {
    margin: 6px 0 0;
    color: #405894;
    font-size: 13px;
    line-height: 1;
    font-weight: 600;
}
.personal-form {
    width: 100%;
    margin-top: 18px;
}
.personal-card {
    width: 100%;
    border: 1px solid #cbd8ef;
    border-radius: 8px;
    padding: 20px 20px 10px;
    background: rgba(255, 255, 255, 0.78);
}
.personal-block {
    position: relative;
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid #d5deef;
}
.personal-block + .personal-block,.personal-block.priceplansec {
    padding-top: 24px;
}
.personal-block:last-child{
    padding-top: 24px;
}
.personal-block:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.personal-block-icon {
    width: 20px;
    height: 20px;
    border: 1px solid #93b5ff;
    border-radius: 4px;
    color: #005cff;
    display: grid;
    place-items: center;
    margin-top: 1px;
    font-size: 12px;
}
.personal-block-content h2 {
    margin: 0 0 18px;
    color: var(--navy);
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
}
.personal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 58px;
    margin-bottom: 20px;
}
.personal-block:first-child .personal-grid + .personal-field {
    margin-top: 24px;
}
.personal-field {
    display: block;
    margin: 0;
}
.choice-grid.two-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 420px;
}
.education-options {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: 820px;
}
.occupation-options {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.income-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 24px;
}
.income-options {
    grid-template-columns: repeat(5, minmax(110px, 1fr));
    max-width: 760px;
}
.experience-options {
    grid-template-columns: repeat(6, minmax(124px, 1fr));
}
.income-options .choice-option,
.experience-options .choice-option {
    padding: 0 12px;
    font-size: 14px;
}
.source-field {
    width: 100%;
    margin-top: 24px;
}
.source-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 520px;
}
.fatca-panel {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
    gap: 38px;
    padding: 18px 12px;
    border: 1px solid #cbd8ef;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.66);
}
.switch-field {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    min-height: 50px;
    margin: 0;
    color: var(--navy);
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
}
.switch-field input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.switch-field i {
    position: relative;
    width: 43px;
    height: 22px;
    border: 1px solid #bdcbe6;
    border-radius: 999px;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(13, 31, 91, 0.08);
}
.switch-field i::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 2px;
    top: 1px;
    border-radius: 50%;
    background: #aeb7c7;
    transition: transform .2s ease, background-color .2s ease;
}
.switch-field input:checked + i {
    border-color: var(--red);
    background: var(--red);
    box-shadow: 0 5px 12px rgba(255, 16, 24, 0.16);
}
.switch-field input:checked + i::after {
    background: #fff;
    transform: translateX(20px);
}
.tax-extra-fields {
    grid-column: 1 / -1;
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 38px;
    padding-top: 16px;
    border-top: 1px dashed #d6e1f3;
}
.switch-field:has(input:checked) + .tax-extra-fields {
    display: grid;
}
.declaration-panel {
    padding: 14px 18px 16px;
    border: 1px solid #cbd8ef;
    border-radius: 8px;
    background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.declaration-panel p {
    margin: 12px 0 12px;
    color: var(--navy);
    font-size: 13px;
    line-height: 1.38;
    font-weight: 700;
}
.declaration-grid {
    display: grid;
    /* grid-template-columns: 1fr 1.15fr; */
    gap: 11px 64px;
    align-items: start;
}
span.declaration-check.dark-text1.bold.mt10 {
    margin-top: 20px;
    padding-left: 10px;
}
label[for="ddpi"].declaration-check,label[for="tariff"].declaration-check {
 margin-bottom: 15px;
}

.declaration-check {
    position: relative;
    align-items: center;
    gap: 10px;
    min-height: 22px;
    color: var(--navy);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 600;
}
.declaration-panel > .declaration-check:first-child {
    min-height: 42px;
    padding: 8px 10px 10px 0px;
    border-bottom: 1px dashed #d6e1f3;
    border-radius: 6px 6px 0 0;
    background: rgba(255, 16, 24, 0.025);
}
.declaration-check a {
    color: var(--red);
    font-weight: 900;
}
.declaration-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin: 0;
    border: 1.5px solid #b9c8e6;
    border-radius: 5px;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(13, 31, 91, 0.04);
}
.declaration-check input[type="checkbox"].is-invalid-input{
      border: 1.5px solid var(--red); 
}
.declaration-check input[type="checkbox"].is-invalid-input + span {
    color: var(--red);
}
label.form-check.declaration-check.declaration-error span {
    color: var(--red);
}
.declaration-check input[type="checkbox"]:checked {
    border-color: var(--red);
    background: var(--red);
    box-shadow: 0 4px 10px rgba(255, 16, 24, 0.14);
}
.declaration-check input[type="checkbox"]:checked::after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border-width: 0 2px 2px 0;
}
.personal-actions {
    margin-top: 14px;
    padding-top: 14px;
}

.document-page .page-bg {
    padding-bottom: 36px;
}
.document-page .main-container {
    display: block;
    padding: 28px 42px 22px;
}
.document-section {
    width: 100%;
}
.document-card .upload-row > .upload-action {
    justify-self: end;
}
.upload-row-derivative {
    grid-template-columns: 78px minmax(260px, 1fr) 82px minmax(260px, auto);
}

.upload-row-derivative .doc-switch {
    grid-column: 3;
    justify-self: center;
}
.upload-row-derivative .document-segments {
    grid-column: 4;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    flex-wrap: nowrap;
}
.upload-row-derivative .segment-check {
    min-width: 140px;
    width: auto;  
    white-space: nowrap;
}   
 .form-error:not(.is-visible),
.form-error:not(.is-visible) {
    display: none !important;
}
.form-error.is-visible,.form-error.is-visible {
    display: block;
}
.document-heading {
    margin-bottom: 26px;
}
.document-hero-icon {
    width: 78px;
    height: 78px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #eef5ff, #dce9ff);
    color: #1258ff;
    font-size: 38px;
    box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.48);
}
.document-heading .ui-title {  
    font-size: 28px;
    font-weight: 600; 
}
.document-heading p {
    margin: 13px 0 0;
    color: #405894;
    font-size: 15px;
    line-height: 1;
    font-weight: 600;
}
.document-heading p span::before {
    content: "";
    width: 4px;
    height: 4px;
    margin: 0 12px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    background: #405894;
}
.document-card {
    display: grid;
    gap: 10px;
}
.document-card small{
     gap: 10px;
    display: grid;
}
.doc-file-input {
    display: none;
}
.upload-row {
    min-height: 104px;
    border: 1px solid #cbd8ef;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    display: grid;
    grid-template-columns: 78px minmax(230px, 1fr) 290px 180px;
    align-items: center;
    gap: 22px;
    padding: 18px 26px;
}
.upload-row-financial.upload-row{
    grid-template-columns: 78px minmax(230px, 1fr) 290px 260px;
}
.upload-row-financial.upload-row.financialfetchaggregator {
    grid-template-columns: 78px minmax(320px, 1fr) minmax(360px, 1fr);
}
.upload-row[hidden] {
    display: none !important;
}
.upload-row-bank {
    min-height: 172px;
}

.upload-row.is-uploaded .upload-action {
    display: none;
}
.upload-row.server-uploaded .upload-preview {
    display: none !important;
}
.upload-row.server-uploaded .upload-action {
    display: inline-flex !important;
}
.document-proof-view-modal {
    width: min(760px, calc(100vw - 32px));
    max-width: 760px;
    padding: 24px;
    border: 0;
    border-radius: 8px;
}
.document-proof-view-modal .proof_name {
    padding: 0 44px 14px 0;
    border-bottom: 1px solid #e1e7f5;
    color: #070d47;
    font-size: 20px;
    font-weight: 700;
}
.document-proof-view-modal .close-button {
    top: 12px;
    right: 16px;
}
.document-proof-view-modal .proof-viewer-body {
    padding-top: 18px;
    text-align: center;
}
#proof_popup #imgshow_1 {
    max-width: 100%;
    max-height: 70vh;
    margin: 0 auto;
    object-fit: contain;
}
#proof_popup #pdfshow_1 {
    width: 100%;
    height: 70vh;
    border: 0;
}
#proof_popup .proof-pdf-mobile {
    width: 100%;
    max-height: 70vh;
    overflow: auto;
    box-sizing: border-box;
    padding: 8px;
    background: #202124;
    text-align: center;
    -webkit-overflow-scrolling: touch;
}
#proof_popup .proof-pdf-mobile canvas {
    display: block;
    max-width: 100%;
    margin: 0 auto 8px;
    background: #fff;
}
#proof_popup .proof-pdf-mobile canvas:last-child {
    margin-bottom: 0;
}
#proof_popup .proof-pdf-mobile-loading,
#proof_popup .proof-pdf-mobile-error {
    margin: 32px 8px 18px;
    color: #fff;
}
#proof_popup .proof-viewer-actions {
    margin-top: 14px;
    text-align: center;
}

.v_btn button {
    height: 34px;
    padding: 0 18px;
    border: 1px solid #ff1018;
    border-radius: 6px;
    background: #fff;
    color: #ff1018;
    font-weight: 700;
    cursor: pointer;
    font-size: 14px;
    margin-top:5px;
}
.v_btn button:hover {
    background: rgba(255, 16, 24, 0.08);
}
.upload-copy {
    grid-column: 2 / 4;
}
.upload-row-derivative .upload-copy,.upload-row-financial .upload-copy{
    grid-column: 2 / 2;
}
.yes.mbleyes.document-upload-input {
    display: flex;
    justify-content: end;
}

.upload-row-signature .upload-action,
.upload-row-signature .upload-preview {
    grid-column: 4;
}
.upload-row-signature .upload-preview {
    grid-row: 1;
    width: 300px;
    min-height: 88px;
    box-sizing: border-box;
    grid-template-columns: 62px minmax(0, 1fr) 24px;
    gap: 10px;
    padding: 8px 10px;
}
.upload-row-signature .upload-preview .file-thumb {
    width: 62px;
    height: 62px;
}
.upload-icon {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    justify-self: center;
    background: linear-gradient(180deg, #eef4ff, #eaf1ff);
    color: #005cff;
    font-size: 31px;
}
.upload-copy h2,
.nominee-head h2 {
    margin: 0;
    color: var(--navy);
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
}
.upload-copy h2 em {
    color: var(--red);
    font-style: normal;
}
.upload-title-line {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-bottom: 13px;
}
.upload-copy > h2 {
    margin-bottom: 6px;
}
.upload-copy p {
    margin: 0 0 8px;
    color: #405894;
    font-size: 13px;
    line-height: 1.15;
    font-weight: 600;
}
.upload-copy p:last-child {
    margin-bottom: 0;
}
.upload-copy p i {
    width: 18px;
    color: #6074a5;
}
.upload-copy strong {
    color: var(--navy);
    font-weight: 900;
}
.document-select-field {
    display: block;
    margin: 0;
}
.document-select-field span,
.nominee-field span {
    display: block;
    margin: 0 0 8px;
    color: var(--navy);
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
}
.commodity-category-field .select{
  height: 50px;
    min-height: 50px;
    margin: 8px 0px 0px;
    border: 1px solid #c7d3ea;
    border-radius: 6px;
    color: var(--navy);
    font-size: 13px;
    line-height: 50px;
    font-weight: 700;
}
.document-control,
select.document-control {
    height: 50px;
    min-height: 50px;
    margin: 0;
    border: 1px solid #c7d3ea;
    border-radius: 6px;
    color: var(--navy);
    font-size: 13px;
    line-height: 50px;
    font-weight: 700;
    box-shadow: none;
}
.document-control.is-invalid {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(255, 16, 24, 0.08);
}
.document-control::placeholder {
    color: #9aa5c0;
}
.pdf-password-field {
    position: relative;
}
.pdf-password-field .document-control {
    padding-right: 50px;
}
.pdf-password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    z-index: 1;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--navy);
    display: grid;
    place-items: center;
    font-size: 16px;
    cursor: pointer;
    transform: translateY(-50%);
}
.pdf-password-toggle:hover {
    background: #f0f4fb;
}
.pdf-password-toggle:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 1px;
}
.pdf-password-toggle i {
    color: inherit;
    pointer-events: none;
}
.document-error {
    margin-top: 7px;
    color: var(--red);
    font-size: 11px;
    line-height: 1.25;
    font-weight: 700;
}
.document-select-field .document-error {
    display: block;
}   
#proof_popup.reveal{
     width: min(92vw, 630px);
    max-width: 630px;   
}
#replace-proof-document{
       padding: 0px 20px;
}
.reveal{
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    min-height: 0;
    margin: 0 !important;
    padding: 30px 30px 26px;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(9, 23, 63, 0.22);
    overflow: visible;
}

.close-button {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    border: 1px solid #d8e0f1;
    border-radius: 50%;
    background: #fff;
    color: #0b1551;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(9, 23, 63, 0.08);
    transition: color .2s ease, border-color .2s ease, transform .2s ease;
    font-size: 20px;
}
.close-button:hover {
    color: var(--red);
    border-color: rgba(255, 16, 24, 0.28);
    transform: rotate(90deg);
}
.proof_name {
    margin-bottom: 10px;
    border-bottom: 1px solid rgb(0, 0, 0, 0.08);
    padding-bottom: 30px;
} 
/* .upload-row.is-invalid {
    border-color: rgba(255, 16, 24, 0.58);
    box-shadow: inset 0 0 0 1px rgba(255, 16, 24, 0.12);
} */
.upload-row > .document-error {
    grid-column: 2 / -1;
    margin-top: -8px;
}
.upload-action {
    width: 180px;
    height: 50px;
    min-height: 50px;
    justify-self: end;
    font-size: 13px;
    font-weight: 900;
}
.upload-preview {
    grid-column: 4;
    grid-row: 1 / span 2;
    width: 250px;
    /* min-height: 112px; */
    justify-self: end;
    border: 1px solid #dce4f2;
    border-radius: 8px;
    background: #fff;
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 12px;
    padding: 10px;
}
.upload-preview[hidden] {
    display: none !important;
}
.upload-preview strong {
    color: var(--navy);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 900;
    overflow-wrap: anywhere;
    display: block; 
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 4.5em;
  line-height: 1.5em;
}
.upload-preview > div {
    min-width: 0;
}
.upload-preview p {
    margin: 2px 0 3px;
    color: #536894;
    font-size: 10px;
    line-height: 1;
    font-weight: 600;
}
.upload-preview p span::before {
    content: "";
    width: 3px;
    height: 3px;
    margin: 0 8px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    background: #536894;
}
.upload-preview small {
    color: #13a538;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    display: flex;
}
.upload-preview small i {
    margin-right: 4px;
}
.upload-preview button {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--red);
    display: grid;
    place-items: center;
    justify-self: end;
    cursor: pointer;
    font-size: 17px;
}
.file-thumb {
    width: 70px;
    height: 70px;
    border: 1px solid #dfe6f4;
    border-radius: 4px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #f9fbff;
}
.file-thumb.has-image-thumb {
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;  
}
.file-thumb.has-image-thumb::before {
    display: none;
}
.file-thumb::before {
    content: "";
    width: 48px;
    height: 56px;
    border: 1px solid #d8dfeb;
    border-top: 8px solid #1f5cbf;
    background:
        linear-gradient(#eef2f8 0 0) 7px 13px / 34px 4px no-repeat,
        linear-gradient(#eef2f8 0 0) 7px 23px / 34px 4px no-repeat,
        linear-gradient(#eef2f8 0 0) 7px 33px / 34px 4px no-repeat,
        #fff;
}
.file-signature::before {
    width: 58px;
    height: 42px;
    border-top: 0;
    background:
        radial-gradient(ellipse at center, transparent 58%, #111 59%, transparent 62%) 14px 9px / 36px 21px no-repeat,
        linear-gradient(158deg, transparent 44%, #111 45% 47%, transparent 48%) 7px 7px / 48px 30px no-repeat,
        #fff;
}
.upload-row-derivative { 
    grid-template-columns: 78px minmax(260px, 1fr) 82px 120px 160px;
    min-height: 78px; 
}
.upload-row-derivative.site-psb { 
       grid-template-columns: 78px minmax(217px, 1fr) 82px 156px 272px;
        min-height: 78px;
}
.upload-row-derivative.is-collapsed {
    grid-template-columns: 78px minmax(260px, 1fr) 82px;
}
.upload-row-derivative.ri-rekyc-segments-readonly {
    grid-template-columns: 78px minmax(0, 1fr) 82px;
}
.upload-row-derivative.ri-rekyc-segments-readonly .document-segments {
    display: none !important;
}
.upload-row-derivative .upload-copy h2 {
    margin-bottom: 5px;
}
.doc-switch {
    position: relative;
    width: 54px;
    height: 28px;
    margin: 0;
    display: inline-block;
}
.doc-switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.doc-switch i {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #c6c9d0;
    box-shadow: inset 0 1px 3px rgba(13, 31, 91, 0.12);
    transition: background .2s ease, box-shadow .2s ease;
}
.doc-switch i::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(13, 31, 91, 0.18);
    transition: transform .2s ease;
}
.doc-switch input:checked + i {
    background: var(--red);
    box-shadow: 0 8px 18px rgba(255, 16, 24, 0.18);
}
.doc-switch input:checked + i::after {
    transform: translateX(26px);
}
.segment-check {
    min-height: 44px;
    border: 1px solid #d7e0f0;
    border-radius: 7px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 0 18px;
    color: var(--navy);
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
}
.segment-check[hidden] {
    display: none !important;
}
.segment-check input {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #282c34;
    border-radius: 3px;
    margin: 0;
    position: relative;
    flex-shrink: 0;
}
.segment-check input:checked {
    border-color: var(--red);
    background: var(--red);
}
.segment-check input:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.document-actions {
    margin-top: 20px;
    padding-top: 16px;
}
.document-action-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}
/* Direct re-KYC address-change flow has no stepper or Previous action. */
.top-header.rekyc-address-header .help-area {
    grid-column: 3;
}

.upload-row-address .upload-copy {
    grid-column: 2;
}

.document-page:not(.rekyc-address-change) .upload-row-address {
    min-height: 132px;
}

.document-page:not(.rekyc-address-change) .upload-row-address .document-select-field {
    grid-column: 3;
    width: 100%;
}

.document-page:not(.rekyc-address-change) .upload-row-address .document-upload-input {
    grid-column: 4;
    justify-self: end;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.document-page:not(.rekyc-address-change) .upload-row-address .upload-action {
    width: 180px;
    justify-content: center;
}

.document-page:not(.rekyc-address-change) .upload-row-address .upload-preview {
    width: min(100%, 250px);
}

.document-page.rekyc-address-change .upload-row-address {
    grid-template-columns: 78px minmax(230px, 1fr) 180px;
}

.document-page.rekyc-address-change .upload-row-address .document-upload-input {
    grid-column: 3;
    justify-self: end;
}

@media (min-width: 1400px) {
    .document-page.rekyc-address-change .upload-row-address:has(.document-select-field) {
        grid-template-columns: 78px minmax(230px, 1fr) 290px 180px;
    }

    .document-page.rekyc-address-change .upload-row-address:has(.document-select-field):has(.upload-preview:not([hidden])) {
        grid-template-columns: 78px minmax(230px, 1fr) 290px 250px;
    }

    .document-page.rekyc-address-change .upload-row-address:has(.document-select-field) .document-select-field {
        grid-column: 3;
        width: 100%;
    }

    .document-page.rekyc-address-change .upload-row-address:has(.document-select-field) .document-upload-input {
        grid-column: 4;
        width: 100%;
        justify-self: end;
    }
}

.document-page.rekyc-address-change .document-actions {
    justify-content: flex-end;
}

.document-page.rekyc-address-change .document-actions:has(.pan-prev) {
    justify-content: space-between;
}
.document-add-nominee {
    width: 165px;
    height: 50px;
    min-height: 50px;
    color: #005cff;
    border-color: #b7ccff;
    font-size: 14px;
    font-weight: 700;
}
.document-add-nominee:disabled,
.document-add-nominee.is-disabled,
[data-add-nominee]:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
.document-page .pan-prev,
.document-page .pan-next {
    height: 58px;
}
.document-page .pan-next {
    width: 178px;
}

.nominee-panel {
    border: 1px solid #cbd8ef;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    padding: 18px 20px;
}
.nominee-panel[hidden] {
    display: none !important;
}
.nominee-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.nominee-head > div {
    display: flex;
    align-items: center;
    gap: 16px;
}
.nominee-remove {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--red);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}
.nominee-collapse {
    border: 0;
    background: transparent;
    color: var(--navy);
    font-size: 16px;
    cursor: pointer;
}
.nominee-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 38px;
}
.nominee-field {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: center;
    gap: 14px;
    margin: 0;
}
.nominee-field span {
    margin: 0;
}
.nominee-field .document-error {
    grid-column: 2;
    display: block;
    margin-top: -4px;
    color: var(--red);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
}
.nominee-address {
    width: max-content;
    min-height: 36px;
    border: 0;
    padding: 0;
}
.guardian-box {
    margin-top: 18px;
    border: 1px solid #d5dff0;
    border-radius: 8px;
    padding: 14px 16px 16px;
}
.guardian-box.is-disabled {
    opacity: 0.58;
    display:none;
}
.guardian-box.is-disabled .segment-check {
    pointer-events: none;
}
.guardian-box h3 {
    margin: 0 0 14px;
    color: var(--navy);
    font-size: 18px;
    line-height: 1;
    font-weight: 900;
}
.nominee-wide {
    grid-column: 1;
}

.doc-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 30px;
}
.doc-modal[hidden] {
    display: none !important;
}
.doc-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 28, 64, 0.56);
    backdrop-filter: blur(2px);
}
.doc-modal-card {
    position: relative;
    width: 560px;
    max-width: calc(100vw - 48px);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 30px 70px rgba(20, 35, 83, 0.25);
    padding: 34px;
}
.doc-modal-close {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 14px;
}
.doc-modal-close.dark {
    color: #0b143c;
    background: transparent;
    font-size: 24px;
}
.crop-modal {
    width: 520px;
    padding: 54px 28px 24px;
}
.crop-stage {
    position: relative;
    height: 340px;
    border: 3px solid #2d72ff;
    display: grid;
    place-items: stretch;
    overflow: hidden;
}
.crop-stage.has-image {
    place-items: center;
    background: #fff;
}
.crop-preview-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.crop-preview-image[hidden] {
    display: none !important;
}
.crop-box {
    position: absolute;
    z-index: 2;
    border: 2px solid var(--red);
    background:
        linear-gradient(to right, transparent 32%, rgba(255, 255, 255, 0.78) 33%, rgba(255, 255, 255, 0.78) 34%, transparent 35%, transparent 65%, rgba(255, 255, 255, 0.78) 66%, rgba(255, 255, 255, 0.78) 67%, transparent 68%),
        linear-gradient(to bottom, transparent 32%, rgba(255, 255, 255, 0.78) 33%, rgba(255, 255, 255, 0.78) 34%, transparent 35%, transparent 65%, rgba(255, 255, 255, 0.78) 66%, rgba(255, 255, 255, 0.78) 67%, transparent 68%);
    box-shadow: 0 0 0 999px rgba(10, 22, 55, 0.28);
    cursor: move;
}
.crop-box[hidden] {
    display: none !important;
}
.crop-box span {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 2px 8px rgba(13, 31, 91, 0.18);
}
.crop-box [data-crop-handle="nw"] {
    left: -8px;
    top: -8px;
    cursor: nwse-resize;
}
.crop-box [data-crop-handle="ne"] {
    right: -8px;
    top: -8px;
    cursor: nesw-resize;
}
.crop-box [data-crop-handle="sw"] {
    left: -8px;
    bottom: -8px;
    cursor: nesw-resize;
}
.crop-box [data-crop-handle="se"] {
    right: -8px;
    bottom: -8px;
    cursor: nwse-resize;
}
.statement-paper {
    padding: 18px 22px;
    background: #fff;
    color: #111;
    font-size: 11px;
}
.paper-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 12px;
}
.paper-head strong {
    color: #15458f;
    font-size: 20px;
}
.paper-head span {
    font-weight: 900;
}
.paper-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 18px;
    margin-bottom: 20px;
}
.paper-grid span {
    height: 8px;
    background: #edf0f4;
}
.statement-paper table {
    width: 100%;
    border-collapse: collapse;
}
.statement-paper td {
    border: 1px solid #d9dde6;
    padding: 7px;
}
.crop-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 24px;
}
.crop-actions .btn {
    height: 50px;
    min-height: 50px;
}
.risk-modal,
.live-modal {
    width: 720px;
    padding: 36px 40px 32px;
}
.risk-modal h2,
.live-modal h2 {
    margin: 0 0 18px;
    color: #141520;
    font-size: 20px;
    font-weight: 700;
}
.risk-modal ul,
.live-modal ul {
    margin: 0 0 0px 0px;
    color: #1f2b4d;
    font-size: 14px;
    line-height: 1.75;
    font-weight: 600;
    padding-left: 17px;
}

.risk-modal h3 {
    margin: 0 0 10px;
    color: #141520;
    font-size: 16px;
    font-weight: 900;
}
.risk-modal p,
.live-modal p {
    color: #1f2b4d;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 600;
}
.risk-agree {
    width: 96px;
    height: 44px;
    min-height: 44px;
    margin: 22px auto 0;
    display: flex;
}
.nominee-modal {
    width: 430px;
    padding: 42px 60px 34px;
    text-align: center;
}
.nominee-alert {
    width: 68px;
    height: 68px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #ffe7ec;
    color: var(--red);
    display: grid;
    place-items: center;
    font-size: 30px;
}
.nominee-modal h2 {
    margin: 0 0 24px;
    color: var(--navy);
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
}
.nominee-modal .btn {
    width: 100%;
    height: 52px;
    min-height: 52px;
    margin-top: 14px;
}
.nominee-soft {
    border: 0;
    background: #ffe6ea;
    color: var(--navy);
}
.signature-modal {
    width: 650px;
    padding: 32px 32px 34px;
}
.signature-tabs {
    display: flex;
    gap: 14px;
    margin-bottom: 28px;
}
.signature-tabs .btn {
    height: 48px;
    min-height: 48px;
    padding: 0 28px;
    font-size: 15px;
}
.signature-pad {
    height: 315px;
    border: 1.5px dashed #c8d4e9;
    border-radius: 10px;
    display: grid;
    place-items: center;
}
.signature-pad svg,
.signature-canvas {
    width: 100%;
    max-width: 95%;
}
.signature-canvas {
    height: 240px;
    cursor: crosshair;
    touch-action: none;
}
.signature-actions,
.live-actions {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin-top: 28px;
}
.signature-actions .btn,
.live-actions .btn {
    width: 210px;
    height: 56px;
    min-height: 56px;
}
.view_pdf_btn{
  color: var(--red);
  font-size: 16px;
  font-weight: 700;
  text-decoration: underline;  
  margin-top: 20px;   
}
.live-consent {
    border: 0;
    justify-content: flex-start;
    padding: 0;
    margin-top: 18px;
    font-weight: 700;
    display: flex;
    font-size: 16px;
    cursor: pointer;
}

.photo-page .page-bg {
    padding-bottom: 30px;
}
.photo-page .main-container {
    display: block;
   padding: 28px 42px 22px;
}
.photo-section {
    width: 100%;
}
.photo-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 44px;
}
.photo-status-card {
    min-height: 80px;
    padding: 0 17px;
    border-color: #d2def2;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 8px 20px rgba(47, 77, 132, 0.04);
}
.photo-status-card .status-card-content {
    gap: 14px;
    min-width: 0;
}
.photo-status-card .status-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    font-size: 20px;
}
.photo-status-card strong {
    color: var(--navy);
    font-size: 12px;
    line-height: 1.1;
    font-weight: 700;
}
.photo-status-card .status-action {
    width: 94px;
    height: 32px;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 5px;
    background: #ecfff3;
    border-color: #22c55e;
    color: #14a545;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.photo-heading {
    margin-bottom: 28px;
}
.photo-verification-grid {
    display: grid;
    grid-template-columns: 302px minmax(0, 496px) 286px;
    gap: 26px;
    align-items: start;
}
.photo-panel {
    min-height: 470px;
    border: 1px solid #d4def1;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 24px rgba(47, 77, 132, 0.04);
}
.photo-guidelines {
    padding: 30px 26px 24px 32px;
}
.photo-guidelines h2 {
    max-width: 210px;
    margin: 0 0 20px;
    color: var(--navy);
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
}
.photo-guideline-list,
.photo-benefit-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.photo-guideline-list li {
    min-height: 77px;
    border-bottom: 1px solid #dfe6f4;
    display: grid;
    grid-template-columns: 50px 1fr;
    align-items: center;
    gap: 12px;
}
.photo-guideline-list li:last-child {
    border-bottom: 0;
}
.photo-guideline-list span,
.photo-benefit-list span {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #edf4ff;
    color: #1258ff;
    font-size: 22px; 
}
.photo-guideline-list p,
.photo-benefit-list p {
    margin: 0;
    color: #304a83;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
}
.photo-camera-column {
    display: grid;
    justify-items: center;
}
.photo-camera-preview {
    position: relative;
    width: 100%;
    height: 470px;
    overflow: hidden;
    border-radius: 16px;
    background-color: #c4b7aa;
    background-image:
        url("../images/181.png"),
        linear-gradient(135deg, #83786e 0%, #d7cabd 100%);
    background-repeat: no-repeat;
    background-size: 105% auto, cover;
    background-position: 79.8% 59.3%;
    box-shadow: inset 0 0 0 1px rgba(7, 20, 95, 0.06);
}
.photo-camera-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
}
.photo-camera-video[hidden] {
    display: none !important;
}
.photo-live-badge,
.photo-face-ring {
    display: none;
}
.photo-camera-preview.is-live .photo-live-badge {
    position: absolute;
    left: 20px;
    top: 18px;
    z-index: 2;
    min-width: 72px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(18, 18, 18, 0.68);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
}
.photo-camera-preview.is-live .photo-live-badge i {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 5px rgba(255, 16, 24, 0.12);
} 
.photo-camera-preview.is-live .photo-face-ring {
    position: absolute;
    left: 50%;
    top: 54px;
    z-index: 2;
    width: 250px;
    height: 330px;
    border: 4px solid rgba(255, 255, 255, 0.95);
    border-radius: 32px;
    display: block;
    transform: translateX(-50%);
    box-shadow: 0 0 0 1px rgba(7, 20, 95, 0.08);
    pointer-events: none;
}
.photo-start-btn {
    width: 320px;
    height: 54px;
    min-height: 54px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
}
.photo-start-btn[hidden],
.photo-retake-btn[hidden],
.photo-continue-btn[hidden] {
    display: none !important;
}
.photo-status-box {
    width: min(420px, 100%);
    min-height: 48px;
    margin: 18px auto 0;
    border: 1px solid #d4def1;
    border-radius: 8px;
    background: #f8fbff;
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 18px;
    text-align: center;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(47, 77, 132, 0.04);
}
.photo-status-box i {
    color: #1258ff;
    font-size: 18px;
}
.photo-status-box.is-error {
    border-color: rgba(255, 16, 24, 0.35);
    background: #fff5f6;
    color: var(--red);
}
.photo-status-box.is-error i {
    color: var(--red);
}
.photo-status-box.is-success {
    border-color: rgba(40, 192, 77, 0.3);
    background: #f3fff5;
    color: #12963a;
}
.photo-status-box.is-success i {
    color: #22b34e;
}
#capturedImage {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#capturedImage[hidden] {
    display: none !important;
}
.photo-camera-actions {
       margin: 18px auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.photo-camera-actions .btn {
    height: 54px;
    min-height: 54px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
}
.photo-retake-btn,
.photo-continue-btn {
    width: 180px;
}
.photo-secure-note {
    margin: 20px 0 0; 
    color: #405894;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-secure-note i {
    margin-right: 12px;
    color: #1258ff;
    font-size: 20px;
    vertical-align: middle;
}
.photo-trust {
    padding: 30px 26px 24px;
}
.photo-liveness-art {
    position: relative; 
    width: 187px;
    height: 190px;
    margin: 0 auto 28px;
    border-radius: 0;
    background: url("../images/19.png") no-repeat;
    background-size: 100% auto, cover;
}
.photo-liveness-art .scan-corner,
.photo-liveness-art .photo-avatar,
.photo-liveness-art .photo-check-badge {
    display: none;
}
.photo-avatar {
    position: absolute;
    left: 50%;
    bottom: 14px;
    width: 138px;
    height: 160px;
    transform: translateX(-50%);
}
.avatar-head {
    position: absolute;
    left: 34px;
    top: 36px;
    width: 70px;
    height: 82px;
    border-radius: 34px 34px 30px 30px;
    background: #ffc18d;
    box-shadow: inset 0 -10px 0 rgba(232, 132, 80, 0.18);
}
.avatar-head::before,
.avatar-head::after {
    content: "";
    position: absolute;
    top: 39px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--navy);
}
.avatar-head::before {
    left: 21px;
}
.avatar-head::after {
    right: 21px;
}
.avatar-head i {
    position: absolute;
    left: 24px;
    bottom: 19px;
    width: 22px;
    height: 8px;
    border-radius: 0 0 12px 12px;
    border-bottom: 3px solid #1d2b62;
}
.avatar-hair {
    position: absolute;
    left: 23px;
    top: 18px;
    width: 92px;
    height: 54px;
    border-radius: 45px 45px 22px 22px;
    background: #11285f;
    z-index: 2;
}
.avatar-hair::after {
    content: "";
    position: absolute;
    right: 5px;
    top: 26px;
    width: 20px;
    height: 44px;
    border-radius: 20px;
    background: #11285f;
}
.avatar-body {
    position: absolute;
    left: 12px;
    bottom: 0;
    width: 114px;
    height: 62px;
    border-radius: 56px 56px 18px 18px;
    background: linear-gradient(180deg, #2689ff, #1360df);
}
.scan-corner {
    position: absolute;
    width: 27px;
    height: 27px;
    border-color: #1258ff;
}
.scan-corner-tl {
    left: 35px;
    top: 26px;
    border-top: 3px solid;
    border-left: 3px solid;
}
.scan-corner-tr {
    right: 35px;
    top: 26px;
    border-top: 3px solid;
    border-right: 3px solid;
}
.scan-corner-bl {
    left: 35px;
    bottom: 44px;
    border-bottom: 3px solid;
    border-left: 3px solid;
}
.scan-corner-br {
    right: 35px;
    bottom: 44px;
    border-bottom: 3px solid;
    border-right: 3px solid;
}
.photo-check-badge {
    position: absolute;
    right: 22px;
    bottom: 36px;
    width: 58px;
    height: 58px;
    border: 4px solid #c6f5d1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #28c04d;
    color: #fff;
    font-size: 32px;
    box-shadow: 0 10px 22px rgba(40, 192, 77, 0.22);
}
.photo-benefit-list {
    display: grid;
    gap: 24px;
}
.photo-benefit-list li {
    display: grid;
    grid-template-columns: 50px 1fr;
    align-items: center;
    gap: 18px;
}
.photo-benefit-list p {
    color: #304a83;
}

.esign-page .page-bg {
    padding-bottom: 30px;
}

.esign-page .page-bg {

    overflow-x: hidden;
}
.esign-page .main-container {
    display: block;
   padding: 28px 42px 22px;
}
.esign-section {
    width: 100%;
    min-width: 0;
}
.esign-status-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}
.esign-status-card {
    min-height: 72px;
    padding: 0 18px;
    border-color: #d2def2;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 8px 20px rgba(47, 77, 132, 0.04);
}
.esign-status-card .status-card-content {
    gap: 16px;
    min-width: 0;
}
.esign-status-card .status-icon {
       width: 30px;
    height: 30px;
    min-width: 30px;
    font-size: 20px;
}
.esign-status-card strong {
color: var(--navy);
    font-size: 12px;
    line-height: 1.1;
    font-weight: 700
}
.esign-heading {
    margin-bottom: 26px;
}
.esign-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 24px;
    min-width: 0;
}
.esign-summary-card,
.esign-visual-card {
    min-height: 380px;
    border: 1px solid #d4def1;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 24px rgba(47, 77, 132, 0.04);
}
.esign-summary-card {
    padding: 18px 22px 14px;
}
.esign-summary-card h2 {
    margin: 0 0 16px;
    border-bottom: 1px solid #dfe6f4;
    padding: 0 0 14px;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
}
.esign-summary-card h2 i {
    color: #1258ff;
    font-size: 25px;
}
.esign-summary-list {
    margin: 0;
}
.esign-summary-list div {
    min-height: 40px;
    border-bottom: 1px solid #dfe6f4;
    display: grid;
    grid-template-columns: 1fr 1.06fr;
    align-items: center;
}
.esign-summary-list div:last-child {
    border-bottom: 0;
}
.esign-summary-list dt,
.esign-summary-list dd {
    margin: 0;
    color: var(--navy);
    font-size: 14px;
    line-height: 1.25;
    font-weight: 700;
    min-width: 0;
}
.esign-summary-list dt {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
}
.esign-summary-list dt i {
    width: 22px;
    color: #1258ff;
    font-size: 18px;
    text-align: center;
}
.esign-summary-list dd {
    height: 100%;
    border-left: 1px solid #edf2fb;
    display: flex;
    align-items: center;
    padding-left: 20px;
    color: #405894;
    overflow-wrap: anywhere;
}
.esign-visual-card {
    display: grid;
    justify-items: center;
    align-content: center;
    padding: 30px 38px 30px;
    background: #f4f7fe;
    text-align: center;
}
.esign-illustration {
    position: relative;
    max-width: 100%;
    height: auto;
    margin: 0 0 10px;
}
.esign-illustration::before {
    content: none;
}
.esign-illustration img {
    width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.esign-spark {
    position: absolute;
    z-index: 2;
    color: #76a2f3;
    font-size: 17px;
}
.esign-spark.spark-one {
    left: 40px;
    top: 44px;
}
.esign-spark.spark-two {
    left: 18px;
    top: 105px;
}
.esign-spark.spark-three {
    right: 42px;
    top: 64px;
}
.esign-spark.spark-four {
    right: 62px;
    bottom: 40px;
}
.esign-document-art {
    position: absolute;
    left: 97px;
    top: 28px;
    z-index: 3;
    width: 142px;
    height: 158px;
    border: 4px solid #1258ff;
    border-radius: 15px 15px 22px 15px;
    background: #fff;
    box-shadow: 0 13px 22px rgba(18, 88, 255, 0.13);
}
.esign-document-art::before {
    content: "";
    position: absolute;
    right: -4px;
    top: -4px;
    width: 40px;
    height: 40px;
    border-left: 4px solid #1258ff;
    border-bottom: 4px solid #1258ff;
    border-radius: 0 11px 0 14px;
    background: #eef5ff;
}
.esign-document-art i,
.esign-document-art span {
    position: absolute;
    left: 24px;
    height: 5px;
    border-radius: 999px;
}
.esign-document-art i {
    top: 32px;
    width: 58px;
    background: #1258ff;
}
.esign-document-art span {
    width: 92px;
    background: #d5e0f5;
}
.esign-document-art span:nth-of-type(1) {
    top: 57px;
}
.esign-document-art span:nth-of-type(2) {
    top: 75px;
}
.esign-document-art span:nth-of-type(3) {
    top: 93px;
}
.esign-document-art span:nth-of-type(4) {
    top: 111px;
    width: 70px;
}
.esign-document-art b {
    position: absolute;
    left: 73px;
    bottom: 25px;
    width: 46px;
    height: 26px;
    border-bottom: 4px solid #ff1018;
    border-radius: 50%;
    transform: rotate(-12deg);
}
.esign-shield-art {
    position: absolute;
    left: 42px;
    bottom: 20px;
    z-index: 5;
    width: 86px;
    height: 96px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 29px;
    filter: drop-shadow(0 11px 12px rgba(18, 88, 255, 0.2));
}
.esign-shield-art::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 4px solid #1258ff;
    border-radius: 22px 22px 42px 42px;
    background: linear-gradient(180deg, #2689ff, #1258ff);
    clip-path: polygon(50% 0, 100% 16%, 100% 62%, 50% 100%, 0 62%, 0 16%);
}
.esign-shield-art i {
    position: relative;
    z-index: 2;
}
.esign-pen-art {
    position: absolute;
    right: 64px;
    bottom: 29px;
    z-index: 6;
    width: 23px;
    height: 121px;
    border: 3px solid #1258ff;
    border-radius: 13px;
    background: linear-gradient(90deg, #1258ff 0 34%, #4da0ff 34% 58%, #0d49d8 58% 100%);
    transform: rotate(18deg);
    box-shadow: 0 10px 14px rgba(18, 88, 255, 0.18);
}
.esign-pen-art::before,
.esign-pen-art::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.esign-pen-art::before {
    top: -11px;
    width: 18px;
    height: 16px;
    border-radius: 8px 8px 3px 3px;
    background: #1258ff;
}
.esign-pen-art::after {
    bottom: -23px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 25px solid #081a68;
}
.esign-generating{ 
    padding: 10px 0px;
}
.esign-generating i{
    color: var(--red);
    font-size: 18px;
    margin-right: 10px;
}
.esign-visual-card h2 {
    margin: 0 0 10px;
    color: var(--navy);
    font-size: 22px;
    line-height: 1.15;
    font-weight: 700;
}
.esign-visual-card p {
    width: 100%;
    max-width: 430px;
    margin: 0;
    color: #405894;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
    overflow-wrap: anywhere;
    margin-top: 10px;
}
.esign-consent-form {
    width: 100%;
    min-width: 0;
    margin-top: 18px;
}
.esign-consent {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 14px;
    align-items: start;
    margin: 0;
    cursor: pointer;
}
.esign-consent input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.esign-consent > span {
    width: 20px;
    height: 20px;
    margin-top: 3px;
    border: 1px solid #ff1018;
    border-radius: 3px;
    display: grid;
    place-items: center;
    background: #ff1018;
    color: #fff;
    font-size: 13px;
    box-shadow: 0 5px 10px rgba(255, 16, 24, 0.16);
}
.esign-consent input:not(:checked) + span {
    background: #fff;
    color: transparent;
}
.esign-consent em {
    color: var(--navy);
    font-size: 14px;
    line-height: 1.45;
    font-style: normal;
    font-weight: 700;
    min-width: 0;
    overflow-wrap: anywhere;
}
.esign-consent a {
    color: #1258ff;
    text-decoration: none;
}
.esign-secure-note {
    margin: 18px 0 0;
    color: #405894;
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
}
.esign-secure-note i {
    color: #405894;
    font-size: 19px;
}
.esign-actions {
    margin-top: 12px;
}
.esign-page .esign-next {
    width: 282px;
}

.landing-page {
    background: linear-gradient(120deg, #fbfdff 0%, #f4f8ff 45%, #eef4ff 100%);
}
.landing-page .page-bg {
    min-height: 100vh;
    padding: 10px 32px 34px;
    overflow: hidden;
}
.landing-dot-grid {
    position: absolute;
    left: 20px;
    top: 176px;
    width: 96px;
    height: 126px;
    background-image: radial-gradient(#bac7ff 2px, transparent 2px);
    background-size: 14px 14px;
    opacity: .55;
}
.landing-bg-circle {
    position: absolute;
    right: -98px;
    top: -38px;
    width: 420px;
    height: 300px;
    border-radius: 0 0 0 240px;
    background: linear-gradient(135deg, rgba(218, 227, 255, .92), rgba(246, 249, 255, .12));
}
.landing-wave-lines {
    position: absolute;
    left: -20px;
    bottom: 102px;
    width: 210px;
    height: 230px;
    opacity: .24;
    background:
        radial-gradient(120% 38% at 25% 0%, transparent 62%, #aab9ec 63%, transparent 64%) 0 0 / 100% 46px repeat-y;
}
.landing-header {
    width: min(1280px, calc(100% - 180px));
    height: 90px;
    margin: 0 auto;
    border-radius: 16px;
    background: rgba(255, 255, 255, .98);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 0 50px 0 34px;
}
.landing-brand {
    display: inline-flex;
    align-items: center;
    color: var(--navy);
    text-decoration: none;
}
.landing-brand img {
    max-width: 135px;
    height: auto;
    object-fit: contain;
}
.landing-header-actions {
    display: flex;
    align-items: center;
    gap: 30px;
}
.landing-lang .chosen-container {
    height: 56px;
    border: 0;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(30, 68, 143, .12);
    color: #15151b;
    gap: 16px;
    padding: 0px; 
    font-size: 19px;
    line-height: 1;
    font-weight: 700;
}
.landing-lang i:first-child,
.landing-help i {
    color: var(--red);
    font-size: 22px;
}
.landing-lang::after {
    right: 20px;
    color: #111;
    font-size: 15px;
}
.landing-lang .lang-select {
  width: auto !important;
  min-width: 175px;
  max-width: 185px;
  color: #fff;
  font: inherit;
}
.landing-header-divider {
    width: 1px;
    height: 30px;
    background: #dfe6f4;
}
.landing-help {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: #15151b;
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
}
.landing-help a {
    color: var(--red);
}
.landing-wrap { 
    width: min(1180px, calc(100% - 180px));
    margin: 20px auto 0;
}
.landing-card {
    min-height: 660px;
    border-radius: 22px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.38fr .96fr;
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--shadow);
}
.landing-info {
    position: relative;
    min-height: 660px;
    padding: 64px 44px 34px 66px;
    overflow: hidden;
    background:
        linear-gradient(90deg, #f7fbff 0%, #fbfdff 72%, #ffffff 100%);
}
.landing-info-copy {
    position: relative;
    z-index: 3;
    max-width: 430px;
}
.landing-info h1 {
    margin: 0;
    color: var(--navy);
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0;
}
.landing-info h1 span {
    color: var(--red);
}
.landing-title-rule {
    width: 65px;
    height: 6px; 
    display: block;
    margin: 22px 0 24px;
    border-radius: 99px;
    background: linear-gradient(90deg, #1264ff, #8db5ff);
}
.landing-info-copy > p {
    max-width: 292px; 
    margin: 0;
    color: #40507c;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 600;
}
.landing-benefits {
    position: relative;
    z-index: 4;
    width: 320px;
    margin: 48px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 30px;
}
.landing-benefits li {
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: center;
    gap: 20px;
}
.landing-benefits li > div,
.landing-privacy div,
.landing-trust-row div {
    min-width: 0;
}
.landing-benefits li > span {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    padding: 12px;
    display: grid;
    place-items: center;
    background: #fff;
    box-shadow: 0 14px 28px rgba(30, 68, 143, .08);
    color: #1264ff;
    font-size: 28px;
}
.landing-benefits li:nth-child(2) > span {
    color: var(--red);
}
.landing-benefits strong,
.landing-privacy strong,
.landing-trust-row strong {
    display: block;
    color: var(--navy);
    font-size: 14px;
    line-height: 1.25;
    font-weight: 700;
}
.landing-benefits p,
.landing-privacy p,
.landing-trust-row p {
    margin: 7px 0 0;
    color: #31436f;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 600;
    overflow-wrap: anywhere;
} 
/* .landing-benefits strong,
.landing-benefits p {
    max-width: 230px;
} */
.landing-hero-device {
    position: absolute;
    z-index: 2;
    right: -31px;
    bottom: 75px;
    width: 320px;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    mix-blend-mode: multiply;
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 13%, #000 95%, transparent 100%);
    mask-image:
        linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 13%, #000 95%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}
.landing-privacy {
    position: absolute;
    z-index: 5;
    left: 44px;
    right: 52px;
    bottom: 34px;
    min-height: 86px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .76);
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 20px;
    padding: 18px 28px;
    box-shadow: 0 12px 30px rgba(30, 68, 143, .05);
}
.landing-privacy > span {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #eff6ff;
    color: #1264ff;
    font-size: 21px;
}
.landing-login {
    min-height: 660px;
    padding: 43px 64px 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(255, 255, 255, .98);
}
.landing-login-icon {
    width: 86px;
    height: 86px;
    border-radius: 24px;
    padding: 8px;
    display: grid;
    place-items: center;
    margin-bottom: 28px;
    background: linear-gradient(180deg, #f7fbff, #eef5ff);
    color: var(--navy);
    font-size: 42px;
    box-shadow: 0 12px 28px rgba(30, 68, 143, .12);
}
.landing-login-icon i {
    filter: drop-shadow(0 4px 8px rgba(30, 68, 143, .12));
}
.landing-login-mark {
    margin-bottom: 28px;
}
.landing-login h2 {
    margin: 0 0 14px;
    color: var(--navy);
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
}
.landing-login > p {
    margin: 0 0 34px;
    color: #40507c;
    font-size: 14px;
    font-weight: 600;
}
.landing-form {
    width: 100%;
}
.landing-mobile-field {
    width: 100%;
    height: 60px;
    margin: 0;
    border: 1px solid #d3dce9;
    border-radius: 7px;
    display: grid;
    grid-template-columns: 58px 1fr;
    background: #fff;
    position: relative;
}
.landing-mobile-field .form-error.is-visible{
    position: absolute;
    bottom: -25px;
}
.landing-mobile-field span.input-group-label {
    height: 100%;
    border-right: 1px solid #d3dce9;
    display: grid;
    place-items: center;
    color: #111;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
}
.landing-mobile-field input {
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    padding: 0 22px;
    color: var(--navy);
    font-size: 15px;
    font-weight: 600;
}
.landing-mobile-field input::placeholder {
    color: #9aa3bb;
}
.landing-agree {
    min-height: 48px;
    margin: 22px 0 22px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #40507c;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    justify-content: center;
}
.landing-agree input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.landing-agree span {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid var(--red);
    display: grid;
    place-items: center;
    background: var(--red);
    color: #fff;
    font-size: 13px;
}
.landing-agree input:not(:checked) + span {
    background: #fff;
    color: transparent;
}
.landing-agree em {
    font-style: normal;
}
.landing-agree a {
    color: #005cff;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.landing-page .truecaller_verify_or {
    width: 100%;
    margin: 18px 0 14px;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #6d7896;
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.landing-page .truecaller_verify_or::before,
.landing-page .truecaller_verify_or::after {
    content: "";
    height: 1px;
    flex: 1 1 0;
    background: #dfe6f4;
}
.landing-page .bjflexc {
    width: 100%;
    display: flex;
    justify-content: center;
}
.landing-page .truecaller_verify {
    width: 100%;
    min-height: 56px;
    border: 1px solid rgba(18, 88, 255, .18);
    border-radius: 12px;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(180deg, #fff, #f7fbff);
    box-shadow: 0 14px 28px rgba(30, 68, 143, .10);
    color: var(--navy);
    font-size: 15px;
    line-height: 1.2;
    font-weight: 800;
    text-align: center;
}
.landing-page .truecaller_verify::before {
    content: "";
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #fff 0 30%, transparent 31%), linear-gradient(135deg, #1789ff, #005cff);
    box-shadow: 0 8px 16px rgba(0, 92, 255, .18);
}
.landing-page .truecaller_verify:focus-visible {
    outline: 3px solid rgba(18, 88, 255, .22);
    outline-offset: 3px;
}
.landing-login-btn {
    width: 100%;
    height: 60px;
    border: 0;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: linear-gradient(180deg, #ff171f, #ed0008);
    box-shadow: 0 16px 30px rgba(255, 0, 0, .18);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
}
.landing-login-btn i {
    font-size: 20px;
}
.landing-voice {
    width: min(350px, 100%);
    height: 76px;
    margin-top: auto;
    border: 0;
    border-radius: 42px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(30, 68, 143, .12);
    display: grid;
    grid-template-columns: 56px 1fr 55px;
    align-items: center;
    gap: 18px;
    padding: 0 24px 0 14px;
    color: #111;
}
.landing-mic {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #ff171f, #e80008);
    color: #fff;
    font-size: 24px;
}
.landing-voice strong {
    text-align: left;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
}
.landing-play {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--red);
    box-shadow: 0 8px 20px rgba(30, 68, 143, .1);
    font-size: 18px;
}
.landing-play i {
    margin-left: 3px;
}
.landing-trust-row {
    width: calc(100%);
    margin: 30px auto 0; 
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0px;
    text-align:center
} 
.landing-trust-row .lanpowerd{
    display: flex;
    align-items: center;
    gap: 0px;
    justify-content: center;
    font-size: 14px;
}
.landing-trust-row article {
    min-height: 72px;
    border-radius: 19px;
    background: rgba(255, 255, 255, .78);
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
}
.landing-trust-row article > span {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 24px;
}
.trust-green {
    background: #dcffd9;
    color: #14ad27;
}
.trust-blue {
    background: #e7f2ff;
    color: #1264ff;
}
.trust-violet {
    background: #efeaff;
    color: #5c39ff;
}
.trust-orange {
    background: #fff0df;
    color: #ff7a1a;
}

/* Congratulations completion page */
.congrats-page .step.completed span {
    border: 0;
    background: #16bf4f;
    color: #fff;
    box-shadow: 0 8px 18px rgba(22, 191, 79, 0.2);
}

.congrats-page .step.completed p {
    color: #0f6f32;
}

.congrats-page .step.active.completed span {
    background: linear-gradient(135deg, #16bf4f, #0ea243);
}

.congrats-container {
    display: block;
    min-height: auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.congrats-card {
    width: 100%;
    min-height: 520px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 34px 56px;
}

.success-hero {
    position: relative;
    width: 260px;
    height: 150px;
    margin-bottom: 12px;
}

.success-orbit {
    position: absolute;
    left: 50%;
    top: 8px;
    width: 126px;
    height: 126px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(54, 183, 92, .16) 0 38%, rgba(54, 183, 92, .08) 39% 68%, transparent 69%);
    transform: translateX(-50%);
}

.success-shield {
    position: absolute;
    left: 50%;
    top: 34px;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #5bcc80, #1faf55);
    color: #fff;
    font-size: 30px;
    clip-path: polygon(50% 0, 88% 14%, 88% 55%, 50% 100%, 12% 55%, 12% 14%);
    transform: translateX(-50%);
    box-shadow: 0 14px 24px rgba(26, 166, 82, .2);
}

.success-ribbon {
    position: absolute;
    left: 50%;
    top: 88px;
    min-width: 140px;
    height: 38px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #2f7dff, #1158dc);
    color: #fff;
    font-size: 17px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    transform: translateX(-50%) rotate(-8deg);
    box-shadow: 0 10px 20px rgba(17, 88, 220, .2);
}

.success-ribbon::before,
.success-ribbon::after {
    content: "";
    position: absolute;
    bottom: -8px;
    border-top: 14px solid #0d49bf;
}

.success-ribbon::before {
    left: -16px;
    border-left: 18px solid transparent;
}

.success-ribbon::after {
    right: -16px;
    border-right: 18px solid transparent;
}

.confetti {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--red);
}

.c1 { left: 36px; top: 54px; background: #16bf4f; transform: rotate(18deg); }
.c2 { left: 74px; top: 18px; background: #1264ff; transform: rotate(62deg); }
.c3 { left: 112px; top: 4px; background: #1264ff; width: 5px; height: 5px; }
.c4 { right: 86px; top: 18px; background: #ffba08; transform: rotate(40deg); }
.c5 { right: 44px; top: 42px; background: #b431ff; transform: rotate(22deg); }
.c6 { right: 24px; top: 86px; background: #ff1018; width: 9px; height: 5px; }

.congrats-heading {
    margin-bottom: 12px;
}

.congrats-heading .ui-title {
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
}

.client-code-label {
    margin: 4px 0 8px;
    color: var(--navy);
    font-size: 17px;
    font-weight: 600; 
}

.client-code {
    min-width: 310px;
    min-height: 70px;
    border: 1.5px solid rgba(255, 16, 24, .48);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 28px;
    color: #e50009;
    background: #fff;
    font-size: 34px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1px;
}

.congrats-copy {
    max-width: 650px;
    margin: 18px auto 0;
    color: var(--navy);
    font-size: 13px;
    line-height: 1.55;
    font-weight: 600;
}

.congrats-copy-secondary {
    margin-top: 4px;
}

.congrats-copy b {
    color: var(--red);
}

.risk-score-box {
    width: min(430px, 100%);
    min-height: 48px;
    margin: 20px auto 14px;
    border: 1px solid #e4ebf6;
    border-radius: 8px;
    background: #f8fbff;
    display: grid;
    grid-template-columns: 40px auto auto;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 8px 18px;
    color: var(--navy);
    font-size: 14px;
    display:none !important;
}

.risk-score-box span {
    width: 30px;
    height: 30px;
    border: 1px solid #cbd8ef;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #1258ff;
    background: #fff;
}

.risk-score-box a {
    color: #1258ff;
    font-weight: 700;
    text-decoration: underline;
}

.congrats-actions {
    width: min(315px, 100%);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 16px; 
    margin-top: 20px;
}

.congrats-actions .btn {
    height: 56px;
    min-height: 56px;
    font-size: 15px;
    font-weight: 700;
} 

.congrats-actions .btn-outline {
    border-color: var(--navy);
}

/* Account Aggregator bank verification */
.aa-page .page-bg {
    padding-bottom: 33px;
}

.aa-page .main-container {
    display: block;
    min-height: auto;
    margin: 20px auto 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.aa-card {
    width: 100%;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--shadow);
    padding: 32px 80px 28px;
    text-align: center;
}

.aa-hero-icon {
    position: relative;
    width: 108px;
    height: 108px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 55% 50%, #fff 0 15%, #eff5ff 2% 100%);
    border: 1px solid #dce8ff;
}

.aa-bank-icon {
    width: 68px;
    height: 68px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: #1258ff;
    font-size: 40px;
    background: linear-gradient(135deg, #eaf2ff, #fff);
    box-shadow: inset 0 0 0 1px #cfe0ff;
}

.aa-shield-icon {
    position: absolute;
    right: 8px;
    bottom: 9px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 18px;
    background: #1258ff;
    border: 4px solid #fff;
    box-shadow: 0 12px 22px rgba(18, 88, 255, 0.22);
}

.aa-heading h1 {
    margin: 0;
    color: var(--navy);
    font-size: 26px;
    line-height: 1.2;
    font-weight: 700;
}

.aa-heading p {
    margin: 12px 0 0;
    color: #3155a2;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
}

.aa-benefits {
    width: min(900px, 100%);
    margin: 26px auto 0;
    display: grid;
    gap: 10px;
}

.aa-benefit {
    display: grid;
    grid-template-columns: 72px 34px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-height: 92px;
    padding: 16px 22px;
    border: 1px solid #dbe4f5;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.74);
    text-align: left;
}

.aa-benefit-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #1258ff;
    font-size: 26px;
    background: #eef4ff;
}

.aa-benefit-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid #a9c2ff;
    color: #1258ff;
    background: #fff;
    font-weight: 700;
    font-size: 16px;
}

.aa-benefit h2 {
    margin: 0;
    color: var(--navy);
    font-size: 16px;
    line-height: 1.25;
    font-weight: 700;
}

.aa-benefit p {
    margin: 9px 0 0;
    color: #3155a2;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
}

.aa-actions {
    margin: 20px auto 0;
    width: min(250px, 100%);
}

.aa-proceed {
    width: 100%;
    height: 58px;
    min-height: 58px;
    font-size: 18px;
    font-weight: 700;
}

.aa-secure-note {
    margin: 20px 0 0;
    color: #3155a2;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
}

.aa-secure-note i {
    margin-right: 12px;
    color: #3155a2;
}

.landing-login #wrap {
    width: min(350px, 100%);
    margin-top: 34px;
}
.landing-login #wrap .player {
    width: 100%;
    min-height: 76px;
    padding: 0 22px 0 14px;
    border-radius: 42px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(30, 68, 143, .12);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.landing-login #wrap .play-flex {
    min-width: 0;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 16px;
    width: 100%;
}
.landing-login #wrap .mic-wrap {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #ff171f, #e80008);
    color: #fff;
    flex: 0 0 auto;
}
.landing-login #wrap .mic-wrap span {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
}
.landing-login #wrap .mic-wrap img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
.landing-login #wrap .ripple {
    position: absolute;
    inset: 0;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255, 23, 31, .22);
    animation: landingVoiceRipple 1.5s infinite ease-out;
}
.landing-login #wrap .ripple:nth-child(1) {
    animation-delay: 0s;
}
.landing-login #wrap .ripple:nth-child(2) {
    animation-delay: .5s;
}
.landing-login #wrap .ripple:nth-child(3) {
    animation-delay: 1s;
}
.landing-login #wrap .mic-wrap.paused .ripple {
    animation-play-state: paused;
    opacity: 0;
}
.landing-login #wrap .play-flex p {
    margin: 0;
    color: var(--navy);
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.landing-login #wrap .play-btn {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--red);
    box-shadow: 0 8px 20px rgba(30, 68, 143, .1);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
.landing-login #wrap .play-btn:active {
    transform: scale(.96);
}
.landing-login #wrap .icon {
    width: 17px;
    height: 17px;
    display: block;
}
.landing-login #wrap .play-btn path {
    fill: var(--red);
}
.landing-login #wrap .zoom-controls {
    display: none;
}
@keyframes landingVoiceRipple {
    0% {
        transform: scale(.72);
        opacity: .55;
    }
    70% {
        transform: scale(1.45);
        opacity: .2;
    }
    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

/* DigiLocker Aadhaar modal */
#aadhar_verify_pop.aadhaar-modal {
    width: min(1260px, calc(100vw - 64px));
    max-width: none;
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding: 15px 36px 18px;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(8, 22, 50, .34);
    color: #020a34;
}
#pan_verify_pop .aadhaar-modal-close,
#aadhar_verify_pop .aadhaar-modal-close {
    position: absolute;
    top: 26px;
    right: 28px;
    width: 54px;
    height: 54px;
    border: 1px solid #d7e1ef;
    border-radius: 50%;
    background: #fff;
    color: #06113b;
    display: grid;
    place-items: center;
    font-size: 24px;
    cursor: pointer;
}
#pan_verify_pop .aadhaar-modal-head,
#aadhar_verify_pop .aadhaar-modal-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 72px 22px;
    text-align: center;
}
#pan_verify_pop .aadhaar-modal-shield,
#aadhar_verify_pop .aadhaar-modal-shield {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: #dff4e6;
    color: #158238;
    display: grid;
    place-items: center;
    font-size: 34px;
    flex: 0 0 auto;
    display: none;
}
#pan_verify_pop .aadhaar-modal-head h2,
#aadhar_verify_pop .aadhaar-modal-head h2 {
    margin: 0;
    color: #06113b;
    font-size: 26px;
    line-height: 1.1;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
}
#pan_verify_pop .aadhaar-modal-head p,
#aadhar_verify_pop .aadhaar-modal-head p {
    margin: 2px auto 0;
    color: #4c5877;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 500;
}
#aadhar_verify_pop .aadhaar-summary-strip,
#pan_verify_pop .aadhaar-detail-card,
#aadhar_verify_pop .aadhaar-detail-card {
    border: 1px solid #dbe4f1;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(31, 55, 102, .08);
}
#aadhar_verify_pop .aadhaar-summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 2px 0 15px;
    padding: 10px 0;
}
#aadhar_verify_pop .aadhaar-summary-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 60px;
    padding: 0 22px;
}
#aadhar_verify_pop .aadhaar-summary-item + .aadhaar-summary-item {
    border-left: 1px solid #dbe4f1;
}
#aadhar_verify_pop .summary-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 19px;
}
#aadhar_verify_pop .summary-green {
    background: #e3f5e9;
    color: #128435;
}
#aadhar_verify_pop .summary-blue {
    background: #e5eefc;
    color: #175bd6;
}
#aadhar_verify_pop .aadhaar-summary-item strong {
    display: block;
    color: #11872f;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 700;
}
#aadhar_verify_pop .aadhaar-summary-item:nth-child(2) strong {
    color: #175bd6;
}
#aadhar_verify_pop .aadhaar-summary-item b {
    display: block;
    margin-top: 8px;
    color: #030a2f;
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
}
#aadhar_verify_pop .aadhaar-detail-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 22px;
    padding: 22px 22px 18px;
}
#pan_verify_pop .aadhaar-detail-list,
#aadhar_verify_pop .aadhaar-detail-list {
    min-width: 0;
}
#pan_verify_pop .aadhaar-detail-row,
#aadhar_verify_pop .aadhaar-detail-row {
    display: grid;
    grid-template-columns: 46px 250px 19px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 45px;
    border-bottom: 1px solid #e4ebf5;
    color: #050b2d;
    font-size: 18px;
}
#pan_verify_pop .aadhaar-detail-row:last-child,
#aadhar_verify_pop .aadhaar-detail-row:last-child {
    border-bottom: 0;
}
#aadhar_verify_pop .aadhaar-detail-row.split {
    grid-template-columns: 46px 250px 18px minmax(120px, 1fr) 150px 18px minmax(100px, .8fr);
}
#pan_verify_pop .aadhaar-detail-row > span,
#aadhar_verify_pop .aadhaar-detail-row > span {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #eef4ff;
    color: #1258d8;
    font-size: 15px;
}
#pan_verify_pop .aadhaar-detail-row strong,
#aadhar_verify_pop .aadhaar-detail-row strong {
    font-size: 15px;
    font-weight: 700;
}
#pan_verify_pop .aadhaar-detail-row em,
#aadhar_verify_pop .aadhaar-detail-row em {
    font-style: normal;
    font-weight: 700;
}
#pan_verify_pop .aadhaar-detail-row p,
#aadhar_verify_pop .aadhaar-detail-row p {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 15px;
    line-height: 1.3;
}
#aadhar_verify_pop .aadhaar-photo-card {
    position: relative;
    align-self: start;
    min-height: 420px;
    padding: 16px 16px 26px;
    border: 1px solid #dbe4f1;
    border-radius: 14px;
    background: #fff;
    text-align: center;
    box-shadow: 0 12px 28px rgba(31, 55, 102, .08);
}
#aadhar_verify_pop .aadhaar-photo-wrap {
    position: relative;
    height: 330px;
    border-radius: 10px;
    overflow: hidden;
    background: #edf2f8;
}
#aadhar_verify_pop .aadhaar-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#aadhar_verify_pop .aadhaar-photo-check {
    width: 55px;
    height: 55px;
    margin: -34px auto 12px;
    border: 6px solid #fff;
    border-radius: 50%;
    background: #139137;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 22px;
    position: relative;
    z-index: 2;
}
#aadhar_verify_pop .aadhaar-photo-card strong {
    display: block;
    color: #138632;
    font-size: 17px;
    line-height: 1;
    font-weight: 700;
}
#aadhar_verify_pop .aadhaar-photo-card p {
    margin: 8px 0 0;
    color: #4c5877;
    font-size: 16px;
    line-height: 1.2;
}
#aadhar_verify_pop .aadhaar-modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 6px 0;
}
#aadhar_verify_pop .aadhaar-reupload,
#aadhar_verify_pop .aadhaar-close-btn {
    min-height: 56px;
    border-radius: 9px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
#aadhar_verify_pop .aadhaar-reupload { 
    min-width: 315px;
    border: 1px solid #aac0ee;
    background: #fff;
    color: #174cc4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
#aadhar_verify_pop .aadhaar-close-btn {
    min-width: 165px;
    border: 0;
    background: #1b47c5;
    color: #fff;
}

/* Foundation reveal shell for custom UI */
.reveal {
    display: none;
    position: relative;
    z-index: 10061;
    margin-left: auto;
    margin-right: auto;
}
.reveal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10060;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 24px 0;
    background: rgba(8, 17, 39, 0.72);
}
.reveal-overlay .reveal,
.reveal.is-open,
.reveal[style*="display: block"] {
    display: block;
}
body.is-reveal-open {
    overflow: hidden;
}

/* PAN Abide validation message control */
.pan-form .pan-error-required,
.pan-form .pan-error-pattern {
    display: none;
    position: static;
    margin: 4px 0 0;
     color:var(--red)!important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;   
    margin-top: 10px;
}
.pan-form .pan-error-required.is-visible,
.pan-form .pan-error-pattern.is-visible {
    display: block;
    color:var(--red) !important;
}
.pan-form .pan-input.is-invalid-input {
    border-color: #ff0b2f;
    background-color: #fff;
}
.reveal{
    outline: none !important;
}
/* Aadhaar re-upload confirmation modal */
#popmodelconfirm2.aadhaar-confirm-modal {
    width: min(610px, calc(100vw - 36px));
    max-width: none;
   padding: 20px 42px 32px 32px;
    border: 0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(8, 17, 39, 0.38);
    text-align: center;
    color: #07133a; 
    overflow: hidden; 
}
#popmodelconfirm2 .aadhaar-confirm-art {
    position: relative;
    width: 175px;
    height: 150px; 
    margin: -6px auto 10px;
}
#popmodelconfirm2 .confirm-orbit {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 121, 126, 0.34);
}
#popmodelconfirm2 .orbit-one {
    inset: 28px 28px 14px 28px;
    border-left-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(-22deg);
}
#popmodelconfirm2 .orbit-two {
    inset: 16px 16px 0 16px;
    border-right-color: transparent;
    border-top-color: transparent;
    opacity: 0.6;
    transform: rotate(18deg);
}
#popmodelconfirm2 .confirm-file {
    position: absolute;
    top: 53px;
    left: 50%;
    width: 68px;
    height: 74px;
    transform: translateX(-50%);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(235, 67, 77, 0.16);
    display: grid;
    place-items: center;
}
#popmodelconfirm2 .confirm-file::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-top: 32px solid #eef2f7;
    border-left: 32px solid transparent;
    border-radius: 0 8px 0 0;
}
#popmodelconfirm2 .confirm-file i {
    position: relative;
    z-index: 1;
    color: #ec3f45;
    font-size: 52px;
}
#popmodelconfirm2 .confirm-spark {
    position: absolute;
    width: 9px;
    height: 9px;
    border: 2px solid #ff4b55;
    border-radius: 3px;
    opacity: 0.9;
}
#popmodelconfirm2 .spark-a { left: 18px; top: 72px; transform: rotate(42deg); }
#popmodelconfirm2 .spark-b { right: 8px; top: 64px; border-radius: 50%; }
#popmodelconfirm2 .spark-c { right: 32px; top: 20px; transform: rotate(35deg); }
#popmodelconfirm2 h2 {
    margin: 0 0 18px;
    color: #0b173f;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 700;
}
#popmodelconfirm2 #content_confirm2 {
    max-width: 640px;
    margin: 0 auto 10px;
    color: #626d82;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 500;
}
#popmodelconfirm2 strong {
    display: block;
    color: #172348;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
}
#popmodelconfirm2 .aadhaar-confirm-divider {
    height: 1px;
    margin: 28px 34px 24px;
    background: #dfe5ef;
}
#popmodelconfirm2 .aadhaar-confirm-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
}
#popmodelconfirm2 .confirm-btn {
    min-width: 190px;
    min-height: 60px;
    border-radius: 7px;
    font-size: 18px;
    font-weight: 600;
    gap: 18px;
    overflow: hidden;
}
#popmodelconfirm2 .confirm-btn i {
    width: 30px;
    height: 30px;
    border-radius: 50%; 
    display: grid;
    place-items: center;
    font-size: 18px;
    transition: transform 0.22s ease;
}  
#popmodelconfirm2 .confirm-btn:hover i {
    transform: scale(1.06);
}
#popmodelconfirm2 .confirm-btn:active {
    transform: translateY(0) scale(0.98);
}
#popmodelconfirm2 .confirm-btn:focus-visible {
    outline: 3px solid rgba(255, 16, 24, 0.2);
    outline-offset: 4px;
}
#popmodelconfirm2 .confirm-no i {
    border: 2px solid currentColor;
}
#popmodelconfirm2 .confirm-yes i {
    border: 2px solid #fff;
    color: #fff;
}


/* DOB verification modal */
#verifydobModalpopup.dob-modal {
    width: min(610px, calc(100vw - 42px));
    max-width: none;
    padding: 48px 84px 58px;
    border: 0;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 34px 90px rgba(8, 17, 39, 0.38);
    color: #0b173f;
    overflow: hidden;
    text-align: center;
}


#verifydobModalpopup .dob-modal-close {
    position: absolute;
    top: 24px;
    right: 26px;
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #ff0b2f;
    display: grid;
    place-items: center;
    font-size: 30px;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(8, 17, 39, 0.12);
    z-index: 2;
}
#verifydobModalpopup #verifdobform {
    position: relative;
    z-index: 1;
}
#verifydobModalpopup .dob-modal-art {
    position: relative;
    width: 220px;
    height: 180px;
    margin: 0 auto 10px;
}
#verifydobModalpopup .dob-art-orbit {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 11, 47, 0.08);
}
#verifydobModalpopup .orbit-main {
    inset: 6px 22px 0;
}
#verifydobModalpopup .orbit-soft {
    inset: 28px 46px 22px;
    background: rgba(255, 11, 47, 0.08);
}
#verifydobModalpopup .dob-calendar {
    position: absolute;
    top: 58px;
    left: 50%;
    width: 90px;
    height: 78px;
    transform: translateX(-50%);
    border-radius: 10px;
    background: #fff;
    color: #d81721;
    display: grid;
    place-items: center;
    font-size: 54px;
    box-shadow: 0 18px 42px rgba(216, 23, 33, 0.16);
}
#verifydobModalpopup .dob-calendar b {
    position: absolute;
    top: 16px;
    left: 22px;
    right: 22px;
    height: 8px;
    border-radius: 999px;
    background: #d81721;
}
#verifydobModalpopup .dob-clock {
    position: absolute;
    right: 36px;
    bottom: 38px;
    width: 48px;
    height: 48px;
    border: 4px solid #ff4650;
    border-radius: 50%;
    background: #fff;
    color: #ff4650;
    display: grid;
    place-items: center;
    font-size: 28px;
}
#verifydobModalpopup .dob-spark {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff3b45;
}
#verifydobModalpopup .spark-one { left: 26px; top: 64px; opacity: .28; }
#verifydobModalpopup .spark-two { right: 20px; top: 50px; }
#verifydobModalpopup .spark-three { right: 44px; bottom: 34px; opacity: .45; }
#verifydobModalpopup h2 {
    margin: 0 0 12px;
    color: #0b173f;
    font-size: 25px;
    line-height: 1.15;
    font-weight: 700;
}
#verifydobModalpopup .dob-modal-subtitle {
    margin: 0 auto 44px;
    color: #616c80;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 500;
}
#verifydobModalpopup .dob-field-label {
    width: 100%;
    margin: 0 0 14px;
    display: block;
    color: #0b173f;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
    text-align: left;
}
#verifydobModalpopup .dob-field-label em {
    color: #ff0b2f;
    font-style: normal;
}
#verifydobModalpopup .dob-input-wrap {
    position: relative;
    margin-bottom: 36px;
}
#verifydobModalpopup #verifdobinput {
    width: 100%;
    height: 58px;
    padding: 0 58px 0 18px;
    border: 1px solid #ccd7ea;
    border-radius: 7px;
    background: #fff;
    color: #101857;
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
    text-transform: uppercase;
    box-shadow: none;
}
#verifydobModalpopup #verifdobinput:focus {
    border-color: #8fa8ef;
    outline: none;
    box-shadow: 0 0 0 3px rgba(63, 99, 246, 0.12);
}
#verifydobModalpopup #verifdobinput::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0;
    width: 58px;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
#verifydobModalpopup #verifdobinput::placeholder {
    color: #a8b0c0;
}
#verifydobModalpopup .dob-input-wrap span {
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    color: #1f2a3d;
    font-size: 26px;
    pointer-events: none;
}
#verifydobModalpopup .dobmatch {
    margin: -24px 0 24px;
    color: #ff0b2f;
    font-weight: 700;
    text-align: left;
}
#verifydobModalpopup .dob-submit {
    width: 100%;
    min-height: 72px;
    border-radius: 8px;
    font-size: 22px;
    font-weight: 700;
    box-shadow: 0 20px 34px rgba(255, 0, 0, 0.2);
}

/* Minor restriction modal */
#minor.minor-modal {
    width: min(610px, calc(100vw - 40px));
    max-width: none;
    padding: 46px 78px 64px;
    border: 0;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 34px 90px rgba(8, 17, 39, 0.38);
    color: #0b173f;
    overflow: hidden;
    text-align: center;
}

#minor .minor-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border: 1px solid #ffccd1;
    border-radius: 50%;
    background: #fff;
    color: #ff0b2f;
    display: grid;
    place-items: center;
    font-size: 26px;
    cursor: pointer;
    z-index: 2;
}
#minor .minor-modal-art {
    position: relative;
    width: 270px;
    height: 220px;
    margin: 0 auto 12px;
}
#minor .minor-art-bg {
    position: absolute;
    inset: 0 22px 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 216, 218, 0.95), rgba(255, 235, 236, 0.65));
}
#minor .minor-person {
    position: absolute;
    left: 54px;
    bottom: 22px;
    width: 116px;
    height: 142px;
    border-radius: 58px 58px 38px 38px;
    background: linear-gradient(180deg, #ffb5a8 0%, #ff5258 72%);
    color: #2d2b4f;
    display: grid;
    place-items: center;
    font-size: 82px;
    box-shadow: 0 18px 38px rgba(255, 70, 80, 0.16);
}
#minor .minor-shield {
    position: absolute;
    right: 44px;
    bottom: 28px;
    width: 92px;
    height: 112px;
    border-radius: 0 0 44px 44px;
    background: linear-gradient(180deg, #ff6b68 0%, #f03d45 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 43px;
    line-height: 1;
    font-weight: 800;
    clip-path: polygon(50% 0, 100% 20%, 100% 62%, 50% 100%, 0 62%, 0 20%);
    box-shadow: 0 16px 30px rgba(240, 61, 69, 0.22);
}
#minor .minor-shield sup {
    margin-left: 2px;
    font-size: 20px;
}
#minor .minor-spark {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 3px solid #ff8d93;
    border-radius: 50%;
}
#minor .spark-one { left: 18px; top: 58px; border-radius: 0; transform: rotate(45deg); }
#minor .spark-two { right: 8px; top: 82px; }
#minor .spark-three { right: 28px; bottom: 42px; }
#minor h2 {
    margin: 0 0 14px;
    color: #202345;
    font-size: 25px;
    line-height: 1.12;
    font-weight: 700;
}
#minor .minor-message {
    max-width: 520px;
    margin: 0 auto 30px;
    color: #2e334f;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 500;
}
#minor .minor-alert-box {
    min-height: 94px;
    margin: 0 0 34px;
    padding: 18px 26px;
    border: 1px solid #ffcbd0;
    border-radius: 8px;
    background: linear-gradient(90deg, #fff4f5, #fffafa);
    display: flex;
    align-items: center;
    gap: 22px;
    text-align: left;
}
#minor .minor-alert-box span { 
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ff595f, #f22f3b);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 23px;
    flex: 0 0 auto;
}
#minor .minor-alert-box p {
    margin: 0;
    color: #202345;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 500;
}
#minor .minor-reupload {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 70px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 20px 34px rgba(255, 0, 0, 0.24);
}
#minor .minor-reupload i {
    font-size: 27px;
}


/* Bank verification manual layout refinements */
.bank-page .bank-status-row {
    gap: 36px;
    margin-bottom: 22px;
}
.bank-page .bank-status-card {
    min-height: 58px;
    padding: 0 28px;
}
.bank-page .status-action {
    width: fit-content;
    min-width: fit-content;
    height: 34px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1;
}
.bank-page .bank-section {
    padding-top: 8px;
}
.bank-page .bank-manual-card {
    position: relative;
    padding: 24px 18px 18px;
    min-height: 468px;
}
.bank-page .bank-fields {
    gap: 16px 42px;
}
.bank-page .bank-input-wrap {
    height: 54px;
}
.bank-page .bank-field .form-error {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.15;
}

.bank-page .manual-charge span:first-child {
    font-size: 18px;
}
.bank-page .manual-actions {
    display: grid;
    grid-template-columns: 190px 1fr 260px;
    grid-template-areas: "prev spacer proceed";
    align-items: center;
    gap: 24px;
    margin-top: 18px;
}
.bank-page .manual-actions .bank-prev {
    grid-area: prev;
}
.bank-page .manual-actions .bankverifysub {
    grid-area: proceed;
    width: 100%;
    height: 55px;
}
.bank-page .manual-actions .inline_loader {
    grid-area: spacer;
    justify-self: center;
}
.bank-page .bank-error-box:empty,
.bank-page .bank-error-box[style*="display: none"] {
    margin: 0;
}
#pan_verify_pop.aadhaar-modal,
#aadhar_verify_pop.aadhaar-modal {
    width: min(1260px, calc(100vw - 64px));
    max-width: none;
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding: 15px 36px 18px;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(8, 22, 50, .34);
    color: #020a34;
}
#pan_verify_pop .aadhaar-detail-card {
    grid-template-columns: 1fr;
}
#pan_verify_pop .aadhaar-modal-close,
#pan_verify_pop .aadhaar-modal-head,
#pan_verify_pop .aadhaar-modal-shield,
#pan_verify_pop .aadhaar-modal-head h2,
#pan_verify_pop .aadhaar-modal-head p,
#pan_verify_pop .aadhaar-detail-card,
#pan_verify_pop .aadhaar-detail-list,
#pan_verify_pop .aadhaar-detail-row,
#pan_verify_pop .aadhaar-detail-row > span,
#pan_verify_pop .aadhaar-detail-row strong,
#pan_verify_pop .aadhaar-detail-row em,
#pan_verify_pop .aadhaar-detail-row p {
    /* PAN modal reuses Aadhaar modal component styles through matching selectors below. */
}


/* Bank placeholders, validation and PAN verified modal */
.bank-page .bank-input-wrap .form-control::placeholder {
    color: #a9b2c6;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.bank-page .bank-field .form-error {
    display: none;
    margin-top: 7px;
    color: var(--red);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
}

.bank-page .bank-field.is-invalid-label .form-error,
.bank-page .bank-field .is-invalid-input ~ .form-error,
.bank-page .bank-field .form-error.is-visible {
    display: block;
}

.bank-page .bank-field:has(input:placeholder-shown) .form-error[data-form-error-on="pattern"],
.bank-page .bank-field:has(input[value=""]) .form-error[data-form-error-on="pattern"] {
    display: none !important;
}

.bank-page .bank-field:has(input:not(:placeholder-shown)) .form-error[data-form-error-on="required"] {
    display: none !important;
}

#nalart1.reveal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(420px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    min-height: auto;
    margin: 0 !important;
    padding: 34px 30px 30px;
    transform: translate(-50%, -50%) !important;
    border: 0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(7, 20, 95, 0.28);
    text-align: center;
    overflow: hidden;
    z-index: 1007;
}

#nalart1.reveal::before {
    content: "";
    display: block;
    width: 68px;
    height: 68px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: rgba(255, 11, 47, 0.1);
    box-shadow: inset 0 0 0 14px rgba(255, 11, 47, 0.06);
}

#nalart1.reveal::after {
    content: "!";
    position: absolute;
    top: 48px;
    left: 50%;
    width: 38px;
    height: 38px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-size: 26px;
    line-height: 38px;
    font-weight: 900;
}

#nalart1.reveal p {
    margin: 0 0 24px;
    color: var(--navy);
    font-size: 18px;
    line-height: 1.35;
    font-weight: 600; 
}

#nalart1.reveal .button,
#nalart1.reveal .red-bt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    height: 50px;
    margin: 0;
    padding: 0 28px;
    border: 0;
    border-radius: 8px;
    background: var(--red);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 14px 26px rgba(255, 11, 47, 0.22);
}

#nalart1.reveal .button:hover,
#nalart1.reveal .red-bt:hover {
    background: #e80024;
    transform: translateY(-1px);
}


.bank-page .manual-charge {
    width: min(520px, 100%);
    min-height: 34px;
    margin: 20px auto 18px;
    background: linear-gradient(90deg, #fff6f6, #fffafa);
    border: 1px solid #ffe1e1;
    color: var(--navy);
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
}

.bank-page .manual-charge span {
    color: #315dff;
    font-size: 13px;
}

.bank-page .manual-charge span:first-child {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #eef4ff;
    color: #315dff;
    font-size: 14px;
}

.bank-page .bank-manual-card {
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 24px 18px 18px;
}

.bank-page .manual-actions {
    width: 100%;
    max-width: none;
    margin: 16px 0 0;
    padding: 0;
    border-top: 0;
    display: grid;
    grid-template-columns: minmax(170px, 190px) 1fr minmax(220px, 260px);
    grid-template-areas: "prev spacer proceed";
    align-items: center;
    gap: 24px;
}

.bank-page .manual-actions .bank-prev {
    grid-area: prev;
    width: 100%;
}

.bank-page .manual-actions .bankverifysub {
    grid-area: proceed;
    width: 100%;
    height: 55px;
}

.bank-page .manual-actions .inline_loader {
    grid-area: spacer;
    justify-self: center;
}

#pan_verify_pop.pan-card-modal {
    width: min(1180px, calc(100vw - 72px));
    max-width: none;
    max-height: calc(100vh - 64px);
    overflow: auto;
    padding: 38px 40px;
    border: 0;
    border-radius: 16px;
    background: #fff;
    color: #06113b;
    box-shadow: 0 34px 90px rgba(4, 16, 39, .38);
}

#pan_verify_pop .pan-card-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 4;
    width: 54px;
    height: 54px;
    border: 1px solid #dbe4f1;
    border-radius: 50%;
    background: #fff;
    color: #13203b;
    display: grid;
    place-items: center;
    font-size: 26px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(14, 34, 66, .08);
}

#pan_verify_pop .pan-card-modal-bg span {
    position: absolute;
    pointer-events: none;
}

#pan_verify_pop .pan-card-modal-bg span:nth-child(1) {
    left: 0;
    top: 0;
    width: 190px;
    height: 112px;
    border-radius: 0 0 120px 0;
    background: linear-gradient(135deg, rgba(201, 239, 209, .8), rgba(255, 255, 255, 0));
}

#pan_verify_pop .pan-card-modal-bg span:nth-child(2),
#pan_verify_pop .pan-card-modal-bg span:nth-child(3) {
    width: 64px;
    height: 64px;
    background-image: radial-gradient(#bfe9c9 3px, transparent 4px);
    background-size: 16px 16px;
    opacity: .8;
}

#pan_verify_pop .pan-card-modal-bg span:nth-child(2) {
    left: 42px;
    top: 78px;
}

#pan_verify_pop .pan-card-modal-bg span:nth-child(3) {
    right: 42px;
    top: 120px;
}

#pan_verify_pop .pan-card-modal-head {
    position: relative;
    margin-bottom: 28px;
    padding: 0 72px 0 36px;
    text-align: center;
}

#pan_verify_pop .pan-card-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    align-items: center;
    gap: 18px;
    padding-left: 150px;
}

#pan_verify_pop .pan-card-doc-icon {
    display: none;
}

#pan_verify_pop .poptlesec {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 0 22px;
    text-align: center;
}

#pan_verify_pop h2 {
    margin: 0;
    color: #06113b;
    font-size: 30px;
    line-height: 1.14;
    font-weight: 700;
    white-space: normal;
    overflow-wrap: normal;
}

#pan_verify_pop .pan-card-modal-head p {
    margin: 0 auto;
    color: #4c5877;
    font-size: 15px;
    line-height: 1.36;
    font-weight: 500;
}
#pan_verify_pop .pan-card-xml strong{
    font-size: 16px;
    font-weight: 700;
}
#pan_verify_pop .pan-card-xml {
    justify-self: center;
    align-self: center;
    width: 140px;
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 0;
    text-align: center;
    color: #078b37;
    font-size: 17px;
    font-weight: 700;
}

#pan_verify_pop .pan-card-xml i {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    color: #078b37;
    font-size: 35px;
    line-height: 1;
}

#pan_verify_pop .pan-card-table {
    position: relative;
    margin-top: 0;
    border: 1px solid #dbe4e9;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

#pan_verify_pop .pan-card-row {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    min-height: 60px;
    border-bottom: 1px solid #dbe4e9;
}

#pan_verify_pop .pan-card-row:last-child {
    border-bottom: 0;
}

#pan_verify_pop .pan-card-row-doc {
    min-height: 60px;
}

#pan_verify_pop .pan-card-row-split {
    grid-template-columns: 300px minmax(0, 1fr) 330px minmax(0, .9fr);
}

#pan_verify_pop .pan-card-label,
#pan_verify_pop .pan-card-row > p {
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0 22px;
    border-right: 1px solid #dbe4e9;
    font-size: 15px;
    line-height: 1.35;
}

#pan_verify_pop .pan-card-row > p:last-child {
    border-right: 0;
}

#pan_verify_pop .pan-card-label {
    gap: 16px;
    color: #06113b;
}

#pan_verify_pop .pan-card-label span {
    width: 34px;
    min-width: 34px;
    height: 34px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #eef4ff;
    color: #3164e0;
    font-size: 15px;
}

#pan_verify_pop .pan-card-label span i {
    line-height: 1;
}

#pan_verify_pop .pan-card-label strong {
    font-size: 15px;
    font-weight: 700;
}

#pan_verify_pop .pan-card-row > p {
    color: #050b2d;
    overflow-wrap: anywhere;
}
/*------------------ Toase message popup ----------------*/
.toast {  
  position: fixed;    
  top: 25px;    
  right: 30px;   
  border-radius: 12px;     
  background: #fff; 
  padding: 20px 35px 20px 25px; 
  box-shadow: 0 6px 20px -5px rgba(0, 0, 0, 0.1); 
  overflow: hidden; 
  transform: translateX(calc(100% + 30px)); 
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35); 
  z-index: 99;
}

.toast.active {
  transform: translateX(0%);
}

.toast .toast-content {
  display: flex;
  align-items: center;
}

.toast-content .check {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  min-width: 35px;
  background-color: #4070f4;
  color: #fff;
  font-size: 20px;
  border-radius: 50%;
}

.toast-content .message {
  display: flex;
  flex-direction: column;
  margin: 0 20px;
}

.message .text {
  font-size: 16px;
  font-weight: 400;
  color: #666666;
}

.message .text.text-1 {
  font-weight: 600;
  color: #333;
}

.toast .close {
  position: absolute;
  top: 10px;
  right: 15px;
  padding: 5px;
  cursor: pointer;
  opacity: 0.7;
}

.toast .close:hover {
  opacity: 1;
}

.toast .progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;

}

.toast .progress:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: #4070f4;
}

.progress.active:before {
  animation: progress 5s linear forwards;
}

@keyframes progress {
  100% {
    right: 100%;
  }
}

.toast.active ~ button {
  pointer-events: none;
}

/* Existing application page */
.existing-user-page .top-header {
    margin-bottom: 24px;
    padding: 0 30px;
}

.existing-main {
    display: block;
    width: min(100% - 48px, 1180px);
    max-width: 1180px;
    padding: 30px 38px 40px;
    border-radius: 18px;
    text-align: center;
}

.existing-hero {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin-bottom: 30px;
}

.existing-icon {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle, rgba(255, 11, 47, 0.18), rgba(255, 11, 47, 0.04) 68%);
    color: var(--red);
    font-size: 52px;
}

.existing-hero p {
    max-width: 680px;
    margin: 0;
    margin-top:5px;
    color: #405075;
    font-size: 17px;
    line-height: 1.45;
    font-weight: 600;
}

.existing-table-card {
    width: 100%;
    overflow: hidden;
    border: 1px solid #e2e8f4;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(7, 20, 95, 0.08);
}

.existing-table-wrap {
    width: 100%;
    overflow-x: visible;
}

.existing-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--navy);
    text-align: center;
}

.existing-table th:nth-child(1),
.existing-table td:nth-child(1) { width: 16%; }
.existing-table th:nth-child(2),
.existing-table td:nth-child(2) { width: 16%; }
.existing-table th:nth-child(3),
.existing-table td:nth-child(3) { width: 28%; }
.existing-table th:nth-child(4),
.existing-table td:nth-child(4) { width: 21%; }
.existing-table th:nth-child(5),
.existing-table td:nth-child(5) { width: 19%; }

.existing-table th {
    padding: 15px 14px;
    background: linear-gradient(180deg, #ff1727, #e70b18);
    color: #fff;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 800;
    white-space: nowrap;
}

.existing-table th + th,
.existing-table td + td {
    border-left: 1px solid #e1e7f2;
}

.existing-table td {
    padding: 15px 14px;
    border-top: 1px solid #e1e7f2;
    background: #fff;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 800;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.existing-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    max-width: 100%;
    padding: 0 12px;
    border-radius: 8px;
    background: #ecfff1;
    color: #008a28;
    font-size: 13px;
    line-height: 1.15;
    font-weight: 900;
}

.existing-status i {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #10b844;
    color: #fff;
    font-size: 12px;
}

.existing-table .con_submit {
    margin: 0;
}

.existing-table .exitbtn {
    width: auto;
    min-width: 154px;
    min-height: 50px;
    padding: 0 22px;
    border-radius: 8px;
    white-space: nowrap;
}

.existing-table .exitbtn span,
.existing-logout-link span,
.existing-new-btn span {
    display: inline-block;
    color: inherit;
    white-space: nowrap;
}

.existing-table .exitbtn i,
.existing-logout-link i,
.existing-new-btn i {
    flex: 0 0 auto;
}

.existing-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin: 34px 0 30px;
}

.existing-actions .con_submit {
    margin: 0;
}

.existing-logout-link,
.existing-new-btn {
    min-width: 220px;
    height: 58px;
    min-height: 58px;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 600;
}

.existing-security {
    width: min(940px, 100%);
    min-height: 80px;
    margin: 0 auto;
    padding: 10px 28px;
    border: 1px solid #ffd7d7;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 180px;
    align-items: center;
    gap: 18px;
    text-align: left;
    overflow: hidden;
    display:none;
}

.existing-security > span {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    color: var(--red);
    font-size: 36px;
}

.existing-security strong {
    display: block;
    margin-bottom: 6px;
    color: var(--navy);
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
}

.existing-security p {
    margin: 0;
    color: #405075;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
}

.existing-security-lock {
    justify-self: end;
    width: 128px;
    height: 82px; 
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: rgba(255, 11, 47, 0.42);
    font-size: 50px; 
}

.existing-empty {
    color: #405075;
}




/* New user application page */
.new-user-page .app-shell {
    min-height: 100vh;
    padding: 14px 0 28px;
}

.new-user-header {
    width: min(100% - 28px, 1500px);
    min-height: 104px;
    margin: 0 auto 24px;
    padding: 18px 36px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.new-user-brand img {
    width: 176px;
    height: auto;
    display: block;
}

.new-user-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
}

.new-user-lang {
    width: 160px;
    height: 56px;
    min-height: 56px;
}

.new-user-header-divider {
    width: 1px;
    height: 44px;
    background: #dce4f2;
}

.new-user-help {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--navy);
    font-size: 17px;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
}

.new-user-help i,
.new-user-help span {
    color: var(--red);
}

.new-user-help i {
    font-size: 30px;
}

.new-user-wrap {
    width: min(100% - 120px, 1220px);
    margin: 0 auto;
    display: block;
    margin-top: 20px;
}
.new-user-page .new-user-card{
    overflow: visible;
}
.new-user-card {
    display: grid;
   grid-template-columns: 540px minmax(0, 1fr);
    min-height: 620px;
    border: 1px solid #c9d8ef;
    border-radius: 22px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--shadow);
}

.new-user-info {
    padding: 56px 56px 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(135deg, rgba(235, 244, 255, 0.96), rgba(255, 255, 255, 0.82));
}

.new-user-illustration {
    width: 285px;
    max-width: 100%;
    aspect-ratio: 1.15;
    display: grid;
    place-items: center;
    position: relative;
    margin-bottom: 26px;
}

.new-user-illustration::before {
    content: "";
    position: absolute;
    inset: 20% 7% 7%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(58, 119, 245, 0.16), rgba(58, 119, 245, 0.02) 66%, transparent 67%);
}

.check-board {
    width: 153px;
    height: 205px;
    border: 6px solid #ff4c4f;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 22px 32px rgba(16, 54, 139, 0.16);
    position: relative;
    display: grid;
    align-content: center;
    gap: 18px;
    padding-left: 48px;
}

.check-board::before {
    content: "";
    position: absolute;
    top: -25px;
    left: 50%;
    width: 88px;
    height: 38px;
    transform: translateX(-50%);
    border-radius: 18px 18px 8px 8px;
    background: linear-gradient(180deg, #ff1d2d, #e70b18);
    box-shadow: 0 10px 20px rgba(255, 0, 20, 0.22);
}

.check-board::after {
    content: "";
    position: absolute;
    top: -14px;
    left: 50%;
    width: 18px;
    height: 18px;
    transform: translateX(-50%);
    border: 6px solid #ffb1b8;
    border-radius: 50%;
    background: #fff;
}

.check-board span {
    width: 64px;
    height: 8px;
    border-radius: 10px;
    background: #c9cfdb;
    position: relative;
}

.check-board span::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: -34px;
    top: 50%;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #ff2636;
    color: #fff;
    font-size: 12px;
    box-shadow: 0 5px 10px rgba(255, 0, 20, 0.22);
}

.check-board i {
    position: absolute;
    right: -35px;
    bottom: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #ff2b35, #ed0011);
    color: #fff;
    font-size: 26px;
    box-shadow: 0 18px 30px rgba(255, 0, 20, 0.28);
}

.new-user-info h2 {
    margin: 0 0 16px;
    color: var(--navy);
    font-size: 24px;
    line-height: 1.15;
    font-weight: 800;
}

.new-user-info h2 span {
    color: var(--red);
}

.new-user-info > p {
    max-width: 360px;
    margin: 0 0 30px;
    color: #405075;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 500;
}

.new-user-secure-note {
    width: min(100%);
    min-height: 108px;
    padding: 18px 22px;
    border: 1px solid #cfe0f8;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    text-align: left;
}

.new-user-secure-note > i {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #ffe4e7;
    color: var(--red);
    font-size: 38px;
}

.new-user-secure-note strong,
.new-user-trust-row strong {
    display: block;
    color: var(--navy);
    font-size: 17px;
    line-height: 1.25;
    font-weight: 800;
}

.new-user-secure-note small,
.new-user-trust-row p {
    display: block;
    margin: 6px 0 0;
    color: #405075;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
}

.new-user-form-panel {
    padding: 40px 50px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.new-user-form-panel h1 {
 text-align:left;
 line-height: 1.3;
}
.new-user-form-panel .ui-title-rule{
        margin: 0;
        margin-top:10px;
}
.new-user-form-panel .section-accent {
    margin: 18px 0 28px;
}

.new-user-form {
    width: min(100%, 630px);
}

.new-user-field {
    margin-bottom: 26px;
}

.new-user-field label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--navy);
    font-size: 15px;
    line-height: 1.2;
    font-weight: 700;
}

.new-user-display-field,
.new-user-select-wrap {
    height: 70px;
    border: 1px solid #d4ddec;
    border-radius: 10px;
    background: #fff;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 34px;
    align-items: center;
    padding: 0 18px 0 10px;
}

.new-user-display-field > span,
.new-user-select-wrap > span {
    width: 46px;
    height: 46px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: #fff0f1;
    color: var(--red);
    font-size: 24px;
}

.new-user-display-field strong {
    color: var(--red);
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
}

.new-user-select-wrap select {
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #0c1233;
    font-size: 15px;
    font-weight: 600;
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.new-user-select-wrap > i {
    justify-self: end;
    color: var(--navy);
    font-size: 16px;
    pointer-events: none;
}

.new-user-select-wrap .chosen-container {
    width: 100% !important;
    min-width: 0;
    height: 100%;
    color: #0c1233;
    font-size: 15px;
    font-weight: 600;
}

.new-user-select-wrap .chosen-container-single .chosen-single {
    display: flex;
    height: 100%;
    padding: 0;
    align-items: center;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #0c1233;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}

.new-user-select-wrap .chosen-container-single .chosen-single span {
    margin-right: 0;
    color: inherit;
    line-height: 1.2;
}

.new-user-select-wrap .chosen-container-single .chosen-single div {
    display: none;
}

.new-user-select-wrap .chosen-container .chosen-drop {
    top: calc(100% + 7px);
    left: -58px;
    width: calc(100% + 92px);
    border: 1px solid #d4ddec;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(12, 18, 51, 0.16);
    overflow: hidden;
    z-index: 1000;
}

.new-user-select-wrap .chosen-container-single .chosen-search {
    padding: 10px 10px 5px;
}

.new-user-select-wrap .chosen-container-single .chosen-search input[type='text'] {
    height: 40px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #d4ddec;
    border-radius: 8px;
    background: #f8faff;
    color: var(--navy);
    font-size: 14px;
    box-shadow: none;
}

.new-user-select-wrap .chosen-container .chosen-results {
    max-height: 220px;
    margin: 0;
    padding: 6px;
}

.new-user-select-wrap .chosen-container .chosen-results li {
    padding: 10px 12px;
    border-radius: 7px;
    color: var(--navy);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}

.new-user-select-wrap .chosen-container .chosen-results li.highlighted {
    background: var(--red);
    color: #fff;
}

.new-user-select-wrap .chosen-container .chosen-results li.result-selected {
    background: #fff1f3;
    color: var(--red);
}

.new-user-select-wrap .chosen-container-active .chosen-single {
    color: var(--navy);
}

.new-user-select-wrap:has(.chosen-container-active) {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(255, 0, 31, 0.08);
}

.new-user-help-tip {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: var(--red);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    cursor: help;
}

.new-user-field .form-error {
    margin-top: 6px;
    color: var(--red);
    font-size: 12px;
    font-weight: 700;
}

.new-user-pref-lang {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.new-user-submit-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

.new-user-submit {
    min-width: 210px;
    height: 64px;
    min-height: 64px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
}

.new-user-submit i {
    font-size: 24px;
}

.new-user-trust-row {
    width: min(100% - 90px, 1420px);
    min-height: 132px;
    margin: 24px auto 0;
    padding: 24px 54px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.new-user-trust-row > div {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.new-user-trust-row > div + div {
    border-left: 1px solid #dfe6f4;
    padding-left: 54px;
}

.new-user-trust-row span {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #ffe4e7;
    color: var(--red);
    font-size: 34px;
}

/* New user card box refinements */




/* New user help tooltip */
.new-user-help-tip[data-new-user-tooltip] {
    position: relative;
    overflow: visible;
}

.new-user-help-tip[data-new-user-tooltip]::after {
    content: attr(data-tooltip-text);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    width: 260px;
    max-width: 72vw;
    padding: 10px 12px;
    border-radius: 8px;
    background: #0b124a;
    color: #fff;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
    text-align: left;
    box-shadow: 0 12px 26px rgba(10, 19, 74, 0.22);
    transform: translateX(-50%) translateY(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 30;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.new-user-help-tip[data-new-user-tooltip]::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    width: 10px;
    height: 10px;
    background: #0b124a;
    transform: translateX(-50%) rotate(45deg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 31;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

.new-user-help-tip[data-new-user-tooltip]:hover::after,
.new-user-help-tip[data-new-user-tooltip]:focus::after,
.new-user-help-tip[data-new-user-tooltip]:hover::before,
.new-user-help-tip[data-new-user-tooltip]:focus::before {
    opacity: 1;
    visibility: visible;
}

.new-user-help-tip[data-new-user-tooltip]:hover::after,
.new-user-help-tip[data-new-user-tooltip]:focus::after {
    transform: translateX(-50%) translateY(0);
}

/* New user custom select validation */
.new-user-field .form-error {
    display: none;
}

.new-user-field.has-error .form-error,
.new-user-field.is-invalid-label .form-error,
.new-user-field .is-invalid-input ~ .form-error,
.new-user-field .form-error.is-visible {
    display: block;
}

.new-user-field.has-error .new-user-select-wrap {
    border-color: var(--red);
    box-shadow: 0 0 0 1px rgba(255, 0, 31, 0.08), 0 8px 20px rgba(255, 0, 31, 0.04) inset;
}

/* Contact details verification page */
.dateofbirthpage .email-section {
    max-width: 940px;
    margin: 0 auto;
}

.dateofbirthpage .email-heading .ui-title {
    min-height: 34px;
}

.dateofbirthpage .email-form {
    margin-top: 28px;
}

.dateofbirthpage .email-field {
    width: 608px;
    max-width: 100%;
    margin: 30px auto 0;
}

.dateofbirthpage .email-label {
    display: block;
    margin: 0 0 12px;
    color: var(--navy);
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
}

.dateofbirthpage .email-label em {
    color: var(--red);
    font-style: normal;
}

.dateofbirthpage .email-input-wrap,
.dateofbirthpage .email-select-wrap {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    min-height: 58px;
    border: 1px solid #cbd6ea;
    border-radius: 7px;
    background: #fff;
    overflow: hidden;
}

.dateofbirthpage .email-input-icon {
    width: 52px;
    height: 100%;
    min-height: 58px;
    display: grid;
    place-items: center;
    color: var(--navy);
    font-size: 18px;
}

.dateofbirthpage .email-input-wrap .email-input,
.dateofbirthpage .email-select-wrap .email-input {
    width: 100%;
    height: 58px;
    min-height: 58px;
    margin: 0;
    padding: 0 16px 0 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    color: var(--navy);
    font-size: 16px;
    font-weight: 600;
}

.dateofbirthpage .email-input::placeholder {
    color: #aab4c7;
    opacity: 1;
}

.dateofbirthpage .email-inline-action {
    margin-right: 10px;
    padding: 8px 12px;
    border: 1px solid #bfe7ce;
    border-radius: 8px;
    background: #effcf3;
    color: #05a755;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.dateofbirthpage .dob-hidden-actions {
    margin-top: 10px;
}

.dateofbirthpage .email-providers .social-bt,
.dateofbirthpage .email-provider button {
    width: 100%;
}
#g_id_onload{
    display: none;
}
.nsm7Bb-HzV7m-LgbsSe{
    border:none !important;
}
.nsm7Bb-HzV7m-LgbsSe:hover .nsm7Bb-HzV7m-LgbsSe-MJoBVe,.nsm7Bb-HzV7m-LgbsSe:active .nsm7Bb-HzV7m-LgbsSe-MJoBVe, .nsm7Bb-HzV7m-LgbsSe:focus .nsm7Bb-HzV7m-LgbsSe-MJoBVe{
    background: transparent !important;
}
.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb:focus{
    outline: none !important;
}
.nsm7Bb-HzV7m-LgbsSe:focus-within{
     outline: none !important;
}
.dateofbirthpage .email-provider button {
    border: 0;
    background: transparent;
    color: var(--navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
}

.dateofbirthpage .email-actions {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.dateofbirthpage .email-actions .btn {
    width: min(100%, 300px);
    min-width: 300px;
}

.dateofbirthpage .email-continue span:empty::before {
    content: 'Continue';
}

.dateofbirthpage #loadingbtn:empty,
.dateofbirthpage #recaptcha-container:empty {
    display: none;
}

.dateofbirthpage .dob-hidden-actions:empty {
    display: none;
}

.dateofbirthpage .email-providers {
    align-items: stretch;
}

.dateofbirthpage .email-provider > div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dateofbirthpage .email-verify-action {
    align-self: stretch;
    min-width: 120px;
    height: 100%;
    min-height: 58px;
    margin: 0;
    padding: 0 22px;
    border-radius: 0;
    box-shadow: none;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.dateofbirthpage #verifyEmailBtn.email-verify-action {
    border: 1px solid var(--red);
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
   background: linear-gradient(180deg, #ff171f, #ee0008);
    color: #fff;
}

.dateofbirthpage #verifyEmailBtn.email-verify-action:hover {
    background: var(--red);
    color: #fff;
}

.dateofbirthpage #editEmailBtn.email-verify-action {
    background: var(--red);
    color: #fff;
}

/* Email OTP verification popup */
#verifyEmailModalpopup.email-otp-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(92vw, 430px);
    max-width: 430px;
    min-height: 0;
    margin: 0 !important;
    padding: 30px 30px 26px;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(9, 23, 63, 0.22);
    overflow: visible;
}

#verifyEmailModalpopup.email-otp-modal::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 74px;
    border-radius: 0 0 16px 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,16,24,0.035) 100%);
    pointer-events: none;
}

#verifyEmailModalpopup .email-otp-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 30px;
    height: 30px;
    border: 1px solid #d8e0f1;
    border-radius: 50%;
    background: #fff;
    color: #0b1551;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(9, 23, 63, 0.08);
    transition: color .2s ease, border-color .2s ease, transform .2s ease;
}

#verifyEmailModalpopup .email-otp-close:hover {
    color: var(--red);
    border-color: rgba(255, 16, 24, 0.28);
    transform: rotate(90deg);
}

#verifyEmailModalpopup .email-otp-head {
    padding-right: 46px;
    margin-bottom: 22px;
}

#verifyEmailModalpopup .email-otp-recipient {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: #071152;
    font-size: 15px;
    font-weight: 800;
}

#verifyEmailModalpopup .email-otp-recipient strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
     font-weight: 600;
}

#verifyEmailModalpopup .email-otp-mail-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #071152;
    font-size: 20px;
    flex: 0 0 auto;
}

#verifyEmailModalpopup .email-otp-edit {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff0f1;
    color: var(--red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex: 0 0 auto;
}

#verifyEmailModalpopup .email-otp-form {
    position: relative;
    z-index: 1;
}

#verifyEmailModalpopup .email-otp-label {
    display: block;
    margin: 0 0 14px;
    color: #071152;
    font-size: 14px;
    font-weight: 600;
}

#verifyEmailModalpopup .email-otp-label span:last-child {
    color: var(--red);
}

#verifyEmailModalpopup .email-otp-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

#verifyEmailModalpopup #otpEmailInput.email-otp-input {
    width: 100%;
    height: 54px;
    padding: 0 18px;
    border: 2px solid #dfe5f1;
    border-radius: 8px; 
    background-color: #fff;
    color: #071152;
    font-size: 22px;
    font-weight: 700;
    text-indent: 14px;
    box-shadow: 0 8px 18px rgba(40, 66, 119, 0.05);
    outline: 0;
    transition: border-color .2s ease, box-shadow .2s ease;
}

#verifyEmailModalpopup #otpEmailInput.email-otp-input:focus {
    border-color: #2e67ff;
    box-shadow: 0 0 0 4px rgba(46, 103, 255, 0.12), 0 10px 22px rgba(40, 66, 119, 0.1);
}

#verifyEmailModalpopup .email-otp-timer {
    min-width: 48px;
    color: var(--red);
    font-size: 14px;
    font-weight: 800;
    text-align: right;
}

#verifyEmailModalpopup .email-otp-resend {
    grid-column: 1 / -1;
    justify-self: end;
    margin-top: -10px;
    color: var(--red);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

#verifyEmailModalpopup .form-error,
#verifyEmailModalpopup .form-error_veirfyemail {
    margin: -8px 0 14px;
    color: var(--red);
    font-size: 12px;
    font-weight: 700;
}

#verifyEmailModalpopup .email-otp-submit {
    width: 100%;
    min-height: 48px;
    margin: 4px 0 0;
    border-radius: 6px;
    background: linear-gradient(180deg, #ff2a2f 0%, #ed1118 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 14px 30px rgba(255, 16, 24, 0.22);
}


/* Email OTP popup alignment refinements */
#verifyEmailModalpopup .email-otp-input-row {
    grid-template-columns: minmax(0, 270px) 58px;
    justify-content: space-between;
    align-items: center;
}

#verifyEmailModalpopup #otpEmailInput.email-otp-input {
    max-width: 270px;
    height: 54px;
    padding: 0 14px;
    text-indent: 12px;
    background-size: 68px 100%;
    background-repeat: repeat-x;
}

#verifyEmailModalpopup .email-otp-timer {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    min-width: 52px;
    min-height: 54px;
    color: #ff001f;
    font-size: 14px;
    font-weight: 800;
}

#verifyEmailModalpopup .email-otp-resend {
    grid-column: 1 / -1;
    justify-self: flex-end;
}

#verifyEmailModalpopup .email-otp-submit:empty::before {
    content: "Verify";
}

/* Email OTP popup single input with inline timer */
#verifyEmailModalpopup .email-otp-input-row {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 20px;
}

#verifyEmailModalpopup #otpEmailInput.email-otp-input {
    width: 100%;
    max-width: none;
    height: 45px;
    padding: 0 76px 0 20px;
    border: 1px solid #d7dce7;
    border-radius: 3px;
    background: #fff !important;
    color: #071152;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    text-indent: 0;
    box-shadow: none;
}

#verifyEmailModalpopup #otpEmailInput.email-otp-input::placeholder {
    color: #b9bdc8;
    font-size: 15px;
    font-weight: 500;
}

#verifyEmailModalpopup #otpEmailInput.email-otp-input:focus {
    border-color: #cbd3e1;
    box-shadow: 0 0 0 2px rgba(46, 103, 255, 0.08);
}

#verifyEmailModalpopup .email-otp-timer {
    position: absolute;
    top: 0;
    right: 16px;
    min-width: 48px;
    min-height: 45px;
    height: 45px;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    color: #ff001f;
    font-size: 14px;
    font-weight: 500;
    line-height: 45px;
    pointer-events: none;
}

#verifyEmailModalpopup .email-otp-resend {
    display: block;
    width: max-content;
    margin: 8px 0 0 auto;
}

#verifyEmailModalpopup button.email-otp-edit {
    border: 0;
    padding: 0;
    cursor: pointer;
}

#verifyEmailModalpopup button.email-otp-edit:focus-visible {
    outline: 2px solid rgba(255, 16, 24, 0.35);
    outline-offset: 2px;
}


/* Date of birth email verification state */
.dateofbirthpage .email-status-actions {
    min-width: 120px;
    height: 100%;
    min-height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 10px 4px 0;
}

.dateofbirthpage .email-status-actions #verifyEmailBtn.email-verify-action,
.dateofbirthpage .email-status-actions #verifyMobileBtn.email-verify-action {
    width: 120px;
    min-width: 120px;
    min-height: 46px;
    height: 46px;
    padding: 0 14px;
    border-radius: 3px;
    border: 0;
    background: linear-gradient(180deg, #ff171f, #ee0008);
    color: #fff;
    box-shadow: 0 14px 24px rgba(255, 0, 31, 0.18);
}

.dateofbirthpage .email-status-actions .verifyEmailBtn.email-inline-action,
.dateofbirthpage .email-status-actions .verifyMobileBtn.email-inline-action {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #05a755;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

.dateofbirthpage .email-status-actions .verifyEmailBtn.email-inline-action i,
.dateofbirthpage .email-status-actions .verifyMobileBtn.email-inline-action i {
    color: #05a755;
    font-size: 13px;
}

.dateofbirthpage .email-status-actions #editEmailBtn.email-edit-link,
.dateofbirthpage .email-status-actions #editMobileBtn.email-edit-link {
    min-width: 0;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--red);
    box-shadow: none;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.1;
    cursor: pointer;
}

.dateofbirthpage .email-status-actions #editEmailBtn.email-edit-link:hover,
.dateofbirthpage .email-status-actions #editEmailBtn.email-edit-link:focus,
.dateofbirthpage .email-status-actions #editMobileBtn.email-edit-link:hover,
.dateofbirthpage .email-status-actions #editMobileBtn.email-edit-link:focus {
    color: #d90017;
    text-decoration: underline;
    outline: none;
}

.dateofbirthpage .email-field {
    position: relative;
}

.dateofbirthpage .email-field.email-is-verified .email-input-wrap {
    grid-template-columns: 52px minmax(0, 1fr);
    overflow: visible;
}

.dateofbirthpage .email-field.email-is-verified .email-status-actions {
    position: absolute;
    top: -31px;
    right: 0;
    z-index: 2;
    min-width: 86px;
    min-height: 0;
    height: auto;
    padding: 0;
    align-items: flex-end;
    gap: 15px;
}

.dateofbirthpage .email-field.email-is-verified .email-status-actions #verifyEmailBtn.email-verify-action,
.dateofbirthpage .email-field.email-is-verified .email-status-actions #verifyMobileBtn.email-verify-action {
    display: none !important;
}

.dateofbirthpage .email-field.email-is-verified .email-status-actions .verifyEmailBtn.email-inline-action,
.dateofbirthpage .email-field.email-is-verified .email-status-actions .verifyMobileBtn.email-inline-action {
    justify-content: flex-end;
}

.dateofbirthpage .email-field.email-is-verified .email-status-actions #editEmailBtn.email-edit-link,
.dateofbirthpage .email-field.email-is-verified .email-status-actions #editMobileBtn.email-edit-link {
    margin-right: 2px;
    margin-top: 22px;
}



/* Proof upload validation state */
.document-page .upload-row,
.document-page .document-select-field,
.document-page .nominee-field,
.document-page .signature-pad {
    scroll-margin-top: 150px;
}  

/* .document-page .upload-row.is-invalid,
.document-card .upload-row.is-invalid {
    border-color: var(--red);
    box-shadow: none;
} */

.document-page .document-select-field.is-invalid .document-control,
.document-page .document-select-field .document-control.is-invalid,
.document-card .document-select-field.is-invalid .document-control,
.document-card .document-select-field .document-control.is-invalid {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(255, 16, 24, 0.08);
}

.document-page .document-error,
.document-page .form-error.is-visible,
.document-card .document-error,
.document-card .form-error.is-visible {
    color: var(--red);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
}

.document-page .upload-copy > .row-validation-error {
    display: block;
    margin-top: 10px;
}

.document-page .upload-row-bank > .row-validation-error,
.document-page .upload-row-pan > .row-validation-error {
    grid-column: 2 / 3;
    align-self: end;
    margin-top: 8px;
}


.document-page .document-select-field > .document-error {
    display: block;
    margin-top: 7px;
}

.document-page .upload-row .up_error.is-visible,
.document-page .upload-row .signer.is-visible {
    display: block !important;
    margin-top: 10px;
}

.document-page .upload-row-signature .signer.is-visible,
.document-page .upload-row-financial .up_error.is-visible {
    grid-column: 2 / 3;
}




.bank-mismatch-modal.reveal {
    width: min(92vw, 560px);
    max-width: 560px;
    padding: 46px 48px 48px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    text-align: center;
    box-shadow: 0 28px 70px rgba(3, 12, 45, 0.24);
}

.bank-mismatch-modal .doc-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
}

.bank-mismatch-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffe0e5;
    color: #ff0025;
    font-size: 30px;
}

.bank-mismatch-modal .nomino-cunt h2 {
    margin: 0 auto 28px;
    max-width: 500px;
    color: #030a3f;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
}

.bank-mismatch-actions {
    display: grid;
    gap: 14px;
    width: min(100%, 330px);
    margin: 0 auto;
}

.bank-mismatch-actions .btn {
    width: 100%;
    min-height: 54px;
    justify-content: center;
}

.bank-mismatch-actions .btn-soft-red {
    border-color: transparent;
    background: #ffe3e6;
    color: #030a3f;
}





.personal-form .has-visible-error .form-error.is-visible,
.personal-form .form-error.is-visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    margin-top: 8px !important;
    color: #ff002b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.personal-form .declaration-panel .declaration-check.declaration-error {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 6px 0px !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

.personal-form .declaration-panel .declaration-check.declaration-error input[type="radio"],
.personal-form .declaration-panel .declaration-check.declaration-error input[type="checkbox"] {
    border-color: #ff002b !important;
}



.personal-form .declaration-panel .declaration-check.dark-text1 + .declaration-check + .declaration-check + .declaration-check.dark-text1 {
    display: block !important;
    clear: both !important;
    margin-top: 22px !important;
}

.personal-form .declaration-panel .declaration-check.dark-text1 + .declaration-check.declaration-error,
.personal-form .declaration-panel .declaration-check.dark-text1 + .declaration-check + .declaration-check.declaration-error {
    width: auto !important;
    max-width: none !important;
}

.personal-form .declaration-panel .declaration-grid {
    display: block !important;
}

.personal-form .declaration-panel .declaration-check.dark-text1 {
    display: block !important;
    clear: both !important;
    margin: 18px 0 8px !important;
}



.personal-form .declaration-panel label.declaration-check.gf,
.personal-form .declaration-panel label.declaration-check.data-check-all {
    display: flex !important;
    width: fit-content !important;
    margin: 15px 0 !important;
    cursor: pointer !important;
}


.personal-form .dayco-plan-section {
    margin: 18px 0 22px;
}

.personal-form .dayco-plan-heading {
    margin: 0 0 12px;
}

.personal-form .dayco-plan-heading h6,
.personal-form .dayco-bsda-section h6 {
    margin: 0 0 12px;
    color: #030a3f;
    font-size: 14px;
    font-weight: 800;
}

.personal-form .dayco-plan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.personal-form .dayco-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-height: 74px;
    padding: 14px 18px;
    border: 1px solid #b9c8e8;
    border-radius: 6px;
    background: #fff;
    color: #030a3f;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.personal-form .dayco-plan-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.personal-form .dayco-plan-card.is-selected,
.personal-form .dayco-plan-card:has(input:checked) {
    /* border-color: #ff002b;
    background: #fff6f7;
    color: #ff002b; */

     border-color: var(--red);
    color: #fff;
    background: var(--red);
}

.personal-form .dayco-plan-card:hover {
    /* border-color: #ff002b;
    background: #fffafa;
    color: #ff002b; */
}

.personal-form .dayco-plan-card:focus-within {
    outline: 0px solid rgba(47, 91, 255, 0.22);
    outline-offset: 0px;
}

.personal-form .dayco-plan-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}

.personal-form .dayco-plan-desc {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.personal-form .dayco-ddpi-note {
    margin: 14px 0 4px;
    padding: 18px 20px;
    border-radius: 4px;
    background: #f5f5f5;
    color: #030a3f;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

.personal-form .dayco-ddpi-note a {
    color: #ff002b;
}
label#incomes {
    margin-top: 15px;
}




.personal-form .residential-status-field {
    grid-column: 1 / -1;
}

.personal-form .residential-status-field select {
    width: min(100%, 520px);
}


.residential-page .main-container {
    width: min(1180px, calc(100% - 180px)) !important;
    max-width: 1180px !important;
    margin: 20px auto 0 !important;
    padding: 0 !important;
    display: block !important;
    grid-template-columns: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.residential-container {
    max-width: 1180px !important;
}

.residential-card {
    width: 100%;
    min-height: 560px;
    margin: 0 auto;
    padding: 0px 30px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #edf2fb;
    box-shadow: 0 24px 70px rgba(4, 15, 53, 0.08);
    text-align: center;
}

.residential-status-icon {
    position: relative;
    width: 100px;
    height: 90px; 
    margin: 0 auto 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--red);
}

.residential-status-icon::before {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #ffe3e8;
    box-shadow: 0 0 0 18px rgba(255, 0, 43, 0.06);
}

.residential-status-icon::after {
    content: "";
    position: absolute;
    inset: 4px 0 auto auto;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20px 30px, rgba(255, 0, 43, 0.16) 0 5px, transparent 6px),
        radial-gradient(circle at 128px 34px, rgba(255, 0, 43, 0.14) 0 6px, transparent 7px),
        linear-gradient(45deg, transparent 47%, rgba(255, 0, 43, 0.18) 48% 52%, transparent 53%) 18px 82px / 12px 12px no-repeat,
        linear-gradient(-45deg, transparent 47%, rgba(255, 0, 43, 0.18) 48% 52%, transparent 53%) 18px 82px / 12px 12px no-repeat,
        linear-gradient(45deg, transparent 47%, rgba(255, 0, 43, 0.18) 48% 52%, transparent 53%) 126px 66px / 12px 12px no-repeat,
        linear-gradient(-45deg, transparent 47%, rgba(255, 0, 43, 0.18) 48% 52%, transparent 53%) 126px 66px / 12px 12px no-repeat;
}

.residential-status-icon i {
    position: relative;
    z-index: 1;
    color: var(--red);
    font-size: 60px;
    filter: drop-shadow(0 12px 18px rgba(255, 0, 43, 0.18));
}

.residential-status-icon span {
    position: absolute;
    z-index: 2;
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    font-weight: 900;
}

.residential-heading {
    margin-bottom: 22px;
}

.residential-heading .ui-title {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.residential-copy {
    max-width: 470px;
    margin: 0 auto 24px;
    color: var(--navy);
    font-size: 16px;
    line-height: 1.7;
    font-weight: 600;
}

.residential-copy strong {
    color: var(--red);
    font-weight: 800;
}

.residential-contact,
.residential-back {
    width: min(100%, 350px);
    min-height: 58px;
    justify-content: center;
    margin: 8px 0 0;
    font-size: 16px;
}

.residential-back {
    background: #fff;
}


#ddpi_options .declaration-check{
    margin-bottom: 15px;
}

.upload-row-bank.upload-row {
    min-height: 132px;
    grid-template-columns: 78px minmax(320px, 1fr) 240px 220px;
    grid-template-areas: "icon copy select action";
    align-items: center;
}

.upload-row-bank.upload-row.fetchaggregator {
    grid-template-columns: 78px minmax(320px, 1fr) minmax(360px, 1fr);
    grid-template-areas: "icon copy select";
}

.upload-row-bank .upload-icon {
    grid-area: icon;
}

.upload-row-bank .upload-copy {
    grid-area: copy;
    grid-column: auto;
}

.upload-row-bank .document-select-field {
    grid-area: select;
    width: 100%;
}

.upload-row-bank .v_btn {
    grid-area: action;
}

.upload-row-bank .document-upload-input {
    grid-area: action;
    justify-self: end;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.upload-row-bank .upload-action {
    width: 190px;
    justify-content: center;
}

.upload-row-bank .upload-preview {
    width: min(100%, 220px);
}

/* Keep the bank proof uploaded-file delete action visible. */
.upload-row-bank .upload-preview {
    width: min(100%, 260px);
    grid-template-columns: 62px minmax(0, 1fr) 34px;
    overflow: visible;
}

.upload-row-bank .upload-preview [data-clear-upload="bank"] {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    width: 34px;
    height: 34px;
    justify-self: end;
}
/* FRS eSign status page */


.frs-esign-page .main-container {
    max-width: 1240px;
    margin-top: 34px;
    overflow: hidden;
}

.frs-esign-page .esign-section {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 40px 40px;
}

.frs-esign-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: min(100%, 590px);
    margin: 0 auto;
}

.frs-esign-card::before,
.frs-esign-card::after {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: 0.9;
}

.frs-esign-card::before {
    right: -286px;
    top: -44px;
    width: 150px;
    height: 110px;
    background-image: radial-gradient(#dce5ff 2px, transparent 2px);
    background-size: 18px 18px;
}

.frs-esign-card::after {
   left: -554px;
    bottom: -47px;
    width: 380px;
    height: 260px;
    border-radius: 50%;
    border: 1px solid rgba(188, 203, 239, 0.36);
    box-shadow: 34px 28px 0 rgba(244, 248, 255, 0.9), 68px 54px 0 rgba(244, 248, 255, 0.65);
}

.frs-esign-hero,
.frs-esign-title,
.frs-esign-copy,
.frs-esign-actions {
    position: relative;
    z-index: 1;
}

.frs-esign-hero {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.frs-esign-success-img {
    width: min(100%, 260px);
    height: auto;
    display: block;
}

.frs-esign-title {
    max-width: 720px;
    margin: 0 auto 14px;
    color: var(--navy);
    font-size: clamp(36px, 4.2vw, 50px);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.frs-esign-title::before,
.frs-esign-title::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 22px 9px;
    border-top: 3px solid var(--red);
    border-bottom: 3px solid var(--red);
    transform: rotate(28deg);
}

.frs-esign-title::after {
    transform: rotate(-28deg);
}

.frs-esign-title + .frs-esign-copy::before {
    content: "";
    display: block; 
    width: 88px;
    height: 5px;
    margin: 0 auto 24px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--red) 0 76%, transparent 76% 86%, var(--red) 86% 100%);
}

.frs-esign-copy {
    max-width: 930px;
    margin: 0 auto;
    color: var(--navy);
    font-size: clamp(18px, 1.5vw, 18px);
    line-height: 1.55;
    font-weight: 500;
}

.frs-esign-copy b,
.frs-esign-copy strong {
    font-weight: 800;
}

.frs-esign-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 30px;
}

.frs-esign-actions form {
    margin: 0;
}

.frs-esign-actions .btn {
     width: 100%;
    min-width: 180px;
        height: 54px;
    min-height: 54px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
}

.frs-esign-actions .frs-view-btn {
    box-shadow: 0 18px 30px rgba(255, 16, 24, 0.20);
}

.frs-esign-actions .frs-esign-url-btn {
    background: #fff;
}

.frs-esign-note[hidden] {
    display: none !important;
}
/* Payment gateway page */

.payment-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.85fr);
  gap: 58px;
  align-items: center;
  min-height: 610px;
  padding: 48px 44px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 26px;
  box-shadow: 0 22px 60px rgba(20, 46, 104, 0.08);
  overflow: hidden;
  position: relative;
}

.payment-shell::before,
.payment-shell::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0.7;
}

.payment-shell::before {
  width: 360px;
  height: 220px;
  left: -115px;
  bottom: -92px;
  border-radius: 50%;
  border: 1px solid rgba(39, 98, 255, 0.13);
  box-shadow: inset 0 0 0 28px rgba(39, 98, 255, 0.025), inset 0 0 0 58px rgba(39, 98, 255, 0.018);
}

.payment-shell::after {
  width: 130px;
  height: 130px;
  right: 44px;
  top: 28px;
  background-image: radial-gradient(rgba(45, 100, 255, 0.24) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
}

.payment-left,
.payment-summary-form {
  position: relative;
  z-index: 1;
}

.payment-title-row {
  display: flex;
  align-items: center;
  gap: 28px;
}

.payment-icon-badge {
  width: 90px;
  height: 90px; 
  flex: 0 0 90px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  background: rgba(255, 0, 38, 0.1);
  position: relative;
  font-size: 34px;
}

.payment-icon-badge .fa-shield-halved {
  position: absolute;
  right: 21px;
  bottom: 29px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: var(--red);
  font-size: 13px;
  border: 3px solid #fff;
}

.payment-title {
  margin: 0;
  color: var(--navy);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
}

.payment-subtitle {
  margin: 8px 0 0;
  color: #34436c;
  font-size: 16px;
  font-weight: 500;
}

.payment-divider {
  height: 1px;
  background: #cbd7ee;
  margin: 34px 0 38px;
}

.payment-field-head h2,
.payment-summary-title h2 {
  margin: 0;
  color: var(--navy);
  font-size: 20px; 
  font-weight: 700;
}

.payment-field-head p {
  margin: 14px 0 22px;
  color: #23345f;
  font-size: 16px;
  font-weight: 500;
}

.payment-input-wrap {
  width: 100%;
  max-width: 540px;
  height: 66px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 0 24px;
  border: 1px solid #b9caee;
  border-radius: 8px;
  background: #fff;
}

.payment-input-wrap i {
  color: #8da0cc;
  font-size: 21px;
}

.payment-input-wrap input[type="text"] {
  flex: 1;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  color: var(--navy);
  font-size: 18px;
  font-weight: 700;
  background: transparent;
  box-shadow: none;
}

.payment-input-wrap input[type="text"]::placeholder {
  color: #97a4c6;
}

.payment-coupon-btn {
  width: 370px;
  height: 60px;
  margin-top: 24px;
  gap: 12px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 9px;
} 

.payment-coupon-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.payment-promo-note {
  max-width: 540px;
  min-height: 122px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 46px;
  padding: 22px 28px;
  border-radius: 16px;
  background: linear-gradient(105deg, rgba(255, 0, 38, 0.075), rgba(255, 0, 38, 0.02));
  color: var(--navy);
  position: relative;
  overflow: hidden;
  display:none;
}

.payment-note-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--red);
  background: rgba(255, 0, 38, 0.12);
  font-size: 20px;
}

.payment-promo-note strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
}

.payment-promo-note p {
  margin: 8px 0 0;
  color: #112355;
  font-size: 15px;
  line-height: 1.35;
}

.payment-note-mark {
  position: absolute;
  right: 22px;
  bottom: 20px;
  color: rgba(255, 0, 38, 0.16);
  font-size: 33px;
  transform: rotate(-14deg);
}

.payment-summary-card {
  padding: 32px;
  border: 1px solid #d8e1f3;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 48px rgba(20, 46, 104, 0.08);
}

.payment-summary-title {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 32px;
}

.payment-summary-title > span {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--red);
  background: rgba(255, 0, 38, 0.1);
  font-size: 20px;
}

.payment-summary-lines {
  display: grid;
  gap: 26px;
  padding-bottom: 24px;
  border-bottom: 1px solid #d5deee;
}

.payment-summary-line,
.payment-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: #2c3a63;
  font-size: 16px;
}

.payment-summary-line strong,
.payment-total-row strong {
  color: var(--navy);
  font-weight: 700;
  white-space: nowrap;
}

.payment-summary-line .is-discount {
  color: #00a862;
}

.payment-total-row {
  margin: 22px 0 34px;
  color: var(--navy);
  font-weight: 800;
}

.payment-total-row strong {
  color: var(--red);
  font-size: 22px;
}

.payment-checkout-btn {
  width: 100%;
  min-height: 64px;
  gap: 18px;
  justify-content: center;
  border-radius: 11px;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 16px 26px rgba(255, 0, 38, 0.22);
  padding: 0px 20px;
}

.payment-checkout-btn .fa-arrow-right {
  margin-left: auto;
}

.payment-lock {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.payment-secure-row {
  display: none;
  align-items: center;
  gap: 18px;
  margin-top: 34px;
  color: #33446e;
}

.payment-secure-row > span {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #00a862;
  background: rgba(0, 168, 98, 0.12);
  font-size: 22px;
}

.payment-secure-row strong {
  display: block;
  color: #253762;
  font-size: 16px;
  font-weight: 800;
}

.payment-secure-row p {
  margin: 5px 0 0;
  color: #4b5a80;
  font-size: 14px;
}

.payment-summary-card .coupon-remove {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--red);
  cursor: pointer;
}



/* Payment page container fix */
.payment-page .main-container.payment-container {
  display: block;
  grid-template-columns: none;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.payment-bottom-nav {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 18px;
  border-top: 1px solid #d9dfec;
  position: relative;
  z-index: 1;
}


.dayco-plan-readmore-row {
  display: flex;
  justify-content: flex-end;
  margin: 8px 4px 18px;
}

.dayco-plan-readmore {
  display: inline-flex;
  align-self: flex-end;
  margin-top: 10px;
  color: var(--red);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}

.dayco-plan-readmore:hover,
.dayco-plan-readmore:focus {
  color: var(--red);
  text-decoration: underline;
}

/* Keep declaration radio options in the same row on personal data page */
.personal-form .declaration-panel .declaration-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px 46px !important;
    margin-top: 15px;
}

.personal-form .declaration-panel .declaration-grid > .declaration-check.dark-text1 {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 18px 0 2px !important;
    clear: none !important;
}

.personal-form .declaration-panel .declaration-grid > label.declaration-check:not(.gf):not(.data-check-all) {
    display: inline-flex !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    white-space: normal !important;
    cursor: pointer !important;
}

.personal-form .declaration-panel .declaration-grid > label.declaration-check.gf {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 4px 0 !important;
}

.personal-form .declaration-panel .declaration-grid > label.declaration-check.data-check-all {
    flex: 0 0 100% !important;
    width: fit-content !important;
    margin: 8px 0 0 !important;
}
div#recaptcha-container {
    display: none;  
}
/* Chosen language dropdown */
.lang-select-wrap .chosen-container {
  width: auto !important;
  min-width: 175px;
  max-width: 185px;
  color: inherit;
  font: inherit;
}   

.lang-select-wrap .chosen-container-single .chosen-single {
  display: flex;
  align-items: center;
  height: auto;
  min-height: 20px;
  padding: 0px 42px 0px 52px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font-size: 15px;  
  line-height: 1;
  height: 56px;
}
.mobile-tel{
    display:none;
}
.lang-select{
    color:#fff;
}
.lang-select-wrap .chosen-container-single .chosen-single span {
  margin-right: 0;
  color: inherit;
  line-height: 1;
  white-space: nowrap;
}

.lang-select-wrap .chosen-container-single .chosen-single div,
.lang-select-wrap .chosen-container-single .chosen-search,
.lang-select-wrap .chosen-container-single .chosen-search input {
  display: none !important;
}

.lang-select-wrap .chosen-container .chosen-drop {
  position: absolute;
  display: none;
    left: 10px;
    top: calc(100% + 6px);
    min-width: 175px;
    border: 1px solid #dfe6f4;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 34px rgba(15, 31, 66, .16);
    overflow: hidden;
    z-index: 20000;
}

.lang-select-wrap .chosen-container.chosen-with-drop .chosen-drop {
  display: block;
}

.lang-select-wrap .chosen-container .chosen-results {
  margin: 0;
  padding: 6px;
  max-height: none;
}

.lang-select-wrap .chosen-container .chosen-results li {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--navy);
    font-weight: 600;
    line-height: 1.2;
    list-style: none;
    cursor: pointer;
    font-size: 14px;
}

.lang-select-wrap .chosen-container .chosen-results li.result-selected {
  background: #f3f6ff;
}

.lang-select-wrap .chosen-container .chosen-results li.highlighted {
  background: var(--red);
  color: #fff;
}
/* Aadhaar and PAN details page */
.aadhaar-details-page {
  margin: 0;
  min-height: 100vh;
  background: #f1f5fd;
  color: #09124a;
  font-family: "Inter", sans-serif;
}
.aadhaar-details-page .page-bg { min-height: 100vh; padding: 16px 0 0; }
.aadhaar-details-page .aadhaar-details-container {
  display: block;
  grid-template-columns: none;
  width: min(1180px, calc(100% - 32px));
  max-width: 1180px;
  margin: 24px auto 20px;
  padding: 0;
}
.aadhaar-details-page .aadhaar-details-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 34px 38px 30px;
  border: 1px solid #e4eafa;
  border-radius: 20px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 16px 42px rgba(25, 55, 120, .08);
}
.aadhaar-details-page .main-panel {
  display: block !important;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
}
.aadhaar-details-page .main-panel > .title { margin: 0 0 28px; text-align: center; }
.aadhaar-details-page .main-panel > .title::before {
  display: grid;
  width: 70px;
  height: 70px;
  margin: 0 auto 14px;
  place-items: center;
  border-radius: 50%;
  background: #edf3ff;
  color: #3158ef;
  font: 900 30px/1 "Font Awesome 6 Free";
  content: "\f2bb";
}
.aadhaar-details-page .main-panel > .title h5 {
  margin: 0;
  color: #081459;
  font-size: 28px;
  font-weight: 700;
}
.aadhaar-details-page .grid-x { display: block; margin: 0; }
.aadhaar-details-page .t_head { margin: 0 0 18px; text-align: center; }
.aadhaar-details-page .t_head h2 {
  margin: 0 0 7px;
  color: #081459;
  font-size: 23px;
  font-weight: 700;
}
.aadhaar-details-page .t_head p { margin: 0; color: #526083; font-size: 14px; }
.aadhaar-details-page .photo_cap { width: 100%; margin: 0; padding: 0; }
.aadhaar-details-page .a_details {
  width: 100%;
  margin-bottom: 30px;
  overflow: hidden;
  border: 1px solid #dce4f4;
  border-radius: 14px;
  background: #fff;
}
.aadhaar-details-page .a_details table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  background: #fff;
  table-layout: fixed;
}
.aadhaar-details-page .a_details tr { border-bottom: 1px solid #e5eaf4; }
.aadhaar-details-page .a_details tr:last-child { border-bottom: 0; }
.aadhaar-details-page .a_details th,
.aadhaar-details-page .a_details td {
  height: 35px;
  padding: 5px 16px; 
  border: 0;
  color: #111936;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
}
.aadhaar-details-page .a_details th { width: 24%; background: #f7f9fe; font-weight: 700; }
.aadhaar-details-page .a_details td { font-weight: 500; }
.aadhaar-details-page .a_details th + td,
.aadhaar-details-page .a_details td + th,
.aadhaar-details-page .a_details td + td { border-left: 1px solid #e5eaf4; }
.aadhaar-details-page .a_details .doc_type {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.aadhaar-details-page .a_details .verify_img {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #079447;
  white-space: nowrap;
}
.aadhaar-details-page .a_details .verify_img img { width: 22px; height: 22px; object-fit: contain; }
.aadhaar-details-page .nritbles .verify_img { display: none; }
.aadhaar-details-page .a_details td[rowspan] img {
  display: block;
  width: 150px;
  max-height: 185px;
  margin: auto;
  border-radius: 10px;
  object-fit: cover;
}
.aadhaar-details-page #change_adhaar {
  display: inline-flex;
  align-items: center;
  margin: -8px 0 18px;
  color: #3158d4;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.aadhaar-details-page #change_adhaar::before {
  margin-right: 8px;
  font: 900 13px/1 "Font Awesome 6 Free";
  content: "\f2ea";
}
.aadhaar-details-page .foot-sec { display: flex; justify-content: flex-end; margin: 0; padding-top: 4px; }
.aadhaar-details-page .foot-sec .b-btn {
  display: inline-flex;
  min-width: 150px;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 0;
  padding: 13px 24px;
  border: 0;
  border-radius: 9px;
  background: #ff0b25;
  box-shadow: 0 10px 24px rgba(255, 11, 37, .2);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.aadhaar-details-page .foot-sec .b-btn:hover,
.aadhaar-details-page .foot-sec .b-btn:focus { background: #df001b; }
.aadhaar-details-page .foot-sec .b-btn img { width: 18px; height: auto; }
@media (max-width: 767px) {
  .aadhaar-details-page .page-bg { padding-top: 8px; }
  .aadhaar-details-page .aadhaar-details-container { width: calc(100% - 20px); margin-top: 14px; }
  .aadhaar-details-page .aadhaar-details-card { padding: 24px 14px 20px; border-radius: 16px; }
  .aadhaar-details-page .main-panel > .title { margin-bottom: 23px; }
  .aadhaar-details-page .main-panel > .title::before { width: 58px; height: 58px; font-size: 25px; }
  .aadhaar-details-page .main-panel > .title h5 { font-size: 22px; }
  .aadhaar-details-page .t_head h2 { font-size: 20px; }
  .aadhaar-details-page .a_details { border-radius: 11px; }
  .aadhaar-details-page .a_details table,
  .aadhaar-details-page .a_details tbody,
  .aadhaar-details-page .a_details tr { display: block; width: 100%; }
  .aadhaar-details-page .a_details tr {
    display: grid;
    grid-template-columns: minmax(118px, 40%) minmax(0, 1fr);
  }
  .aadhaar-details-page .a_details th,
  .aadhaar-details-page .a_details td {
    display: block;
    width: auto !important;
    height: auto;
    min-height: 46px;
    padding: 11px 12px;
    font-size: 13px;
  }
  .aadhaar-details-page .a_details td[colspan="3"] { grid-column: 2; }
  .aadhaar-details-page .a_details td[rowspan] {
    grid-column: 1 / -1;
    border-top: 1px solid #e5eaf4;
    border-left: 0;
  }
  .aadhaar-details-page .a_details .doc_type { align-items: flex-start; flex-direction: column; }
  .aadhaar-details-page .foot-sec .b-btn { width: 100%; }
}

/* Align optional Aadhaar action with the primary eSign action */
@media (min-width: 1211px) {
  .esign-page .esign-actions {
    justify-content: flex-start;
    gap: 16px;
  }
  .esign-page .esign-actions .pan-prev {
    margin-right: auto;
  }
  .esign-page .esign-actions .without_aadhaar_btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* UUID page scroll and optional action sizing */
.esign-page .page-bg {
  height: auto;
  max-height: none;
  overflow-x: clip;
  overflow-y: visible;
}
@media (min-width: 1211px) {
  .esign-page .esign-actions .without_aadhaar_btn {
    height: 58px;
    min-height: 58px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
  }
}

/* Accessibility toolbox theme */
body #mic-init-access-tool .mic-access-tool-box {
  box-sizing: border-box;
  width: 360px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  bottom: 12px;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--navy);
  background: #f4f6fb;
  border: 1px solid #dfe5f1;
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(9, 20, 63, 0.22);
  scrollbar-color: #c8d1e2 transparent;
  scrollbar-width: thin;
}

body #mic-init-access-tool .mic-access-tool-box.mic-access-tool-box-right {
  right: 12px;
}

body #mic-init-access-tool .mic-access-tool-box:not(.mic-access-tool-box-right) {
  left: 12px;
}

body #mic-init-access-tool .mic-access-tool-box::-webkit-scrollbar {
  width: 7px;
}

body #mic-init-access-tool .mic-access-tool-box::-webkit-scrollbar-thumb {
  background: #c8d1e2;
  border-radius: 10px;
} 

body #mic-init-access-tool .mic-access-tool-box .mic-access-tool-box-header {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 58px;
  padding: 19px 118px 16px 18px;
  color: #fff;
  background: var(--red);
  font-size: 14px !important;
  font-weight: 800;
  letter-spacing: 0.05em;
}

body #mic-init-access-tool .mic-access-tool-box .mic-access-tool-box-header button {
  top: 11px;
  right: 12px;
  min-height: 34px;
  padding: 8px 11px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 9px;
  font-size: 13px !important;
  line-height: 1;
} 

body #mic-init-access-tool .mic-access-tool-box .mic-access-tool-box-header button:hover,
body #mic-init-access-tool .mic-access-tool-box .mic-access-tool-box-header button:focus-visible {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
}

body #mic-init-access-tool .mic-access-tool-box > div:not(.mic-access-tool-box-header):not(.mic-toolbox-all-credits) {
  box-sizing: border-box;
  max-width: none;
  margin: 9px 9px 0;
  padding: 0 10px 12px;
  background: #fff;
  border: 1px solid #e3e8f2;
  border-radius: 13px;
  box-shadow: 0 5px 16px rgba(18, 39, 84, 0.05);
}

body #mic-init-access-tool .mic-access-tool-box > div:not(.mic-access-tool-box-header):not(.mic-toolbox-all-credits) .mic-subtitle-span {
  grid-column: 1 / -1;
  padding: 13px 4px 11px;
  color: var(--navy);
  font-size: 13px !important;
  font-variant: normal;
  font-weight: 800;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

body #mic-init-access-tool .mic-access-tool-box .mic-disable-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 10px;
}

body #mic-init-access-tool .mic-access-tool-box .mic-disable-buttons button,
body #mic-init-access-tool .mic-access-tool-box .mic-buttons-block button {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  color: var(--navy);
  background: #fff;
  border: 1px solid #d9e0ec;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(18, 39, 84, 0.04);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body #mic-init-access-tool .mic-access-tool-box .mic-disable-buttons button {
  min-height: 58px;
  padding: 8px 9px;
  font-size: 13px !important;
}

body #mic-init-access-tool .mic-access-tool-box .mic-disable-buttons button span,
body #mic-init-access-tool .mic-access-tool-box .mic-disable-buttons button img {
  color: var(--navy);
  font-size: 13px !important;
}

body #mic-init-access-tool .mic-access-tool-box .mic-disable-buttons button img {
  width: 20px;
  height: 20px;
  margin-left: 5px;
  object-fit: contain;
}

body #mic-init-access-tool .mic-access-tool-box .mic-buttons-block {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding-bottom: 12px;
}

body #mic-init-access-tool .mic-access-tool-box .mic-buttons-block button {
  height: 82px;
  padding: 9px 5px;
  font-size: 13px !important;
}

body #mic-init-access-tool .mic-access-tool-box .mic-buttons-block button span,
body #mic-init-access-tool .mic-access-tool-box .mic-buttons-block.mic-contrast-block button span,
body #mic-init-access-tool .mic-access-tool-box .mic-buttons-block.mic-fonts-block button span {
  position: static;
  width: auto;
  color: var(--navy);
  font-size: 12px !important;
  line-height: 1.18 !important;
}

body #mic-init-access-tool .mic-access-tool-box .mic-buttons-block button img {
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 auto 7px;
  object-fit: contain;
}

body #mic-init-access-tool .mic-access-tool-box .mic-buttons-block.mic-color-block button img {
  width: 34px;
  height: 34px;
}

body #mic-init-access-tool .mic-access-tool-box .mic-disable-buttons button:hover,
body #mic-init-access-tool .mic-access-tool-box .mic-disable-buttons button:focus-visible,
body #mic-init-access-tool .mic-access-tool-box .mic-buttons-block button:hover,
body #mic-init-access-tool .mic-access-tool-box .mic-buttons-block button:focus-visible {
  color: var(--red);
  background: #fff5f6 !important;
  border-color: #ff8c99;
  box-shadow: 0 5px 13px rgba(255, 0, 32, 0.1);
  transform: translateY(-1px);
}

body #mic-init-access-tool .mic-access-tool-box .mic-disable-buttons button:hover span,
body #mic-init-access-tool .mic-access-tool-box .mic-disable-buttons button:focus-visible span,
body #mic-init-access-tool .mic-access-tool-box .mic-buttons-block button:hover span,
body #mic-init-access-tool .mic-access-tool-box .mic-buttons-block button:focus-visible span {
  color: var(--red);
}

body #mic-init-access-tool .mic-access-tool-box .mic-disable-buttons button.vi-enabled,
body #mic-init-access-tool .mic-access-tool-box .mic-buttons-block button.vi-enabled,
body #mic-init-access-tool .mic-access-tool-box .mic-buttons-block button.vi-font-enabled {
  background: #fff1f3;
  border: 2px solid var(--red);
  box-shadow: 0 0 0 3px rgba(255, 0, 32, 0.08);
}

body #mic-init-access-tool .mic-access-tool-box .mic-disable-buttons button.vi-enabled::before,
body #mic-init-access-tool .mic-access-tool-box .mic-buttons-block button.vi-enabled::before {
  top: 5px;
  right: 6px;
  color: #00b956;
  font-size: 14px !important;
}

body #mic-init-access-tool .mic-access-tool-box .link-access-page {
  max-width: none;
  margin: 9px !important;
  padding: 7px;
}

body #mic-init-access-tool .mic-access-tool-box .link-access-page #mic-toolbox-disable-buttons-reset-all {
  min-height: 44px;
  padding: 10px 14px;
  color: var(--navy);
  background: #f6f8fc;
  border: 1px solid #dfe5ef;
  border-radius: 9px;
  font-size: 13px !important;
}

body #mic-init-access-tool .mic-access-tool-box .link-access-page #mic-toolbox-disable-buttons-reset-all span {
  color: var(--navy);
  font-size: 13px !important;
}

body #mic-init-access-tool .mic-access-tool-box .link-access-page #mic-toolbox-disable-buttons-reset-all:hover,
body #mic-init-access-tool .mic-access-tool-box .link-access-page #mic-toolbox-disable-buttons-reset-all:focus-visible {
  color: var(--red);
  background: #fff5f6 !important;
  border-color: #ff8c99;
}

body #mic-init-access-tool .mic-access-tool-box .mic-toolbox-all-credits {
  padding: 8px 10px !important;
  background: var(--navy) !important;
}

/* Accessibility toolbox launcher */
body #mic-init-access-tool .mic-access-tool-general-button {
  width: 66px;
  height: 66px;
  bottom: 18px;
  left: 18px;
  padding: 0;
  overflow: visible;
  color: #fff;
  background: linear-gradient(145deg, var(--red) 0%, #e40018 100%);
  border: 3px solid #fff;
  border-radius: 50%;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

body #mic-init-access-tool .mic-access-tool-general-button.mic-access-tool-general-button-right {
  right: 18px;
  left: auto;
  border-radius: 50%;
}

body #mic-init-access-tool .mic-access-tool-general-button > div {
  box-sizing: border-box;
  display: grid;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  place-items: center;
}

body #mic-init-access-tool .mic-access-tool-general-button > div::before {
  content: '\f29a';
  color: #fff;
  font-family: 'Font Awesome 6 Free';
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
}

body #mic-init-access-tool .mic-access-tool-general-button > div img {
  display: none;
}

body #mic-init-access-tool .mic-access-tool-general-button > div span {
    position: absolute;
    top: -11px;
    right: 0px;
    min-width: 44px;
    margin: 0;
    padding: 3px 5px;
    color: #fff;
    background: var(--navy);
    border: 1px solid #fff;
    border-radius: 999px;
    font-size: 11px !important;
    letter-spacing: 0.02em;
  line-height: 1;
}


body #mic-init-access-tool .mic-access-tool-general-button:hover,
body #mic-init-access-tool .mic-access-tool-general-button:focus-visible {
  color: #fff;
  background: linear-gradient(145deg, #ff2943 0%, var(--red) 100%);
  border-color: #fff;
  box-shadow: 0 9px 20px rgba(9, 20, 63, 0.24), 0 0 0 2px rgba(255, 0, 32, 0.12);
  transform: translateY(-2px) scale(1.03);
}

body #mic-init-access-tool .mic-access-tool-general-button:hover span,
body #mic-init-access-tool .mic-access-tool-general-button:focus-visible span {
  color: #fff;
}

/* Photo capture location gate */
body.photo-page.is-location-denied .photo-section {
  display: none;
}

.photo-page .photo-location-gate {
  box-sizing: border-box;
  display: none;
  width: 100%;
  min-height: 520px;
  padding: 28px;
  align-items: center;
  justify-content: center;
}

body.photo-page.is-location-denied .photo-location-gate {
  display: flex;
}

body.photo-page.is-location-ready .photo-location-gate {
  display: none;
}

.photo-page .photo-location-card {
  box-sizing: border-box;
  width: 100%;   
  background: #fff;
}

.photo-page .photo-location-heading {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #e7ebf3;
}

.photo-page .photo-location-heading > span {
  display: grid;
  width: 52px;
  height: 52px;
  min-width: 52px;
  color: #fff;
  background: linear-gradient(145deg, var(--red), #e40018);
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(255, 0, 32, 0.18);
  place-items: center;
  font-size: 22px;
}

.photo-page .photo-location-heading h1 {
  margin: 0 0 5px;
  color: var(--navy);
  font-size: 22px;
  font-weight: 800;
}

.photo-page .photo-location-heading p {
  margin: 0;
  color: #44527a;
  font-size: 14px;
  line-height: 1.45;
}

.photo-page .photo-location-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.photo-page .photo-location-steps figure {
  overflow: hidden;
  margin: 0;
  padding: 14px;
  background: #f7f9fd;
  border: 1px solid #dfe6f2;
  border-radius: 14px;
}

.photo-page .photo-location-steps figcaption {
  margin-bottom: 12px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
}

.photo-page .photo-location-steps figcaption b {
  color: var(--red);
}

.photo-page .photo-location-steps img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
}

.photo-page .photo-location-mobile-guide {
  display: none;
}

.photo-page .photo-location-mobile-guide img {
  display: block;
  width: 100%;
  height: auto;
}

.photo-page .photo-location-actions {
  display: flex;
  margin-top: 22px;
  gap: 14px;
  align-items: center;
  justify-content: center;
}

.photo-page .photo-location-actions .btn {
  min-height: 48px;
  padding: 0 20px;
  border-radius: 9px;
}

.photo-page .photo-location-actions p {
  margin: 0;
  color: #5c6786;
  font-size: 12px;
}

/* NRI client details */
body[data-page-key="nri_client_details"] .nri-client-container {
  max-width: 1200px;
}



body[data-page-key="nri_client_details"] .nri-client-title {
  margin-bottom: 28px;
  text-align: center;
}

body[data-page-key="nri_client_details"] .nri-client-title h1 {
  margin: 0 0 8px;
  color: #07105f;
  font-size: 30px;
}

body[data-page-key="nri_client_details"] .nri-client-title p {
  margin: 0;
  color: #586481;
}

body[data-page-key="nri_client_details"] .nri-section {
  margin-top: 20px;
  padding: 24px;
  border: 1px solid #dbe3f4;
  border-radius: 16px;
}

body[data-page-key="nri_client_details"] .nri-section h2  span.hspan{
  margin: 0 0 18px;
  color: #07105f;
  font-size: 20px; 
}
body[data-page-key="nri_client_details"] .nri-section h2 span{
    font-size: 12px;
}
body[data-page-key="nri_client_details"] .nri-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

body[data-page-key="nri_client_details"] .nri-field.full {
  grid-column: 1 / -1;
}

body[data-page-key="nri_client_details"] .nri-field label {
  display: block;
  margin-bottom: 7px;
  color: #07105f;
  font-weight: 700;
}

body[data-page-key="nri_client_details"] .nri-field input,
body[data-page-key="nri_client_details"] .nri-field textarea,
body[data-page-key="nri_client_details"] .nri-field select {
  width: 100%;
  padding: 13px 14px;
  color: #10195c;
  background: #fff;
  border: 1px solid #cad5ed;
  border-radius: 10px;
}

body[data-page-key="nri_client_details"] .nri-field input[readonly] {
  color: #66708b;
  background: #f4f6fb;
}

body[data-page-key="nri_client_details"] .nri-field textarea {
  min-height: 90px;
  resize: vertical;
}

body[data-page-key="nri_client_details"] .nri-upload-note {
  margin-top: 6px;
  color: #65708b;
  font-size: 13px;
}

body[data-page-key="nri_client_details"] .nri-error {
  margin-bottom: 18px;
  padding: 12px 16px;
  color: #c3152d;
  background: #fff0f1;
  border: 1px solid #ffb7be;
  border-radius: 10px;
}

body[data-page-key="nri_client_details"] .nri-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}

body[data-page-key="nri_client_details"] .nri-actions .btn {
    min-width: 250px;
    height: 58px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 16px;
    font-weight: 600;
}

body[data-page-key="nri_client_details"] .nri-required {
  color: #ff002b;
}
.aggregator_bank { 
    font-size: 12px;
    margin-top: 10px;
}


/* Navia congratulations page */
.congrats-page .navia-congrats-card {
     position: relative;
     overflow: hidden;
     min-height: 520px;
     padding: 42px 56px 38px;
     border: 0 !important;
     outline: 0 !important;
     border-radius: 20px;
     background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
     box-shadow: 0 18px 45px rgba(22, 55, 120, .12);
}
 .congrats-page .navia-congrats-card .success-hero {
     margin-bottom: 10px;
}
 .congrats-page .navia-congrats-card .success-ribbon {
     text-transform: uppercase;
}
 .congrats-page .navia-congrats-card .congrats-heading {
     margin-top: 4px;
}
 .congrats-page .navia-congrats-card .navia-success-title {
     color: #07145c !important;
     font-size: clamp(24px, 2.2vw, 32px);
     letter-spacing: -.4px;
}
 .congrats-page .navia-congrats-card .ui-title-rule {
     background: #ff001b;
}
 .congrats-page .navia-congrats-card .navia-code-label {
     margin: 14px 0 8px;
     color: #07145c !important;
     font-size: 17px;
     font-weight: 700;
}
 .congrats-page .navia-congrats-card .navia-client-code {
     display: flex;
     align-items: center;
     justify-content: center;
     width: min(480px, 100%);
     min-height: 72px;
     margin: 0 auto 18px;
     padding: 8px 24px;
     border: 1px solid #ff9aa6 !important;
     border-radius: 14px;
     background: #fff;
     color: #ed001b !important;
     box-shadow: 0 8px 22px rgba(255, 0, 27, .08);
     font-size: clamp(32px, 4vw, 42px);
     letter-spacing: 2px;
}
 .congrats-page .navia-congrats-card .navia-copy {
     max-width: 760px;
     margin: 7px auto;
     color: #07145c !important;
     font-size: 14px;
     line-height: 1.6;
}
 .congrats-page .navia-congrats-card .navia-copy b {
     color: #ed001b;
}
 .congrats-page .navia-congrats-card .congrats-actions {
     margin-top: 22px;
}
 .congrats-page .navia-congrats-card .navia-document-button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     width: min(315px, 100%);
     min-height: 56px;
     border-radius: 9px;
     background: linear-gradient(135deg, #ff263b, #ed001b) !important;
     box-shadow: 0 12px 24px rgba(255, 0, 27, .2);
     font-size: 16px;
     font-weight: 700;
}
 .congrats-page .navia-congrats-card .navia-document-button:hover {
     background: linear-gradient(135deg, #e9162c, #c90016) !important;
     transform: translateY(-2px);
}
 .congrats-page .navia-congrats-card .navia-congrats-content {
     text-align:left;
    display: block;
     max-width: 930px;
     margin: 0 auto;
     color: #07145c;
     font-size: 15px;
     line-height: 1.55;
}
 .congrats-page .navia-congrats-card .navia-congrats-title {
     margin: 0 0 30px;
     padding-bottom: 20px;
     color: #ed001b;
     font-size: clamp(22px, 2.2vw, 24px);
     letter-spacing: .5px;
     text-align: center;
     border-bottom: 1px solid #edf0f7;
}
 .congrats-page .navia-congrats-card .navia-congrats-content h2 {
     display: flex;
     align-items: center;
     gap: 10px;
     margin: 26px 0 12px;
     color: #081858;
    ;
     font-size: 23px;
     letter-spacing: .4px;
}
 .congrats-page .navia-congrats-card .navia-congrats-content h2::before {
     content: '';
     width: 4px;
     height: 24px;
     border-radius: 4px;
     background: #ed001b;
}
 .congrats-page .navia-congrats-card .navia-congrats-content p {
     margin: 8px 0;
}
 .congrats-page .navia-congrats-card .navia-congrats-content strong {
     color: var(--red);
}
 .congrats-page .navia-congrats-card .navia-next-steps {
     display: block;
     list-style: none;
     margin: 12px 0 22px;
     padding: 14px 18px;
     border: 1px solid #e5eef8 !important;
     border-radius: 12px;
     background: #f8fbff;
}
 .congrats-page .navia-congrats-card .navia-next-steps li {
     position: relative;
     margin: 8px 0;
     padding-left: 24px;
}
 .congrats-page .navia-congrats-card .navia-next-steps li::before {
     content: '\2713';
     position: absolute;
     left: 0;
     top: 1px;
     color: #17b978;
     font-weight: 800;
}
 .congrats-page .navia-congrats-card .navia-congrats-links {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
     margin-top: 18px;
}
 .congrats-page .navia-congrats-card .navia-congrats-links a {
     display: inline-flex;
     align-items: center;
     min-height: 42px;
     padding: 0 17px;
     border: 1px solid #d9e8f6 !important;
     border-radius: 8px;
     background: #fff;
     color: var(--red);
     font-size: 14px;
     font-weight: 700;
     text-decoration: none;
     transition: .2s ease;
}
 .congrats-page .navia-congrats-card .navia-congrats-links a:hover {
     border-color: #ed001b !important;
     color: #ed001b;
     transform: translateY(-1px);
}

 .congrats-page .navia-congrats-card .navia-congrats-content, .congrats-page .navia-congrats-card .navia-congrats-content * {
     outline: none !important;
}
 .congrats-page .navia-congrats-card .navia-congrats-content h1, .congrats-page .navia-congrats-card .navia-congrats-content h2, .congrats-page .navia-congrats-card .navia-congrats-content p {
     border: 0 !important;
}



 
/* Aadhaar DigiLocker start page */
.aadhaar-start-page .page-bg {
     min-height: 100vh;
     padding-bottom: 0;
}
 .aadhaar-start-container {
     display: block;
     grid-template-columns: none;
     width: min(1180px, calc(100% - 40px));
     margin: 28px auto 20px;
     padding: 0;
     overflow: visible;
     border-radius: 0;
     background: transparent;
     box-shadow: none;
}
 .aadhaar-start-section {
     padding: 32px 40px 28px;
     border: 1px solid #e0e7f5;
     border-radius: 24px;
     background: rgba(255,255,255,.96);
     box-shadow: 0 20px 55px rgba(23,51,112,.09);
}
 .aadhaar-start-heading {
     margin-bottom: 26px;
     text-align: center;
}
 .aadhaar-heading-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 68px;
     height: 68px;
     margin-bottom: 14px;
     border-radius: 50%;
     color: #315df4;
     background: #edf3ff;
     box-shadow: 0 0 0 10px rgba(49,93,244,.06);
     font-size: 27px;
}
 .aadhaar-start-heading .ui-title {
     margin: 0;
     color: var(--navy);
     font-size: 30px;
     font-weight: 700;
}
 .aadhaar-start-heading .ui-title-rule {
     display: block;
     margin: 12px auto 10px;
}
 .aadhaar-start-heading p {
     margin: 0;
     color: #526083;
     font-size: 15px;
}
 .aadhaar-start-card {
     display: grid;
     grid-template-columns: minmax(300px,.85fr) minmax(420px,1.15fr);
     min-height: 410px;
     overflow: hidden;
     border: 1px solid #d9e3f5;
     border-radius: 20px;
     background: #fff;
}
 .aadhaar-card-visual {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 410px;
     padding: 42px;
     overflow: hidden;
     background: linear-gradient(145deg,#eef5ff 0%,#f8faff 60%,#edf2ff 100%);
}
 .aadhaar-card-glow {
     position: absolute;
     width: 280px;
     height: 280px;
     border-radius: 50%;
     background: rgba(49,93,244,.08);
     filter: blur(2px);
}
 .aadhaar-card-visual img {
     position: relative;
     z-index: 1;
     width: min(100%,340px);
     height: auto;
     filter: drop-shadow(0 18px 25px rgba(25,54,125,.14));
}
 .aadhaar-verified-badge {
     position: absolute;
     z-index: 2;
     right: 17%;
     bottom: 22%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 58px;
     height: 58px;
     border: 6px solid #fff;
     border-radius: 50%;
     color: #fff;
     background: #00ac63;
     box-shadow: 0 12px 24px rgba(0,172,99,.24);
     font-size: 21px;
}
 .aadhaar-card-content {
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 42px 48px;
}
 .aadhaar-provider-label {
     align-self: flex-start;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 15px;
     padding: 8px 12px;
     border-radius: 20px;
     color: #008b50;
     background: #ebfaf3;
     font-size: 12px;
     font-weight: 700;
}
 .aadhaar-card-content h2 {
     margin: 0 0 10px;
     color: var(--navy);
     font-size: 25px;
     font-weight: 750;
}
 .aadhaar-card-content > p {
     margin: 0;
     color: #516082;
     font-size: 14px;
     line-height: 1.6;
}
 .aadhaar-benefit-list {
     display: grid;
     gap: 13px;
     margin: 24px 0 26px;
     padding: 0;
     list-style: none;
}
 .aadhaar-benefit-list li {
     display: flex;
     align-items: center;
     gap: 13px;
}
 .aadhaar-benefit-list li > i {
     flex: 0 0 38px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 38px;
     height: 38px;
     border-radius: 10px;
     color: var(--red);
     background: rgba(255,0,38,.08);
}
 .aadhaar-benefit-list span {
     display: grid;
     gap: 2px;
}
 .aadhaar-benefit-list b {
     color: var(--navy);
     font-size: 14px;
}
 .aadhaar-benefit-list small {
     color: #697594;
     font-size: 12px;
}
 .aadhaar-digilocker-btn {
     width: 100%;
     min-height: 60px;
     justify-content: center;
     gap: 14px;
     border-radius: 11px;
     font-size: 16px;
     box-shadow: 0 12px 25px rgba(255,0,38,.18);
     margin-top:40px;
}
 .aadhaar-consent-note {
     display: flex;
     gap: 8px;
     margin-top: 14px !important;
     font-size: 11px !important;
     line-height: 1.45 !important;
}
 .aadhaar-consent-note i {
     flex: 0 0 auto;
     margin-top: 2px;
     color: #315df4;
}
 .aadhaar-existing-btn {
     align-self: flex-start;
     gap: 10px;
     margin-top: 14px;
}
 .aadhaar-trust-strip {
     display: grid;
     grid-template-columns: repeat(3,1fr);
     margin-top: 18px;
     padding: 18px 24px;
     border: 1px solid #e1e8f5;
     border-radius: 13px;
     background: #f9fbff;
}
 .aadhaar-trust-strip span {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     color: #526083;
     font-size: 12px;
}
 .aadhaar-trust-strip span + span {
     border-left: 1px solid #dbe3f2;
}
 .aadhaar-trust-strip i {
     color: #315df4;
     font-size: 16px;
}
 .aadhaar-trust-strip b {
     color: var(--navy);
}
div#pancard-pop {
    text-align: center;
}
#pancard-pop .btn-primary{
    min-width: 150px;  
    height: 58px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 16px;
    font-weight: 600;
}
 .dateofbirthpage .email-select-wrap > .select2-container {
            width: 100% !important;
            min-width: 0;
            align-self: stretch;
        }

        .dateofbirthpage .email-select-wrap .select2-selection--single {
            display: flex;
            align-items: center;
            width: 100% !important;
            height: 58px !important;
            margin: 0;
            padding: 0 40px 0 0;
            border: 0 !important;
            border-radius: 0 !important;
            background: transparent !important;
            box-shadow: none;
        }

        .dateofbirthpage .email-select-wrap .select2-selection__rendered {
            width: 100%;
            padding: 0 !important;
            color: var(--navy);
            font-size: 16px;
            font-weight: 600;
            line-height: normal !important;
        }

        .dateofbirthpage .email-select-wrap .select2-selection__placeholder {
            color: #aab4c7;
        }

        .dateofbirthpage .email-select-wrap .select2-selection__arrow {
            top: 0 !important;
            right: 12px !important;
            width: 20px !important;
            height: 58px !important;
        }

        .dateofbirthpage .email-select-wrap > .fa-chevron-down {
            display: none;
        }

        body.dateofbirthpage .select2-dropdown {
            border: 1px solid #cbd6ea;
            border-radius: 7px;
            box-shadow: 0 8px 20px rgba(18, 38, 83, 0.12);
            overflow: hidden;
        }

        body.dateofbirthpage .select2-results__option {
            padding: 10px 14px;
            color: var(--navy);
            font-size: 15px;
        }
        .dateofbirthpage #verifyEmailBtn {
            position: relative;
        }

        .dateofbirthpage #verifyEmailBtn.is-loading {
            color: transparent !important;
            cursor: wait;
            opacity: 1;
        }

        .dateofbirthpage #verifyEmailBtn.is-loading::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 18px;
            height: 18px;
            margin: -9px 0 0 -9px;
            border: 2px solid rgba(255, 255, 255, 0.45);
            border-top-color: #fff;
            border-radius: 50%;
            animation: verify-email-button-spin 0.7s linear infinite;
        }

        @keyframes verify-email-button-spin {
            to { transform: rotate(360deg); }
        }

/* PSB commodity categorization */
.commodity-category-field {
    display: block;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--navy);
    font-size: 13px;
    font-weight: 700;

}
.commodity-category-field  span{
        margin: 0 0 8px;
}
.commodity-category-field select {
    min-width: 130px;
    margin: 0;
}
.commodity-category-field[hidden] {
    display: none !important;
}
.upload-row-derivative .document-segments.has-commodity-category {
    flex-wrap: wrap;
}
.upload-row-derivative .commodity-category-field {
    flex: 0 1 170px;
    max-width: 170px;
    box-sizing: border-box;
}