/* ==============================================================
   AUTHENTIX EXTERNAL FORMS
   Global Application Theme
   ============================================================== */

:root {
    /* Authentix primary / neutral palette */
    --atx-orange: #E57200;
    --atx-orange-bright: #FF9E18;
    --atx-orange-dark: #B85B00;
    --atx-orange-soft: #FFF3E8;

    --atx-gray: #65665C;
    --atx-gray-light: #E7E7E4;
    --atx-gray-soft: #F6F6F4;

    --atx-black: #231F20;
    --atx-white: #FFFFFF;

    /* Authentix secondary palette */
    --atx-blue: #0057B7;
    --atx-red: #AB2328;
    --atx-green: #7A9A01;
    --atx-navy: #192957;

    /* Application surfaces */
    --atx-page-background: #F5F5F3;
    --atx-border: #D9D9D5;
    --atx-muted: #65665C;

    /* Bootstrap theme overrides */
    --bs-primary: #E57200;
    --bs-primary-rgb: 229, 114, 0;

    --bs-secondary: #65665C;
    --bs-secondary-rgb: 101, 102, 92;

    --bs-success: #7A9A01;
    --bs-success-rgb: 122, 154, 1;

    --bs-danger: #AB2328;
    --bs-danger-rgb: 171, 35, 40;

    --bs-info: #0057B7;
    --bs-info-rgb: 0, 87, 183;

    --bs-body-color: #231F20;
    --bs-body-bg: #F5F5F3;

    --bs-link-color: #0057B7;
    --bs-link-hover-color: #192957;

    --bs-border-color: #D9D9D5;
}


/* ==============================================================
   DOCUMENT / PAGE FOUNDATION
   ============================================================== */

html {
    font-size: 14px;
    min-height: 100%;
}

@media (min-width: 768px) {

    html {
        font-size: 16px;
    }
}

body {
    min-height: 100vh;
    margin: 0;

    display: flex;
    flex-direction: column;

    font-family:
        Calibri,
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--atx-black);
    background-color: var(--atx-page-background);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

main {
    flex: 1 0 auto;

    width: 100%;

    padding-top: 1.5rem;
    padding-bottom: 3rem;
}


/* ==============================================================
   TYPOGRAPHY
   ============================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--atx-black);
    font-weight: 600;
}

h1 {
    font-weight: 600;
    letter-spacing: -0.02em;
}

.text-muted {
    color: var(--atx-muted) !important;
}

a {
    color: var(--atx-blue);

    text-decoration-color:
        rgba(0, 87, 183, 0.35);
}

a:hover {
    color: var(--atx-navy);
}


/* ==============================================================
   NAVIGATION / HEADER
   ============================================================== */

.navbar {
    position: relative;

    padding-top: 0.65rem;
    padding-bottom: 0.65rem;

    background-color:
        var(--atx-white) !important;

    border-bottom:
        1px solid var(--atx-border) !important;

    box-shadow:
        0 2px 8px
        rgba(35, 31, 32, 0.05);
}

.navbar::after {
    content: "";

    position: absolute;
    bottom: -1px;
    left: 0;

    width: 100%;
    height: 3px;

    background-color:
        var(--atx-orange);
}

.navbar-brand {
    color:
        var(--atx-black) !important;

    font-weight: 600;
}

.navbar-brand img {
    display: block;

    width: auto;
    height: auto;

    max-height: 50px;

    object-fit: contain;
}

.navbar .nav-link {
    color:
        var(--atx-gray) !important;

    font-weight: 500;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
    color:
        var(--atx-orange) !important;
}


/* ==============================================================
   PAGE HEADINGS
   ============================================================== */

main h1 {
    position: relative;

    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
}

main h1::after {
    content: "";

    display: block;

    width: 56px;
    height: 4px;

    margin-top: 0.65rem;

    background-color:
        var(--atx-orange);

    border-radius: 2px;
}

.atx-page-intro {
    max-width: 760px;

    color:
        var(--atx-gray);
}


/* ==============================================================
   EXTERNAL FORMS HEADER / LANGUAGE SELECTOR
   ============================================================== */

/*
 * This layout is shared by:
 *
 * - External Forms landing page
 * - Supplier Questionnaire
 * - Vendor Approval
 * - Supplier Code of Conduct
 *
 * Keeping the language selector in its own fixed header position
 * prevents translated headings and introductory text from moving
 * the selector unpredictably.
 */

