/* ============================================================
   MY ANCILLARY AGENCY
   SHARED FORM MODULE STYLES

   Used by:
   /form/login.php
   /form/dsc_form/index.php
   /form/ireps_form/index.php
   /form/uvam_form/index.php

   Main stylesheet:
   /form/assets/style.css

   IMPORTANT:
   This stylesheet is FORM TYPE AGNOSTIC.

   Do NOT use:
   .dsc-*
   .ireps-*
   .uvam-*

   All normal form components use:
   .form-*
============================================================ */


/* ============================================================
   RESET / BASE
============================================================ */

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


.form-page {
    width: 100%;
    min-height: 100vh;

    margin: 0;
    padding: 0;

    color: #24242d;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    font-size: 15px;
    line-height: 1.6;

    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 8% 5%,
            rgba(103, 53, 212, 0.075) 0%,
            rgba(103, 53, 212, 0.025) 24%,
            transparent 48%
        ),
        radial-gradient(
            circle at 92% 15%,
            rgba(124, 82, 220, 0.065) 0%,
            rgba(124, 82, 220, 0.02) 25%,
            transparent 48%
        ),
        linear-gradient(
            180deg,
            #faf9fd 0%,
            #f8f7fb 45%,
            #f5f4f9 100%
        );
}


.form-page button,
.form-page input,
.form-page select,
.form-page textarea {
    font-family: inherit;
}


.form-page img,
.form-page svg {
    max-width: 100%;
}


/* ============================================================
   NORMAL FORM PAGE
============================================================ */

.form-page {
    width: 100%;
    min-height: 100vh;
}


/* ============================================================
   FORM PAGE CONTAINER
============================================================ */

.form-page-container {
    width: 68%;
    max-width: 1000px;

    margin-left: auto;
    margin-right: auto;

    padding:
        48px
        0
        70px;

    min-width: 0;
}


/* ============================================================
   PAGE INTRO
============================================================ */

.form-intro {
    width: 100%;
    min-width: 0;

    margin: 0 0 30px;
}


/* Generic section label */

.form-section-label {
    display: block;

    margin: 0 0 7px;

    color: #6735d4;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1.2px;
    text-transform: uppercase;
}


/* Dedicated intro eyebrow */

.form-intro-eyebrow {
    display: block;

    margin: 0 0 9px;

    color: #6735d4;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.35px;
    line-height: 1.3;

    text-transform: uppercase;
}


.form-intro h1 {
    width: 100%;

    margin: 0 0 10px;

    color: #24242d;

    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;

    letter-spacing: -0.5px;

    overflow-wrap: anywhere;
}


.form-intro h1 span {
    color: #6735d4;
}


.form-intro p {
    max-width: 700px;

    margin: 0;

    color: #6f6f79;

    font-size: 15px;
    line-height: 1.6;
}


/* ============================================================
   FORM CONTAINER
============================================================ */

.form-container {
    width: 100%;
    min-width: 0;
}


/* ============================================================
   COMMON FORM
============================================================ */

.common-form {
    width: 100%;
    min-width: 0;
}


/* ============================================================
   FORM CARD
============================================================ */

.form-card {
    width: 100%;
    min-width: 0;

    margin: 0 0 20px;

    background: #ffffff;

    border: 1px solid #e4e4eb;
    border-radius: 12px;

    box-shadow:
        0 5px 20px rgba(25, 15, 55, 0.055),
        0 1px 3px rgba(25, 15, 55, 0.025);

    overflow: hidden;
}


.form-card:last-child {
    margin-bottom: 0;
}


.form-card[hidden] {
    display: none !important;
}


/* ============================================================
   CARD HEADER
============================================================ */

.form-card-header {
    width: 100%;
    min-width: 0;

    display: flex;
    align-items: flex-start;

    gap: 16px;

    padding: 24px 28px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fefeff 100%
        );

    border-bottom: 1px solid #eeeef3;
}


/* ============================================================
   CARD STEP NUMBER
   Supports both:
   .form-step-number
   .form-section-number
============================================================ */

.form-step-number,
.form-section-number {
    width: 42px;
    height: 42px;

    min-width: 42px;
    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #f1eaff 0%,
            #ece4ff 100%
        );

    color: #6330c8;

    font-size: 13px;
    font-weight: 700;

    line-height: 1;

    box-shadow:
        inset 0 0 0 1px rgba(103, 53, 212, 0.035);
}


/* ============================================================
   CARD HEADING
============================================================ */

.form-card-heading {
    min-width: 0;
    flex: 1 1 auto;
}


.form-card-label {
    display: block;

    margin: 0 0 3px;

    color: #6735d4;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1px;
    text-transform: uppercase;
}


.form-card-heading h2,
.form-card-header h2 {
    margin: 0 0 4px;

    color: #24242d;

    font-size: 21px;
    line-height: 1.3;
    font-weight: 700;

    letter-spacing: -0.2px;

    overflow-wrap: anywhere;
}


.form-card-heading p,
.form-card-header p {
    margin: 0;

    color: #73737d;

    font-size: 14px;
    line-height: 1.5;
}


/* ============================================================
   FORM BODY
============================================================ */

.form-body {
    width: 100%;
    min-width: 0;

    padding: 28px;
}


/* ============================================================
   FORM GRID
   ------------------------------------------------------------
   Desktop / Web  : 2 columns
   Mobile         : 1 column
============================================================ */

.form-grid {
    width: 100%;
    min-width: 0;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        20px
        22px;
}


/* ============================================================
   FULL WIDTH GRID ITEM
============================================================ */

.form-grid-full {
    grid-column: 1 / -1;

    min-width: 0;
}


/* ============================================================
   FORM FIELD
============================================================ */

.form-field {
    width: 100%;
    min-width: 0;

    margin: 0;
}


.form-field label {
    display: block;

    max-width: 100%;

    margin: 0 0 7px;

    color: #30303a;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.4;

    overflow-wrap: anywhere;
}


.form-field label span {
    color: #d33b3b;
}


.required {
    color: #d33b3b;
}


/* ============================================================
   FORM CONTROL
============================================================ */

.form-control {
    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin: 0;

    padding:
        9px
        12px;

    border:
        1px solid
        #d7d7df;

    border-radius: 7px;

    background: #ffffff;
    color: #272731;

    font-family: inherit;

    font-size: 14px;
    line-height: 1.4;

    outline: none;

    box-shadow: none;

    appearance: auto;

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


/* ============================================================
   TEXT INPUTS
============================================================ */

.form-field input,
.form-control {
    font-family: inherit;
}


.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="number"],
.form-field input[type="date"],
.form-field input[type="password"],
.form-field input[type="url"],
.form-field input[type="search"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    height: 44px;

    padding:
        9px
        12px;
}


/* ============================================================
   SELECT
============================================================ */

.form-field select,
.form-select {
    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    height: 44px;

    padding:
        9px
        36px
        9px
        12px;

    border:
        1px solid
        #d7d7df;

    border-radius: 7px;

    background: #ffffff;
    color: #272731;

    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;

    cursor: pointer;

    outline: none;

    appearance: auto;

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


/* ============================================================
   TEXTAREA
============================================================ */

.form-field textarea,
.form-control[type="textarea"] {
    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    min-height: 120px;

    padding:
        10px
        12px;

    resize: vertical;
}


/* ============================================================
   PLACEHOLDER
============================================================ */

.form-field input::placeholder,
.form-field textarea::placeholder,
.form-control::placeholder {
    color: #a2a2aa;

    opacity: 1;
}


/* ============================================================
   HOVER
============================================================ */

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover,
.form-control:hover {
    border-color: #c9c9d2;
}


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

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.form-control:focus,
.form-select:focus {
    border-color: #6735d4;

    box-shadow:
        0 0 0 3px
        rgba(103, 53, 212, 0.10);

    background: #ffffff;

    outline: none;
}


/* ============================================================
   HELP TEXT
============================================================ */

.form-help {
    display: block;

    max-width: 100%;

    margin-top: 6px;

    color: #85858e;

    font-size: 12px;
    line-height: 1.5;

    overflow-wrap: anywhere;
}


/* ============================================================
   FORM CHECKBOX / RADIO GROUP
============================================================ */

.form-options {
    width: 100%;
    min-width: 0;

    display: flex;
    flex-wrap: wrap;

    gap: 10px 18px;
}


.form-option {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    min-height: 34px;

    color: #3a3a45;

    font-size: 14px;

    cursor: pointer;
}


.form-option input {
    width: 16px;
    height: 16px;

    min-width: 16px;

    margin: 0;

    accent-color: #6735d4;

    cursor: pointer;
}


/* ============================================================
   FORM ACTIONS
============================================================ */

.form-actions {
    width: 100%;
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 10px;

    margin-top: 26px;
}


.form-actions-between {
    justify-content: space-between;
}


/* ============================================================
   REQUIRED NOTE
============================================================ */

.form-required-note {
    color: #85858e;

    font-size: 12px;
    line-height: 1.4;
}


.form-required-note span {
    color: #d33b3b;
}


/* ============================================================
   FORM BUTTON
============================================================ */

.form-btn {
    min-width: 110px;
    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding:
        9px
        18px;

    border:
        1px solid
        transparent;

    border-radius: 7px;

    font-family: inherit;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.2;

    cursor: pointer;

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


.form-btn:hover {
    transform: translateY(-1px);
}


.form-btn:active {
    transform: translateY(0);
}


/* ============================================================
   BUTTON ARROW
============================================================ */

.form-btn-arrow {
    display: inline-block;

    font-size: 17px;
    line-height: 1;
}


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

.form-btn-primary {
    background: #6735d4;
    color: #ffffff;

    border-color: #6735d4;

    box-shadow:
        0 5px 14px
        rgba(103, 53, 212, 0.16);
}


.form-btn-primary:hover {
    background: #5727bd;
    border-color: #5727bd;

    box-shadow:
        0 7px 18px
        rgba(103, 53, 212, 0.22);
}


.form-btn-primary:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 3px
        rgba(103, 53, 212, 0.18),
        0 6px 15px
        rgba(103, 53, 212, 0.14);
}


/* ============================================================
   SECONDARY BUTTON
============================================================ */

.form-btn-secondary {
    background: #ffffff;
    color: #363640;

    border-color: #d5d5dd;
}


.form-btn-secondary:hover {
    background: #f5f5f8;

    border-color: #c9c9d1;
}


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

.form-btn-danger {
    background: #ffffff;
    color: #b83232;

    border-color: #e2bebe;
}


.form-btn-danger:hover {
    background: #fff5f5;

    border-color: #d9a5a5;
}


/* ============================================================
   DISABLED
============================================================ */

.form-btn:disabled {
    opacity: 0.6;

    cursor: not-allowed;

    transform: none;
}


/* ============================================================
   FORM MESSAGE
============================================================ */

.form-message {
    width: 100%;
    min-width: 0;

    display: flex;
    align-items: flex-start;

    gap: 9px;

    margin: 0 0 20px;

    padding:
        11px
        13px;

    border-radius: 8px;

    font-size: 12px;
    line-height: 1.45;
}


.form-message-error {
    border: 1px solid #f0cccc;

    background: #fff7f7;

    color: #a42f2f;
}


.form-message-success {
    border: 1px solid #cce8d3;

    background: #f5fff7;

    color: #26713a;
}


.form-message-info {
    border: 1px solid #d7d0ed;

    background: #faf8ff;

    color: #5736a4;
}


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

.form-field input:invalid:not(:placeholder-shown),
.form-field textarea:invalid:not(:placeholder-shown) {
    border-color: #d7d7df;
}


/* ============================================================
   REQUIRED MARK
============================================================ */

.form-required {
    color: #d33b3b;

    margin-left: 2px;
}


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

.form-field input[type="file"] {
    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    min-height: 44px;

    padding:
        8px
        10px;

    border:
        1px solid
        #d7d7df;

    border-radius: 7px;

    background: #ffffff;

    color: #4a4a55;

    font-family: inherit;
    font-size: 13px;

    cursor: pointer;

    overflow: hidden;
}


.form-field input[type="file"]:focus {
    border-color: #6735d4;

    outline: none;

    box-shadow:
        0 0 0 3px
        rgba(103, 53, 212, 0.10);
}


/* ============================================================
   FORM SECTION
============================================================ */

.form-section {
    width: 100%;
    min-width: 0;

    margin: 0 0 30px;
}


.form-section:last-child {
    margin-bottom: 0;
}


.form-section-title {
    display: flex;
    align-items: center;

    gap: 9px;

    margin: 0 0 18px;

    padding-bottom: 10px;

    border-bottom: 1px solid #eeeeF2;

    color: #292934;

    font-size: 17px;
    font-weight: 700;

    line-height: 1.3;
}


.form-section-title::before {
    content: "";

    width: 4px;
    height: 19px;

    flex: 0 0 4px;

    border-radius: 4px;

    background: #6735d4;
}


/* ============================================================
   FORM DIVIDER
============================================================ */

.form-divider {
    width: 100%;
    height: 1px;

    margin:
        26px
        0;

    background: #eeeeF2;
}


/* ============================================================
   FORM DOCUMENTS
============================================================ */

.form-documents {
    width: 100%;
    min-width: 0;

    margin-top: 30px;
    padding-top: 28px;

    border-top: 1px solid #eeeeF3;
}


.form-documents-header {
    width: 100%;
    min-width: 0;

    margin-bottom: 18px;
}


.form-documents-title {
    margin:
        0
        0
        4px;

    color: #292934;

    font-size: 19px;
    line-height: 1.3;

    font-weight: 700;

    overflow-wrap: anywhere;
}


.form-documents-description {
    margin: 0;

    color: #777781;

    font-size: 13px;
    line-height: 1.5;

    overflow-wrap: anywhere;
}


/* ============================================================
   DOCUMENT GRID
============================================================ */

.form-document-grid {
    width: 100%;
    min-width: 0;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 12px;
}


/* ============================================================
   DOCUMENT ROW
============================================================ */

.form-document-row {
    width: 100%;
    min-width: 0;

    min-height: 58px;

    display: grid;

    grid-template-columns:
        38px
        minmax(
            0,
            1fr
        );

    align-items: center;

    padding:
        10px
        13px;

    border:
        1px solid
        #e3e3e9;

    border-radius: 8px;

    background: #fcfcfd;

    overflow: hidden;

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


.form-document-row:hover {
    border-color: #d7d0ed;

    background: #ffffff;

    box-shadow:
        0 3px 12px
        rgba(25, 15, 55, 0.04);
}


.form-document-number {
    min-width: 0;

    color: #6735d4;

    font-size: 13px;
    font-weight: 700;
}


.form-document-name {
    min-width: 0;

    color: #30303a;

    font-size: 14px;
    font-weight: 500;

    line-height: 1.45;

    overflow-wrap: anywhere;
    word-break: break-word;
}


/* ============================================================
   PUBLIC FORM LOGIN
   ------------------------------------------------------------
   Standalone login page.
   No header.
   No footer.
   No navigation.
============================================================ */


/* ============================================================
   PUBLIC LOGIN PAGE
============================================================ */

.public-login-page {
    position: relative;

    width: 100%;
    min-height: 100vh;

    margin: 0;
    padding: 0;

    overflow-x: hidden;

    color: #24242d;

    background:
        linear-gradient(
            135deg,
            #eee7ff 0%,
            #f5f1ff 38%,
            #faf9fd 70%,
            #eee8fb 100%
        );
}


/* ============================================================
   BACKGROUND LARGE PURPLE GLOW — TOP LEFT
============================================================ */

.public-login-page::before {
    content: "";

    position: fixed;

    width: 620px;
    height: 620px;

    top: -300px;
    left: -230px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(103, 53, 212, 0.28) 0%,
            rgba(103, 53, 212, 0.15) 32%,
            rgba(103, 53, 212, 0.05) 55%,
            transparent 74%
        );

    pointer-events: none;

    z-index: 0;
}


/* ============================================================
   BACKGROUND LARGE PURPLE GLOW — BOTTOM RIGHT
============================================================ */

.public-login-page::after {
    content: "";

    position: fixed;

    width: 700px;
    height: 700px;

    right: -330px;
    bottom: -360px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(103, 53, 212, 0.23) 0%,
            rgba(103, 53, 212, 0.11) 36%,
            rgba(103, 53, 212, 0.04) 58%,
            transparent 75%
        );

    pointer-events: none;

    z-index: 0;
}


/* ============================================================
   LOGIN MAIN
============================================================ */

.public-login-main {
    position: relative;

    width: 100%;
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        55px
        24px;

    z-index: 1;
}


/* ============================================================
   SUBTLE BACKGROUND GRID / DOT PATTERN
============================================================ */

.public-login-main::before {
    content: "";

    position: fixed;

    inset: 0;

    background-image:
        radial-gradient(
            rgba(103, 53, 212, 0.10) 1px,
            transparent 1px
        );

    background-size: 28px 28px;

    opacity: 0.35;

    pointer-events: none;

    z-index: -1;
}


/* ============================================================
   LOGIN WRAPPER
============================================================ */

.public-login-wrapper {
    position: relative;

    width: 62%;
    max-width: 700px;

    margin-left: auto;
    margin-right: auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    z-index: 2;
}


/* ============================================================
   DECORATIVE CIRCLE — RIGHT
============================================================ */

.public-login-wrapper::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    top: 90px;
    right: -155px;

    border:
        1px solid
        rgba(103, 53, 212, 0.16);

    border-radius: 50%;

    box-shadow:
        0 0 0 24px rgba(103, 53, 212, 0.025),
        0 0 0 48px rgba(103, 53, 212, 0.018);

    pointer-events: none;

    z-index: -1;
}


/* ============================================================
   DECORATIVE CIRCLE — LEFT
============================================================ */

.public-login-wrapper::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    bottom: 65px;
    left: -135px;

    border:
        1px solid
        rgba(103, 53, 212, 0.13);

    border-radius: 50%;

    box-shadow:
        0 0 0 18px rgba(103, 53, 212, 0.022);

    pointer-events: none;

    z-index: -1;
}


/* ============================================================
   LOGIN BRAND
============================================================ */

.public-login-brand {
    display: flex;
    align-items: center;

    gap: 11px;

    margin: 0 0 30px;

    color: #24104f;
}


.public-login-brand-mark {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #7545dc 0%,
            #5e2cc5 100%
        );

    color: #ffffff;

    font-size: 15px;
    font-weight: 800;

    letter-spacing: -0.5px;

    box-shadow:
        0 8px 20px rgba(104, 50, 212, 0.23);
}


