/* ================================================================================================= */ /* Starts the NediQR public auth popup stylesheet. */
/* NEDIQR PUBLIC AUTH POPUP CSS */ /* Keeps Sign In, Sign Up, OTP, modal, and searchable dropdown styling separate from public.css. */
/* ================================================================================================= */ /* Ends the stylesheet heading. */

.nq-modal-backdrop { /* Starts modal backdrop styling. */
position: fixed; /* Places the backdrop over the full browser viewport. */
inset: 0; /* Stretches the backdrop from all four sides. */
z-index: 2000; /* Keeps the backdrop above the public page content. */
background: rgba(17, 24, 61, 0.68); /* Uses dark navy transparent overlay. */
backdrop-filter: blur(6px); /* Adds soft blur behind the popup. */
} /* Ends modal backdrop styling. */

.nq-modal { /* Starts shared popup wrapper styling. */
position: fixed; /* Keeps the popup fixed on the screen instead of normal page flow. */
inset: 0; /* Makes the popup wrapper cover the full viewport. */
z-index: 2010; /* Keeps the popup above the backdrop. */
display: flex; /* Enables clean popup alignment. */
align-items: flex-start; /* Keeps the popup near the top instead of pushing it to the bottom. */
justify-content: center; /* Centers the popup horizontally. */
padding: 28px 18px 90px; /* Adds safe space around the popup and below dropdowns. */
overflow-x: hidden; /* Prevents horizontal popup overflow. */
overflow-y: auto; /* Allows the overlay to scroll only when the full popup cannot fit on very small screens. */
} /* Ends shared popup wrapper styling. */

.nq-modal-panel { /* Starts shared popup panel styling. */
position: relative; /* Allows the close button and dropdowns to position correctly. */
width: min(100%, 480px); /* Keeps normal auth popups compact. */
max-height: none; /* Removes inner popup height restriction to avoid double scrollbars. */
overflow: visible; /* Allows dropdown panels to open outside the popup card. */
padding: 30px; /* Adds premium spacing inside the popup. */
border: 1px solid rgba(217, 226, 236, 0.92); /* Adds a soft professional border around auth panels. */
border-radius: var(--nq-radius-lg); /* Uses large NediQR rounded corners. */
background: var(--nq-white); /* Keeps popup surface clean white. */
box-shadow: var(--nq-shadow-card); /* Adds premium popup elevation. */
} /* Ends shared popup panel styling. */

.nq-modal-large .nq-modal-panel { /* Starts large popup panel styling. */
width: min(100%, 680px); /* Gives Sign Up enough width for progressive fields. */
} /* Ends large popup panel styling. */

.nq-auth-panel { /* Starts auth-specific popup panel styling. */
overflow: visible; /* Ensures country and state dropdowns can open outside the auth card. */
} /* Ends auth-specific popup panel styling. */

.nq-signin-panel { /* Starts Sign In panel styling. */
width: min(100%, 480px); /* Keeps Sign In popup compact and focused. */
} /* Ends Sign In panel styling. */

.nq-signup-panel { /* Starts Sign Up panel styling. */
width: min(100%, 680px); /* Keeps Sign Up popup wide enough without feeling oversized. */
} /* Ends Sign Up panel styling. */

.nq-modal-close { /* Starts popup close button styling. */
position: absolute; /* Positions close button inside the popup panel. */
top: 16px; /* Places the close button from the top. */
right: 16px; /* Places the close button from the right. */
width: 38px; /* Sets close button width. */
height: 38px; /* Sets close button height. */
display: inline-flex; /* Centers the close icon. */
align-items: center; /* Vertically centers the close icon. */
justify-content: center; /* Horizontally centers the close icon. */
border: 0; /* Removes default button border. */
border-radius: 999px; /* Makes the close button circular. */
background: #f2f4f7; /* Uses soft gray close button background. */
color: var(--nq-primary); /* Uses NediQR navy close icon color. */
font-size: 24px; /* Sets the close icon size. */
line-height: 1; /* Keeps the close icon vertically neat. */
cursor: pointer; /* Shows pointer cursor on hover. */
transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; /* Adds smooth close button interaction. */
} /* Ends popup close button styling. */

.nq-modal-close:hover { /* Starts popup close button hover styling. */
background: rgba(220, 20, 60, 0.1); /* Adds soft red background on hover. */
color: var(--nq-alert); /* Turns close icon red on hover. */
transform: rotate(90deg); /* Adds a subtle premium close interaction. */
} /* Ends popup close button hover styling. */

.nq-modal-brand { /* Starts modal brand wrapper styling. */
display: inline-flex; /* Keeps modal branding flexible. */
align-items: center; /* Vertically centers brand content. */
gap: 10px; /* Adds spacing between brand items if used. */
margin-bottom: 18px; /* Adds space below brand wrapper. */
} /* Ends modal brand wrapper styling. */

.nq-modal-brand-center { /* Starts centered modal brand styling. */
display: flex; /* Makes the brand row a flex container. */
align-items: center; /* Vertically centers the logo. */
justify-content: center; /* Horizontally centers the logo. */
width: 100%; /* Lets the logo row use the full popup width. */
margin-bottom: 20px; /* Adds clean space below the logo. */
padding-right: 24px; /* Prevents the logo from visually touching the close button area. */
padding-left: 24px; /* Keeps the logo visually balanced with the close button spacing. */
} /* Ends centered modal brand styling. */

