:root { /* Defines scoped NediQR contact page design variables. */
    --nq-contact-navy: #20275a; /* Stores the primary NediQR navy color. */
    --nq-contact-navy-dark: #11183d; /* Stores the deep navy color for strong surfaces. */
    --nq-contact-gold: #ee9d1b; /* Stores the NediQR gold accent color. */
    --nq-contact-blue: #c3e0e9; /* Stores the soft tech blue accent color. */
    --nq-contact-cream: #f9f6f0; /* Stores the warm cream page color. */
    --nq-contact-green: #225923; /* Stores the success green color. */
    --nq-contact-red: #dc143c; /* Stores the alert red color. */
    --nq-contact-text: #182033; /* Stores the main contact page text color. */
    --nq-contact-muted: #617089; /* Stores the muted contact page text color. */
    --nq-contact-border: #dce6f2; /* Stores the soft border color. */
    --nq-contact-field-bg: #fbfdff; /* Stores the form field background color. */
    --nq-contact-shadow: 0 24px 64px rgba(17, 24, 61, 0.12); /* Stores the main premium card shadow. */
    --nq-contact-shadow-soft: 0 16px 38px rgba(17, 24, 61, 0.08); /* Stores the soft card shadow. */
} /* Ends scoped NediQR contact page design variables. */

.nq-contact-page { /* Styles the Contact page root wrapper. */
    background: var(--nq-contact-cream); /* Applies the homepage-style cream page background. */
} /* Ends Contact page root wrapper styling. */

.nq-contact-hero-card { /* Styles the Contact hero preview card. */
    max-width: 440px; /* Keeps the hero contact card balanced on desktop. */
} /* Ends Contact hero preview card styling. */

.nq-contact-form-section { /* Styles the main contact form section. */
    background: linear-gradient(180deg, #f9f6f0 0%, #f7fbff 100%); /* Adds a warm-to-soft-blue premium section background. */
} /* Ends main contact form section styling. */

.nq-contact-layout { /* Styles the main contact form and information layout. */
    display: grid; /* Creates a two-column contact layout. */
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr); /* Gives more space to the form and controlled width to the side panel. */
    gap: 32px; /* Adds premium spacing between form and side cards. */
    align-items: start; /* Aligns both columns from the top. */
} /* Ends main contact layout styling. */