.public-login-brand-name {
    font-size: 16px;
    font-weight: 700;

    line-height: 1.2;
}


/* ============================================================
   LOGIN INTRO
============================================================ */

.public-login-intro {
    width: 100%;
    min-width: 0;

    margin: 0 0 28px;

    text-align: center;
}


.public-login-label {
    display: inline-block;

    margin: 0 0 9px;

    padding:
        5px
        11px;

    border:
        1px solid
        rgba(103, 53, 212, 0.15);

    border-radius: 30px;

    background:
        rgba(255, 255, 255, 0.48);

    color: #6c35d9;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.4px;
    text-transform: uppercase;

    box-shadow:
        0 3px 10px
        rgba(103, 53, 212, 0.04);
}


.public-login-intro h1 {
    margin: 0;

    color: #20202a;

    font-size: 32px;
    line-height: 1.2;

    font-weight: 750;

    letter-spacing: -0.7px;

    overflow-wrap: anywhere;
}


.public-login-intro h1 span {
    display: block;

    margin-top: 5px;

    color: #6832d4;
}


.public-login-intro p {
    max-width: 560px;

    margin:
        12px
        auto
        0;

    color: #70707a;

    font-size: 14px;
    line-height: 1.65;
}


/* ============================================================
   LOGIN CARD
============================================================ */

.public-login-card {
    position: relative;

    width: 100%;
    max-width: 520px;

    margin: 0;

    background:
        rgba(255, 255, 255, 0.97);

    border:
        1px solid
        rgba(225, 223, 235, 0.95);

    border-radius: 17px;

    box-shadow:
        0 22px 55px
        rgba(40, 20, 85, 0.11),
        0 5px 18px
        rgba(40, 20, 85, 0.05);

    overflow: hidden;
}


/* ============================================================
   SMALL PURPLE CARD TOP LINE
============================================================ */

.public-login-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            #5c2bc2 0%,
            #7544dc 50%,
            #5c2bc2 100%
        );

    z-index: 2;
}


/* ============================================================
   LOGIN CARD TOP
============================================================ */

.public-login-card-top {
    width: 100%;
    min-width: 0;

    display: flex;
    align-items: flex-start;

    gap: 15px;

    padding:
        27px
        30px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fcfbff 100%
        );

    border-bottom:
        1px solid
        #eeeef2;
}


.public-login-icon {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #f1eaff 0%,
            #e8ddff 100%
        );

    color: #6030c5;

    font-size: 19px;

    box-shadow:
        inset 0 0 0 1px
        rgba(103, 53, 212, 0.06);
}


.public-login-card-label {
    display: block;

    margin: 0 0 3px;

    color: #6c35d9;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;
    text-transform: uppercase;
}


.public-login-card-top h2 {
    margin: 0 0 3px;

    color: #292934;

    font-size: 20px;
    line-height: 1.3;

    font-weight: 700;
}


.public-login-card-top p {
    margin: 0;

    color: #777781;

    font-size: 13px;
    line-height: 1.5;
}


/* ============================================================
   LOGIN ERROR
============================================================ */

.public-login-error {
    width: calc(100% - 60px);
    min-width: 0;

    display: flex;
    align-items: flex-start;

    gap: 9px;

    margin:
        20px
        30px
        0;

    padding:
        11px
        13px;

    border:
        1px solid
        #f0cccc;

    border-radius: 8px;

    background: #fff7f7;

    color: #a42f2f;

    font-size: 12px;
    line-height: 1.45;

    overflow-wrap: anywhere;
}


/* ============================================================
   LOGIN FORM
============================================================ */

.public-login-form {
    width: 100%;
    min-width: 0;

    padding: 30px;
}


/* ============================================================
   LOGIN FIELD
============================================================ */

.public-login-field {
    width: 100%;
    min-width: 0;

    margin: 0 0 24px;
}


.public-login-field label {
    display: block;

    margin: 0 0 8px;

    color: #292934;

    font-size: 14px;
    font-weight: 650;

    line-height: 1.4;
}


.public-login-field label span {
    color: #d53030;
}


/* ============================================================
   LOGIN MOBILE INPUT WRAPPER
============================================================ */

.public-login-input-wrap {
    width: 100%;
    min-width: 0;

    display: flex;
    align-items: stretch;

    border:
        1px solid
        #d6d6df;

    border-radius: 9px;

    background: #ffffff;

    overflow: hidden;

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


.public-login-input-wrap:hover {
    border-color: #c7c7d0;
}


.public-login-input-wrap:focus-within {
    border-color: #6832d4;

    box-shadow:
        0 0 0 3px
        rgba(108, 53, 217, 0.10);
}


/* ============================================================
   COUNTRY CODE
============================================================ */

.public-login-country-code {
    min-width: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        0
        10px;

    border-right:
        1px solid
        #e1e1e7;

    background: #fafafd;

    color: #4b4b56;

    font-size: 14px;
    font-weight: 600;

    user-select: none;
}


/* ============================================================
   MOBILE INPUT
============================================================ */

.public-login-input-wrap input {
    width: 100%;
    min-width: 0;

    min-height: 48px;

    padding:
        10px
        13px;

    border: 0;
    outline: 0;

    background: transparent;

    color: #25252e;

    font-family: inherit;
    font-size: 15px;

    line-height: 1.4;
}


.public-login-input-wrap input::placeholder {
    color: #a3a3ab;

    opacity: 1;
}


.public-login-input-wrap input:focus {
    border: 0;

    outline: 0;

    box-shadow: none;
}


/* ============================================================
   LOGIN HELP TEXT
============================================================ */

.public-login-field small {
    display: block;

    margin:
        7px
        0
        0;

    color: #85858e;

    font-size: 11px;
    line-height: 1.5;
}


/* ============================================================
   LOGIN SUBMIT BUTTON
============================================================ */

.public-login-submit {
    width: 100%;
    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    margin: 0;
    padding:
        10px
        18px;

    border:
        1px solid
        #6832d4;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #7040d9 0%,
            #6030c8 100%
        );

    color: #ffffff;

    font-family: inherit;

    font-size: 14px;
    font-weight: 650;

    line-height: 1.2;

    cursor: pointer;

    box-shadow:
        0 7px 17px
        rgba(104, 50, 212, 0.19);

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


.public-login-submit:hover {
    background:
        linear-gradient(
            135deg,
            #6432ce 0%,
            #5424b5 100%
        );

    border-color: #5725bb;

    transform: translateY(-1px);

    box-shadow:
        0 9px 20px
        rgba(104, 50, 212, 0.24);
}


.public-login-submit:active {
    transform: translateY(0);

    box-shadow:
        0 5px 12px
        rgba(104, 50, 212, 0.18);
}


.public-login-submit:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 3px
        rgba(104, 50, 212, 0.18),
        0 6px 15px
        rgba(104, 50, 212, 0.18);
}


.public-login-submit-arrow {
    font-size: 17px;
    line-height: 1;
}


/* ============================================================
   SECURITY NOTE
============================================================ */

.public-login-note {
    width: 100%;
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding:
        15px
        20px;

    border-top:
        1px solid
        #eeeef2;

    background: #fcfcfd;

    color: #85858e;

    font-size: 11px;
    line-height: 1.4;

    text-align: center;
}


/* ============================================================
   LOGIN BACK LINK
============================================================ */

.public-login-back {
    margin:
        19px
        0
        0;

    text-align: center;
}


.public-login-back a {
    color: #6b6b76;

    font-size: 12px;
    font-weight: 500;

    line-height: 1.4;

    text-decoration: none;

    transition:
        color 0.15s ease;
}


.public-login-back a:hover {
    color: #6832d4;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 900px) {

    .form-page-container {
        width: 90%;
        max-width: none;

        padding-top: 38px;
        padding-bottom: 55px;
    }


    .public-login-wrapper {
        width: 90%;
        max-width: 680px;
    }


    .public-login-card {
        max-width: 520px;
    }

}


/* ============================================================
   MOBILE — NORMAL FORMS
============================================================ */

@media (max-width: 700px) {

    .form-page-container {
        width: calc(100% - 28px);

        padding-top: 30px;
        padding-bottom: 45px;
    }


    /* --------------------------------------------------------
       NORMAL FORM GRID
       1 COLUMN ON MOBILE
    -------------------------------------------------------- */

    .form-grid {
        grid-template-columns: 1fr;

        gap:
            18px
            0;
    }


    .form-grid-full {
        grid-column: auto;
    }


    .form-document-grid {
        grid-template-columns: 1fr;
    }


    .form-intro {
        margin-bottom: 24px;
    }


    .form-intro h1 {
        font-size: 27px;
        line-height: 1.25;
    }


    .form-intro p {
        font-size: 14px;
    }


    .form-card-header {
        padding:
            20px;

        gap: 12px;
    }


    .form-step-number,
    .form-section-number {
        width: 38px;
        height: 38px;

        min-width: 38px;
        flex-basis: 38px;

        font-size: 12px;
    }


    .form-card-header h2,
    .form-card-heading h2 {
        font-size: 19px;
    }


    .form-card-header p,
    .form-card-heading p {
        font-size: 13px;
    }


    .form-body {
        padding:
            20px;
    }


    .common-form {
        padding: 0;
    }


    .form-field {
        margin-bottom: 0;
    }


    .form-actions,
    .form-actions-between {
        flex-direction: column;

        align-items: stretch;

        gap: 12px;
    }


    .form-btn {
        width: 100%;
    }


    .form-options {
        flex-direction: column;

        align-items: flex-start;

        gap: 8px;
    }


    .form-section {
        margin-bottom: 24px;
    }


    .form-documents {
        margin-top: 24px;

        padding-top: 22px;
    }

}


/* ============================================================
   MOBILE — LOGIN
============================================================ */

@media (max-width: 700px) {

    .public-login-main {
        min-height: 100vh;

        padding:
            35px
            18px;
    }


    .public-login-wrapper {
        width: 100%;
        max-width: none;
    }


    .public-login-brand {
        margin-bottom: 25px;
    }


    .public-login-intro {
        margin-bottom: 24px;
    }


    .public-login-intro h1 {
        font-size: 27px;
    }


    .public-login-card {
        width: 100%;
        max-width: none;

        border-radius: 14px;
    }


    .public-login-card-top {
        padding:
            22px;
    }


    .public-login-form {
        padding:
            22px;
    }


    .public-login-error {
        width: calc(100% - 44px);

        margin-left: 22px;
        margin-right: 22px;
    }


    .public-login-wrapper::before {
        width: 160px;
        height: 160px;

        top: 100px;
        right: -115px;
    }


    .public-login-wrapper::after {
        width: 90px;
        height: 90px;

        left: -75px;
        bottom: 70px;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .form-page-container {
        width: calc(100% - 20px);

        padding-top: 24px;
        padding-bottom: 38px;
    }


    .form-intro h1 {
        font-size: 24px;
    }


    .form-intro p {
        font-size: 13px;
    }


    .form-card-header {
        padding:
            18px;
    }


    .form-body {
        padding:
            18px;
    }


    .form-card-heading h2,
    .form-card-header h2 {
        font-size: 18px;
    }


    .form-document-row {
        grid-template-columns:
            34px
            minmax(
                0,
                1fr
            );

        padding:
            10px
            11px;
    }


    .form-document-name {
        font-size: 13px;
    }


    /* --------------------------------------------------------
       LOGIN
    -------------------------------------------------------- */

    .public-login-main {
        padding:
            25px
            14px;
    }


    .public-login-brand-mark {
        width: 40px;
        height: 40px;

        font-size: 14px;
    }


    .public-login-brand-name {
        font-size: 15px;
    }


    .public-login-intro h1 {
        font-size: 24px;
    }


    .public-login-intro p {
        font-size: 13px;
    }


    .public-login-card {
        width: 100%;

        border-radius: 13px;
    }


    .public-login-card-top {
        gap: 12px;

        padding:
            20px;
    }


    .public-login-icon {
        width: 40px;
        height: 40px;

        flex-basis: 40px;

        font-size: 17px;
    }


    .public-login-card-top h2 {
        font-size: 18px;
    }


    .public-login-card-top p {
        font-size: 12px;
    }


    .public-login-form {
        padding:
            20px;
    }


    .public-login-field {
        margin-bottom: 20px;
    }


    .public-login-submit {
        min-height: 46px;
    }


    .public-login-error {
        width: calc(100% - 40px);

        margin-left: 20px;
        margin-right: 20px;
    }


    .public-login-wrapper::before,
    .public-login-wrapper::after {
        opacity: 0.55;
    }

}


/* ============================================================
   VERY SMALL DEVICES
============================================================ */

@media (max-width: 380px) {

    .form-page-container {
        width: calc(100% - 16px);
    }


    .form-card-header {
        padding:
            16px;
    }


    .form-body {
        padding:
            16px;
    }


    .form-intro h1 {
        font-size: 22px;
    }


    .form-intro-eyebrow {
        font-size: 11px;
    }


    .form-card-heading h2,
    .form-card-header h2 {
        font-size: 17px;
    }


    .form-document-row {
        grid-template-columns:
            30px
            minmax(
                0,
                1fr
            );
    }


    .public-login-main {
        padding-left: 10px;
        padding-right: 10px;
    }


    .public-login-wrapper {
        width: 100%;
    }


    .public-login-card {
        width: 100%;
    }


    .public-login-card-top {
        padding:
            18px;
    }


    .public-login-form {
        padding:
            18px;
    }


    .public-login-intro h1 {
        font-size: 22px;
    }


    .public-login-error {
        width: calc(100% - 36px);

        margin-left: 18px;
        margin-right: 18px;
    }

}


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

.form-page a:focus-visible,
.form-page button:focus-visible,
.form-page input:focus-visible,
.form-page select:focus-visible,
.form-page textarea:focus-visible {
    outline:
        2px solid
        rgba(103, 53, 212, 0.35);

    outline-offset: 2px;
}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .form-page,
    .form-page *,
    .form-page *::before,
    .form-page *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;
    }

}

/* ============================================================
   DYNAMIC FORM VALUES
============================================================ */

.form-page .dynamic-value {
    color: #6735d4;
    font-weight: 700;
}






/* ============================================================
   COMMON PUBLIC FORM HEADER
============================================================ */

.public-form-header {
    width: 100%;
    min-height: 64px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 28px;

    box-sizing: border-box;

    background: #ffffff;

    border-bottom: 1px solid #e5e7eb;

    position: relative;
    z-index: 1000;
}


/* ============================================================
   BRAND
============================================================ */

.public-form-header-left {
    display: flex;
    align-items: center;
    min-width: 0;
}

.public-form-brand {
    display: inline-flex;
    align-items: center;

    text-decoration: none;

    font-size: 18px;
    font-weight: 700;

    line-height: 1;

    color: #111827;

    white-space: nowrap;
}

.public-form-brand:hover {
    text-decoration: none;
    color: #111827;
}


/* ============================================================
   RIGHT SIDE
============================================================ */

.public-form-header-right {
    display: flex;
    align-items: center;
    gap: 18px;
}


/* ============================================================
   DATE
============================================================ */

.public-form-date {
    font-size: 14px;
    font-weight: 500;

    color: #6b7280;

    white-space: nowrap;
}


/* ============================================================
   USER MENU
============================================================ */

.public-form-user-menu {
    position: relative;

    margin: 0;
    padding: 0;
}


/* ============================================================
   USER BUTTON
============================================================ */

.public-form-user-button {
    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 15px;

    box-sizing: border-box;

    border: 1px solid #d1d5db;
    border-radius: 8px;

    background: #ffffff;

    color: #111827;

    font-size: 14px;
    font-weight: 600;

    line-height: 1;

    cursor: pointer;

    list-style: none;
    user-select: none;
}

.public-form-user-button::-webkit-details-marker {
    display: none;
}

.public-form-user-button::marker {
    display: none;
}


/* ============================================================
   USER BUTTON ARROW
============================================================ */

.public-form-user-button::after {
    content: "";

    width: 7px;
    height: 7px;

    margin-left: 9px;

    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;

    transform: rotate(45deg) translateY(-2px);

    transition: transform 0.15s ease;
}

.public-form-user-menu[open]
.public-form-user-button::after {
    transform: rotate(225deg) translateY(-2px);
}


/* ============================================================
   USER BUTTON HOVER
============================================================ */

.public-form-user-button:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}


/* ============================================================
   USER DROPDOWN
============================================================ */

.public-form-user-dropdown {
    position: absolute;

    top: calc(100% + 8px);
    right: 0;

    width: 300px;

    box-sizing: border-box;

    padding: 18px 16px;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 10px;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.08),
        0 4px 10px rgba(0, 0, 0, 0.04);
}


/* ============================================================
   MOBILE NUMBER + LOGOUT
============================================================ */

.public-form-user-mobile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;
}


/* ============================================================
   MOBILE NUMBER
============================================================ */

.public-form-user-mobile {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 5px;
}

.public-form-user-mobile strong {
    font-size: 11px;
    font-weight: 700;

    color: #6b7280;

    text-transform: uppercase;

    letter-spacing: 0.04em;
}

.public-form-user-mobile span {
    font-size: 16px;
    font-weight: 700;

    color: #111827;

    word-break: break-word;
}


/* ============================================================
   LOGOUT ICON
============================================================ */

.public-form-logout-icon {
    position: relative;

    flex: 0 0 auto;

    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border: 1px solid #e5e7eb;
    border-radius: 7px;

    background: #ffffff;

    color: #111827;

    text-decoration: none;

    cursor: pointer;

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

.public-form-logout-icon:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #dc2626;
}

.public-form-logout-icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ============================================================
   LOGOUT TOOLTIP
============================================================ */

.public-form-logout-icon::after {
    content: "Logout";

    position: absolute;

    right: 0;
    bottom: calc(100% + 8px);

    padding: 6px 9px;

    background: #111827;
    color: #ffffff;

    border-radius: 5px;

    font-size: 12px;
    font-weight: 500;

    line-height: 1;

    white-space: nowrap;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform: translateY(3px);

    transition:
        opacity 0.15s ease,
        visibility 0.15s ease,
        transform 0.15s ease;
}