.nq-modal-brand-logo { /* Starts modal logo image styling. */
display: block; /* Removes inline image baseline spacing. */
width: auto; /* Preserves the logo aspect ratio. */
height: 40px; /* Keeps default modal logo balanced. */
max-width: 180px; /* Prevents logo overflow on small screens. */
object-fit: contain; /* Keeps the logo clean without cropping. */
} /* Ends modal logo image styling. */

.nq-modal-brand-logo-bg { /* Starts navy-background modal logo styling. */
height: 64px; /* Keeps the navy-background logo readable inside popup. */
max-width: 260px; /* Prevents the logo from becoming too wide. */
border-radius: 16px; /* Softens the logo image corners. */
box-shadow: 0 18px 36px rgba(32, 39, 90, 0.16); /* Adds premium logo depth. */
} /* Ends navy-background modal logo styling. */

.nq-modal h2 { /* Starts popup heading styling. */
margin: 0; /* Removes default heading margin. */
color: var(--nq-primary); /* Uses primary navy for popup headings. */
font-size: 28px; /* Sets popup heading size. */
font-weight: 900; /* Makes popup heading bold. */
line-height: 1.15; /* Keeps popup heading compact. */
letter-spacing: -0.028em; /* Adds premium heading spacing. */
} /* Ends popup heading styling. */

.nq-modal-subtitle { /* Starts popup subtitle styling. */
margin: 10px 0 22px; /* Adds spacing around popup subtitle. */
color: var(--nq-muted); /* Uses muted text for subtitle. */
font-size: 15px; /* Keeps subtitle readable. */
line-height: 1.55; /* Improves subtitle readability. */
} /* Ends popup subtitle styling. */

.nq-auth-form { /* Starts auth form layout styling. */
display: grid; /* Stacks auth form elements vertically. */
gap: 16px; /* Adds spacing between auth form elements. */
overflow: visible; /* Prevents the form itself from creating a scrollbar. */
} /* Ends auth form layout styling. */

.nq-form { /* Starts shared form layout styling. */
display: grid; /* Stacks form fields vertically. */
gap: 16px; /* Adds consistent form spacing. */
overflow: visible; /* Prevents the form from clipping dropdowns. */
} /* Ends shared form layout styling. */

.nq-field { /* Starts form field wrapper styling. */
display: grid; /* Stacks label and control vertically. */
gap: 8px; /* Adds label-control spacing. */
position: relative; /* Allows dropdown alignment to stay connected with the field. */
} /* Ends form field wrapper styling. */

.nq-field span { /* Starts field label styling. */
font-size: 14px; /* Sets label size. */
font-weight: 800; /* Makes labels strong. */
color: var(--nq-primary); /* Uses navy label text. */
line-height: 1.25; /* Keeps label text compact. */
} /* Ends field label styling. */

.nq-field input,
.nq-field select,
.nq-field textarea { /* Starts shared form control styling. */
width: 100%; /* Makes form controls full width. */
border: 1px solid var(--nq-border); /* Adds soft control border. */
border-radius: var(--nq-radius-sm); /* Applies NediQR rounded field corners. */
padding: 12px 13px; /* Adds comfortable field padding. */
font-size: 15px; /* Sets readable control text size. */
color: var(--nq-text); /* Uses main text color inside controls. */
background: var(--nq-white); /* Keeps control background white. */
outline: none; /* Removes default browser outline. */
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; /* Adds smooth focus transition. */
} /* Ends shared form control styling. */

.nq-field input:focus,
.nq-field select:focus,
.nq-field textarea:focus { /* Starts form control focus styling. */
border-color: var(--nq-gold); /* Uses gold border on focus. */
box-shadow: 0 0 0 4px rgba(238, 157, 27, 0.14); /* Adds soft gold focus ring. */
} /* Ends form control focus styling. */

.nq-field input:disabled,
.nq-field select:disabled,
.nq-field textarea:disabled { /* Starts disabled form control styling. */
background: #f2f4f7; /* Uses soft gray disabled background. */
color: #98a2b3; /* Uses muted disabled text color. */
cursor: not-allowed; /* Shows disabled cursor. */
} /* Ends disabled form control styling. */

.nq-field textarea { /* Starts textarea styling. */
resize: vertical; /* Allows vertical textarea resizing. */
} /* Ends textarea styling. */

.nq-field-hidden { /* Starts hidden form field utility styling. */
display: none !important; /* Hides progressive auth fields completely. */
} /* Ends hidden form field utility styling. */

[hidden] { /* Starts global hidden attribute support. */
display: none !important; /* Forces hidden elements to stay hidden even if another class has display important. */
} /* Ends global hidden attribute support. */

.nq-field-help { /* Starts helper text styling. */
display: block; /* Places helper text on its own row. */
color: var(--nq-muted); /* Uses muted helper text color. */
font-size: 12px; /* Keeps helper text compact. */
font-weight: 700; /* Makes helper text readable. */
line-height: 1.4; /* Improves helper text readability. */
} /* Ends helper text styling. */

.nq-inline-validate-control { /* Starts inline validate row styling. */
display: grid; /* Creates input and validate button layout. */
grid-template-columns: minmax(0, 1fr) auto; /* Lets input expand while button stays compact. */
gap: 10px; /* Adds spacing between input and Validate button. */
align-items: center; /* Vertically aligns input and button. */
} /* Ends inline validate row styling. */

.nq-inline-validate-control .nq-btn { /* Starts inline validate button sizing. */
min-height: 46px; /* Matches the button height with the input height. */
padding-left: 18px; /* Adds comfortable left padding. */
padding-right: 18px; /* Adds comfortable right padding. */
} /* Ends inline validate button sizing. */