.nq-contact-form-card { /* Styles the main contact form card. */
    position: relative; /* Allows decorative elements inside the form card. */
    padding: clamp(28px, 3vw, 42px); /* Adds responsive premium spacing inside the card. */
    border: 1px solid rgba(220, 230, 242, 0.96); /* Adds a soft enterprise-grade border. */
    border-radius: 30px; /* Applies large premium rounded corners. */
    background: linear-gradient(145deg, #ffffff 0%, #fbfdff 100%); /* Applies a subtle white-blue form card gradient. */
    box-shadow: var(--nq-contact-shadow); /* Adds premium card shadow. */
    overflow: hidden; /* Clips decorative elements inside the card. */
} /* Ends main contact form card styling. */

.nq-contact-form-card::before { /* Adds the soft decorative glow to the form card. */
    content: ""; /* Creates the decorative glow element. */
    position: absolute; /* Positions the glow inside the card. */
    right: -110px; /* Moves the glow toward the right outside edge. */
    bottom: -120px; /* Moves the glow toward the bottom outside edge. */
    width: 300px; /* Sets the glow width. */
    height: 300px; /* Sets the glow height. */
    border-radius: 999px; /* Makes the glow circular. */
    background: rgba(195, 224, 233, 0.38); /* Applies soft tech-blue glow. */
    pointer-events: none; /* Prevents the glow from blocking form interaction. */
} /* Ends form card decorative glow styling. */

.nq-contact-form { /* Styles the contact form itself. */
    position: relative; /* Keeps form content above decorative glow. */
    z-index: 1; /* Places form content above decorative elements. */
} /* Ends contact form styling. */

.nq-contact-form__grid { /* Styles the contact form field grid. */
    display: grid; /* Creates a structured two-column form layout. */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Shows two form fields per row on desktop. */
    gap: 22px; /* Adds spacing between form fields. */
} /* Ends contact form field grid styling. */

.nq-contact-field { /* Styles each contact field wrapper. */
    display: flex; /* Creates a vertical field layout. */
    flex-direction: column; /* Stacks label, input, and helper text. */
    gap: 9px; /* Adds spacing between field elements. */
    min-width: 0; /* Prevents field overflow inside grid columns. */
} /* Ends contact field wrapper styling. */

.nq-contact-field--full { /* Styles full-width field wrappers. */
    grid-column: 1 / -1; /* Makes the field span both form columns. */
} /* Ends full-width field wrapper styling. */

.nq-contact-field[hidden] { /* Styles hidden contact fields. */
    display: none !important; /* Ensures hidden conditional fields stay hidden. */
} /* Ends hidden contact field styling. */

.nq-contact-field label { /* Styles contact form labels. */
    color: var(--nq-contact-navy); /* Applies deep navy label color. */
    font-size: 14px; /* Sets clean label font size. */
    font-weight: 900; /* Makes labels strong and readable. */
    line-height: 1.35; /* Improves label readability. */
} /* Ends contact form label styling. */

.nq-contact-field label span { /* Styles mandatory field asterisk. */
    color: var(--nq-contact-red); /* Applies alert red to required marker. */
    font-weight: 900; /* Makes the required marker bold. */
} /* Ends mandatory field asterisk styling. */

.nq-contact-field input, /* Targets contact text inputs. */
.nq-contact-field select, /* Targets contact select dropdowns. */
.nq-contact-field textarea { /* Targets contact textarea fields. */
    width: 100%; /* Makes fields fill their container. */
    min-height: 54px; /* Gives fields a premium comfortable height. */
    padding: 0 16px; /* Adds horizontal inner spacing. */
    border: 1px solid rgba(220, 230, 242, 0.98); /* Adds soft field border. */
    border-radius: 15px; /* Applies rounded field corners. */
    background: var(--nq-contact-field-bg); /* Applies light field background. */
    color: var(--nq-contact-text); /* Applies main text color inside fields. */
    font: inherit; /* Inherits the website font styling. */
    font-size: 15px; /* Sets readable field text size. */
    font-weight: 650; /* Makes field text readable without being too heavy. */
    line-height: 1.4; /* Improves field text readability. */
    outline: none; /* Removes default browser outline before custom focus. */
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; /* Adds smooth field focus transition. */
} /* Ends shared contact field input styling. */

.nq-contact-field select { /* Styles contact select dropdowns. */
    cursor: pointer; /* Shows pointer cursor for dropdown fields. */
    appearance: none; /* Removes default select styling where supported. */
    background-image: linear-gradient(45deg, transparent 50%, var(--nq-contact-navy) 50%), linear-gradient(135deg, var(--nq-contact-navy) 50%, transparent 50%); /* Creates a custom select caret. */
    background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; /* Positions the custom select caret. */
    background-size: 6px 6px, 6px 6px; /* Sets the custom select caret size. */
    background-repeat: no-repeat; /* Prevents custom caret repetition. */
    padding-right: 44px; /* Adds room for the custom select caret. */
} /* Ends contact select dropdown styling. */

.nq-contact-field textarea { /* Styles contact textarea fields. */
    min-height: 170px; /* Gives message textarea enough writing height. */
    padding: 16px; /* Adds inner spacing to textarea. */
    resize: vertical; /* Allows vertical resizing only. */
} /* Ends contact textarea styling. */

.nq-contact-field input::placeholder, /* Targets contact input placeholders. */
.nq-contact-field textarea::placeholder { /* Targets contact textarea placeholders. */
    color: #98a6bb; /* Applies muted placeholder color. */
    font-weight: 600; /* Keeps placeholder readable but soft. */
} /* Ends placeholder styling. */

.nq-contact-field input:focus, /* Targets focused contact inputs. */
.nq-contact-field select:focus, /* Targets focused contact dropdowns. */
.nq-contact-field textarea:focus { /* Targets focused contact textareas. */
    border-color: rgba(238, 157, 27, 0.78); /* Applies gold focus border. */
    background: #ffffff; /* Makes focused fields pure white. */
    box-shadow: 0 0 0 5px rgba(238, 157, 27, 0.13); /* Adds accessible gold focus glow. */
} /* Ends focused contact field styling. */

.nq-contact-field input:disabled, /* Targets disabled contact inputs. */
.nq-contact-field select:disabled, /* Targets disabled contact dropdowns. */
.nq-contact-field textarea:disabled { /* Targets disabled contact textareas. */
    opacity: 0.72; /* Makes disabled fields visibly inactive. */
    cursor: not-allowed; /* Shows disabled cursor. */
} /* Ends disabled contact field styling. */

.nq-contact-field input[type="file"] { /* Styles the attachment upload field. */
    min-height: auto; /* Removes fixed height from file input. */
    padding: 14px; /* Adds comfortable file input padding. */
    cursor: pointer; /* Shows pointer cursor for file input. */
} /* Ends attachment upload field styling. */

.nq-contact-field input[type="file"]::file-selector-button { /* Styles the modern file selector button. */
    margin-right: 14px; /* Adds spacing after the file selector button. */
    padding: 10px 14px; /* Adds button inner spacing. */
    border: 0; /* Removes default file selector border. */
    border-radius: 10px; /* Applies rounded file selector corners. */
    background: var(--nq-contact-navy); /* Applies navy file selector background. */
    color: #ffffff; /* Applies white file selector text. */
    font: inherit; /* Inherits website font style. */
    font-size: 13px; /* Sets file selector text size. */
    font-weight: 900; /* Makes file selector text bold. */
    cursor: pointer; /* Shows pointer cursor for file selector button. */
} /* Ends modern file selector button styling. */

.nq-contact-field__help { /* Styles form helper text. */
    margin: 0; /* Removes default helper paragraph margin. */
    color: var(--nq-contact-muted); /* Applies muted helper text color. */
    font-size: 13px; /* Sets helper text size. */
    font-weight: 650; /* Keeps helper text readable. */
    line-height: 1.55; /* Improves helper text readability. */
} /* Ends form helper text styling. */

.nq-contact-privacy-note { /* Styles the DPDP-ready privacy note box. */
    margin-top: 24px; /* Adds spacing above privacy note. */
    padding: 18px 20px; /* Adds privacy note inner spacing. */
    border: 1px solid rgba(195, 224, 233, 0.95); /* Adds soft blue privacy note border. */
    border-radius: 18px; /* Applies rounded privacy note corners. */
    background: linear-gradient(135deg, rgba(195, 224, 233, 0.32), rgba(249, 246, 240, 0.55)); /* Adds soft blue-cream privacy note background. */
} /* Ends privacy note box styling. */

.nq-contact-privacy-note p { /* Styles privacy note text. */
    margin: 0; /* Removes default paragraph margin. */
    color: #334155; /* Applies readable slate text. */
    font-size: 14px; /* Sets privacy note text size. */
    font-weight: 650; /* Makes privacy note readable. */
    line-height: 1.72; /* Improves privacy note readability. */
} /* Ends privacy note text styling. */

.nq-contact-privacy-note a { /* Styles privacy note links. */
    color: var(--nq-contact-navy); /* Applies navy link color. */
    font-weight: 900; /* Makes privacy links bold. */
    text-decoration: underline; /* Keeps privacy link visibly clickable. */
    text-decoration-color: rgba(238, 157, 27, 0.85); /* Applies gold underline color. */
    text-underline-offset: 4px; /* Adds spacing below underline. */
} /* Ends privacy note link styling. */

.nq-contact-form__actions { /* Styles the contact form action area. */
    display: flex; /* Places submit button and status in one row when space allows. */
    align-items: center; /* Vertically centers the action area. */
    justify-content: space-between; /* Separates button and status message. */
    gap: 18px; /* Adds spacing between action elements. */
    margin-top: 26px; /* Adds spacing above the action area. */
} /* Ends contact form action area styling. */

.nq-contact-form__actions .nq-btn { /* Styles the submit button inside contact form. */
    min-height: 54px; /* Gives submit button a premium height. */
    padding-inline: 28px; /* Adds strong horizontal submit button spacing. */
    border-radius: 14px; /* Applies rounded submit button corners. */
    font-weight: 950; /* Makes submit button text strong. */
} /* Ends submit button styling. */

.nq-contact-form__status { /* Styles the contact form status message area. */
    min-height: 22px; /* Reserves space for status messages. */
    margin: 0; /* Removes default paragraph margin. */
    color: var(--nq-contact-muted); /* Applies muted default status color. */
    font-size: 14px; /* Sets status message size. */
    font-weight: 800; /* Makes status message readable. */
    line-height: 1.5; /* Improves status message readability. */
    text-align: right; /* Aligns status text to the right on desktop. */
} /* Ends contact form status message styling. */

.nq-contact-form__status.is-success { /* Styles successful contact form status messages. */
    color: var(--nq-contact-green); /* Applies success green to success messages. */
} /* Ends successful status message styling. */

.nq-contact-form__status.is-error { /* Styles failed contact form status messages. */
    color: var(--nq-contact-red); /* Applies alert red to error messages. */
} /* Ends failed status message styling. */

.nq-contact-side { /* Styles the contact side information panel. */
    display: grid; /* Creates stacked side cards. */
    gap: 20px; /* Adds spacing between side cards. */
    position: sticky; /* Keeps side information visible while scrolling on desktop. */
    top: 96px; /* Places sticky side panel below the public header. */
} /* Ends contact side panel styling. */

.nq-contact-info-card { /* Styles contact side information cards. */
    min-height: auto; /* Avoids unwanted equal-height behavior from shared feature cards. */
    border-top: 4px solid var(--nq-contact-gold); /* Adds premium gold top accent. */
    background: linear-gradient(145deg, #ffffff 0%, #f8fbff 100%); /* Adds clean white-blue card background. */
    box-shadow: var(--nq-contact-shadow-soft); /* Adds soft premium card shadow. */
} /* Ends contact side information card styling. */

.nq-contact-info-card:nth-child(2) { /* Styles the second side information card. */
    border-top-color: var(--nq-contact-blue); /* Applies soft blue top accent to email card. */
} /* Ends second side information card styling. */

.nq-contact-info-card:nth-child(3) { /* Styles the third side information card. */
    border-top-color: var(--nq-contact-navy); /* Applies navy top accent to guidance card. */
} /* Ends third side information card styling. */

.nq-contact-info-card p { /* Styles paragraphs inside contact information cards. */
    color: var(--nq-contact-muted); /* Applies muted text color. */
    font-size: 15px; /* Sets readable side card text size. */
    line-height: 1.72; /* Improves side card paragraph readability. */
} /* Ends contact information card paragraph styling. */

.nq-contact-info-card strong { /* Styles strong labels in contact information cards. */
    color: var(--nq-contact-navy); /* Applies navy color to strong labels. */
    font-weight: 900; /* Makes labels strong. */
} /* Ends strong label styling in contact information cards. */

.nq-contact-info-card a { /* Styles links inside contact information cards. */
    color: var(--nq-contact-navy); /* Applies navy link color. */
    font-weight: 900; /* Makes contact links bold. */
    text-decoration: underline; /* Keeps email links visible. */
    text-decoration-color: rgba(238, 157, 27, 0.78); /* Applies gold underline color. */
    text-underline-offset: 4px; /* Adds underline spacing. */
    overflow-wrap: anywhere; /* Prevents long email links from breaking layout. */
} /* Ends contact information card link styling. */

.nq-contact-page .nq-workflow-grid { /* Refines workflow grid usage on the Contact page. */
    align-items: stretch; /* Makes category cards stretch evenly. */
} /* Ends Contact page workflow grid refinement. */

.nq-contact-page .nq-workflow-card { /* Refines contact category cards. */
    min-height: 220px; /* Gives category cards a consistent premium height. */
} /* Ends contact category card refinement. */

.nq-contact-page .nq-final-cta-card { /* Refines final CTA card on Contact page. */
    box-shadow: 0 28px 76px rgba(17, 24, 61, 0.16); /* Adds a stronger premium CTA shadow. */
} /* Ends final CTA card refinement. */

@media (max-width: 1180px) { /* Starts large tablet and small desktop contact rules. */
    .nq-contact-layout { /* Adjusts contact layout on smaller desktop screens. */
        grid-template-columns: 1fr; /* Moves side cards below the form. */
    } /* Ends smaller desktop contact layout adjustment. */

    .nq-contact-side { /* Adjusts side panel on smaller desktop screens. */
        position: relative; /* Removes sticky behavior when layout is single-column. */
        top: auto; /* Resets sticky top value. */
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* Shows side cards in three columns. */
    } /* Ends smaller desktop side panel adjustment. */
} /* Ends large tablet and small desktop contact rules. */

@media (max-width: 900px) { /* Starts tablet contact rules. */
    .nq-contact-form-card { /* Adjusts contact form card on tablet. */
        padding: 30px; /* Reduces form card padding for tablet. */
        border-radius: 26px; /* Reduces form card radius for tablet. */
    } /* Ends tablet form card adjustment. */

    .nq-contact-side { /* Adjusts side panel on tablet. */
        grid-template-columns: 1fr; /* Shows side cards in one column. */
    } /* Ends tablet side panel adjustment. */
} /* Ends tablet contact rules. */

@media (max-width: 760px) { /* Starts mobile contact rules. */
    .nq-contact-form__grid { /* Adjusts form grid on mobile. */
        grid-template-columns: 1fr; /* Shows one field per row on mobile. */
        gap: 18px; /* Reduces form field gap on mobile. */
    } /* Ends mobile form grid adjustment. */

    .nq-contact-field--full { /* Adjusts full-width fields on mobile. */
        grid-column: auto; /* Keeps full fields natural in single-column layout. */
    } /* Ends mobile full-width field adjustment. */

    .nq-contact-form-card { /* Adjusts form card on mobile. */
        padding: 24px 20px; /* Reduces mobile form card padding. */
        border-radius: 22px; /* Reduces mobile form card radius. */
    } /* Ends mobile form card adjustment. */

    .nq-contact-field input, /* Targets mobile contact inputs. */
    .nq-contact-field select, /* Targets mobile contact dropdowns. */
    .nq-contact-field textarea { /* Targets mobile contact textareas. */
        min-height: 50px; /* Reduces field height on mobile. */
        font-size: 14px; /* Reduces field text size on mobile. */
    } /* Ends mobile contact field sizing. */

    .nq-contact-field textarea { /* Adjusts mobile textarea. */
        min-height: 150px; /* Reduces mobile textarea height. */
    } /* Ends mobile textarea adjustment. */

    .nq-contact-form__actions { /* Adjusts form action area on mobile. */
        flex-direction: column; /* Stacks button and status message. */
        align-items: stretch; /* Makes action items full width. */
    } /* Ends mobile form action area adjustment. */

    .nq-contact-form__actions .nq-btn { /* Adjusts form submit button on mobile. */
        width: 100%; /* Makes submit button full width. */
        justify-content: center; /* Centers submit button text. */
    } /* Ends mobile submit button adjustment. */

    .nq-contact-form__status { /* Adjusts status message on mobile. */
        text-align: left; /* Aligns status message left on mobile. */
    } /* Ends mobile status message adjustment. */
} /* Ends mobile contact rules. */

@media (max-width: 460px) { /* Starts small mobile contact rules. */
    .nq-contact-form-card { /* Adjusts form card on small mobile screens. */
        padding: 22px 16px; /* Reduces form card padding further. */
    } /* Ends small mobile form card adjustment. */

    .nq-contact-privacy-note { /* Adjusts privacy note on small mobile screens. */
        padding: 16px; /* Reduces privacy note padding. */
        border-radius: 15px; /* Reduces privacy note radius. */
    } /* Ends small mobile privacy note adjustment. */

    .nq-contact-field input[type="file"]::file-selector-button { /* Adjusts file selector button on small mobile screens. */
        display: block; /* Places file selector button on its own line where supported. */
        margin: 0 0 10px; /* Adds spacing below file selector button. */
    } /* Ends small mobile file selector button adjustment. */
} /* Ends small mobile contact rules. */