.public-form-logout-icon:hover::after,
.public-form-logout-icon:focus-visible::after {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


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

@media (max-width: 640px) {

    .public-form-header {
        min-height: 58px;

        padding: 0 15px;
    }

    .public-form-brand {
        font-size: 16px;
    }

    .public-form-header-right {
        gap: 10px;
    }

    .public-form-date {
        font-size: 12px;
    }

    .public-form-user-button {
        min-height: 36px;

        padding: 0 11px;

        font-size: 13px;
    }

    .public-form-user-dropdown {
        width: min(
            280px,
            calc(100vw - 30px)
        );
    }

    .public-form-user-mobile span {
        font-size: 15px;
    }

}



.already_existing_document {
    margin-bottom: 8px;
    padding: 8px 10px;
    border: 1px solid #d9d2ef;
    background: #f7f4ff;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
}

.already_existing_document strong {
    color: #292936;
}

.already_existing_document a {
    color: #6735d4;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.already_existing_document a:hover {
    color: #5425bd;
}



/* ============================================================
   DSC APPLICATIONS
   ------------------------------------------------------------
   Main List:
   /form/dsc_form/dsc_applications.php

   Detail:
   /form/dsc_form/dsc_application.php
============================================================ */


/* ============================================================
   COMMON DSC APPLICATION BASE
============================================================ */

.dsc-applications-page,
.dsc-application-page {

    min-height: 100vh;

    margin: 0;
    padding: 30px;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    background: #f5f6fa;
    color: #222;
}


/* ============================================================
   COMMON WRAPPERS
============================================================ */

.dsc-applications-page .page-wrapper,
.dsc-application-page .dsc-application-wrapper {

    width: 100%;
    max-width: 1100px;

    margin: 0 auto;
}


/* ============================================================
   COMMON BUTTON BASE
============================================================ */

.dsc-applications-page .back-btn,
.dsc-application-page .dsc-back-btn {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;

    padding:
        10px
        16px;

    border-radius: 7px;
    border: 1px solid #6735d4;

    background: #6735d4;
    color: #fff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    line-height: 1.2;

    text-decoration: none;

    white-space: nowrap;

    cursor: pointer;

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


.dsc-applications-page .back-btn:hover,
.dsc-application-page .dsc-back-btn:hover {

    background: #5525bd;
    border-color: #5525bd;

    color: #fff;

    transform: translateY(-1px);

    box-shadow:
        0 5px 12px
        rgba(103, 53, 212, 0.16);
}


.dsc-applications-page .back-btn:active,
.dsc-application-page .dsc-back-btn:active {

    transform: translateY(0);
}


/* ============================================================
   ============================================================
   DSC APPLICATION LIST
   ============================================================
============================================================ */


/* ============================================================
   LIST PAGE HEADER
============================================================ */

.dsc-applications-page .page-header {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;
}


.dsc-applications-page .page-title {

    margin: 0;

    color: #222;

    font-size: 25px;
    font-weight: 700;

    line-height: 1.3;
}


/* ============================================================
   LIST MESSAGE
============================================================ */

.dsc-applications-page .message {

    width: 100%;

    padding:
        12px
        15px;

    margin-bottom: 18px;

    border-radius: 7px;

    font-size: 14px;

    line-height: 1.5;
}


.dsc-applications-page .message.success {

    background: #e8f7ed;
    color: #176b35;

    border: 1px solid #b9e6c7;
}


.dsc-applications-page .message.error {

    background: #fdecec;
    color: #a52222;

    border: 1px solid #f2bcbc;
}


/* ============================================================
   LIST TABLE CARD
============================================================ */

.dsc-applications-page .table-card {

    width: 100%;

    background: #fff;

    border:
        1px solid
        #e8e8ee;

    border-radius: 10px;

    box-shadow:
        0 3px 15px
        rgba(0, 0, 0, 0.07);

    overflow: hidden;
}


/* ============================================================
   APPLICATION TABLE
============================================================ */

.dsc-applications-page .applications-table {

    width: 100%;

    border-collapse: collapse;
}


.dsc-applications-page .applications-table th {

    padding:
        14px
        16px;

    background: #6735d4;
    color: #fff;

    border: 0;

    text-align: left;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.4;
}


.dsc-applications-page .applications-table td {

    padding:
        14px
        16px;

    border-bottom:
        1px solid
        #e8e8e8;

    background: #fff;

    font-size: 14px;

    vertical-align: middle;
}


.dsc-applications-page
.applications-table
tr:last-child
td {

    border-bottom: none;
}


.dsc-applications-page
.applications-table
tbody
tr:hover
td {

    background: #faf9ff;
}


/* ============================================================
   SERIAL NUMBER
============================================================ */

.dsc-applications-page .sr-no {

    width: 90px;

    text-align: center !important;
}


/* ============================================================
   FIRM NAME
============================================================ */

.dsc-applications-page .firm-name {

    color: #292929;

    font-weight: 600;

    overflow-wrap: anywhere;
}


/* ============================================================
   ACTIONS
============================================================ */

.dsc-applications-page .actions {

    white-space: nowrap;
}


.dsc-applications-page .delete-form {

    display: inline;
}


/* ============================================================
   VIEW LINK
============================================================ */

.dsc-applications-page .view-link {

    display: inline-block;

    margin-right: 14px;

    color: #6735d4;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.4;

    text-decoration: none;

    transition:
        color 0.15s ease;
}


.dsc-applications-page .view-link:hover {

    color: #5525bd;

    text-decoration: underline;
}


/* ============================================================
   DELETE BUTTON
============================================================ */

.dsc-applications-page .delete-btn {

    display: inline;

    margin: 0;
    padding: 0;

    border: none;

    background: none;

    color: #d62828;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    line-height: 1.4;

    cursor: pointer;

    transition:
        color 0.15s ease;
}


.dsc-applications-page .delete-btn:hover {

    color: #a91e1e;

    text-decoration: underline;
}


/* ============================================================
   LIST EMPTY STATE
============================================================ */

.dsc-applications-page .empty-state {

    width: 100%;

    padding:
        45px
        20px;

    color: #777;

    font-size: 15px;

    line-height: 1.5;

    text-align: center;
}


/* ============================================================
   ============================================================
   DSC APPLICATION DETAIL
   ============================================================
============================================================ */


/* ============================================================
   DETAIL HEADER
============================================================ */

.dsc-application-page .dsc-application-header {

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;
}


.dsc-application-page .dsc-application-eyebrow {

    margin-bottom: 6px;

    color: #6735d4;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.dsc-application-page .dsc-application-title {

    margin: 0;

    color: #222;

    font-size: 25px;
    font-weight: 700;

    line-height: 1.3;

    overflow-wrap: anywhere;
}


/* ============================================================
   DETAIL ERROR
============================================================ */

.dsc-application-page .dsc-application-error {

    width: 100%;

    padding:
        14px
        16px;

    margin-bottom: 20px;

    border-radius: 7px;

    border: 1px solid #f2bcbc;

    background: #fdecec;
    color: #a52222;

    font-size: 14px;

    line-height: 1.5;
}


/* ============================================================
   SUMMARY CARD
============================================================ */

.dsc-application-page .dsc-summary-card {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    width: 100%;

    margin-bottom: 20px;

    overflow: hidden;

    border:
        1px solid
        #e8e8ee;

    border-radius: 10px;

    background: #fff;

    box-shadow:
        0 3px 15px
        rgba(0, 0, 0, 0.07);
}


.dsc-application-page .dsc-summary-item {

    min-width: 0;

    padding:
        17px
        20px;

    background: #fff;

    border-right:
        1px solid
        #e8e8ee;
}


.dsc-application-page
.dsc-summary-item:last-child {

    border-right: none;
}


.dsc-application-page .dsc-summary-label {

    display: block;

    margin-bottom: 6px;

    color: #777;

    font-size: 12px;
    font-weight: 600;

    line-height: 1.4;
}


.dsc-application-page .dsc-summary-value {

    display: block;

    color: #292929;

    font-size: 15px;
    font-weight: 700;

    line-height: 1.45;

    overflow-wrap: anywhere;
}


/* ============================================================
   STATUS
============================================================ */

.dsc-application-page .dsc-status {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;

    padding:
        4px
        10px;

    border-radius: 999px;

    background: #eee8ff;
    color: #6735d4;

    font-size: 12px;
    font-weight: 700;

    line-height: 1.2;
}


/* ============================================================
   DETAIL CARD
============================================================ */

.dsc-application-page .dsc-detail-card {

    width: 100%;

    margin-bottom: 20px;

    overflow: hidden;

    border:
        1px solid
        #e8e8ee;

    border-radius: 10px;

    background: #fff;

    box-shadow:
        0 3px 15px
        rgba(0, 0, 0, 0.07);
}


/* ============================================================
   SECTION HEADER
============================================================ */

.dsc-application-page .dsc-section-header {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        17px
        20px;

    border-bottom:
        1px solid
        #e8e8ee;
}


.dsc-application-page .dsc-section-header h2 {

    margin: 0;

    color: #292929;

    font-size: 18px;
    font-weight: 700;

    line-height: 1.35;
}


.dsc-application-page .dsc-section-description {

    margin:
        5px
        0
        0;

    color: #777;

    font-size: 13px;

    line-height: 1.5;
}


/* ============================================================
   DETAIL GRID
============================================================ */

.dsc-application-page .dsc-details-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    width: 100%;
}


.dsc-application-page .dsc-detail-item {

    min-width: 0;

    padding:
        17px
        20px;

    border-bottom:
        1px solid
        #e8e8ee;
}


.dsc-application-page
.dsc-details-grid
.dsc-detail-item:nth-child(odd) {

    border-right:
        1px solid
        #e8e8ee;
}


.dsc-application-page .dsc-detail-full {

    grid-column: 1 / -1;

    border-right: none !important;
}


.dsc-application-page
.dsc-details-grid
.dsc-detail-item:last-child {

    border-bottom: none;
}


/* ============================================================
   DETAIL LABEL
============================================================ */

.dsc-application-page .dsc-detail-label {

    margin-bottom: 7px;

    color: #777;

    font-size: 12px;
    font-weight: 600;

    line-height: 1.4;
}


/* ============================================================
   VALUE ROW
============================================================ */

.dsc-application-page .dsc-value-row {

    display: flex;
    align-items: center;

    gap: 10px;

    width: 100%;
    min-width: 0;
}


.dsc-application-page .dsc-detail-value {

    flex: 1 1 auto;

    min-width: 0;

    color: #292929;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.5;

    overflow-wrap: anywhere;
}


/* ============================================================
   COPY BUTTON
============================================================ */

.dsc-application-page .dsc-copy-btn {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-width: 58px;
    min-height: 32px;

    padding:
        5px
        10px;

    border-radius: 6px;

    border:
        1px solid
        #d8cfee;

    background: #faf9ff;
    color: #6735d4;

    font-family: inherit;

    font-size: 12px;
    font-weight: 600;

    line-height: 1.2;

    cursor: pointer;

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


.dsc-application-page .dsc-copy-btn:hover {

    background: #f1ecff;

    border-color: #6735d4;

    color: #5525bd;

    transform: translateY(-1px);
}


.dsc-application-page .dsc-copy-btn:active {

    transform: translateY(0);
}


.dsc-application-page .dsc-copy-btn.copied {

    background: #6735d4;

    border-color: #6735d4;

    color: #fff;
}


/* ============================================================
   DOCUMENTS
============================================================ */

.dsc-application-page .dsc-no-documents {

    padding:
        40px
        20px;

    color: #777;

    font-size: 14px;

    line-height: 1.5;

    text-align: center;
}


.dsc-application-page .dsc-documents-list {

    width: 100%;
}


.dsc-application-page .dsc-document-row {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        15px
        20px;

    border-bottom:
        1px solid
        #e8e8e8;
}


.dsc-application-page
.dsc-document-row:last-child {

    border-bottom: none;
}


/* ============================================================
   DOCUMENT INFO
============================================================ */

.dsc-application-page .dsc-document-info {

    display: flex;
    align-items: center;

    gap: 12px;

    min-width: 0;
}


.dsc-application-page .dsc-document-icon {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    border:
        1px solid
        #ded5f0;

    border-radius: 8px;

    background: #f7f3ff;
    color: #6735d4;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.04em;
}


.dsc-application-page .dsc-document-name {

    color: #292929;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.4;

    overflow-wrap: anywhere;
}


.dsc-application-page .dsc-document-meta {

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 3px;

    color: #777;

    font-size: 12px;

    line-height: 1.4;

    overflow-wrap: anywhere;
}


/* ============================================================
   DOWNLOAD BUTTON
============================================================ */

.dsc-application-page .dsc-download-btn {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-height: 36px;

    padding:
        8px
        15px;

    border-radius: 7px;

    border:
        1px solid
        #6735d4;

    background: #6735d4;
    color: #fff;

    font-family: inherit;

    font-size: 12px;
    font-weight: 600;

    line-height: 1.2;

    text-decoration: none;

    cursor: pointer;

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


.dsc-application-page .dsc-download-btn:hover {

    background: #5525bd;

    border-color: #5525bd;

    color: #fff;

    transform: translateY(-1px);

    box-shadow:
        0 4px 10px
        rgba(103, 53, 212, 0.15);
}


.dsc-application-page .dsc-download-btn:active {

    transform: translateY(0);
}


/* ============================================================
   BOTTOM ACTION
============================================================ */

.dsc-application-page .dsc-bottom-actions {

    display: flex;
    justify-content: flex-start;

    padding-top: 2px;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 800px) {

    .dsc-applications-page,
    .dsc-application-page {

        padding:
            20px
            15px
            40px;
    }


    /* LIST */

    .dsc-applications-page .page-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 14px;
    }


    .dsc-applications-page .back-btn {

        width: 100%;
    }


    .dsc-applications-page .table-card {

        overflow-x: auto;
    }


    .dsc-applications-page .applications-table {

        min-width: 600px;
    }


    /* DETAIL */

    .dsc-application-page
    .dsc-application-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 14px;
    }


    .dsc-application-page .dsc-back-btn {

        width: 100%;
    }


    .dsc-application-page .dsc-summary-card {

        grid-template-columns: 1fr;
    }


    .dsc-application-page .dsc-summary-item {

        border-right: none;

        border-bottom:
            1px solid
            #e8e8ee;
    }


    .dsc-application-page
    .dsc-summary-item:last-child {

        border-bottom: none;
    }


    .dsc-application-page .dsc-details-grid {

        grid-template-columns: 1fr;
    }


    .dsc-application-page
    .dsc-details-grid
    .dsc-detail-item {

        border-right: none !important;
    }


    .dsc-application-page .dsc-detail-full {

        grid-column: auto;
    }


    .dsc-application-page .dsc-document-row {

        align-items: flex-start;

        flex-direction: column;
    }


    .dsc-application-page .dsc-download-btn {

        width: 100%;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .dsc-applications-page,
    .dsc-application-page {

        padding:
            15px
            12px
            30px;
    }


    .dsc-applications-page .page-title,
    .dsc-application-page .dsc-application-title {

        font-size: 21px;
    }


    .dsc-applications-page
    .applications-table
    th,
    .dsc-applications-page
    .applications-table
    td {

        padding:
            12px
            13px;
    }


    .dsc-application-page
    .dsc-section-header {

        padding:
            15px
            16px;
    }


    .dsc-application-page
    .dsc-detail-item {

        padding:
            15px
            16px;
    }


    .dsc-application-page
    .dsc-document-row {

        padding:
            14px
            16px;
    }


    .dsc-application-page
    .dsc-value-row {

        align-items: flex-start;
    }


    .dsc-application-page
    .dsc-copy-btn {

        min-width: 55px;
    }

}



        /* =========================================================

           IREPS TAB NAVIGATION

        ========================================================== */

        .ireps-tabs-wrapper {

            width: 100%;

            overflow-x: auto;

            margin-bottom: 18px;

            padding-bottom: 2px;

        }

        .ireps-tabs {

            display: flex;

            align-items: stretch;

            gap: 3px;

            min-width: max-content;

        }

        .ireps-tab {

            appearance: none;

            border: 0;

            margin: 0;

            padding: 10px 15px;

            background: #0787bd;

            color: #ffffff;

            font-size: 12px;

            font-weight: 700;

            letter-spacing: .2px;

            line-height: 1.2;

            cursor: pointer;

            border-radius: 4px 4px 0 0;

            transition:

                background .2s ease,

                transform .2s ease;

            white-space: nowrap;

        }

        .ireps-tab:hover {

            background: #056d99;

        }

        .ireps-tab.active {

            background: #f28c28;

            color: #ffffff;

        }

        .ireps-tab.completed {

            position: relative;

        }

        .ireps-tab.completed::after {

            content: "✓";

            margin-left: 6px;

            font-size: 11px;

        }

        /* =========================================================

           TAB CONTENT

        ========================================================== */

        .ireps-tab-content {

            display: none;

        }

        .ireps-tab-content.active {

            display: block;

        }

        /* =========================================================

           INFORMATION BOX

        ========================================================== */

        .ireps-info-box {

            margin-bottom: 20px;

            padding: 12px 14px;

            border: 1px solid #d9d2ef;

            border-radius: 8px;

            background: #f7f4ff;

            color: #4d2aa3;

            font-size: 13px;

            line-height: 1.55;

        }

        .ireps-note {

            margin-top: 8px;

            color: #a33a3a;

            font-size: 12px;

            line-height: 1.5;

        }

        /* =========================================================

           CHECKBOX OPTIONS

        ========================================================== */

        .ireps-option-list {

            display: grid;

            gap: 12px;

        }

        .ireps-option {

            display: flex;

            align-items: flex-start;

            gap: 10px;

            padding: 13px 14px;

            border: 1px solid #d7dce1;

            border-radius: 8px;

            background: #ffffff;

            cursor: pointer;

        }

        .ireps-option:hover {

            border-color: #9da9b2;

        }

        .ireps-option input {

            margin-top: 3px;

            flex: 0 0 auto;

        }

        .ireps-option strong {

            display: block;

            margin-bottom: 3px;

        }

        .ireps-option small {

            display: block;

            color: #666;

            line-height: 1.45;

        }

        /* =========================================================

           DOCUMENT ROW

        ========================================================== */

        .ireps-document-list {

            display: grid;

            gap: 12px;

        }

        .ireps-document-row {

            display: grid;

            grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr);

            gap: 15px;

            align-items: center;

            padding: 14px;

            border: 1px solid #d7dce1;

            border-radius: 8px;

            background: #ffffff;

        }

        .ireps-document-name {

            font-size: 13px;

            font-weight: 600;

            color: #333;

        }

        .ireps-document-help {

            margin-top: 4px;

            color: #777;

            font-size: 11px;

        }

        /* =========================================================

           STATUS BOX

        ========================================================== */

        .ireps-status {

            display: none;

            margin-bottom: 15px;

            padding: 10px 14px;

            border-radius: 8px;

            border: 1px solid #d8d8d8;

            background: #f7f7f7;

            color: #333;

            font-size: 13px;

        }

        .ireps-status.show {

            display: block;

        }

        /* =========================================================

           BOTTOM ACTIONS

        ========================================================== */

        .ireps-bottom-actions {

            display: flex;

            justify-content: flex-end;

            align-items: center;

            gap: 10px;

            flex-wrap: wrap;

            padding-top: 20px;

            margin-top: 20px;

            border-top: 1px solid #e1e1e1;

        }

        @media (max-width: 700px) {

            .ireps-tab {

                padding: 9px 11px;

                font-size: 11px;

            }

            .ireps-document-row {

                grid-template-columns: 1fr;

            }

            .ireps-bottom-actions {

                justify-content: stretch;

            }

            .ireps-bottom-actions .form-btn {

                flex: 1 1 100%;

            }

        }
        
        
/* ============================================================
   START — CONSTITUTION SECTION
============================================================ */

.constitution-subform {
    margin-top: 20px;
}


/* ============================================================
   START — CONSTITUTION ENTRY WRAPPER
============================================================ */

.constitution-entry-wrapper {
    margin-top: 22px;

    padding: 20px;

    background: #f8fafc;

    border: 1px solid #e5e7eb;
    border-radius: 12px;

    box-sizing: border-box;
}


.constitution-entry-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin-bottom: 18px;
}