.nq-check-field { /* Starts checkbox field styling. */
display: grid; /* Creates checkbox and text layout. */
grid-template-columns: 18px 1fr; /* Gives checkbox fixed width and text flexible width. */
gap: 10px; /* Adds spacing between checkbox and text. */
align-items: start; /* Aligns checkbox with the first line of text. */
font-size: 13px; /* Sets checkbox text size. */
color: var(--nq-muted); /* Uses muted checkbox text. */
line-height: 1.48; /* Improves legal consent readability. */
} /* Ends checkbox field styling. */

.nq-check-field input { /* Starts checkbox input styling. */
margin-top: 3px; /* Aligns checkbox with text first line. */
} /* Ends checkbox input styling. */

.nq-check-field a { /* Starts checkbox link styling. */
color: var(--nq-primary); /* Uses navy legal links. */
font-weight: 800; /* Makes legal links bold. */
text-decoration: underline; /* Underlines legal links. */
text-underline-offset: 3px; /* Adds clean underline spacing. */
} /* Ends checkbox link styling. */

.nq-check-field a:hover { /* Starts checkbox link hover styling. */
color: var(--nq-alert); /* Turns legal links red on hover. */
} /* Ends checkbox link hover styling. */

.nq-otp-panel { /* Starts OTP panel base styling. */
display: flex; /* Places OTP content and verify button in a row before final override. */
align-items: center; /* Vertically centers OTP panel content. */
justify-content: space-between; /* Separates OTP content and button. */
gap: 14px; /* Adds spacing inside OTP panel. */
padding: 14px; /* Adds OTP panel padding. */
border: 1px solid var(--nq-border); /* Adds OTP panel border. */
border-radius: var(--nq-radius-md); /* Uses medium rounded OTP panel corners. */
background: #f3f7fb; /* Uses soft blue-gray OTP background. */
} /* Ends OTP panel base styling. */

.nq-otp-panel-content { /* Starts OTP panel content base styling. */
display: grid; /* Stacks instruction, input, and timer by default. */
gap: 8px; /* Adds spacing inside OTP content area. */
min-width: 0; /* Prevents content overflow. */
flex: 1; /* Lets OTP content use available width. */
} /* Ends OTP panel content base styling. */

.nq-otp-panel p { /* Starts OTP instruction text base styling. */
margin: 0; /* Removes paragraph margin. */
color: var(--nq-muted); /* Uses muted OTP instruction text. */
font-size: 14px; /* Sets OTP instruction size. */
line-height: 1.45; /* Improves OTP instruction readability. */
} /* Ends OTP instruction text base styling. */

.nq-otp-panel input { /* Starts old OTP input base styling. */
width: min(100%, 180px); /* Keeps old single OTP input compact if it is used anywhere else. */
border: 1px solid var(--nq-border); /* Adds OTP input border. */
border-radius: var(--nq-radius-sm); /* Rounds OTP input corners. */
padding: 11px 12px; /* Adds OTP input padding. */
font-size: 16px; /* Makes OTP digits readable. */
font-weight: 900; /* Makes OTP digits bold. */
letter-spacing: 0.08em; /* Adds spacing between OTP digits. */
color: var(--nq-primary); /* Uses navy OTP text. */
background: var(--nq-white); /* Uses white OTP input background. */
outline: none; /* Removes default browser outline. */
} /* Ends old OTP input base styling. */

.nq-otp-panel input:focus { /* Starts old OTP input focus base styling. */
border-color: var(--nq-gold); /* Uses gold border on OTP input focus. */
box-shadow: 0 0 0 4px rgba(238, 157, 27, 0.14); /* Adds soft gold OTP focus ring. */
} /* Ends old OTP input focus base styling. */

.nq-otp-timer { /* Starts OTP timer badge base styling. */
display: inline-flex; /* Keeps timer badge compact. */
align-items: center; /* Vertically centers timer text. */
width: fit-content; /* Keeps timer badge only as wide as content. */
padding: 5px 9px; /* Adds timer badge spacing. */
border-radius: 999px; /* Makes timer badge pill shaped. */
background: rgba(32, 39, 90, 0.08); /* Uses soft navy timer background. */
color: var(--nq-primary); /* Uses navy timer text. */
font-size: 12px; /* Keeps timer compact. */
font-weight: 900; /* Makes timer text strong. */
line-height: 1; /* Keeps timer badge compact. */
} /* Ends OTP timer badge base styling. */

.nq-otp-timer-warning { /* Starts OTP timer warning styling. */
background: rgba(247, 173, 53, 0.18); /* Uses soft gold warning background. */
color: #9a5a00; /* Uses darker gold text for readability. */
} /* Ends OTP timer warning styling. */

.nq-otp-timer-danger { /* Starts OTP timer danger styling. */
background: rgba(220, 20, 60, 0.12); /* Uses soft red danger background. */
color: var(--nq-alert); /* Uses alert red for urgent timer. */
} /* Ends OTP timer danger styling. */

.nq-verification-success { /* Starts verification success message styling. */
display: flex; /* Places success icon and text in a row. */
align-items: center; /* Vertically centers success content. */
gap: 10px; /* Adds space between icon and text. */
padding: 13px 14px; /* Adds success message spacing. */
border: 1px solid rgba(34, 89, 35, 0.22); /* Adds green success border. */
border-radius: var(--nq-radius-md); /* Uses medium rounded success corners. */
background: rgba(34, 89, 35, 0.08); /* Adds soft green success background. */
color: var(--nq-success); /* Uses success green text. */
font-size: 14px; /* Keeps success message readable. */
font-weight: 900; /* Makes success text strong. */
line-height: 1.4; /* Improves success text readability. */
} /* Ends verification success message styling. */