.external-forms-header {
    width: 100%;
}

.external-forms-language-selector {
    display: flex;

    flex-shrink: 0;

    justify-content: flex-end;

    min-width: max-content;
}

/*
 * Keep the entire selector together on desktop.
 */
.external-forms-language-selector > div {
    flex-wrap:
        nowrap !important;

    white-space:
        nowrap;
}

/*
 * On narrower screens, deliberately move the language selector
 * below the title rather than allowing arbitrary wrapping.
 */
@media (max-width: 991.98px) {

    .external-forms-header > .d-flex {
        flex-direction:
            column;
    }

    .external-forms-language-selector {
        width: 100%;

        justify-content:
            flex-start;
    }

    .external-forms-language-selector > div {
        flex-wrap:
            wrap !important;

        white-space:
            normal;
    }
}


/* ==============================================================
   CARDS
   ============================================================== */

.card {
    overflow: hidden;

    border:
        1px solid var(--atx-border);

    border-radius:
        0.6rem;

    background-color:
        var(--atx-white);

    box-shadow:
        0 3px 12px
        rgba(35, 31, 32, 0.055) !important;
}

.card-header {
    padding:
        0.95rem 1.25rem;

    color:
        var(--atx-black);

    background-color:
        var(--atx-gray-soft);

    border-bottom:
        1px solid var(--atx-border);
}

/*
 * Form section headers receive the primary Authentix
 * orange accent without overpowering the form surface.
 */
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5 {
    margin: 0;

    color:
        var(--atx-black);
}

.card-header::before {
    content: "";

    display: block;

    width: 36px;
    height: 3px;

    margin-bottom:
        0.55rem;

    border-radius:
        2px;

    background-color:
        var(--atx-orange);
}

.card-body {
    background-color:
        var(--atx-white);
}


/* ==============================================================
   EXTERNAL FORM LANDING CARDS
   ============================================================== */