.constitution-entry-header .form-subsection-title {
    margin: 0;
}


/* ============================================================
   END — CONSTITUTION ENTRY WRAPPER
============================================================ */



/* ============================================================
   START — CONSTITUTION ENTRIES
============================================================ */

.constitution-entries {
    display: flex;
    flex-direction: column;

    gap: 18px;
}


/* ============================================================
   START — INDIVIDUAL ENTRY CARD
============================================================ */

.constitution-entry {
    position: relative;

    padding: 20px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-bottom: 4px solid #ddd6fe;

    border-radius: 10px;

    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.025);

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


/*
 * Slightly stronger separation on hover.
 */

.constitution-entry:hover {
    border-color: #d1d5db;

    border-bottom-color: #c4b5fd;

    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.04);
}


/* ============================================================
   END — INDIVIDUAL ENTRY CARD
============================================================ */



/* ============================================================
   START — ENTRY TITLE
============================================================ */

.constitution-entry-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 34px;

    margin-bottom: 20px;
    padding-bottom: 12px;

    border-bottom: 1px solid #f0f0f2;

    box-sizing: border-box;
}


.constitution-entry-title strong {
    display: block;

    font-size: 17px;
    font-weight: 700;

    line-height: 1.3;

    color: #111827;
}


/* ============================================================
   END — ENTRY TITLE
============================================================ */



/* ============================================================
   START — REMOVE X BUTTON
============================================================ */

.constitution-remove-btn {
    flex: 0 0 auto;

    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;

    box-sizing: border-box;

    border: 1px solid #e5e7eb;
    border-radius: 8px;

    background: #ffffff;

    color: #6b7280;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 26px;
    font-weight: 400;

    line-height: 1;

    cursor: pointer;

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


/*
 * Hover
 */

.constitution-remove-btn:hover {
    background: #fef2f2;

    border-color: #fecaca;

    color: #dc2626;
}


/*
 * Click
 */

.constitution-remove-btn:active {
    transform: scale(0.94);
}


/*
 * Keyboard focus
 */

.constitution-remove-btn:focus-visible {
    outline: 2px solid #c4b5fd;
    outline-offset: 2px;
}


/*
 * Hidden button.
 */

.constitution-remove-btn[hidden] {
    display: none;
}


/* ============================================================
   END — REMOVE X BUTTON
============================================================ */



/* ============================================================
   START — ADD BUTTON
============================================================ */

.form-button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding: 0 14px;

    box-sizing: border-box;

    border: 1px solid #d1d5db;
    border-radius: 7px;

    background: #ffffff;

    color: #111827;

    font-size: 13px;
    font-weight: 600;

    line-height: 1;

    cursor: pointer;

    white-space: nowrap;

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


.form-button-secondary:hover {
    background: #fafafa;

    border-color: #9ca3af;

    color: #111827;

    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04);
}


.form-button-secondary:active {
    transform: translateY(1px);
}


.form-button-secondary:focus-visible {
    outline: 2px solid #c4b5fd;
    outline-offset: 2px;
}


/* ============================================================
   END — ADD BUTTON
============================================================ */



/* ============================================================
   START — MOBILE NUMBER FIELD
============================================================ */

/*
 * Mobile Number label and +91 will stay on the
 * SAME horizontal row.
 */

.mobile-field {
    min-width: 0;
}


/* ============================================================
   START — MOBILE LABEL ROW
============================================================ */

.mobile-label-row {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    min-height: 22px;

    margin-bottom: 8px;
}


.mobile-label-row label {
    margin: 0;

    flex: 1 1 auto;
}


.mobile-label-row .mobile-prefix {
    flex: 0 0 auto;

    margin: 0;

    color: #374151;

    font-size: 14px;
    font-weight: 600;

    line-height: 1;
}


/* ============================================================
   END — MOBILE LABEL ROW
============================================================ */



/* ============================================================
   START — OLD MOBILE INPUT GROUP COMPATIBILITY
============================================================ */

/*
 * Existing mobile-input-group is kept compatible
 * with the rest of the form.
 */

.mobile-input-group {
    width: 100%;

    display: flex;
    align-items: stretch;

    box-sizing: border-box;
}


.mobile-input-group .mobile-prefix {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;

    padding: 0 12px;

    border: 1px solid #d1d5db;
    border-right: 0;

    border-radius: 8px 0 0 8px;

    background: #f9fafb;

    color: #374151;

    font-size: 14px;
    font-weight: 600;
}


.mobile-input-group .form-control {
    min-width: 0;

    flex: 1 1 auto;

    border-radius: 0 8px 8px 0;
}


/* ============================================================
   END — OLD MOBILE INPUT GROUP COMPATIBILITY
============================================================ */



/* ============================================================
   START — DOCUMENT SECTION
============================================================ */

.constitution-document-section {
    margin-top: 24px;

    padding: 20px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-bottom: 3px solid #ddd6fe;

    border-radius: 10px;
}


.constitution-document-section
.form-subsection-title {
    margin-top: 0;
    margin-bottom: 16px;
}


/* ============================================================
   START — DOCUMENT GRID
============================================================ */

.constitution-document-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}


/* ============================================================
   START — UPLOAD FIELD
============================================================ */

.constitution-upload-field {
    min-width: 0;
}


.constitution-file-input {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

    opacity: 0;
}


/* ============================================================
   START — UPLOAD BUTTON
============================================================ */

.constitution-upload-button {
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 16px;

    box-sizing: border-box;

    border: 1px dashed #cbd5e1;
    border-radius: 8px;

    background: #f8fafc;

    color: #374151;

    font-size: 13px;
    font-weight: 600;

    line-height: 1.3;

    text-align: center;

    cursor: pointer;

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


.constitution-upload-button:hover {
    background: #fafafa;

    border-color: #a78bfa;

    color: #111827;
}


/* ============================================================
   END — UPLOAD BUTTON
============================================================ */



/* ============================================================
   START — MOBILE RESPONSIVE
============================================================ */

@media (max-width: 700px) {


    /* ========================================================
       ENTRY WRAPPER
    ======================================================== */

    .constitution-entry-wrapper {
        padding: 16px;

        margin-top: 18px;
    }


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

    .constitution-entry-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 12px;
    }


    .constitution-entry-header
    .form-button-secondary {
        width: 100%;
    }


    /* ========================================================
       ENTRY CARD
    ======================================================== */

    .constitution-entry {
        padding: 16px;

        border-bottom-width: 3px;
    }


    /* ========================================================
       ENTRY TITLE
    ======================================================== */

    .constitution-entry-title {
        margin-bottom: 16px;
    }


    .constitution-entry-title strong {
        font-size: 16px;
    }


    /* ========================================================
       X BUTTON
    ======================================================== */

    .constitution-remove-btn {
        width: 34px;
        height: 34px;

        font-size: 23px;
    }


    /* ========================================================
       DOCUMENTS
    ======================================================== */

    .constitution-document-grid {
        grid-template-columns: 1fr;
    }


}


/* ============================================================
   END — MOBILE RESPONSIVE
============================================================ */



/* ============================================================
   END — CONSTITUTION SECTION
============================================================ */



/* ============================================================
   START — REGISTRATIONS & APPROVALS SECTION
============================================================ */

/* ============================================================
   START — VALIDITY END DATE FIELD
============================================================ */

.validity-end-field {
    display: flex;
    flex-direction: column;
}


.validity-end-field
.approval-checkbox-label {
    margin-top: 12px;
}


/* ============================================================
   START — DISABLED VALIDITY END DATE
============================================================ */

#validity_end_date:disabled {

    background: #f3f4f6;

    color: #9ca3af;

    border-color: #e5e7eb;

    cursor: not-allowed;

    opacity: 1;
}


/* ============================================================
   END — DISABLED VALIDITY END DATE
============================================================ */



/* ============================================================
   END — VALIDITY END DATE FIELD
============================================================ */



/* ============================================================
   START — PERMANENT REGISTRATION CHECKBOX
============================================================ */

.approval-checkbox-field {
    display: flex;
    align-items: flex-start;

    padding-top: 8px;
}


.approval-checkbox-wrap {
    display: flex;
    align-items: center;

    min-height: 46px;
}


/* ============================================================
   START — CHECKBOX LABEL
============================================================ */

.approval-checkbox-label {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    width: fit-content;

    margin: 0;

    cursor: pointer;

    color: #111827;

    font-size: 14px;
    font-weight: 500;

    line-height: 1.4;

    user-select: none;
}


/* ============================================================
   START — ACTUAL CHECKBOX INPUT
============================================================ */

.approval-checkbox-input {
    position: absolute;

    width: 1px;
    height: 1px;

    margin: -1px;
    padding: 0;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* ============================================================
   START — CHECKBOX BOX
============================================================ */

.approval-checkbox-box {
    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    box-sizing: border-box;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    position: relative;

    border: 1.5px solid #cbd5e1;
    border-radius: 5px;

    background: #ffffff;

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


/* ============================================================
   START — CHECKED STATE
============================================================ */

.approval-checkbox-input:checked
+ .approval-checkbox-label
.approval-checkbox-box {

    background: #7c3aed;

    border-color: #7c3aed;

    box-shadow:
        0 0 0 3px rgba(124, 58, 237, 0.10);
}


/* ============================================================
   START — CHECK MARK
============================================================ */

.approval-checkbox-input:checked
+ .approval-checkbox-label
.approval-checkbox-box::after {

    content: "";

    position: absolute;

    left: 6px;
    top: 3px;

    width: 5px;
    height: 9px;

    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;

    transform: rotate(45deg);
}


/* ============================================================
   END — CHECK MARK
============================================================ */



/* ============================================================
   START — HOVER STATE
============================================================ */

.approval-checkbox-label:hover
.approval-checkbox-box {

    border-color: #7c3aed;
}


/* ============================================================
   END — HOVER STATE
============================================================ */



/* ============================================================
   START — KEYBOARD FOCUS
============================================================ */

.approval-checkbox-input:focus-visible
+ .approval-checkbox-label
.approval-checkbox-box {

    outline: 2px solid #c4b5fd;

    outline-offset: 2px;
}


/* ============================================================
   END — KEYBOARD FOCUS
============================================================ */



/* ============================================================
   START — CHECKBOX TEXT
============================================================ */

.approval-checkbox-text {

    display: inline;

    color: #111827;

    font-size: 14px;

    font-weight: 600;
}


/* ============================================================
   START — CHECKBOX NOTE
============================================================ */

.approval-checkbox-note {

    color: #dc2626;

    font-weight: 500;
}


/* ============================================================
   END — CHECKBOX NOTE
============================================================ */


/* ============================================================
   END — CHECKBOX TEXT
============================================================ */



/* ============================================================
   START — DISABLED VALIDITY END DATE
============================================================ */

#validity_end_date:disabled {

    background: #f3f4f6;

    color: #9ca3af;

    border-color: #d1d5db;

    cursor: not-allowed;

    opacity: 1;
}


/* ============================================================
   END — DISABLED VALIDITY END DATE
============================================================ */


/* ============================================================
   END — PERMANENT REGISTRATION CHECKBOX
============================================================ */


/* ============================================================
   START — MONETARY LIMIT IN WORDS
============================================================ */

.monetary-limit-words {
    min-height: 20px;

    margin-top: 7px;

    color: #dc2626;

    font-size: 12px;
    font-weight: 600;

    line-height: 1.4;
}


/* ============================================================
   END — MONETARY LIMIT IN WORDS
============================================================ */



/* ============================================================
   START — REGISTRATION UPLOAD
============================================================ */

.approval-upload-field {
    width: 100%;
}


.approval-file-input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}


.approval-upload-button {
    width: 100%;
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 14px;

    box-sizing: border-box;

    border: 1px solid #d1d5db;
    border-radius: 8px;

    background: #ffffff;
    color: #9ca3af;

    font-size: 14px;
    font-weight: 500;

    cursor: pointer;

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


.approval-upload-button:hover {
    background: #f9fafb;
    border-color: #9ca3af;
    color: #374151;
}


.approval-upload-button svg {
    width: 20px;
    height: 20px;

    flex: 0 0 auto;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ============================================================
   END — REGISTRATION UPLOAD
============================================================ */



/* ============================================================
   START — SECTION BOTTOM SEPARATOR
============================================================ */

#tab-approvals .form-section {
    border-bottom: 2px solid rgba(124, 58, 237, 0.18);
}


/* ============================================================
   END — SECTION BOTTOM SEPARATOR
============================================================ */



/* ============================================================
   START — MOBILE
============================================================ */

@media (max-width: 700px) {

    .approval-checkbox-label {
        width: 100%;
    }

}


/* ============================================================
   END — MOBILE
============================================================ */


/* ============================================================
   END — REGISTRATIONS & APPROVALS SECTION
============================================================ */


/* ============================================================
   START — STATUTORY DETAILS
============================================================ */


/* ============================================================
   START — GST ERROR
============================================================ */

.statutory-field-error {
    min-height: 18px;

    margin-top: 6px;

    color: #dc2626;

    font-size: 12px;
    font-weight: 500;

    line-height: 1.4;
}


/* ============================================================
   END — GST ERROR
============================================================ */



/* ============================================================
   START — GST INVALID FIELD
============================================================ */

#gst_statutory.is-invalid {
    border-color: #dc2626;
}


#gst_statutory.is-invalid:focus {
    border-color: #dc2626;

    box-shadow:
        0 0 0 3px rgba(220, 38, 38, 0.10);
}


/* ============================================================
   END — GST INVALID FIELD
============================================================ */



/* ============================================================
   START — GST VALID FIELD
============================================================ */

#gst_statutory.is-valid {
    border-color: #16a34a;
}


/* ============================================================
   END — GST VALID FIELD
============================================================ */



/* ============================================================
   START — STATUTORY UPLOAD
============================================================ */

.statutory-upload-field {
    width: 100%;
}