.nq-verification-success-icon { /* Starts verification success icon styling. */
width: 24px; /* Sets success icon width. */
height: 24px; /* Sets success icon height. */
display: inline-flex; /* Centers checkmark inside icon. */
align-items: center; /* Vertically centers checkmark. */
justify-content: center; /* Horizontally centers checkmark. */
border-radius: 999px; /* Makes success icon circular. */
background: var(--nq-success); /* Uses success green icon background. */
color: var(--nq-white); /* Uses white checkmark. */
font-size: 14px; /* Sets checkmark size. */
line-height: 1; /* Keeps checkmark compact. */
flex: 0 0 auto; /* Prevents icon shrinking. */
} /* Ends verification success icon styling. */

.nq-signup-final-section { /* Starts final Sign Up section styling. */
display: grid; /* Stacks consent fields and Create Account button. */
gap: 16px; /* Adds spacing in final signup section. */
padding-top: 2px; /* Adds slight spacing above final section. */
} /* Ends final Sign Up section styling. */

body.nq-modal-open { /* Starts body state when popup is open. */
overflow: hidden; /* Prevents the page behind the popup from scrolling. */
} /* Ends body state when popup is open. */

.nq-native-select-hidden { /* Starts hidden native select styling. */
position: absolute !important; /* Removes native select from visible layout. */
width: 1px !important; /* Keeps native select tiny for form compatibility. */
height: 1px !important; /* Keeps native select tiny for form compatibility. */
padding: 0 !important; /* Removes hidden select padding. */
margin: 0 !important; /* Removes hidden select margin. */
overflow: hidden !important; /* Hides native select overflow. */
clip: rect(0, 0, 0, 0) !important; /* Clips native select visually. */
white-space: nowrap !important; /* Prevents hidden select text wrapping. */
border: 0 !important; /* Removes hidden select border. */
opacity: 0 !important; /* Makes native select fully invisible. */
pointer-events: none !important; /* Prevents users from clicking the hidden native select. */
} /* Ends hidden native select styling. */

.nq-search-select { /* Starts custom searchable select wrapper styling. */
position: relative; /* Allows dropdown panel to open below the field. */
width: 100%; /* Makes searchable select full width. */
} /* Ends custom searchable select wrapper styling. */

.nq-search-select-trigger { /* Starts searchable dropdown trigger styling. */
width: 100%; /* Makes trigger full width. */
min-height: 46px; /* Matches normal input height. */
display: grid; /* Creates selected value and arrow layout. */
grid-template-columns: minmax(0, 1fr) auto; /* Gives text flexible width and arrow fixed width. */
align-items: center; /* Vertically centers trigger content. */
gap: 10px; /* Adds space between value and arrow. */
padding: 12px 13px; /* Matches normal form field padding. */
border: 1px solid var(--nq-border); /* Uses soft field border. */
border-radius: var(--nq-radius-sm); /* Rounds dropdown trigger. */
background: var(--nq-white); /* Keeps trigger background white. */
color: var(--nq-text); /* Uses main text color. */
font-size: 15px; /* Matches normal form field text size. */
font-weight: 600; /* Keeps selected value readable. */
line-height: 1.2; /* Keeps trigger text clean. */
text-align: left; /* Aligns selected value left. */
cursor: pointer; /* Shows clickable dropdown behavior. */
outline: none; /* Removes default browser outline. */
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; /* Adds smooth dropdown trigger interaction. */
} /* Ends searchable dropdown trigger styling. */

.nq-search-select-trigger:hover { /* Starts searchable dropdown trigger hover styling. */
border-color: rgba(238, 157, 27, 0.72); /* Adds soft gold border on hover. */
} /* Ends searchable dropdown trigger hover styling. */

.nq-search-select-trigger:focus { /* Starts searchable dropdown trigger focus styling. */
border-color: var(--nq-gold); /* Uses gold border on focus. */
box-shadow: 0 0 0 4px rgba(238, 157, 27, 0.14); /* Adds soft gold focus ring. */
} /* Ends searchable dropdown trigger focus styling. */

.nq-search-select-open .nq-search-select-trigger { /* Starts open dropdown trigger styling. */
border-color: var(--nq-gold); /* Keeps gold border while open. */
box-shadow: 0 0 0 4px rgba(238, 157, 27, 0.14); /* Keeps focus ring while open. */
} /* Ends open dropdown trigger styling. */

.nq-search-select-value { /* Starts selected value text styling. */
display: block; /* Makes selected value behave predictably. */
min-width: 0; /* Allows long values to shrink correctly. */
overflow: hidden; /* Prevents selected text overflow. */
text-overflow: ellipsis; /* Adds ellipsis for long country or state names. */
white-space: nowrap; /* Keeps selected value in one line. */
} /* Ends selected value text styling. */

.nq-search-select-placeholder { /* Starts searchable dropdown placeholder styling. */
color: var(--nq-muted); /* Uses muted placeholder color. */
font-weight: 600; /* Keeps placeholder readable. */
} /* Ends searchable dropdown placeholder styling. */

.nq-search-select-arrow { /* Starts searchable dropdown arrow styling. */
display: inline-flex; /* Centers arrow icon. */
align-items: center; /* Vertically centers arrow icon. */
justify-content: center; /* Horizontally centers arrow icon. */
width: 18px; /* Gives arrow stable width. */
height: 18px; /* Gives arrow stable height. */
color: var(--nq-primary); /* Uses navy arrow color. */
font-size: 14px; /* Sets arrow size. */
line-height: 1; /* Keeps arrow vertically clean. */
transition: transform 0.2s ease; /* Adds arrow rotation animation. */
} /* Ends searchable dropdown arrow styling. */