.external-form-card {
    border:
        1px solid #DDD8D2;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}

.external-form-card:hover {
    transform:
        translateY(-2px);

    border-color:
        var(--atx-orange);

    box-shadow:
        0 0.5rem 1.25rem
        rgba(0, 0, 0, 0.08) !important;
}

.external-form-icon {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        2.75rem;

    height:
        2.75rem;

    border-radius:
        50%;

    background-color:
        var(--atx-orange-soft);

    color:
        var(--atx-orange-dark);

    font-size:
        1.25rem;

    font-weight:
        700;
}


/* ==============================================================
   FORM CONTROLS
   ============================================================== */

.form-label {
    margin-bottom:
        0.4rem;

    color:
        var(--atx-black);

    font-weight:
        600;
}

.form-control,
.form-select {
    min-height:
        42px;

    color:
        var(--atx-black);

    background-color:
        var(--atx-white);

    border:
        1px solid #BFC0BA;

    border-radius:
        0.4rem;

    transition:
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
}

textarea.form-control {
    min-height:
        auto;
}

.form-control:hover,
.form-select:hover {
    border-color:
        var(--atx-gray);
}

.form-control:focus,
.form-select:focus {
    color:
        var(--atx-black);

    background-color:
        var(--atx-white);

    border-color:
        var(--atx-orange);

    box-shadow:
        0 0 0 0.2rem
        rgba(229, 114, 0, 0.16);
}

.form-control[readonly] {
    background-color:
        var(--atx-gray-soft);
}

.form-text {
    color:
        var(--atx-gray);
}


/* ==============================================================
   CHECKBOXES / RADIOS
   ============================================================== */

.form-check-input {
    border-color:
        #A9AAA4;
}

.form-check-input:checked {
    background-color:
        var(--atx-orange);

    border-color:
        var(--atx-orange);
}

.form-check-input:focus {
    border-color:
        var(--atx-orange);

    box-shadow:
        0 0 0 0.2rem
        rgba(229, 114, 0, 0.16);
}


/* ==============================================================
   INPUT GROUPS
   ============================================================== */

.input-group-text {
    color:
        var(--atx-gray);

    background-color:
        var(--atx-gray-soft);

    border-color:
        #BFC0BA;
}


/* ==============================================================
   BUTTONS
   ============================================================== */

.btn {
    border-radius:
        0.4rem;

    font-weight:
        600;

    transition:
        background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out,
        color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out,
        transform 0.08s ease-in-out;
}

.btn:active:not(:disabled) {
    transform:
        translateY(1px);
}

.btn:focus-visible {
    box-shadow:
        0 0 0 0.22rem
        rgba(229, 114, 0, 0.22);
}


/* ==============================================================
   PRIMARY BUTTON
   ============================================================== */

.btn-primary {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #E57200;
    --bs-btn-border-color: #E57200;

    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #C96300;
    --bs-btn-hover-border-color: #C96300;

    --bs-btn-focus-shadow-rgb: 229, 114, 0;

    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #B95C00;
    --bs-btn-active-border-color: #B95C00;

    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #C9A582;
    --bs-btn-disabled-border-color: #C9A582;

    font-weight:
        600;
}


/* ==============================================================
   OUTLINE PRIMARY BUTTON
   ============================================================== */

.btn-outline-primary {
    --bs-btn-color: #E57200;
    --bs-btn-border-color: #E57200;

    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #E57200;
    --bs-btn-hover-border-color: #E57200;

    --bs-btn-focus-shadow-rgb: 229, 114, 0;

    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #C96300;
    --bs-btn-active-border-color: #C96300;
}


/* ==============================================================
   SECONDARY BUTTONS
   ============================================================== */

.btn-secondary {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #65665C;
    --bs-btn-border-color: #65665C;

    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #52534B;
    --bs-btn-hover-border-color: #52534B;
}

.btn-outline-secondary {
    --bs-btn-color: #65665C;
    --bs-btn-border-color: #9B9C94;

    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #65665C;
    --bs-btn-hover-border-color: #65665C;

    --bs-btn-focus-shadow-rgb: 229, 114, 0;
}


/* ==============================================================
   DANGER BUTTON
   ============================================================== */

.btn-danger {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #AB2328;
    --bs-btn-border-color: #AB2328;

    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #8E1D21;
    --bs-btn-hover-border-color: #8E1D21;
}

.btn-outline-danger {
    --bs-btn-color: #AB2328;
    --bs-btn-border-color: #AB2328;

    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #AB2328;
    --bs-btn-hover-border-color: #AB2328;
}


/* ==============================================================
   SUCCESS BUTTON
   ============================================================== */

.btn-success {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #7A9A01;
    --bs-btn-border-color: #7A9A01;

    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #667F01;
    --bs-btn-hover-border-color: #667F01;
}


/* ==============================================================
   VALIDATION
   ============================================================== */

.text-danger {
    color:
        var(--atx-red) !important;
}

.field-validation-error {
    display:
        block;

    margin-top:
        0.3rem;

    color:
        var(--atx-red);

    font-size:
        0.875rem;
}

.input-validation-error {
    border-color:
        var(--atx-red) !important;
}

.input-validation-error:focus {
    border-color:
        var(--atx-red) !important;

    box-shadow:
        0 0 0 0.2rem
        rgba(171, 35, 40, 0.14) !important;
}

.validation-summary-errors {
    color:
        var(--atx-red);
}


/* ==============================================================
   ALERTS
   ============================================================== */

.alert {
    border-radius:
        0.45rem;

    border-width:
        1px;
}

.alert-success {
    color:
        #425301;

    background-color:
        #F2F6E7;

    border-color:
        rgba(122, 154, 1, 0.38);
}

.alert-danger {
    color:
        #711A1E;

    background-color:
        #FAECEC;

    border-color:
        rgba(171, 35, 40, 0.35);
}

.alert-warning {
    color:
        #6C3D00;

    background-color:
        #FFF5E8;

    border-color:
        rgba(229, 114, 0, 0.35);
}

.alert-info {
    color:
        #003D80;

    background-color:
        #EDF5FC;

    border-color:
        rgba(0, 87, 183, 0.28);
}

.alert-light {
    color:
        var(--atx-black);

    background-color:
        var(--atx-gray-soft);

    border-color:
        var(--atx-border) !important;
}


/* ==============================================================
   BOOTSTRAP SUBTLE BACKGROUND OVERRIDES
   ============================================================== */

.bg-success-subtle {
    background-color:
        #EFF4E1 !important;
}

.bg-primary-subtle {
    background-color:
        var(--atx-orange-soft) !important;
}

.bg-danger-subtle {
    background-color:
        #FAECEC !important;
}

.bg-warning-subtle {
    background-color:
        #FFF5E8 !important;
}

.border-success {
    border-color:
        rgba(122, 154, 1, 0.65) !important;
}

.border-primary,
.border-primary-subtle {
    border-color:
        rgba(229, 114, 0, 0.38) !important;
}


/* ==============================================================
   BADGES
   ============================================================== */

.badge {
    padding:
        0.45em 0.7em;

    font-weight:
        600;

    letter-spacing:
        0.01em;
}

.text-bg-primary {
    color:
        #FFFFFF !important;

    background-color:
        var(--atx-orange) !important;
}

.text-bg-secondary {
    color:
        #FFFFFF !important;

    background-color:
        var(--atx-gray) !important;
}

.text-bg-success {
    color:
        #FFFFFF !important;

    background-color:
        var(--atx-green) !important;
}

.text-bg-danger {
    color:
        #FFFFFF !important;

    background-color:
        var(--atx-red) !important;
}

.text-bg-warning {
    color:
        var(--atx-black) !important;

    background-color:
        var(--atx-orange-bright) !important;
}

.text-bg-info {
    color:
        #FFFFFF !important;

    background-color:
        var(--atx-blue) !important;
}


/* ==============================================================
   TABLES
   ============================================================== */

.table {
    --bs-table-color:
        var(--atx-black);

    --bs-table-bg:
        var(--atx-white);

    --bs-table-border-color:
        var(--atx-border);
}

.table-light {
    --bs-table-bg:
        var(--atx-gray-soft);

    --bs-table-color:
        var(--atx-black);
}

.table thead th {
    color:
        var(--atx-black);

    font-weight:
        600;

    border-bottom-width:
        2px;
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg:
        rgba(229, 114, 0, 0.035);

    color:
        var(--atx-black);
}


/* ==============================================================
   FILE INPUT
   ============================================================== */

input[type="file"]::file-selector-button {
    margin-right:
        0.8rem;

    padding:
        0.55rem 0.9rem;

    color:
        var(--atx-black);

    background-color:
        var(--atx-gray-soft);

    border: 0;

    border-right:
        1px solid var(--atx-border);

    transition:
        background-color 0.15s ease-in-out;
}

input[type="file"]::file-selector-button:hover {
    background-color:
        var(--atx-orange-soft);
}


/* ==============================================================
   PASSWORD / BANK DETAIL FIELDS
   ============================================================== */

input[type="password"] {
    letter-spacing:
        0.08em;
}


/* ==============================================================
   AUTHENTIX ACCORDION
   ============================================================== */

#supplierCodeAccordion {
    --atx-accordion-orange-dark: #B85B00;
    --atx-accordion-header-bg: #F3F1EE;
    --atx-accordion-header-hover: #F8F5F1;
    --atx-accordion-border: #D8D4CF;
    --atx-accordion-charcoal: #2F2F2F;
}