.statutory-file-input {
    position: absolute;

    width: 1px;
    height: 1px;

    margin: -1px;
    padding: 0;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


.statutory-upload-button {
    width: 100%;
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 16px;

    box-sizing: border-box;

    border: 1px dashed #cbd5e1;
    border-radius: 8px;

    background: #f8fafc;

    color: #374151;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

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


.statutory-upload-button:hover {
    background: #f9fafb;

    border-color: #9ca3af;

    color: #111827;
}


.statutory-upload-button svg {
    width: 20px;
    height: 20px;

    flex: 0 0 auto;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ============================================================
   END — STATUTORY UPLOAD
============================================================ */



/* ============================================================
   START — MOBILE
============================================================ */

@media (max-width: 700px) {

    .statutory-upload-button {
        min-height: 46px;
    }

}


/* ============================================================
   END — MOBILE
============================================================ */


/* ============================================================
   END — STATUTORY DETAILS
============================================================ */
        
        
/* ============================================================
   START — IREPS DOCUMENT SECTION
============================================================ */

.ireps-document-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}


/* ============================================================
   START — DOCUMENT ROW
============================================================ */

.ireps-document-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 18px 20px;

    box-sizing: border-box;

    border: 1px solid #e5e7eb;
    border-radius: 10px;

    background: #ffffff;

    border-bottom: 3px solid rgba(124, 58, 237, 0.20);

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


.ireps-document-row:hover {
    border-color: #d1d5db;

    border-bottom-color:
        rgba(124, 58, 237, 0.35);

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.03);
}


/* ============================================================
   END — DOCUMENT ROW
============================================================ */



/* ============================================================
   START — DOCUMENT INFORMATION
============================================================ */

.ireps-document-info {
    min-width: 0;
}


.ireps-document-name {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;

    color: #111827;
}


/* ============================================================
   END — DOCUMENT INFORMATION
============================================================ */



/* ============================================================
   START — DOCUMENT ACTIONS
============================================================ */

.ireps-document-actions {
    display: flex;
    align-items: center;

    gap: 10px;

    flex: 0 0 auto;
}


/* ============================================================
   END — DOCUMENT ACTIONS
============================================================ */



/* ============================================================
   START — DOWNLOAD BUTTON
============================================================ */

.ireps-document-download {
    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 16px;

    box-sizing: border-box;

    border: 1px solid #d1d5db;
    border-radius: 7px;

    background: #ffffff;
    color: #111827;

    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    white-space: nowrap;

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


.ireps-document-download:hover {
    background: #f9fafb;

    border-color: #9ca3af;

    color: #111827;
}


/* ============================================================
   END — DOWNLOAD BUTTON
============================================================ */



/* ============================================================
   START — UPLOAD BUTTON
============================================================ */

.ireps-document-upload {
    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 16px;

    box-sizing: border-box;

    border: 1px solid #7c3aed;
    border-radius: 7px;

    background: #7c3aed;
    color: #ffffff;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    white-space: nowrap;

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


.ireps-document-upload:hover {
    background: #6d28d9;

    border-color: #6d28d9;
}


/* ============================================================
   START — DISABLED UPLOAD BUTTON
============================================================ */

.ireps-document-upload.is-disabled {
    background: #f3f4f6;

    border-color: #d1d5db;

    color: #9ca3af;

    cursor: not-allowed;

    opacity: 0.75;
}


.ireps-document-upload.is-disabled:hover {
    background: #f3f4f6;

    border-color: #d1d5db;

    color: #9ca3af;
}


/* ============================================================
   END — DISABLED UPLOAD BUTTON
============================================================ */



/* ============================================================
   START — ACTUAL FILE INPUT
============================================================ */

.ireps-document-file {
    position: absolute;

    width: 1px;
    height: 1px;

    margin: -1px;

    padding: 0;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* ============================================================
   END — ACTUAL FILE INPUT
============================================================ */



/* ============================================================
   START — UPLOADED FILE STATE
============================================================ */

.ireps-document-upload.has-file {
    background: #16a34a;

    border-color: #16a34a;

    color: #ffffff;
}


.ireps-document-upload.has-file:hover {
    background: #15803d;

    border-color: #15803d;
}


/* ============================================================
   END — UPLOADED FILE STATE
============================================================ */



/* ============================================================
   START — MOBILE
============================================================ */

@media (max-width: 700px) {

    .ireps-document-row {
        align-items: stretch;

        flex-direction: column;

        gap: 14px;

        padding: 16px;
    }


    .ireps-document-actions {
        width: 100%;
    }


    .ireps-document-download,
    .ireps-document-upload {
        flex: 1 1 0;

        width: 50%;
    }

}


/* ============================================================
   END — MOBILE
============================================================ */


/* ============================================================
   END — IREPS DOCUMENT SECTION
============================================================ */        






/* ============================================================
   UVAM FORM
   UVAM Registration Styling

   USE THIS SECTION IN:
   /form/assets/style.css

   IMPORTANT:
   - No separate uvam.css file.
   - Common classes are used for all form sections.
   - Section-specific classes are intentionally avoided.
   - Existing IDs and form field names remain unchanged.
============================================================ */


/* ============================================================
   UVAM — EXISTING DATA LOADING OVERLAY
============================================================ */

.uvam-existing-data-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.30);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}

.uvam-existing-data-loader.is-visible {
    opacity: 1;
    visibility: visible;
}

.uvam-existing-data-loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 14px;

    text-align: center;
}

.uvam-existing-data-loader-text {
    font-size: 17px;
    font-weight: 600;

    color: var(--theme-color, #0d6efd);
}

.uvam-existing-data-loader-spinner {
    width: 38px;
    height: 38px;

    border: 4px solid rgba(255, 255, 255, 0.35);
    border-top-color: var(--theme-color, #0d6efd);

    border-radius: 50%;

    animation: uvamExistingDataLoaderSpin 0.8s linear infinite;
}

@keyframes uvamExistingDataLoaderSpin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}



/* ============================================================
   UVAM — UPLOAD FIELD
============================================================ */

.uvam-upload-field {
    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;
    justify-content: flex-start !important;

    width: 100%;

    gap: 6px;

    box-sizing: border-box;
}


/* ============================================================
   UVAM — UPLOAD FILE NAME
   Filename appears ABOVE Choose File button
============================================================ */

.uvam-upload-file-name {
    display: block !important;

    order: 1;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;

    color: inherit;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    box-sizing: border-box;
}


/* ============================================================
   UVAM — FILE INPUT
============================================================ */

.uvam-upload-input {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: -1px !important;
    padding: 0 !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    border: 0 !important;

    opacity: 0 !important;
}


/* ============================================================
   UVAM — CHOOSE FILE BUTTON
============================================================ */

.uvam-upload-button {
    order: 2;

    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    cursor: pointer;

    box-sizing: border-box;
}


/* ============================================================
   01. APPLICATION HEADER
============================================================ */

.uvam-application-header {
    margin-bottom: 22px;
}


.uvam-application-kicker {
    display: block;

    margin: 0 0 6px 0;

    color: #7c3aed;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .7px;
    text-transform: uppercase;

    line-height: 1.3;
}


.uvam-application-title {
    margin: 0;

    color: #111827;

    font-size: 28px;
    font-weight: 700;

    line-height: 1.25;
}


.uvam-application-description {
    margin: 8px 0 0 0;

    color: #6b7280;

    font-size: 14px;

    line-height: 1.55;
}


/* ============================================================
   UVAM — EXISTING DOCUMENT
============================================================ */

.uvam-existing-document {

    display: block;

    margin-top: 8px;

    color: var(--text-light, #6b6575);

    font-size: 12px;

    line-height: 1.5;
}


.uvam-existing-document[hidden] {
    display: none;
}


/*
|--------------------------------------------------------------------------
| EXISTING DOCUMENT LINK
|--------------------------------------------------------------------------
*/

.uvam-existing-document-link {

    color: var(--primary, #6d28d9);

    font-weight: 600;

    text-decoration: underline;

    text-underline-offset: 2px;

    overflow-wrap: anywhere;
}


.uvam-existing-document-link:hover {

    color:
        var(--primary-dark, #4c1d95);
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 700px) {

    .uvam-existing-document {

        font-size: 11px;

    }

}

/* ============================================================
   02. APPLICATION CARD
============================================================ */

.uvam-application-card {
    width: 100%;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 12px;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.035);

    overflow: hidden;
}


/* ============================================================
   03. CARD HEADER
============================================================ */

.uvam-card-header {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    padding: 22px 24px;

    box-sizing: border-box;

    background: #ffffff;
}


.uvam-card-header-title {
    margin: 0;

    color: #111827;

    font-size: 21px;
    font-weight: 700;

    line-height: 1.3;
}


.uvam-request-id {
    margin-top: 8px;

    color: #6b7280;

    font-size: 13px;

    line-height: 1.4;
}


.uvam-request-id strong {
    color: #374151;

    font-weight: 700;
}


/* ============================================================
   04. TAB NAVIGATION
============================================================ */

.uvam-tabs-wrapper {
    width: 100%;

    box-sizing: border-box;

    margin: 0;

    padding: 0 24px 2px;

    overflow-x: auto;

    background: #ffffff;

    scrollbar-width: thin;
}


.uvam-tabs {
    display: flex;

    align-items: stretch;

    gap: 3px;

    min-width: max-content;
}


.uvam-tab {
    appearance: none;

    flex: 0 0 auto;

    margin: 0;

    padding: 11px 16px;

    box-sizing: border-box;

    border: 0;

    border-radius: 5px 5px 0 0;

    background: #0787bd;

    color: #ffffff;

    font-family: inherit;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .2px;

    line-height: 1.2;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background-color .2s ease,
        color .2s ease,
        transform .15s ease;
}


.uvam-tab:hover {
    background: #056d99;
}


.uvam-tab:active {
    transform: translateY(1px);
}


.uvam-tab:focus-visible {
    outline: 2px solid #7c3aed;

    outline-offset: 2px;
}


.uvam-tab.active {
    background: #f28c28;

    color: #ffffff;
}


.uvam-tab.completed {
    position: relative;
}


.uvam-tab.completed::after {
    content: "✓";

    margin-left: 6px;

    font-size: 11px;
}


/* ============================================================
   05. TAB CONTENT
============================================================ */

.uvam-tab-content {
    display: none;

    width: 100%;

    box-sizing: border-box;
}


.uvam-tab-content.active {
    display: block;
}


/* ============================================================
   06. COMMON STEP / MAIN SECTION
============================================================ */

.uvam-step-section {
    width: 100%;

    box-sizing: border-box;

    border-bottom: 1px solid #e5e7eb;
}


/* ============================================================
   07. STEP HEADER
============================================================ */

.uvam-step-header {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 22px 24px;

    box-sizing: border-box;

    background: #ffffff;
}


.uvam-step-number {
    flex: 0 0 auto;

    color: #7c3aed;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .5px;

    line-height: 1;
}


.uvam-step-heading {
    display: flex;

    align-items: center;

    gap: 14px;

    min-width: 0;
}


.uvam-step-title {
    margin: 0;

    color: #111827;

    font-size: 18px;
    font-weight: 700;

    line-height: 1.3;

    white-space: nowrap;
}


.uvam-step-description {
    margin: 0;

    color: #374151;

    font-size: 13px;
    font-weight: 600;

    line-height: 1.45;
}


/* ============================================================
   08. COMMON SECTION CONTENT
============================================================ */

.uvam-section-content {
    width: 100%;

    padding: 22px 24px 26px;

    box-sizing: border-box;
}


/* ============================================================
   09. COMMON SUBSECTION
============================================================ */

.uvam-subsection {
    width: 100%;

    margin: 0 0 24px 0;

    padding: 20px;

    box-sizing: border-box;

    border: 1px solid #e5e7eb;

    border-radius: 10px;

    background: #ffffff;

    border-bottom: 3px solid rgba(124, 58, 237, 0.18);
}


.uvam-subsection:last-child {
    margin-bottom: 0;
}


/* ============================================================
   10. COMMON SUBSECTION TITLE
============================================================ */

.uvam-subsection-title {
    margin: 0 0 16px 0;

    color: #111827;

    font-size: 15px;
    font-weight: 700;

    line-height: 1.35;
}


.uvam-subsection-title::before {
    content: "";

    display: inline-block;

    width: 3px;
    height: 16px;

    margin-right: 8px;

    vertical-align: -2px;

    border-radius: 2px;

    background: #7c3aed;
}


/* ============================================================
   11. FORM GRID
============================================================ */

.uvam-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px 22px;

    width: 100%;
}


/* ============================================================
   12. THREE COLUMN FORM GRID
============================================================ */

.uvam-form-grid-3 {
    grid-template-columns:
        15% 40% 40%;
}


/* ============================================================
   13. FORM GROUP
============================================================ */

.uvam-form-group {
    min-width: 0;

    width: 100%;
}


.uvam-form-group.full-width {
    grid-column: 1 / -1;
}


/* ============================================================
   14. FORM LABEL
============================================================ */

.uvam-form-label {
    display: block;

    margin: 0 0 7px 0;

    color: #374151;

    font-size: 13px;
    font-weight: 600;

    line-height: 1.4;
}


.uvam-form-label .required {
    color: #dc2626;
}


/* ============================================================
   15. COMMON FORM CONTROL

   This is the main class for:
   - text input
   - email input
   - telephone input
   - number input
   - date input
   - url input
   - password input
   - search input
   - select
   - textarea
============================================================ */

.uvam-form-control {
    width: 100%;

    min-height: 44px;

    padding: 10px 12px;

    box-sizing: border-box;

    border: 1px solid #d1d5db;

    border-radius: 8px;

    background: #ffffff;

    color: #111827;

    font-family: inherit;

    font-size: 14px;

    line-height: 1.4;

    outline: none;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background-color .15s ease;
}


/* ============================================================
   16. ALL STANDARD INPUT TYPES

   Common styling is intentionally linked to
   the same UVAM form-control appearance.
============================================================ */

input[type="text"].uvam-form-control,
input[type="email"].uvam-form-control,
input[type="tel"].uvam-form-control,
input[type="number"].uvam-form-control,
input[type="date"].uvam-form-control,
input[type="url"].uvam-form-control,
input[type="password"].uvam-form-control,
input[type="search"].uvam-form-control,
input[type="time"].uvam-form-control,
input[type="month"].uvam-form-control,
input[type="week"].uvam-form-control,
input[type="datetime-local"].uvam-form-control,
select.uvam-form-control,
textarea.uvam-form-control {
    width: 100%;

    max-width: 100%;

    box-sizing: border-box;
}


/* ============================================================
   17. FORM CONTROL — HOVER
============================================================ */

.uvam-form-control:hover {
    border-color: #9ca3af;
}


/* ============================================================
   18. FORM CONTROL — FOCUS
============================================================ */

.uvam-form-control:focus {
    border-color: #7c3aed;

    box-shadow:
        0 0 0 3px rgba(124, 58, 237, 0.10);
}


/* ============================================================
   19. FORM CONTROL — PLACEHOLDER
============================================================ */

.uvam-form-control::placeholder {
    color: #9ca3af;
}


/* ============================================================
   20. TEXTAREA
============================================================ */

textarea.uvam-form-control {
    min-height: 100px;

    resize: vertical;
}


/* ============================================================
   21. SELECT
============================================================ */

select.uvam-form-control {
    cursor: pointer;
}


/* ============================================================
   22. READONLY FORM CONTROL
============================================================ */

.uvam-form-control[readonly] {
    background: #f9fafb;

    color: #374151;

    cursor: default;
}


/* ============================================================
   23. DISABLED FORM CONTROL
============================================================ */

.uvam-form-control:disabled {
    background: #f3f4f6;

    color: #9ca3af;

    border-color: #e5e7eb;

    cursor: not-allowed;

    opacity: 1;
}


/* ============================================================
   24. FIELD HELP
============================================================ */

.uvam-field-help {
    margin-top: 6px;

    color: #6b7280;

    font-size: 11px;

    line-height: 1.45;
}


/* ============================================================
   25. FIELD ERROR
============================================================ */

.uvam-field-error {
    min-height: 17px;

    margin-top: 5px;

    color: #dc2626;

    font-size: 12px;
    font-weight: 500;

    line-height: 1.4;
}


.uvam-form-control.is-invalid {
    border-color: #dc2626;
}


.uvam-form-control.is-invalid:focus {
    border-color: #dc2626;

    box-shadow:
        0 0 0 3px rgba(220, 38, 38, 0.10);
}


.uvam-form-control.is-valid {
    border-color: #16a34a;
}


/* ============================================================
   26. INFORMATION BOX
============================================================ */

.uvam-info-box {
    margin-bottom: 20px;

    padding: 13px 15px;

    box-sizing: border-box;

    border: 1px solid #ddd6fe;

    border-radius: 8px;

    background: #f7f4ff;

    color: #4d2aa3;

    font-size: 13px;

    line-height: 1.55;
}


.uvam-info-box strong {
    color: #3f208f;
}


.uvam-note {
    margin-top: 8px;

    color: #a33a3a;

    font-size: 12px;

    line-height: 1.5;
}


/* ============================================================
   27. OPTION LIST
============================================================ */

.uvam-option-list {
    display: grid;

    gap: 12px;
}


.uvam-option {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    padding: 13px 14px;

    box-sizing: border-box;

    border: 1px solid #d7dce1;

    border-radius: 8px;

    background: #ffffff;

    cursor: pointer;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background-color .15s ease;
}


.uvam-option:hover {
    border-color: #9da9b2;

    background: #fafafa;
}


.uvam-option input {
    flex: 0 0 auto;

    margin-top: 3px;
}


.uvam-option strong {
    display: block;

    margin-bottom: 3px;

    color: #111827;

    font-size: 13px;
}


.uvam-option small {
    display: block;

    color: #6b7280;

    font-size: 11px;

    line-height: 1.45;
}


/* ============================================================
   28. DOCUMENT LIST
============================================================ */

.uvam-document-list {
    display: flex;

    flex-direction: column;

    gap: 14px;
}


/* ============================================================
   29. DOCUMENT ROW
============================================================ */

.uvam-document-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 18px 20px;

    box-sizing: border-box;

    border: 1px solid #e5e7eb;

    border-radius: 10px;

    background: #ffffff;

    border-bottom: 3px solid rgba(124, 58, 237, 0.20);

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}


.uvam-document-row:hover {
    border-color: #d1d5db;

    border-bottom-color:
        rgba(124, 58, 237, 0.35);

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.03);
}


.uvam-document-info {
    min-width: 0;
}


.uvam-document-name {
    color: #111827;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.4;
}


.uvam-document-help {
    margin-top: 4px;

    color: #777777;

    font-size: 11px;

    line-height: 1.45;
}


.uvam-document-actions {
    display: flex;

    align-items: center;

    gap: 10px;

    flex: 0 0 auto;
}


/* ============================================================
   30. DOCUMENT DOWNLOAD
============================================================ */

.uvam-document-download {
    min-height: 38px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0 16px;

    box-sizing: border-box;

    border: 1px solid #d1d5db;

    border-radius: 7px;

    background: #ffffff;

    color: #111827;

    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    white-space: nowrap;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease;
}


.uvam-document-download:hover {
    background: #f9fafb;

    border-color: #9ca3af;
}


/* ============================================================
   31. DOCUMENT UPLOAD
============================================================ */

.uvam-document-upload {
    min-height: 38px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0 16px;

    box-sizing: border-box;

    border: 1px solid #7c3aed;

    border-radius: 7px;

    background: #7c3aed;

    color: #ffffff;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    white-space: nowrap;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        opacity .15s ease;
}


.uvam-document-upload:hover {
    background: #6d28d9;

    border-color: #6d28d9;
}


.uvam-document-upload.is-disabled {
    background: #f3f4f6;

    border-color: #d1d5db;

    color: #9ca3af;

    cursor: not-allowed;

    opacity: .75;
}


/* ============================================================
   32. FILE INPUTS

   Hidden native file controls.
============================================================ */

.uvam-document-file,
.uvam-file-input,
.uvam-upload-input {
    position: absolute;

    width: 1px;
    height: 1px;

    margin: -1px;

    padding: 0;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


.uvam-document-upload.has-file {
    background: #16a34a;

    border-color: #16a34a;

    color: #ffffff;
}


.uvam-document-upload.has-file:hover {
    background: #15803d;

    border-color: #15803d;
}


/* ============================================================
   33. UPLOAD FIELD
============================================================ */

.uvam-upload-field {
    width: 100%;
}


.uvam-upload-button {
    width: 100%;

    min-height: 46px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 0 14px;

    box-sizing: border-box;

    border: 1px dashed #cbd5e1;

    border-radius: 8px;

    background: #f8fafc;

    color: #374151;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease;
}


.uvam-upload-button:hover {
    background: #fafafa;

    border-color: #a78bfa;

    color: #111827;
}


/* ============================================================
   34. STATUS
============================================================ */

.uvam-status {
    display: none;

    margin-bottom: 18px;

    padding: 11px 14px;

    box-sizing: border-box;

    border: 1px solid #d8d8d8;

    border-radius: 8px;

    background: #f7f7f7;

    color: #333333;

    font-size: 13px;

    line-height: 1.5;
}


.uvam-status.show {
    display: block;
}


.uvam-status.success {
    border-color: #bbf7d0;

    background: #f0fdf4;

    color: #166534;
}


.uvam-status.error {
    border-color: #fecaca;

    background: #fef2f2;

    color: #991b1b;
}


/* ============================================================
   35. BOTTOM ACTIONS
============================================================ */

.uvam-bottom-actions {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 10px;

    flex-wrap: wrap;

    width: 100%;

    padding: 20px 24px;

    margin: 0;

    box-sizing: border-box;

    border-top: 1px solid #e5e7eb;

    background: #ffffff;
}


/* ============================================================
   36. SECONDARY BUTTON
============================================================ */

.uvam-button-secondary {
    min-height: 40px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0 16px;

    box-sizing: border-box;

    border: 1px solid #d1d5db;

    border-radius: 7px;

    background: #ffffff;

    color: #111827;

    font-family: inherit;

    font-size: 13px;
    font-weight: 600;

    line-height: 1;

    cursor: pointer;

    white-space: nowrap;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        box-shadow .15s ease;
}


.uvam-button-secondary:hover {
    background: #fafafa;

    border-color: #9ca3af;

    box-shadow:
        0 1px 3px rgba(0, 0, 0, .04);
}


.uvam-button-secondary:focus-visible {
    outline: 2px solid #7c3aed;

    outline-offset: 2px;
}


/* ============================================================
   37. SAVE DRAFT BUTTON
============================================================ */

.uvam-button-save {
    min-height: 40px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0 17px;

    box-sizing: border-box;

    border: 1px solid #0787bd;

    border-radius: 7px;

    background: #0787bd;

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;
    font-weight: 700;

    line-height: 1;

    cursor: pointer;

    white-space: nowrap;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}


.uvam-button-save:hover {
    background: #056d99;

    border-color: #056d99;
}


.uvam-button-save:active {
    transform: translateY(1px);
}


.uvam-button-save:focus-visible {
    outline: 2px solid #7c3aed;

    outline-offset: 2px;
}


/* ============================================================
   38. PRIMARY / SUBMIT BUTTON
============================================================ */

.uvam-button-primary {
    min-height: 40px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0 19px;

    box-sizing: border-box;

    border: 1px solid #7c3aed;

    border-radius: 7px;

    background: #7c3aed;

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;
    font-weight: 700;

    line-height: 1;

    cursor: pointer;

    white-space: nowrap;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}


.uvam-button-primary:hover {
    background: #6d28d9;

    border-color: #6d28d9;
}


.uvam-button-primary:active {
    transform: translateY(1px);
}


.uvam-button-primary:focus-visible {
    outline: 2px solid #7c3aed;

    outline-offset: 2px;
}


/* ============================================================
   39. BUTTON DISABLED
============================================================ */

.uvam-button-secondary:disabled,
.uvam-button-save:disabled,
.uvam-button-primary:disabled {
    opacity: .65;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
}


/* ============================================================
   40. ADD BUTTON
============================================================ */

.uvam-button-add {
    min-height: 38px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0 14px;

    box-sizing: border-box;

    border: 1px solid #d1d5db;

    border-radius: 7px;

    background: #ffffff;

    color: #111827;

    font-family: inherit;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    white-space: nowrap;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}


.uvam-button-add:hover {
    background: #fafafa;

    border-color: #9ca3af;

    box-shadow:
        0 1px 3px rgba(0, 0, 0, .04);
}


/* ============================================================
   41. REMOVE BUTTON
============================================================ */

.uvam-remove-btn {
    flex: 0 0 auto;

    width: 36px;
    height: 36px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0;
    margin: 0;

    box-sizing: border-box;

    border: 1px solid #e5e7eb;

    border-radius: 7px;

    background: #ffffff;

    color: #6b7280;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 24px;
    font-weight: 400;

    line-height: 1;

    cursor: pointer;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .15s ease;
}


.uvam-remove-btn:hover {
    background: #fef2f2;

    border-color: #fecaca;

    color: #dc2626;
}


.uvam-remove-btn:active {
    transform: scale(.94);
}


/* ============================================================
   42. ENTRY WRAPPER
============================================================ */

.uvam-entry-wrapper {
    margin-top: 20px;

    padding: 20px;

    box-sizing: border-box;

    background: #f8fafc;

    border: 1px solid #e5e7eb;

    border-radius: 10px;
}


.uvam-entry-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 18px;
}


.uvam-entry-header-title {
    margin: 0;

    color: #111827;

    font-size: 16px;
    font-weight: 700;
}


.uvam-entry-list {
    display: flex;

    flex-direction: column;

    gap: 16px;
}


.uvam-entry {
    padding: 18px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-bottom: 3px solid #ddd6fe;

    border-radius: 9px;

    box-shadow:
        0 1px 2px rgba(0, 0, 0, .025);
}


.uvam-entry-title {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 18px;

    padding-bottom: 11px;

    border-bottom: 1px solid #f0f0f2;
}


.uvam-entry-title strong {
    color: #111827;

    font-size: 15px;
    font-weight: 700;
}


/* ============================================================
   43. CHECKBOX
============================================================ */

.uvam-checkbox-label {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    width: fit-content;

    margin: 0;

    color: #111827;

    font-size: 13px;
    font-weight: 600;

    line-height: 1.4;

    cursor: pointer;

    user-select: none;
}


.uvam-checkbox-label input {
    width: 17px;
    height: 17px;

    margin: 0;

    accent-color: #7c3aed;
}


/* ============================================================
   UVAM — COMMON ADD / REMOVE BUTTONS — START
============================================================ */


/*
|--------------------------------------------------------------------------
| COMMON ADD / REMOVE BUTTON
|--------------------------------------------------------------------------
|
| Reusable + / − buttons for UVAM tables and sections.
|
*/

.add_remove_button {

    /* ----------------------------------------------------------
       SIZE
    ---------------------------------------------------------- */

    width: 34px;

    height: 34px;

    flex: 0 0 34px;


    /* ----------------------------------------------------------
       ALIGNMENT
    ---------------------------------------------------------- */

    display: inline-flex;

    align-items: center;

    justify-content: center;


    /* ----------------------------------------------------------
       RESET
    ---------------------------------------------------------- */

    padding: 0;

    margin: 0;

    border: 0;

    background: transparent;


    /* ----------------------------------------------------------
       TYPOGRAPHY
    ---------------------------------------------------------- */

    font-family: Arial, Helvetica, sans-serif;

    font-size: 20px;

    font-weight: 700;

    line-height: 1;

    text-align: center;


    /* ----------------------------------------------------------
       INTERACTION
    ---------------------------------------------------------- */

    cursor: pointer;

    user-select: none;

    -webkit-user-select: none;


    /* ----------------------------------------------------------
       TRANSITION
    ---------------------------------------------------------- */

    transition:

        color 0.15s ease,

        background 0.15s ease,

        transform 0.15s ease,

        filter 0.15s ease;

}


/*
|--------------------------------------------------------------------------
| ADD BUTTON
|--------------------------------------------------------------------------
|
| Uses the existing UVAM theme purple.
|
*/

.add_remove_button.add {

    color: #7c3aed;

}


/*
|--------------------------------------------------------------------------
| REMOVE BUTTON
|--------------------------------------------------------------------------
|
| Red colour for remove action.
|
*/

.add_remove_button.remove {

    color: #dc2626;

}


/*
|--------------------------------------------------------------------------
| HOVER — ADD
|--------------------------------------------------------------------------
|
| Very subtle gradient/highlight effect.
|
*/

.add_remove_button.add:hover:not(:disabled) {

    color: #6d28d9;

    background:

        linear-gradient(
            to bottom,
            rgba(124, 58, 237, 0.12),
            rgba(124, 58, 237, 0.03)
        );

    border-radius: 7px;

    transform: translateY(-1px);

}


/*
|--------------------------------------------------------------------------
| HOVER — REMOVE
|--------------------------------------------------------------------------
*/

.add_remove_button.remove:hover:not(:disabled) {

    color: #b91c1c;

    background:

        linear-gradient(
            to bottom,
            rgba(220, 38, 38, 0.12),
            rgba(220, 38, 38, 0.03)
        );

    border-radius: 7px;

    transform: translateY(-1px);

}


/*
|--------------------------------------------------------------------------
| ACTIVE / PRESSED
|--------------------------------------------------------------------------
*/

.add_remove_button:active:not(:disabled) {

    transform: translateY(1px);

    filter: brightness(0.92);

}


/*
|--------------------------------------------------------------------------
| DISABLED BUTTON
|--------------------------------------------------------------------------
*/

.add_remove_button:disabled {

    color: #a1a1aa;

    background: transparent;

    cursor: not-allowed;

    opacity: 0.45;

    transform: none;

}


/*
|--------------------------------------------------------------------------
| BUTTON GROUP
|--------------------------------------------------------------------------
|
| Keeps + and − buttons on the same horizontal line.
|
*/

.add_remove_buttons {

    display: inline-flex;

    align-items: center;

    justify-content: flex-start;

    gap: 8px;

    white-space: nowrap;

}


/*
|--------------------------------------------------------------------------
| TABLE ACTION CELL
|--------------------------------------------------------------------------
*/

.uvam-products-action-cell {

    white-space: nowrap;

    vertical-align: middle;

}


/*
|--------------------------------------------------------------------------
| PRODUCT ACTION BUTTON GROUP
|--------------------------------------------------------------------------
*/

.uvam-products-actions {

    display: inline-flex;

    align-items: center;

    justify-content: flex-start;

    gap: 8px;

    white-space: nowrap;

}


/*
|--------------------------------------------------------------------------
| PRODUCTS LICENSE ACTION CELL
|--------------------------------------------------------------------------
*/

.uvam-products-license-action-cell {

    white-space: nowrap;

    vertical-align: middle;

}


/*
|--------------------------------------------------------------------------
| PRODUCTS LICENSE ACTION BUTTON GROUP
|--------------------------------------------------------------------------
*/

.uvam-products-license-actions {

    display: inline-flex;

    align-items: center;

    justify-content: flex-start;

    gap: 8px;

    white-space: nowrap;

}


/* ============================================================
   UVAM — COMMON ADD / REMOVE BUTTONS — END
============================================================ */


/* ============================================================
   44. MOBILE FIELD
============================================================ */

.uvam-mobile-field {
    min-width: 0;
}


.uvam-mobile-label-row {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    min-height: 20px;

    margin-bottom: 7px;
}


.uvam-mobile-label-row label {
    flex: 1 1 auto;

    margin: 0;
}


.uvam-mobile-prefix {
    flex: 0 0 auto;

    color: #374151;

    font-size: 13px;
    font-weight: 600;

    line-height: 1;
}


.uvam-mobile-input-group {
    width: 100%;

    display: flex;

    align-items: stretch;

    box-sizing: border-box;
}


.uvam-mobile-input-group .uvam-mobile-prefix {
    display: inline-flex;

    align-items: center;

    padding: 0 12px;

    border: 1px solid #d1d5db;

    border-right: 0;

    border-radius: 8px 0 0 8px;

    background: #f9fafb;
}


.uvam-mobile-input-group .uvam-form-control {
    min-width: 0;

    flex: 1 1 auto;

    border-radius: 0 8px 8px 0;
}


/* ============================================================
   45. EMPTY STATE
============================================================ */

.uvam-empty-state {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 6px;

    min-height: 160px;

    margin: 22px 24px 26px;

    padding: 30px 20px;

    box-sizing: border-box;

    border: 1px dashed #d1d5db;

    border-radius: 10px;

    background: #f9fafb;

    text-align: center;
}


.uvam-empty-state strong {
    color: #374151;

    font-size: 15px;
    font-weight: 700;
}


.uvam-empty-state span {
    max-width: 600px;

    color: #6b7280;

    font-size: 12px;

    line-height: 1.5;
}


/* ============================================================
   46. ORGANIZATION TABLE
============================================================ */

.uvam-table-wrapper {
    width: 100%;
    max-width: 100%;

    overflow-x: hidden;

    box-sizing: border-box;
}


.uvam-organization-table {
    width: 100%;
    max-width: 100%;

    border-collapse: collapse;
    border-spacing: 0;

    table-layout: fixed;

    box-sizing: border-box;
}


/* ============================================================
   47. ORGANIZATION TABLE — HEADER
============================================================ */

.uvam-organization-table thead th {
    width: 20%;

    padding: 14px 12px;

    text-align: left;
    vertical-align: middle;

    font-weight: 700;

    white-space: nowrap;

    box-sizing: border-box;
}


/* ============================================================
   48. ORGANIZATION TABLE — CELLS
============================================================ */

.uvam-organization-table tbody td {
    width: 20%;

    padding: 12px;

    vertical-align: middle;

    box-sizing: border-box;
}


/* ============================================================
   49. ORGANIZATION TABLE — TITLE COLUMN
============================================================ */

.uvam-organization-table tbody td:first-child {
    font-weight: 600;
}


/* ============================================================
   50. ORGANIZATION TABLE — FORM CONTROLS

   Uses the same common form-control class.
============================================================ */

.uvam-organization-table .uvam-form-control {
    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    box-sizing: border-box;
}


/* ============================================================
   51. ORGANIZATION TABLE — LONG CONTENT
============================================================ */

.uvam-organization-table th,
.uvam-organization-table td {
    overflow-wrap: anywhere;

    word-break: normal;
}


/* ============================================================
   52. TABLET RESPONSIVE
============================================================ */

@media (max-width: 900px) {

    /* --------------------------------------------------------
       FORM GRID
    -------------------------------------------------------- */

    .uvam-form-grid {
        grid-template-columns: 1fr;
    }


    .uvam-form-grid-3 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .uvam-form-group.full-width {
        grid-column: auto;
    }


    /* --------------------------------------------------------
       CARD HEADER
    -------------------------------------------------------- */

    .uvam-card-header {
        flex-direction: column;
    }

}


/* ============================================================
   53. MOBILE RESPONSIVE
============================================================ */

@media (max-width: 700px) {

    /* --------------------------------------------------------
       APPLICATION
    -------------------------------------------------------- */

    .uvam-application-title {
        font-size: 23px;
    }


    /* --------------------------------------------------------
       CARD HEADER
    -------------------------------------------------------- */

    .uvam-card-header {
        padding: 18px 16px;
    }


    /* --------------------------------------------------------
       TABS
    -------------------------------------------------------- */

    .uvam-tabs-wrapper {
        padding-left: 16px;

        padding-right: 16px;
    }


    .uvam-tab {
        padding: 9px 11px;

        font-size: 11px;
    }


    /* --------------------------------------------------------
       STEP HEADER
    -------------------------------------------------------- */

    .uvam-step-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 7px;

        padding: 18px 16px;
    }


    .uvam-step-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 5px;
    }


    .uvam-step-title {
        font-size: 17px;

        white-space: normal;
    }


    /* --------------------------------------------------------
       SECTION CONTENT
    -------------------------------------------------------- */

    .uvam-section-content {
        padding: 18px 16px 22px;
    }


    /* --------------------------------------------------------
       COMMON SUBSECTION
    -------------------------------------------------------- */

    .uvam-subsection {
        padding: 16px;
    }


    /* --------------------------------------------------------
       DOCUMENTS
    -------------------------------------------------------- */

    .uvam-document-row {
        align-items: stretch;

        flex-direction: column;

        gap: 14px;

        padding: 16px;
    }


    .uvam-document-actions {
        width: 100%;
    }


    .uvam-document-download,
    .uvam-document-upload {
        flex: 1 1 0;

        width: 50%;
    }


    /* --------------------------------------------------------
       BOTTOM ACTIONS
       Reset | Save Draft | Submit
    -------------------------------------------------------- */

    .uvam-bottom-actions {
        align-items: stretch;

        flex-direction: column;

        padding: 18px 16px;
    }


    .uvam-bottom-actions
    .uvam-button-secondary,

    .uvam-bottom-actions
    .uvam-button-save,

    .uvam-bottom-actions
    .uvam-button-primary {
        width: 100%;
    }


    /* --------------------------------------------------------
       ENTRY HEADER
    -------------------------------------------------------- */

    .uvam-entry-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .uvam-entry-header .uvam-button-add {
        width: 100%;
    }


    /* --------------------------------------------------------
       ENTRY
    -------------------------------------------------------- */

    .uvam-entry {
        padding: 15px;
    }


    /* --------------------------------------------------------
       EMPTY STATE
    -------------------------------------------------------- */

    .uvam-empty-state {
        margin-left: 16px;

        margin-right: 16px;
    }


    /* --------------------------------------------------------
       THREE COLUMN GRID
    -------------------------------------------------------- */

    .uvam-form-grid-3 {
        grid-template-columns: 1fr;
    }


    /* --------------------------------------------------------
       ORGANIZATION TABLE WRAPPER
    -------------------------------------------------------- */

    .uvam-table-wrapper {
        width: 100%;
        max-width: 100%;

        overflow: visible;

        box-sizing: border-box;
    }


    /* --------------------------------------------------------
       ORGANIZATION TABLE → BLOCK
    -------------------------------------------------------- */

    .uvam-organization-table {
        display: block;

        width: 100%;
        max-width: 100%;

        border: 0;

        table-layout: auto;

        box-sizing: border-box;
    }


    .uvam-organization-table thead {
        display: none;
    }


    .uvam-organization-table tbody {
        display: block;

        width: 100%;
        max-width: 100%;

        box-sizing: border-box;
    }


    /* --------------------------------------------------------
       ORGANIZATION ROW → CARD
    -------------------------------------------------------- */

    .uvam-organization-table tbody tr {
        display: block;

        width: 100%;
        max-width: 100%;

        margin: 0 0 16px 0;

        padding: 16px;

        box-sizing: border-box;

        border: 1px solid #dfe3ea;

        border-radius: 12px;

        background: #ffffff;
    }


    /* --------------------------------------------------------
       ORGANIZATION CELLS
    -------------------------------------------------------- */

    .uvam-organization-table tbody td {
        display: block;

        width: 100%;
        max-width: 100%;

        padding: 0;

        margin: 0;

        box-sizing: border-box;

        overflow: visible;
    }


    /* --------------------------------------------------------
       ORGANIZATION TITLE
    -------------------------------------------------------- */

    .uvam-organization-table tbody td:first-child {
        width: 100%;
        max-width: 100%;

        padding: 0 0 14px 0;

        margin: 0 0 14px 0;

        font-size: 16px;
        font-weight: 700;

        border-bottom: 1px solid #e5e7eb;

        box-sizing: border-box;
    }


    /* --------------------------------------------------------
       ORGANIZATION DATA CELLS
    -------------------------------------------------------- */

    .uvam-organization-table tbody td:not(:first-child) {
        width: 100%;
        max-width: 100%;

        padding: 0;

        margin: 0 0 14px 0;

        box-sizing: border-box;
    }


    /* --------------------------------------------------------
       ORGANIZATION LAST CELL
    -------------------------------------------------------- */

    .uvam-organization-table tbody td:last-child {
        margin-bottom: 0;
    }


    /* --------------------------------------------------------
       GENERATED FIELD LABEL
    -------------------------------------------------------- */

    .uvam-organization-table tbody td::before {
        content: attr(data-label);

        display: block;

        width: 100%;

        margin: 0 0 6px 0;

        font-size: 14px;

        line-height: 1.4;

        font-weight: 600;

        box-sizing: border-box;
    }


    /* --------------------------------------------------------
       REMOVE GENERATED LABEL FROM TITLE
    -------------------------------------------------------- */

    .uvam-organization-table tbody td:first-child::before {
        display: none;

        content: none;
    }


    /* --------------------------------------------------------
       ORGANIZATION FORM CONTROLS
    -------------------------------------------------------- */

    .uvam-organization-table tbody td .uvam-form-control {
        display: block;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0;

        box-sizing: border-box;
    }


    /* --------------------------------------------------------
       ORGANIZATION NUMBER INPUT
    -------------------------------------------------------- */

    .uvam-organization-table tbody td input[type="number"] {
        width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box;
    }


    /* --------------------------------------------------------
       ORGANIZATION TELEPHONE INPUT
    -------------------------------------------------------- */

    .uvam-organization-table tbody td input[type="tel"] {
        width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box;
    }


    /* --------------------------------------------------------
       ORGANIZATION TEXT INPUT
    -------------------------------------------------------- */

    .uvam-organization-table tbody td input[type="text"] {
        width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box;
    }

}