.nq-search-select-open .nq-search-select-arrow { /* Starts open arrow styling. */
transform: rotate(180deg); /* Rotates arrow when dropdown is open. */
} /* Ends open arrow styling. */

.nq-search-select-panel { /* Starts searchable dropdown panel styling. */
position: absolute; /* Opens dropdown relative to the field. */
top: calc(100% + 8px); /* Forces dropdown to open below the field. */
left: 0; /* Aligns dropdown panel to the left edge. */
right: 0; /* Aligns dropdown panel to the right edge. */
z-index: 9999; /* Keeps dropdown above popup and page content. */
display: none; /* Keeps dropdown hidden by default. */
padding: 10px; /* Adds internal dropdown spacing. */
border: 1px solid rgba(217, 226, 236, 0.95); /* Adds soft premium border. */
border-radius: 14px; /* Rounds dropdown panel corners. */
background: var(--nq-white); /* Uses white dropdown surface. */
box-shadow: 0 22px 54px rgba(32, 39, 90, 0.18); /* Adds premium floating dropdown shadow. */
} /* Ends searchable dropdown panel styling. */

.nq-search-select-open .nq-search-select-panel { /* Starts open dropdown panel styling. */
display: block; /* Shows dropdown panel when open. */
} /* Ends open dropdown panel styling. */

.nq-search-select-search-wrap { /* Starts dropdown search wrapper styling. */
position: sticky; /* Keeps search input visible while options scroll. */
top: 0; /* Pins search wrapper to the top of the dropdown panel. */
z-index: 2; /* Keeps search input above options. */
padding-bottom: 8px; /* Adds spacing below search input. */
background: var(--nq-white); /* Prevents options from showing behind the sticky search area. */
} /* Ends dropdown search wrapper styling. */

.nq-search-select-search { /* Starts dropdown search input styling. */
width: 100%; /* Makes search input full width. */
min-height: 40px; /* Keeps search input compact but usable. */
border: 1px solid var(--nq-border); /* Adds soft border around search input. */
border-radius: 10px; /* Rounds search input. */
padding: 10px 12px; /* Adds comfortable search input spacing. */
font-size: 14px; /* Keeps search text compact. */
font-weight: 600; /* Makes search text readable. */
color: var(--nq-text); /* Uses main text color. */
background: #fbfdff; /* Uses very soft search input background. */
outline: none; /* Removes default browser outline. */
} /* Ends dropdown search input styling. */

.nq-search-select-search:focus { /* Starts dropdown search focus styling. */
border-color: var(--nq-gold); /* Uses gold border on search focus. */
box-shadow: 0 0 0 3px rgba(238, 157, 27, 0.12); /* Adds soft gold search focus ring. */
} /* Ends dropdown search focus styling. */

.nq-search-select-options { /* Starts dropdown options list styling. */
max-height: 320px; /* Limits only the dropdown options area height. */
overflow-y: auto; /* Adds scrolling only inside the dropdown options list. */
display: grid; /* Stacks options neatly. */
gap: 2px; /* Adds tiny option spacing. */
padding-right: 4px; /* Adds room beside scrollbar. */
scrollbar-width: thin; /* Uses thin scrollbar in Firefox. */
scrollbar-color: rgba(32, 39, 90, 0.34) rgba(195, 224, 233, 0.24); /* Uses brand-friendly scrollbar colors in Firefox. */
} /* Ends dropdown options list styling. */

.nq-search-select-options::-webkit-scrollbar { /* Starts WebKit scrollbar width styling. */
width: 8px; /* Sets clean scrollbar width. */
} /* Ends WebKit scrollbar width styling. */

.nq-search-select-options::-webkit-scrollbar-track { /* Starts WebKit scrollbar track styling. */
border-radius: 999px; /* Rounds scrollbar track. */
background: rgba(195, 224, 233, 0.24); /* Uses soft blue scrollbar track. */
} /* Ends WebKit scrollbar track styling. */

.nq-search-select-options::-webkit-scrollbar-thumb { /* Starts WebKit scrollbar thumb styling. */
border-radius: 999px; /* Rounds scrollbar thumb. */
background: rgba(32, 39, 90, 0.34); /* Uses soft navy scrollbar thumb. */
} /* Ends WebKit scrollbar thumb styling. */

.nq-search-select-options::-webkit-scrollbar-thumb:hover { /* Starts WebKit scrollbar thumb hover styling. */
background: rgba(32, 39, 90, 0.52); /* Darkens scrollbar thumb on hover. */
} /* Ends WebKit scrollbar thumb hover styling. */

.nq-search-select-option { /* Starts searchable dropdown option styling. */
width: 100%; /* Makes each option full width. */
min-height: 38px; /* Keeps option rows compact. */
display: flex; /* Aligns option text and checkmark. */
align-items: center; /* Vertically centers option text. */
padding: 9px 10px; /* Adds clickable option spacing. */
border: 0; /* Removes default button border. */
border-radius: 9px; /* Rounds option row. */
background: transparent; /* Keeps option background clear by default. */
color: var(--nq-text); /* Uses readable option text. */
font-size: 14px; /* Keeps option text compact. */
font-weight: 600; /* Makes option names readable. */
line-height: 1.25; /* Keeps option text clean. */
text-align: left; /* Aligns option text left. */
cursor: pointer; /* Shows clickable option behavior. */
transition: background 0.16s ease, color 0.16s ease; /* Adds smooth option hover transition. */
} /* Ends searchable dropdown option styling. */