#supplierCodeAccordion .accordion-item {
    border-color:
        var(--atx-accordion-border);

    background-color:
        var(--atx-white);
}

#supplierCodeAccordion .accordion-button {
    color:
        var(--atx-accordion-charcoal);

    background-color:
        var(--atx-accordion-header-bg);

    border-left:
        4px solid transparent;

    font-weight:
        600;

    box-shadow:
        none;

    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

/*
 * Collapsed sections use a subtle neutral left edge.
 */
#supplierCodeAccordion .accordion-button.collapsed {
    border-left-color:
        #D6D0CA;
}

#supplierCodeAccordion .accordion-button:hover {
    color:
        var(--atx-accordion-orange-dark);

    background-color:
        var(--atx-accordion-header-hover);

    border-left-color:
        var(--atx-orange);
}

/*
 * Expanded sections use a soft orange surface and orange accent.
 */
#supplierCodeAccordion .accordion-button:not(.collapsed) {
    color:
        var(--atx-accordion-charcoal);

    background-color:
        var(--atx-orange-soft);

    border-left-color:
        var(--atx-orange);

    box-shadow:
        inset 0 -1px 0
        var(--atx-accordion-border);
}

/*
 * Replace Bootstrap's blue focus treatment.
 */
#supplierCodeAccordion .accordion-button:focus {
    color:
        var(--atx-accordion-charcoal);

    border-color:
        var(--atx-orange);

    box-shadow:
        0 0 0 0.16rem
        rgba(229, 114, 0, 0.16);
}