/* ============================================================
   54. VERY SMALL MOBILE
============================================================ */

@media (max-width: 420px) {

    .uvam-tab {
        padding: 9px 10px;

        font-size: 10px;
    }


    .uvam-card-header-title {
        font-size: 19px;
    }


    .uvam-request-id {
        font-size: 12px;
    }


    .uvam-document-actions {
        flex-direction: column;
    }


    .uvam-document-download,
    .uvam-document-upload {
        width: 100%;
    }

}


/* ============================================================
   55. VERY SMALL ORGANIZATION TABLE
============================================================ */

@media (max-width: 400px) {

    .uvam-organization-table tbody tr {
        padding: 14px;

        border-radius: 10px;
    }


    .uvam-organization-table tbody td:first-child {
        font-size: 15px;
    }


    .uvam-organization-table tbody td::before {
        font-size: 13px;
    }

}


/* ============================================================
   UVAM — PLANT & MACHINERY
   SUB SECTION TITLE
============================================================ */

/*
 * Title and note are kept on the same horizontal line.
 */
.uvam-subsection-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    margin-bottom: 18px;
}


/*
 * Remove default margin from the title because
 * the parent row controls the spacing.
 */
.uvam-subsection-title-row .uvam-subsection-title {
    margin-bottom: 0;
}