.nq-search-select-option:hover,
.nq-search-select-option:focus { /* Starts searchable dropdown option hover and focus styling. */
outline: none; /* Removes default focus outline. */
background: rgba(238, 157, 27, 0.12); /* Uses soft gold option background. */
color: var(--nq-primary); /* Uses navy option text on hover. */
} /* Ends searchable dropdown option hover and focus styling. */

.nq-search-select-option-selected { /* Starts selected dropdown option styling. */
background: rgba(32, 39, 90, 0.1); /* Uses soft navy selected background. */
color: var(--nq-primary); /* Uses navy selected text. */
font-weight: 900; /* Makes selected option bold. */
} /* Ends selected dropdown option styling. */

.nq-search-select-option-selected::after { /* Starts selected option checkmark styling. */
content: "✓"; /* Adds checkmark to selected option. */
margin-left: auto; /* Pushes checkmark to the right. */
color: var(--nq-success); /* Uses success green checkmark. */
font-weight: 900; /* Makes checkmark bold. */
} /* Ends selected option checkmark styling. */

.nq-search-select-empty,
.nq-search-select-loading { /* Starts empty and loading message styling. */
display: block; /* Shows message as block. */
padding: 12px 10px; /* Adds readable message spacing. */
border-radius: 9px; /* Rounds message area. */
background: #f8fafc; /* Uses soft neutral message background. */
color: var(--nq-muted); /* Uses muted message text. */
font-size: 13px; /* Keeps message compact. */
font-weight: 700; /* Makes message readable. */
text-align: center; /* Centers message text. */
} /* Ends empty and loading message styling. */

.nq-search-select-error { /* Starts dropdown error message styling. */
display: block; /* Shows error message as block. */
padding: 12px 10px; /* Adds readable error spacing. */
border-radius: 9px; /* Rounds error area. */
background: rgba(220, 20, 60, 0.08); /* Uses soft alert red background. */
color: var(--nq-alert); /* Uses alert red text. */
font-size: 13px; /* Keeps error compact. */
font-weight: 800; /* Makes error message strong. */
text-align: center; /* Centers error text. */
} /* Ends dropdown error message styling. */

.nq-search-select-disabled .nq-search-select-trigger { /* Starts disabled searchable dropdown styling. */
background: #f2f4f7; /* Uses disabled background. */
color: #98a2b3; /* Uses disabled text color. */
cursor: not-allowed; /* Shows disabled cursor. */
} /* Ends disabled searchable dropdown styling. */

.nq-search-select-disabled .nq-search-select-arrow { /* Starts disabled dropdown arrow styling. */
color: #98a2b3; /* Uses disabled arrow color. */
} /* Ends disabled dropdown arrow styling. */

@media (max-width: 820px) { /* Starts tablet auth popup responsive rules. */
.nq-modal { /* Starts tablet modal wrapper styling. */
padding: 22px 14px 84px; /* Reduces modal outer spacing on tablet. */
} /* Ends tablet modal wrapper styling. */

.nq-modal-panel { /* Starts tablet modal panel styling. */
padding: 26px; /* Reduces modal padding on tablet. */
border-radius: 28px; /* Slightly reduces modal radius on tablet. */
} /* Ends tablet modal panel styling. */

.nq-modal-brand-logo-bg { /* Starts tablet modal logo styling. */
height: 58px; /* Keeps modal logo strong on tablet. */
max-width: 240px; /* Prevents modal logo overflow on tablet. */
} /* Ends tablet modal logo styling. */

.nq-inline-validate-control { /* Starts tablet inline validate layout styling. */
grid-template-columns: 1fr; /* Stacks input and Validate button on narrower screens. */
} /* Ends tablet inline validate layout styling. */

.nq-inline-validate-control .nq-btn { /* Starts tablet inline validate button styling. */
width: 100%; /* Makes Validate button full width on tablet. */
} /* Ends tablet inline validate button styling. */

.nq-search-select-options { /* Starts tablet dropdown options styling. */
max-height: 288px; /* Keeps dropdown options compact on tablet. */
} /* Ends tablet dropdown options styling. */
} /* Ends tablet auth popup responsive rules. */

@media (max-width: 640px) { /* Starts small mobile auth popup responsive rules. */
.nq-modal { /* Starts small mobile modal wrapper styling. */
padding: 14px 12px 80px; /* Adds safe mobile spacing around popup. */
align-items: flex-start; /* Keeps popup visible from top on mobile. */
} /* Ends small mobile modal wrapper styling. */

.nq-modal-panel { /* Starts small mobile modal panel styling. */
padding: 24px; /* Reduces modal panel padding on small mobile. */
border-radius: 24px; /* Reduces modal radius on small mobile. */
} /* Ends small mobile modal panel styling. */

.nq-modal-brand-center { /* Starts small mobile modal logo row styling. */
padding-right: 32px; /* Gives logo safe space away from close button. */
padding-left: 32px; /* Keeps logo centered visually on small screens. */
} /* Ends small mobile modal logo row styling. */

.nq-modal-brand-logo-bg { /* Starts small mobile modal logo styling. */
height: 52px; /* Keeps modal logo readable on small mobile. */
max-width: 220px; /* Prevents modal logo overflow on small mobile. */
border-radius: 14px; /* Keeps logo corners clean on mobile. */
} /* Ends small mobile modal logo styling. */

.nq-modal h2 { /* Starts small mobile modal heading styling. */
font-size: 25px; /* Reduces popup heading size on small mobile. */
} /* Ends small mobile modal heading styling. */

.nq-modal-subtitle { /* Starts small mobile modal subtitle styling. */
font-size: 14px; /* Keeps subtitle compact on small mobile. */
} /* Ends small mobile modal subtitle styling. */

.nq-verification-success { /* Starts small mobile success message styling. */
align-items: flex-start; /* Aligns success icon to first line on small mobile. */
font-size: 13px; /* Keeps success text compact on small mobile. */
} /* Ends small mobile success message styling. */

.nq-check-field { /* Starts small mobile checkbox styling. */
font-size: 12.5px; /* Keeps long legal text manageable on small mobile. */
} /* Ends small mobile checkbox styling. */

.nq-search-select-panel { /* Starts small mobile dropdown panel styling. */
padding: 9px; /* Reduces dropdown panel padding on small mobile. */
} /* Ends small mobile dropdown panel styling. */

.nq-search-select-options { /* Starts small mobile dropdown options styling. */
max-height: 260px; /* Keeps only the dropdown options area scrollable on mobile. */
} /* Ends small mobile dropdown options styling. */

.nq-search-select-trigger { /* Starts small mobile searchable trigger styling. */
min-height: 44px; /* Keeps trigger compact but touch-friendly. */
font-size: 14px; /* Reduces trigger text size slightly. */
} /* Ends small mobile searchable trigger styling. */
} /* Ends small mobile auth popup responsive rules. */