/*
 * Bootstrap supplies the accordion arrow as a background image.
 * Filter the icon toward the Authentix orange palette.
 */
#supplierCodeAccordion .accordion-button::after {
    filter:
        sepia(1)
        saturate(5)
        hue-rotate(350deg)
        brightness(0.75);
}

#supplierCodeAccordion .accordion-body {
    color:
        var(--atx-accordion-charcoal);

    background-color:
        var(--atx-white);
}


/* ==============================================================
   FORM INVITATION / COMPLETION EMPHASIS
   ============================================================== */

.card.border-success .card-header {
    color:
        var(--atx-black);

    background-color:
        #EFF4E1;
}

.card.border-success .card-header::before {
    background-color:
        var(--atx-green);
}


/* ==============================================================
   FOCUS ACCESSIBILITY
   ============================================================== */

/*
 * Use the Authentix orange focus ring globally so keyboard
 * selection remains consistent with the application theme.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline:
        3px solid
        rgba(229, 114, 0, 0.34);

    outline-offset:
        2px;
}


/* ==============================================================
   FOOTER
   ============================================================== */

.footer {
    position:
        static !important;

    inset:
        auto !important;

    bottom:
        auto !important;

    left:
        auto !important;

    right:
        auto !important;

    flex-shrink: 0;

    width: 100%;

    margin-top: 2rem;

    padding:
        1.25rem 0;

    color:
        var(--atx-gray);

    background-color:
        var(--atx-white);

    border-top:
        1px solid var(--atx-border) !important;

    line-height:
        normal;

    white-space:
        normal;
}

.footer a,
.footer .footer-privacy-link {
    color:
        var(--atx-gray);

    text-decoration:
        none;
}

.footer a:hover,
.footer a:focus,
.footer .footer-privacy-link:hover,
.footer .footer-privacy-link:focus {
    color:
        var(--atx-orange);

    text-decoration:
        none;
}


/* ==============================================================
   AUTHENTIX UTILITY CLASSES
   ============================================================== */

.atx-accent {
    color:
        var(--atx-orange) !important;
}

.atx-bg-accent {
    color:
        var(--atx-white);

    background-color:
        var(--atx-orange) !important;
}

.atx-border-accent {
    border-color:
        var(--atx-orange) !important;
}

.atx-section-label {
    color:
        var(--atx-orange);

    font-size:
        0.8rem;

    font-weight:
        700;

    letter-spacing:
        0.075em;

    text-transform:
        uppercase;
}

.atx-sensitive-field {
    border-left:
        3px solid var(--atx-orange);
}


/* ==============================================================
   MOBILE REFINEMENTS
   ============================================================== */

@media (max-width: 767.98px) {

    main {
        padding-top:
            1rem;
    }

    .card-body {
        padding:
            1.15rem !important;
    }

    .card-header {
        padding:
            0.85rem 1.15rem;
    }

    main h1 {
        font-size:
            1.8rem;
    }

    .btn-lg {
        width:
            100%;
    }
}


/* ==============================================================
   PRINT
   ============================================================== */

@media print {

    body {
        background:
            #FFFFFF;
    }

    .navbar,
    .footer,
    .btn,
    .external-forms-language-selector {
        display:
            none !important;
    }

    .card {
        border:
            1px solid #AAAAAA;

        box-shadow:
            none !important;

        break-inside:
            avoid;
    }

    .card-header::before,
    main h1::after {
        background-color:
            #000000;
    }
}

/* ==============================================================
   INTERNAL FORMS NAVIGATION
   ============================================================== */

.internal-forms-card {
    border:
        1px solid var(--atx-border);

    background-color:
        var(--atx-gray-soft);
}

.internal-forms-card .card-body {
    background-color:
        var(--atx-gray-soft);
}

.internal-forms-card:hover {
    border-color:
        rgba(229, 114, 0, 0.45);
}