/*
 * Small red instruction shown at the extreme right.
 */
.uvam-subsection-note {
    margin-left: auto;
    color: #b42318;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-align: right;
    white-space: nowrap;
}


/* ============================================================
   UVAM — PLANT & MACHINERY
   TABLE LAYOUT
============================================================ */

/*
 * Keep the complete table inside the available workspace.
 */
.uvam-machinery-table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    box-sizing: border-box;
}


/* ============================================================
   UVAM — PLANT & MACHINERY
   TABLE COLUMN WIDTHS
============================================================ */

/*
 * Description
 *
 * Reduced from 40% so the Action column has
 * enough space for both buttons.
 */
.uvam-machinery-table .machinery-description-column {
    width: 34% !important;
}


/*
 * Make
 */
.uvam-machinery-table .machinery-make-column {
    width: 18% !important;
}


/*
 * Quantity
 *
 * Kept compact.
 */
.uvam-machinery-table .machinery-quantity-column {
    width: 10% !important;
}


/*
 * Invoice
 *
 * Enough space for the Choose File button.
 */
.uvam-machinery-table .machinery-invoice-column {
    width: 20% !important;
}


/*
 * Action
 *
 * Increased from 10% to 18% so that
 * + and − buttons remain inside the table.
 */
.uvam-machinery-table .machinery-action-column {
    width: 18% !important;
}


/* ============================================================
   UVAM — PLANT & MACHINERY
   TABLE CELLS
============================================================ */

/*
 * Prevent cell content from expanding the fixed table.
 */
.uvam-machinery-table th,
.uvam-machinery-table td {
    box-sizing: border-box;
    min-width: 0;
}


/* ============================================================
   UVAM — PLANT & MACHINERY
   TABLE INPUTS
============================================================ */

/*
 * All form controls use the complete available
 * width of their respective table cell.
 */
.uvam-machinery-table td .uvam-form-control {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}


/*
 * Quantity input should remain compact.
 */
.uvam-machinery-table
.machinery-quantity-column
.uvam-form-control {
    min-width: 0;
    width: 100%;
}


/* ============================================================
   UVAM — PLANT & MACHINERY
   INVOICE UPLOAD
============================================================ */

/*
 * Keep invoice upload area inside the Invoice cell.
 */
.uvam-machinery-table
.machinery-invoice-column
.uvam-upload-field {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}


/*
 * Invoice upload button fills the available
 * Invoice column without overflowing.
 */
.uvam-machinery-table
.machinery-invoice-column
.uvam-upload-button {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ============================================================
   UVAM — PLANT & MACHINERY
   ACTION CELL
============================================================ */

/*
 * Keep Action buttons inside the Action column.
 */
.uvam-machinery-table
.machinery-action-column {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
}


/*
 * Common action-button wrapper.
 *
 * Same reusable class used by:
 * Products
 * Product Licenses
 * Existing Supply
 * Plant & Machinery
 */
.uvam-machinery-table
.machinery-action-column
.add_remove_buttons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    box-sizing: border-box;
}


/* ============================================================
   UVAM — PLANT & MACHINERY
   COMMON ACTION BUTTONS
============================================================ */

/*
 * Add / Remove buttons use the same common
 * reusable button class as the other UVAM tables.
 */
.uvam-machinery-table
.machinery-action-column
.add_remove_button {
    flex: 0 0 auto;
}


/*
 * Add button.
 *
 * Only sizing is controlled here.
 * Colour, border and general appearance
 * come from the common .add_remove_button.add CSS.
 */
.uvam-machinery-table
.machinery-action-column
.add_remove_button.add {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    margin: 0;
}


/*
 * Remove button.
 *
 * Only sizing is controlled here.
 * General appearance comes from the
 * common .add_remove_button.remove CSS.
 */
.uvam-machinery-table
.machinery-action-column
.add_remove_button.remove {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    margin: 0;
}


/* ============================================================
   UVAM — PLANT & MACHINERY
   MOBILE
============================================================ */

@media (max-width: 700px) {

    /*
     * Stack subsection title and instruction.
     */
    .uvam-subsection-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }


    /*
     * Instruction becomes left-aligned.
     */
    .uvam-subsection-note {
        margin-left: 0;
        text-align: left;
        white-space: normal;
    }


    /*
     * On mobile, each table column takes
     * the complete available width.
     */
    .uvam-machinery-table .machinery-description-column,
    .uvam-machinery-table .machinery-make-column,
    .uvam-machinery-table .machinery-quantity-column,
    .uvam-machinery-table .machinery-invoice-column,
    .uvam-machinery-table .machinery-action-column {
        width: 100% !important;
    }


    /*
     * Action buttons remain centered on mobile.
     */
    .uvam-machinery-table
    .machinery-action-column
    .add_remove_buttons {
        width: 100%;
        justify-content: flex-start;
    }

}


/* ============================================================
   UVAM — PLANT & MACHINERY
   SUB SECTION TITLE — END
============================================================ */


/* ============================================================
   UVAM — FINANCIAL DETAILS
   ANNUAL TURNOVER TABLE — START
============================================================ */


/* ============================================================
   UVAM — FINANCIAL DETAILS
   ANNUAL FINANCIAL TABLE — START
============================================================ */


/*
|--------------------------------------------------------------------------
| ANNUAL FINANCIAL TABLE
|--------------------------------------------------------------------------
*/

.uvam-financial-table {

    width: 100%;

    max-width: 100%;

    border-collapse: separate;

    border-spacing: 0;

    table-layout: fixed;

    font-family: inherit;

    font-size: inherit;

}


/*
|--------------------------------------------------------------------------
| TABLE WRAPPER
|--------------------------------------------------------------------------
*/

.uvam-financial-table
+ * {

    max-width: 100%;

}


/*
|--------------------------------------------------------------------------
| ANNUAL TURNOVER COLUMN WIDTHS
|--------------------------------------------------------------------------
*/

.uvam-financial-col-year {

    width: 18%;

}


.uvam-financial-col-turnover {

    width: 25%;

}


.uvam-financial-col-na {

    width: 18%;

}


.uvam-financial-col-reason {

    width: 39%;

}


/*
|--------------------------------------------------------------------------
| TABLE HEADER
|--------------------------------------------------------------------------
*/

.uvam-financial-table th {

    padding: 16px 18px;

    border-top: 1px solid #d7dce5;

    border-bottom: 1px solid #d7dce5;

    background: #f8f9fb;

    color: #172033;

    font-family: inherit;

    font-size: inherit;

    font-weight: 700;

    line-height: 1.35;

    text-align: left;

    vertical-align: middle;

    box-sizing: border-box;

}


/*
|--------------------------------------------------------------------------
| FIRST HEADER CELL
|--------------------------------------------------------------------------
*/

.uvam-financial-table th:first-child {

    border-left: 1px solid #d7dce5;

    border-top-left-radius: 10px;

}


/*
|--------------------------------------------------------------------------
| LAST HEADER CELL
|--------------------------------------------------------------------------
*/

.uvam-financial-table th:last-child {

    border-right: 1px solid #d7dce5;

    border-top-right-radius: 10px;

}


/*
|--------------------------------------------------------------------------
| TABLE BODY CELLS
|--------------------------------------------------------------------------
*/

.uvam-financial-table td {

    padding: 16px 18px;

    border-bottom: 1px solid #e1e5ec;

    background: #ffffff;

    font-family: inherit;

    font-size: inherit;

    vertical-align: middle;

    box-sizing: border-box;

}


/*
|--------------------------------------------------------------------------
| FIRST BODY CELL
|--------------------------------------------------------------------------
*/

.uvam-financial-table td:first-child {

    border-left: 1px solid #e1e5ec;

}


/*
|--------------------------------------------------------------------------
| LAST BODY CELL
|--------------------------------------------------------------------------
*/

.uvam-financial-table td:last-child {

    border-right: 1px solid #e1e5ec;

}


/*
|--------------------------------------------------------------------------
| LAST TABLE ROW
|--------------------------------------------------------------------------
*/

.uvam-financial-table tbody tr:last-child td:first-child {

    border-bottom-left-radius: 10px;

}


.uvam-financial-table tbody tr:last-child td:last-child {

    border-bottom-right-radius: 10px;

}


/*
|--------------------------------------------------------------------------
| FINANCIAL YEAR
|--------------------------------------------------------------------------
*/

.uvam-financial-year {

    display: block;

    padding: 10px 12px;

    color: #172033;

    font-family: inherit;

    font-size: inherit;

    font-weight: 600;

    line-height: 1.4;

    text-align: center;

    white-space: nowrap;

}


/*
|--------------------------------------------------------------------------
| ANNUAL TURNOVER INPUT
|--------------------------------------------------------------------------
*/

.uvam-financial-table .uvam-form-control {

    width: 100%;

    max-width: 100%;

    min-height: 46px;

    box-sizing: border-box;

    font-family: inherit;

    font-size: inherit;

}


/*
|--------------------------------------------------------------------------
| NOT AVAILABLE CELL
|--------------------------------------------------------------------------
*/

.uvam-financial-na-cell {

    text-align: center;

}


/*
|--------------------------------------------------------------------------
| CHECKBOX LABEL
|--------------------------------------------------------------------------
*/

.uvam-financial-table .uvam-checkbox-label {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 46px;

    cursor: pointer;

    user-select: none;

    white-space: nowrap;

}


/*
|--------------------------------------------------------------------------
| CHECKBOX
|--------------------------------------------------------------------------
*/

.uvam-financial-table .uvam-checkbox {

    width: 18px;

    height: 18px;

    margin: 0;

    cursor: pointer;

}


/*
|--------------------------------------------------------------------------
| REASON FIELD
|--------------------------------------------------------------------------
*/

.uvam-financial-table .uvam-turnover-reason {

    width: 100%;

    max-width: 100%;

    min-height: 46px;

    box-sizing: border-box;

}


/*
|--------------------------------------------------------------------------
| DISABLED REASON
|--------------------------------------------------------------------------
*/

.uvam-financial-table
.uvam-turnover-reason:disabled {

    background: #f1f3f6;

    color: #9aa1ad;

    cursor: not-allowed;

    opacity: 0.8;

}


/*
|--------------------------------------------------------------------------
| ENABLED REASON
|--------------------------------------------------------------------------
*/

.uvam-financial-table
.uvam-turnover-reason:not(:disabled) {

    background: #ffffff;

    color: inherit;

    cursor: text;

    opacity: 1;

}


/*
|--------------------------------------------------------------------------
| ROW HOVER
|--------------------------------------------------------------------------
*/

.uvam-financial-table tbody tr:hover td {

    background: #fcfcfe;

}


/* ============================================================
   UVAM — FINANCIAL DETAILS
   FINANCIAL / BANKER DETAILS TABLE — START
============================================================ */


/*
|--------------------------------------------------------------------------
| FINANCIAL DETAILS TABLE
|--------------------------------------------------------------------------
|
| Two-column structure:
|
| Description = 50%
| Input       = 50%
|
| No Code / Sr. No. column.
|
*/

.uvam-financial-details-table {

    width: 100%;

    max-width: 100%;

    border-collapse: separate;

    border-spacing: 0;

    table-layout: fixed;

    font-family: inherit;

    font-size: inherit;

}


/*
|--------------------------------------------------------------------------
| TABLE BODY
|--------------------------------------------------------------------------
*/

.uvam-financial-details-table tbody {

    width: 100%;

}


/*
|--------------------------------------------------------------------------
| DESCRIPTION COLUMN
|--------------------------------------------------------------------------
*/

.uvam-financial-details-table
.uvam-financial-description-column {

    width: 50% !important;

}


/*
|--------------------------------------------------------------------------
| INPUT / VALUE COLUMN
|--------------------------------------------------------------------------
*/

.uvam-financial-details-table
.uvam-financial-value-column {

    width: 50% !important;

}


/*
|--------------------------------------------------------------------------
| BODY CELLS
|--------------------------------------------------------------------------
|
| th is used for the field description.
|
*/

.uvam-financial-details-table th,
.uvam-financial-details-table td {

    padding: 10px 14px;

    border-bottom: 1px solid #e1e5ec;

    background: #ffffff;

    font-family: inherit;

    font-size: inherit;

    vertical-align: middle;

    box-sizing: border-box;

}


/*
|--------------------------------------------------------------------------
| DESCRIPTION / ROW HEADER
|--------------------------------------------------------------------------
*/

.uvam-financial-details-table th {

    color: #172033;

    font-weight: 600;

    line-height: 1.45;

    text-align: left;

}


/*
|--------------------------------------------------------------------------
| FIRST COLUMN
|--------------------------------------------------------------------------
*/

.uvam-financial-details-table
th:first-child,
.uvam-financial-details-table
td:first-child {

    padding-left: 14px;

}


/*
|--------------------------------------------------------------------------
| LAST COLUMN
|--------------------------------------------------------------------------
*/

.uvam-financial-details-table
th:last-child,
.uvam-financial-details-table
td:last-child {

    padding-right: 14px;

}


/*
|--------------------------------------------------------------------------
| FINANCIAL DESCRIPTION
|--------------------------------------------------------------------------
*/

.uvam-financial-details-table
.uvam-financial-description {

    color: #172033;

    font-family: inherit;

    font-size: inherit;

    font-weight: 600;

    line-height: 1.45;

}


/*
|--------------------------------------------------------------------------
| ALL INPUTS — FULL COLUMN WIDTH
|--------------------------------------------------------------------------
*/

.uvam-financial-details-table
td:last-child
.uvam-form-control {

    display: block;

    width: 100% !important;

    max-width: none !important;

    min-width: 0;

    min-height: 46px;

    margin: 0;

    box-sizing: border-box;

    font-family: inherit;

    font-size: inherit;

}


/*
|--------------------------------------------------------------------------
| TEXTAREA — FULL COLUMN WIDTH
|--------------------------------------------------------------------------
*/

.uvam-financial-details-table
td:last-child
textarea.uvam-form-control {

    display: block;

    width: 100% !important;

    max-width: none !important;

    min-width: 0;

    box-sizing: border-box;

    resize: vertical;

}


/*
|--------------------------------------------------------------------------
| INPUT / TEXTAREA PADDING
|--------------------------------------------------------------------------
*/

.uvam-financial-details-table
.uvam-form-control {

    padding: 12px 14px;

}


/*
|--------------------------------------------------------------------------
| TABLE ROW HOVER
|--------------------------------------------------------------------------
*/

.uvam-financial-details-table
tbody tr:hover th,
.uvam-financial-details-table
tbody tr:hover td {

    background: #fcfcfe;

}


/*
|--------------------------------------------------------------------------
| LAST ROW
|--------------------------------------------------------------------------
*/

.uvam-financial-details-table
tbody tr:last-child th,
.uvam-financial-details-table
tbody tr:last-child td {

    border-bottom: 0;

}


/* ============================================================
   UVAM — FINANCIAL DETAILS
   FINANCIAL / BANKER DETAILS TABLE — END
============================================================ */


/* ============================================================
   UVAM — FINANCIAL DETAILS
   MOBILE — START
============================================================ */