/* ================================================================================================= */ /* Starts final real six-box OTP correction block. */
/* NEDIQR REAL OTP BOX UI */ /* Uses actual six input boxes instead of fake background boxes. */
/* ================================================================================================= */ /* Ends final real six-box OTP correction heading. */

.nq-otp-panel.nq-field-hidden,
.nq-otp-panel[hidden] { /* Starts hidden OTP panel protection. */
display: none !important; /* Keeps hidden OTP panels fully hidden until Validate is clicked. */
} /* Ends hidden OTP panel protection. */

.nq-otp-hidden-input { /* Starts combined hidden OTP input styling. */
display: none !important; /* Hides the combined hidden OTP input from the UI. */
width: 0 !important; /* Removes hidden input width. */
height: 0 !important; /* Removes hidden input height. */
padding: 0 !important; /* Removes hidden input padding. */
margin: 0 !important; /* Removes hidden input margin. */
border: 0 !important; /* Removes hidden input border. */
background: transparent !important; /* Removes hidden input background. */
} /* Ends combined hidden OTP input styling. */

.nq-otp-panel:not(.nq-field-hidden):not([hidden]) { /* Starts visible OTP panel layout. */
display: grid !important; /* Uses grid layout only for visible OTP panels. */
grid-template-columns: minmax(0, 1fr) auto !important; /* Keeps OTP content left and Verify button right. */
align-items: center !important; /* Aligns OTP content and Verify button vertically. */
gap: 14px !important; /* Adds spacing between content and Verify button. */
padding: 14px 16px !important; /* Keeps OTP panel compact and clean. */
border: 1px solid var(--nq-border) !important; /* Keeps soft OTP panel border. */
border-radius: 18px !important; /* Keeps rounded OTP panel corners. */
background: #f3f7fb !important; /* Keeps soft blue-gray OTP panel background. */
} /* Ends visible OTP panel layout. */

.nq-otp-panel:not(.nq-field-hidden):not([hidden]) .nq-otp-panel-content { /* Starts visible OTP content layout. */
display: grid !important; /* Controls OTP content layout. */
grid-template-columns: 1fr !important; /* Keeps OTP content in one clean column. */
gap: 10px !important; /* Adds spacing between heading row and box row. */
width: 100% !important; /* Allows OTP content to use available width. */
min-width: 0 !important; /* Prevents overflow issues. */
} /* Ends visible OTP content layout. */

.nq-otp-panel-head { /* Starts OTP heading row styling. */
display: flex !important; /* Places instruction and timer in the same line. */
align-items: center !important; /* Vertically aligns instruction and timer. */
justify-content: space-between !important; /* Pushes timer to the right side. */
gap: 12px !important; /* Adds spacing between instruction and timer. */
width: 100% !important; /* Gives heading row full width. */
min-width: 0 !important; /* Prevents heading row overflow. */
} /* Ends OTP heading row styling. */

.nq-otp-panel-head p { /* Starts OTP instruction text styling. */
margin: 0 !important; /* Removes default paragraph margin. */
color: var(--nq-muted) !important; /* Keeps instruction muted. */
font-size: 13px !important; /* Keeps instruction compact. */
font-weight: 600 !important; /* Keeps instruction readable. */
line-height: 1.3 !important; /* Keeps instruction line height clean. */
white-space: normal !important; /* Allows instruction to wrap only if needed. */
word-break: normal !important; /* Prevents awkward word breaking. */
overflow-wrap: normal !important; /* Prevents one-word-per-line layout. */
} /* Ends OTP instruction text styling. */

.nq-otp-panel-head .nq-otp-timer { /* Starts OTP timer top-right styling. */
display: inline-flex !important; /* Keeps timer as a compact badge. */
align-items: center !important; /* Vertically centers timer text. */
justify-content: center !important; /* Horizontally centers timer text. */
flex: 0 0 auto !important; /* Prevents timer from shrinking badly. */
width: auto !important; /* Keeps timer natural width. */
max-width: max-content !important; /* Keeps timer only as wide as text. */
white-space: nowrap !important; /* Keeps timer on one line. */
padding: 4px 8px !important; /* Keeps timer compact. */
border-radius: 999px !important; /* Keeps timer pill shaped. */
background: rgba(32, 39, 90, 0.08) !important; /* Uses soft navy timer background. */
color: var(--nq-primary) !important; /* Uses navy timer text. */
font-size: 11px !important; /* Keeps timer small. */
font-weight: 900 !important; /* Makes timer strong. */
line-height: 1 !important; /* Keeps timer height compact. */
} /* Ends OTP timer top-right styling. */