@media (max-width: 768px) {


    /*
    |--------------------------------------------------------------------------
    | ANNUAL FINANCIAL TABLE
    |--------------------------------------------------------------------------
    */

    .uvam-financial-table {

        display: block;

        width: 100%;

        max-width: 100%;

    }


    .uvam-financial-table thead {

        display: none;

    }


    .uvam-financial-table tbody {

        display: block;

        width: 100%;

    }


    .uvam-financial-table tr {

        display: block;

        width: 100%;

        margin-bottom: 18px;

        overflow: hidden;

        border: 1px solid #d7dce5;

        border-radius: 10px;

        box-sizing: border-box;

    }


    .uvam-financial-table td {

        display: block;

        width: 100% !important;

        max-width: 100%;

        box-sizing: border-box;

        padding: 13px 15px;

        border: 0 !important;

        border-bottom: 1px solid #e1e5ec !important;

        text-align: left;

    }


    .uvam-financial-table td:last-child {

        border-bottom: 0 !important;

    }


    /*
    |--------------------------------------------------------------------------
    | MOBILE FIELD LABEL
    |--------------------------------------------------------------------------
    */

    .uvam-financial-table td::before {

        content: attr(data-label);

        display: block;

        margin-bottom: 7px;

        color: #374151;

        font-family: inherit;

        font-size: inherit;

        font-weight: 600;

    }


    /*
    |--------------------------------------------------------------------------
    | FINANCIAL YEAR
    |--------------------------------------------------------------------------
    */

    .uvam-financial-table
    .uvam-financial-year {

        padding: 0;

        text-align: left;

    }


    /*
    |--------------------------------------------------------------------------
    | NOT AVAILABLE
    |--------------------------------------------------------------------------
    */

    .uvam-financial-table
    .uvam-financial-na-cell {

        text-align: left;

    }


    .uvam-financial-table
    .uvam-checkbox-label {

        justify-content: flex-start;

        min-height: auto;

    }


    /*
    |--------------------------------------------------------------------------
    | ANNUAL TABLE INPUT
    |--------------------------------------------------------------------------
    */

    .uvam-financial-table
    .uvam-form-control {

        width: 100% !important;

        max-width: 100%;

    }


    /* ========================================================
       FINANCIAL / BANKER DETAILS — MOBILE
    ======================================================== */


    /*
    |--------------------------------------------------------------------------
    | FINANCIAL DETAILS TABLE
    |--------------------------------------------------------------------------
    */

    .uvam-financial-details-table {

        display: block;

        width: 100%;

        max-width: 100%;

    }


    .uvam-financial-details-table tbody {

        display: block;

        width: 100%;

    }


    .uvam-financial-details-table tr {

        display: block;

        width: 100%;

        box-sizing: border-box;

        margin-bottom: 16px;

        overflow: hidden;

        border: 1px solid #d7dce5;

        border-radius: 10px;

    }


    /*
    |--------------------------------------------------------------------------
    | DESCRIPTION + INPUT CELLS
    |--------------------------------------------------------------------------
    */

    .uvam-financial-details-table th,
    .uvam-financial-details-table td {

        display: block;

        width: 100% !important;

        max-width: 100%;

        padding: 13px 15px;

        border: 0 !important;

        border-bottom: 1px solid #e1e5ec !important;

        box-sizing: border-box;

    }


    .uvam-financial-details-table td:last-child {

        border-bottom: 0 !important;

    }


    /*
    |--------------------------------------------------------------------------
    | MOBILE DESCRIPTION
    |--------------------------------------------------------------------------
    */

    .uvam-financial-details-table th {

        font-size: inherit;

        font-weight: 600;

        text-align: left;

    }


    /*
    |--------------------------------------------------------------------------
    | MOBILE FIELD LABEL
    |--------------------------------------------------------------------------
    */

    .uvam-financial-details-table
    td::before {

        content: attr(data-label);

        display: block;

        margin-bottom: 7px;

        color: #374151;

        font-family: inherit;

        font-size: inherit;

        font-weight: 600;

    }


    /*
    |--------------------------------------------------------------------------
    | DESCRIPTION
    |--------------------------------------------------------------------------
    */

    .uvam-financial-details-table
    .uvam-financial-description {

        font-size: inherit;

        line-height: 1.45;

    }


    /*
    |--------------------------------------------------------------------------
    | MOBILE INPUT — FULL WIDTH
    |--------------------------------------------------------------------------
    */

    .uvam-financial-details-table
    td:last-child
    .uvam-form-control {

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0;

    }

}


/* ============================================================
   UVAM — FINANCIAL DETAILS
   MOBILE — END
============================================================ */


/* ============================================================
   UVAM — FINANCIAL DETAILS — END
============================================================ */


/* ============================================================
   UVAM — PRODUCTS DETAILS
   PRODUCTS TABLE — START
============================================================ */


/*
|--------------------------------------------------------------------------
| PRODUCTS TABLE
|--------------------------------------------------------------------------
*/

.uvam-products-table {

    width: 100%;

    border-collapse: separate;

    border-spacing: 0 14px;

    table-layout: fixed;

}


/*
|--------------------------------------------------------------------------
| COLUMN WIDTHS
|--------------------------------------------------------------------------
|
| Product and Inspection Agency are kept slightly compact.
| Action column gets enough space for + / − buttons.
|
*/

.uvam-products-table
.uvam-products-col-product {

    width: 19%;

}


.uvam-products-table
.uvam-products-col-type {

    width: 14%;

}


.uvam-products-table
.uvam-products-col-customer {

    width: 19%;

}


.uvam-products-table
.uvam-products-col-inspection {

    width: 18%;

}


.uvam-products-table
.uvam-products-col-turnover {

    width: 18%;

}


.uvam-products-table
.uvam-products-col-action {

    width: 12%;

}


/*
|--------------------------------------------------------------------------
| TABLE HEADER
|--------------------------------------------------------------------------
*/

.uvam-products-table th {

    padding: 14px 12px;

    color: #172033;

    font-size: 16px;

    font-weight: 700;

    line-height: 1.35;

    text-align: left;

    vertical-align: middle;

    box-sizing: border-box;

}


/*
|--------------------------------------------------------------------------
| TABLE BODY CELLS
|--------------------------------------------------------------------------
*/

.uvam-products-table td {

    padding: 0 6px;

    background: transparent;

    vertical-align: middle;

    box-sizing: border-box;

}


/*
|--------------------------------------------------------------------------
| FORM CONTROLS
|--------------------------------------------------------------------------
*/

.uvam-products-table .uvam-form-control {

    width: 100%;

    min-height: 46px;

    box-sizing: border-box;

}


/*
|--------------------------------------------------------------------------
| ACTION CELL
|--------------------------------------------------------------------------
|
| Provides enough usable width for the common + / − buttons.
|
*/

.uvam-products-action-cell {

    width: 12%;

    min-width: 92px;

    padding-left: 4px !important;

    padding-right: 4px !important;

    white-space: nowrap;

    vertical-align: middle;

    box-sizing: border-box;

}


/*
|--------------------------------------------------------------------------
| ACTION BUTTON WRAPPER
|--------------------------------------------------------------------------
|
| Keeps + and − on the same horizontal line.
|
*/

.uvam-products-action-cell
.add_remove_buttons {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    width: 100%;

    white-space: nowrap;

}


/*
|--------------------------------------------------------------------------
| COMMON ADD / REMOVE BUTTON
|--------------------------------------------------------------------------
|
| The actual button appearance is controlled by the reusable
| .add_remove_button class defined globally.
|
| Product-specific styling is intentionally not added here.
|
*/


/*
|--------------------------------------------------------------------------
| ROW HOVER
|--------------------------------------------------------------------------
*/

.uvam-products-table tbody tr:hover
.uvam-form-control {

    border-color: #c5cad5;

}


/* ============================================================
   UVAM — PRODUCTS DETAILS
   PRODUCTS TABLE — MOBILE — START
============================================================ */

@media (max-width: 768px) {


    /*
    |--------------------------------------------------------------------------
    | TABLE
    |--------------------------------------------------------------------------
    */

    .uvam-products-table {

        display: block;

        width: 100%;

        border-spacing: 0;

    }


    /*
    |--------------------------------------------------------------------------
    | HEADER
    |--------------------------------------------------------------------------
    */

    .uvam-products-table thead {

        display: none;

    }


    /*
    |--------------------------------------------------------------------------
    | BODY
    |--------------------------------------------------------------------------
    */

    .uvam-products-table tbody {

        display: block;

        width: 100%;

    }


    /*
    |--------------------------------------------------------------------------
    | ROW
    |--------------------------------------------------------------------------
    */

    .uvam-products-table tbody tr {

        display: block;

        width: 100%;

        margin-bottom: 16px;

        padding: 10px;

        border: 1px solid #d7dce5;

        border-radius: 12px;

        background: #ffffff;

        box-sizing: border-box;

    }


    /*
    |--------------------------------------------------------------------------
    | CELLS
    |--------------------------------------------------------------------------
    */

    .uvam-products-table td {

        display: block;

        width: 100% !important;

        padding: 8px 0;

        box-sizing: border-box;

    }


    /*
    |--------------------------------------------------------------------------
    | MOBILE LABEL
    |--------------------------------------------------------------------------
    */

    .uvam-products-table td::before {

        content: attr(data-label);

        display: block;

        margin-bottom: 6px;

        color: #374151;

        font-size: 14px;

        font-weight: 600;

    }


    /*
    |--------------------------------------------------------------------------
    | ACTION CELL
    |--------------------------------------------------------------------------
    */

    .uvam-products-table
    .uvam-products-action-cell {

        width: 100% !important;

        min-width: 0;

        padding-top: 10px !important;

        padding-left: 0 !important;

        padding-right: 0 !important;

    }


    /*
    |--------------------------------------------------------------------------
    | ACTION BUTTON GROUP
    |--------------------------------------------------------------------------
    */

    .uvam-products-table
    .uvam-products-action-cell
    .add_remove_buttons {

        justify-content: flex-start;

        width: auto;

    }


}


/* ============================================================
   UVAM — PRODUCTS DETAILS
   PRODUCTS TABLE — MOBILE — END
============================================================ */


/* ============================================================
   UVAM — PRODUCTS DETAILS
   PRODUCTS TABLE — END
============================================================ */

/* ============================================================
   UVAM — PERFORMANCE OF EXISTING SUPPLY
   TABLE — START
============================================================ */


/*
|--------------------------------------------------------------------------
| TABLE
|--------------------------------------------------------------------------
*/

.uvam-existing-supply-table {

    width: 100%;

    max-width: 100%;

    border-collapse: separate;

    border-spacing: 0 14px;

    table-layout: fixed;

}


/*
|--------------------------------------------------------------------------
| TABLE HEADER
|--------------------------------------------------------------------------
*/

.uvam-existing-supply-table th {

    padding: 14px 10px;

    color: #172033;

    font-size: 16px;

    font-weight: 700;

    line-height: 1.35;

    text-align: left;

    vertical-align: middle;

    box-sizing: border-box;

}


/*
|--------------------------------------------------------------------------
| TABLE CELLS
|--------------------------------------------------------------------------
*/

.uvam-existing-supply-table td {

    padding: 0 5px;

    vertical-align: middle;

    box-sizing: border-box;

}


/*
|--------------------------------------------------------------------------
| FORM CONTROL
|--------------------------------------------------------------------------
*/

.uvam-existing-supply-table .uvam-form-control {

    width: 100%;

    min-width: 0;

    min-height: 46px;

    box-sizing: border-box;

}


/*
|--------------------------------------------------------------------------
| PERCENTAGE FIELD
|--------------------------------------------------------------------------
*/

.uvam-existing-supply-percentage-cell {

    padding-left: 5px !important;

    padding-right: 5px !important;

}


/*
|--------------------------------------------------------------------------
| ACTION CELL
|--------------------------------------------------------------------------
*/

.uvam-existing-supply-action-cell {

    padding-left: 5px !important;

    padding-right: 5px !important;

    white-space: nowrap;

    overflow: visible;

}


/*
|--------------------------------------------------------------------------
| ACTION BUTTON GROUP
|--------------------------------------------------------------------------
*/

.uvam-existing-supply-action-cell
.add_remove_buttons {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 8px;

    width: 100%;

    white-space: nowrap;

}


/* ============================================================
   UVAM — COMMON ADD / REMOVE ACTION BUTTONS — START
============================================================ */


/*
|--------------------------------------------------------------------------
| ACTION CELL
|--------------------------------------------------------------------------
|
| Common action-cell styling for all dynamic tables.
|
*/

.uvam-products-action-cell {

    padding-left: 6px !important;

    padding-right: 0 !important;

    vertical-align: middle;

    overflow: visible;

}


/*
|--------------------------------------------------------------------------
| ACTION BUTTON WRAPPER
|--------------------------------------------------------------------------
*/

.add_remove_buttons {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 8px;

    width: max-content;

    max-width: 100%;

    white-space: nowrap;

    box-sizing: border-box;

}


/*
|--------------------------------------------------------------------------
| COMMON ADD / REMOVE BUTTON
|--------------------------------------------------------------------------
*/

.add_remove_button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 40px;

    width: 40px;

    height: 40px;

    min-width: 40px;

    padding: 0;

    margin: 0;

    border-radius: 8px;

    font-size: 24px;

    font-weight: 700;

    line-height: 1;

    text-align: center;

    box-sizing: border-box;

    cursor: pointer;

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

}


/*
|--------------------------------------------------------------------------
| ADD BUTTON
|--------------------------------------------------------------------------
*/

.add_remove_button.add {

    border: 1px solid #7c3aed;

    background: #7c3aed;

    color: #ffffff;

}


/*
|--------------------------------------------------------------------------
| ADD BUTTON — HOVER
|--------------------------------------------------------------------------
*/

.add_remove_button.add:hover {

    background: #6d28d9;

    border-color: #6d28d9;

}


/*
|--------------------------------------------------------------------------
| REMOVE BUTTON
|--------------------------------------------------------------------------
*/

.add_remove_button.remove {

    border: 1px solid #f3b4b4;

    background: #fff1f1;

    color: #b91c1c;

}


/*
|--------------------------------------------------------------------------
| REMOVE BUTTON — HOVER
|--------------------------------------------------------------------------
*/

.add_remove_button.remove:hover:not(:disabled) {

    background: #fee2e2;

    border-color: #ef9a9a;

}


/*
|--------------------------------------------------------------------------
| DISABLED REMOVE BUTTON
|--------------------------------------------------------------------------
*/

.add_remove_button.remove:disabled {

    opacity: 0.45;

    cursor: not-allowed;

}


/*
|--------------------------------------------------------------------------
| FOCUS
|--------------------------------------------------------------------------
*/

.add_remove_button:focus-visible {

    outline: 2px solid #7c3aed;

    outline-offset: 2px;

}


/* ============================================================
   UVAM — COMMON ADD / REMOVE ACTION BUTTONS — END
============================================================ */


/*
|--------------------------------------------------------------------------
| ROW HOVER
|--------------------------------------------------------------------------
*/

.uvam-existing-supply-table
tbody tr:hover
.uvam-form-control {

    border-color: #c5cad5;

}


/* ============================================================
   UVAM — PERFORMANCE OF EXISTING SUPPLY
   TABLE — END
============================================================ */


/* ============================================================
   UVAM — PERFORMANCE OF EXISTING SUPPLY
   MOBILE — START
============================================================ */

@media (max-width: 768px) {


    /*
    |--------------------------------------------------------------------------
    | TABLE
    |--------------------------------------------------------------------------
    */

    .uvam-existing-supply-table {

        display: block;

        width: 100%;

        border-spacing: 0;

    }


    /*
    |--------------------------------------------------------------------------
    | HEADER
    |--------------------------------------------------------------------------
    */

    .uvam-existing-supply-table thead {

        display: none;

    }


    /*
    |--------------------------------------------------------------------------
    | BODY
    |--------------------------------------------------------------------------
    */

    .uvam-existing-supply-table tbody {

        display: block;

        width: 100%;

    }


    /*
    |--------------------------------------------------------------------------
    | ROW
    |--------------------------------------------------------------------------
    */

    .uvam-existing-supply-table tbody tr {

        display: block;

        width: 100%;

        margin-bottom: 16px;

        padding: 10px;

        border: 1px solid #d7dce5;

        border-radius: 12px;

        background: #ffffff;

        box-sizing: border-box;

    }


    /*
    |--------------------------------------------------------------------------
    | CELLS
    |--------------------------------------------------------------------------
    */

    .uvam-existing-supply-table td {

        display: block;

        width: 100% !important;

        padding: 8px 0;

        box-sizing: border-box;

    }


    /*
    |--------------------------------------------------------------------------
    | MOBILE LABEL
    |--------------------------------------------------------------------------
    */

    .uvam-existing-supply-table td::before {

        content: attr(data-label);

        display: block;

        margin-bottom: 6px;

        color: #374151;

        font-size: 14px;

        font-weight: 600;

    }


    /*
    |--------------------------------------------------------------------------
    | ACTION CELL
    |--------------------------------------------------------------------------
    */

    .uvam-existing-supply-table
    .uvam-existing-supply-action-cell {

        padding-top: 10px;

    }


    /*
    |--------------------------------------------------------------------------
    | MOBILE ACTION BUTTONS
    |--------------------------------------------------------------------------
    */

    .uvam-existing-supply-action-cell
    .add_remove_buttons {

        justify-content: flex-start;

        width: auto;

    }

}


/* ============================================================
   UVAM — PERFORMANCE OF EXISTING SUPPLY
   MOBILE — END
============================================================ */


/* ============================================================
   UVAM — FUTURE PLAN
   DESCRIPTION / RESPONSE SPACING & INPUT WIDTH
============================================================ */


/*
|--------------------------------------------------------------------------
| FUTURE PLAN — DESCRIPTION COLUMN
|--------------------------------------------------------------------------
|
| Keeps a comfortable gap between the description text
| and the response/input area.
|
*/

.uvam-qa-details-table .uvam-qa-description-column {
    padding-right: 30px;
}


/*
|--------------------------------------------------------------------------
| FUTURE PLAN — RESPONSE COLUMN
|--------------------------------------------------------------------------
|
| Adds spacing before the response area.
|
*/

.uvam-qa-details-table .uvam-qa-response-column {
    padding-left: 20px;
}


/*
|--------------------------------------------------------------------------
| FUTURE PLAN — TEXT INPUT
|--------------------------------------------------------------------------
|
| Makes text inputs use the complete available width
| of the response column.
|
*/

.uvam-qa-details-table .uvam-qa-response-column
.uvam-form-control[type="text"] {
    width: 100%;
    box-sizing: border-box;
}


/*
|--------------------------------------------------------------------------
| FUTURE PLAN — FILE UPLOAD
|--------------------------------------------------------------------------
|
| Keep the Choose File control at its existing/smaller width.
| It should NOT stretch to the full response column.
|
*/

.uvam-qa-details-table .uvam-qa-response-column
.uvam-upload-field {
    width: auto;
    max-width: 480px;
}

/* ============================================================
   END — UVAM FORM
============================================================ */