.nq-otp-box-row { /* Starts six-box OTP row styling. */
display: grid !important; /* Places six boxes in one row. */
grid-template-columns: repeat(6, 22px) !important; /* Creates exactly six small boxes. */
gap: 6px !important; /* Adds small spacing between OTP boxes. */
align-items: center !important; /* Vertically aligns boxes. */
justify-content: start !important; /* Keeps OTP boxes aligned left. */
width: max-content !important; /* Keeps row only as wide as six boxes. */
max-width: 100% !important; /* Prevents overflow on very small screens. */
} /* Ends six-box OTP row styling. */

.nq-otp-box-row .nq-otp-box { /* Starts individual OTP box styling. */
display: inline-flex !important; /* Makes each OTP input behave like a compact box. */
align-items: center !important; /* Centers digit vertically. */
justify-content: center !important; /* Centers digit horizontally. */
width: 22px !important; /* Keeps each OTP box small. */
min-width: 22px !important; /* Prevents each OTP box from shrinking. */
max-width: 22px !important; /* Prevents each OTP box from stretching. */
height: 26px !important; /* Keeps each OTP box compact and clickable. */
min-height: 26px !important; /* Prevents old input styles from increasing height. */
max-height: 26px !important; /* Locks OTP box height. */
padding: 0 !important; /* Removes large old input padding. */
margin: 0 !important; /* Removes unwanted spacing. */
border: 1px solid var(--nq-border) !important; /* Adds clear box border. */
border-radius: 6px !important; /* Keeps box corners slightly rounded. */
background: var(--nq-white) !important; /* Keeps OTP boxes white. */
color: var(--nq-primary) !important; /* Uses navy OTP digit color. */
font-size: 13px !important; /* Keeps digit compact and readable. */
font-weight: 900 !important; /* Makes digit bold. */
line-height: 1 !important; /* Keeps digit vertically clean. */
letter-spacing: 0 !important; /* Prevents digit spacing issues. */
text-align: center !important; /* Centers digit inside each box. */
caret-color: var(--nq-primary) !important; /* Uses navy caret. */
box-shadow: none !important; /* Removes old large input shadow. */
outline: none !important; /* Removes default browser outline. */
appearance: none !important; /* Removes browser default appearance. */
-webkit-appearance: none !important; /* Removes WebKit default appearance. */
} /* Ends individual OTP box styling. */

.nq-otp-box-row .nq-otp-box:focus { /* Starts focused OTP box styling. */
border-color: var(--nq-gold) !important; /* Uses gold border on focused OTP box. */
box-shadow: 0 0 0 3px rgba(238, 157, 27, 0.16) !important; /* Adds small gold focus ring. */
outline: none !important; /* Removes browser outline. */
} /* Ends focused OTP box styling. */

.nq-otp-box-row .nq-otp-box:disabled { /* Starts disabled OTP box styling. */
background: #f8fafc !important; /* Uses light disabled background. */
color: #98a2b3 !important; /* Uses muted disabled digit color. */
cursor: not-allowed !important; /* Shows disabled cursor until JS enables the box. */
} /* Ends disabled OTP box styling. */

.nq-otp-panel:not(.nq-field-hidden):not([hidden]) .nq-otp-verify-button { /* Starts Verify OTP button layout. */
grid-column: 2 !important; /* Keeps Verify OTP button in right column. */
grid-row: 1 !important; /* Keeps Verify OTP button aligned with OTP content. */
align-self: center !important; /* Vertically centers Verify OTP button. */
width: auto !important; /* Prevents Verify OTP button from stretching. */
min-width: 112px !important; /* Keeps Verify OTP button stable. */
min-height: 42px !important; /* Keeps Verify OTP button clickable. */
padding: 10px 16px !important; /* Keeps Verify OTP button neat. */
white-space: nowrap !important; /* Prevents Verify OTP text wrapping. */
} /* Ends Verify OTP button layout. */

@media (max-width: 520px) { /* Starts very small screen OTP correction. */
.nq-otp-panel:not(.nq-field-hidden):not([hidden]) { /* Starts mobile visible OTP panel layout. */
grid-template-columns: 1fr !important; /* Stacks OTP content and Verify button only on very small screens. */
align-items: stretch !important; /* Allows button to fit mobile width. */
} /* Ends mobile visible OTP panel layout. */

.nq-otp-panel:not(.nq-field-hidden):not([hidden]) .nq-otp-verify-button { /* Starts mobile Verify OTP button layout. */
grid-column: 1 !important; /* Places Verify OTP button below OTP boxes on small screens. */
grid-row: auto !important; /* Lets Verify OTP button flow naturally. */
width: 100% !important; /* Makes Verify OTP button full width on very small screens only. */
} /* Ends mobile Verify OTP button layout. */

.nq-otp-panel-head { /* Starts mobile OTP heading row styling. */
align-items: flex-start !important; /* Aligns instruction and timer from top on small screens. */
} /* Ends mobile OTP heading row styling. */

.nq-otp-box-row { /* Starts mobile OTP box row styling. */
grid-template-columns: repeat(6, 22px) !important; /* Keeps six compact boxes on mobile. */
gap: 5px !important; /* Reduces gap slightly on mobile. */
} /* Ends mobile OTP box row styling. */
} /* Ends very small screen OTP correction. */