/**
 * ============================================================
 * CareerSetu Pro
 * Forms & Input System
 * Version: V50
 * ============================================================
 *
 * FILE PATH:
 * public_html/assets/css/forms.css
 *
 * LOAD AFTER:
 * 1. base.css
 * 2. layout.css
 * 3. components.css
 * 4. header.css
 * 5. footer.css
 *
 * PURPOSE:
 * - Login / registration forms
 * - Candidate profile forms
 * - Application forms
 * - UPI payment submission forms
 * - Assessment forms
 * - Text inputs
 * - Select dropdowns
 * - Textarea
 * - Checkbox / radio
 * - File upload
 * - OTP inputs
 * - Password field
 * - Validation states
 * - Search fields
 * - Form sections
 * - Responsive forms
 */


/* ============================================================
   01. FORM ROOT
============================================================ */

.careersetu-form,
.cs-form {
    position: relative;

    width: 100%;
}


.careersetu-form * {
    box-sizing: border-box;
}


/* ============================================================
   02. FORM GROUP
============================================================ */

.cs-form-group {
    position: relative;

    width: 100%;

    margin-bottom: 20px;
}


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


.cs-form-row {
    display: grid;

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

    gap:
        18px;
}


.cs-form-row-3 {
    display: grid;

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

    gap:
        18px;
}


.cs-form-row-4 {
    display: grid;

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

    gap:
        18px;
}


/* ============================================================
   03. LABEL
============================================================ */

.cs-form-label,
.careersetu-form-label {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    margin-bottom: 8px;

    color:
        var(--cs-gray-700);

    font-size: 0.84rem;

    font-weight:
        var(--cs-font-semibold);

    line-height: 1.35;
}


.cs-required {
    color:
        var(--cs-danger);

    font-size: 0.85em;
}


.cs-optional {
    color:
        var(--cs-gray-400);

    font-size: 0.72rem;

    font-weight:
        var(--cs-font-medium);
}


/* ============================================================
   04. INPUT FOUNDATION
============================================================ */

.cs-form-control,
.careersetu-input,
.careersetu-select,
.careersetu-textarea {
    display: block;

    width: 100%;

    min-height: 48px;

    padding:
        11px
        14px;

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

    border-radius:
        var(--cs-radius-md);

    background:
        var(--cs-white);

    color:
        var(--cs-text-dark);

    font-family: inherit;

    font-size: 0.9rem;

    font-weight:
        var(--cs-font-regular);

    line-height: 1.45;

    outline: none;

    box-shadow:
        0 1px 2px
        rgba(16, 24, 40, 0.02);

    transition:
        border-color var(--cs-transition-fast),
        box-shadow var(--cs-transition-fast),
        background-color var(--cs-transition-fast);
}


.cs-form-control:hover,
.careersetu-input:hover,
.careersetu-select:hover,
.careersetu-textarea:hover {
    border-color:
        var(--cs-gray-400);
}


.cs-form-control:focus,
.careersetu-input:focus,
.careersetu-select:focus,
.careersetu-textarea:focus {
    border-color:
        var(--cs-primary);

    background:
        var(--cs-white);

    box-shadow:
        0 0 0 4px
        rgba(
            var(--cs-primary-rgb),
            0.08
        );
}


.cs-form-control::placeholder,
.careersetu-input::placeholder,
.careersetu-textarea::placeholder {
    color:
        var(--cs-gray-400);

    opacity: 1;
}


/* ============================================================
   05. DISABLED / READONLY
============================================================ */

.cs-form-control:disabled,
.careersetu-input:disabled,
.careersetu-select:disabled,
.careersetu-textarea:disabled {
    cursor: not-allowed;

    border-color:
        var(--cs-border-light);

    background:
        var(--cs-gray-100);

    color:
        var(--cs-gray-500);

    opacity: 0.8;
}


.cs-form-control[readonly],
.careersetu-input[readonly] {
    background:
        var(--cs-gray-50);

    color:
        var(--cs-gray-600);
}


/* ============================================================
   06. INPUT SIZES
============================================================ */

.cs-form-control-sm {
    min-height: 40px;

    padding:
        8px
        12px;

    font-size: 0.82rem;
}


.cs-form-control-lg {
    min-height: 54px;

    padding:
        13px
        16px;

    border-radius:
        var(--cs-radius-lg);

    font-size: 0.95rem;
}


/* ============================================================
   07. TEXTAREA
============================================================ */

textarea.cs-form-control,
.careersetu-textarea {
    min-height: 125px;

    resize: vertical;

    line-height: 1.65;
}


.cs-textarea-sm {
    min-height: 90px;
}


.cs-textarea-lg {
    min-height: 180px;
}


/* ============================================================
   08. SELECT
============================================================ */

select.cs-form-control,
.careersetu-select {
    padding-right: 42px;

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            var(--cs-gray-500) 50%
        ),
        linear-gradient(
            135deg,
            var(--cs-gray-500) 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 18px) 20px,
        calc(100% - 13px) 20px;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat:
        no-repeat;
}


/* ============================================================
   09. INPUT WITH ICON
============================================================ */

.cs-input-wrap {
    position: relative;

    width: 100%;
}


.cs-input-icon {
    position: absolute;

    top: 50%;
    left: 14px;

    z-index: 2;

    display: inline-flex;

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

    transform:
        translateY(-50%);

    color:
        var(--cs-gray-400);

    font-size: 0.95rem;

    pointer-events: none;

    transition:
        color var(--cs-transition-fast);
}


.cs-input-wrap
.cs-form-control {
    padding-left: 42px;
}


.cs-input-wrap:focus-within
.cs-input-icon {
    color:
        var(--cs-primary);
}


/* ============================================================
   10. RIGHT INPUT ICON
============================================================ */

.cs-input-icon-right {
    position: absolute;

    top: 50%;
    right: 12px;

    z-index: 3;

    display: inline-flex;

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

    transform:
        translateY(-50%);
}


.cs-input-has-right-icon {
    padding-right: 44px !important;
}


/* ============================================================
   11. PASSWORD TOGGLE
============================================================ */

.cs-password-toggle {
    display: inline-flex;

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

    width: 34px;
    height: 34px;

    padding: 0;

    border: 0;

    border-radius:
        var(--cs-radius-sm);

    background:
        transparent;

    color:
        var(--cs-gray-400);

    cursor: pointer;

    transition:
        color var(--cs-transition-fast),
        background-color var(--cs-transition-fast);
}


.cs-password-toggle:hover {
    background:
        var(--cs-gray-100);

    color:
        var(--cs-primary);
}


/* ============================================================
   12. FORM HELP TEXT
============================================================ */

.cs-form-help {
    display: block;

    margin-top: 7px;

    color:
        var(--cs-text-muted);

    font-size: 0.74rem;

    line-height: 1.5;
}


.cs-form-help i {
    margin-right: 4px;
}


/* ============================================================
   13. VALIDATION
============================================================ */

.cs-form-control.is-invalid,
.careersetu-input.is-invalid,
.careersetu-select.is-invalid,
.careersetu-textarea.is-invalid {
    border-color:
        var(--cs-danger);

    background-color:
        var(--cs-danger-light);
}


.cs-form-control.is-invalid:focus,
.careersetu-input.is-invalid:focus {
    box-shadow:
        0 0 0 4px
        rgba(217, 45, 32, 0.08);
}


.cs-form-control.is-valid,
.careersetu-input.is-valid,
.careersetu-select.is-valid,
.careersetu-textarea.is-valid {
    border-color:
        var(--cs-success);
}


.cs-form-control.is-valid:focus,
.careersetu-input.is-valid:focus {
    box-shadow:
        0 0 0 4px
        rgba(7, 148, 85, 0.08);
}


.cs-invalid-feedback {
    display: block;

    margin-top: 6px;

    color:
        var(--cs-danger-dark);

    font-size: 0.73rem;

    font-weight:
        var(--cs-font-medium);

    line-height: 1.45;
}


.cs-valid-feedback {
    display: block;

    margin-top: 6px;

    color:
        var(--cs-success-dark);

    font-size: 0.73rem;

    font-weight:
        var(--cs-font-medium);
}


/* ============================================================
   14. CHECKBOX
============================================================ */

.cs-check {
    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 10px;

    cursor: pointer;
}


.cs-check-input {
    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    margin-top: 2px;

    border:
        1px solid
        var(--cs-gray-300);

    border-radius:
        5px;

    appearance: none;

    -webkit-appearance: none;

    background:
        var(--cs-white);

    cursor: pointer;

    transition:
        background-color var(--cs-transition-fast),
        border-color var(--cs-transition-fast),
        box-shadow var(--cs-transition-fast);
}


.cs-check-input:checked {
    border-color:
        var(--cs-primary);

    background-color:
        var(--cs-primary);

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='M3 8l3 3 7-7'/%3E%3C/svg%3E");

    background-position:
        center;

    background-repeat:
        no-repeat;
}


.cs-check-input:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 4px
        rgba(
            var(--cs-primary-rgb),
            0.10
        );
}


.cs-check-label {
    color:
        var(--cs-gray-600);

    font-size: 0.82rem;

    line-height: 1.55;
}


.cs-check-label a {
    color:
        var(--cs-primary);

    font-weight:
        var(--cs-font-semibold);
}


/* ============================================================
   15. RADIO BUTTON
============================================================ */

.cs-radio {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    cursor: pointer;
}


.cs-radio-input {
    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    margin-top: 2px;

    border:
        1px solid
        var(--cs-gray-300);

    border-radius: 50%;

    appearance: none;

    -webkit-appearance: none;

    background:
        var(--cs-white);

    cursor: pointer;
}


.cs-radio-input:checked {
    border:
        5px solid
        var(--cs-primary);
}


.cs-radio-input:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 4px
        rgba(
            var(--cs-primary-rgb),
            0.10
        );
}


.cs-radio-label {
    color:
        var(--cs-gray-600);

    font-size: 0.82rem;

    line-height: 1.55;
}


/* ============================================================
   16. RADIO / OPTION CARD
============================================================ */

.cs-option-card {
    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 13px;

    width: 100%;

    padding:
        15px;

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

    border-radius:
        var(--cs-radius-lg);

    background:
        var(--cs-white);

    cursor: pointer;

    transition:
        border-color var(--cs-transition-fast),
        background-color var(--cs-transition-fast),
        box-shadow var(--cs-transition-fast);
}


.cs-option-card:hover {
    border-color:
        rgba(
            var(--cs-primary-rgb),
            0.30
        );

    background:
        var(--cs-primary-soft);
}


.cs-option-card.is-selected {
    border-color:
        var(--cs-primary);

    background:
        var(--cs-primary-soft);

    box-shadow:
        0 0 0 3px
        rgba(
            var(--cs-primary-rgb),
            0.06
        );
}


.cs-option-card-title {
    display: block;

    margin-bottom: 3px;

    color:
        var(--cs-text-dark);

    font-size: 0.86rem;

    font-weight:
        var(--cs-font-semibold);
}


.cs-option-card-text {
    margin: 0;

    color:
        var(--cs-text-muted);

    font-size: 0.75rem;

    line-height: 1.5;
}


/* ============================================================
   17. FILE UPLOAD
============================================================ */

.cs-file-upload {
    position: relative;

    display: flex;

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

    flex-direction: column;

    gap: 9px;

    width: 100%;

    min-height: 150px;

    padding:
        24px;

    border:
        1.5px dashed
        var(--cs-gray-300);

    border-radius:
        var(--cs-radius-lg);

    background:
        var(--cs-gray-25);

    text-align: center;

    cursor: pointer;

    transition:
        border-color var(--cs-transition-fast),
        background-color var(--cs-transition-fast),
        box-shadow var(--cs-transition-fast);
}


.cs-file-upload:hover,
.cs-file-upload.is-dragging {
    border-color:
        var(--cs-primary);

    background:
        var(--cs-primary-soft);

    box-shadow:
        inset 0 0 0 1px
        rgba(
            var(--cs-primary-rgb),
            0.04
        );
}


.cs-file-upload input[type="file"] {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    cursor: pointer;

    opacity: 0;
}


.cs-file-upload-icon {
    display: inline-flex;

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

    width: 48px;
    height: 48px;

    border-radius:
        var(--cs-radius-lg);

    background:
        var(--cs-primary-light);

    color:
        var(--cs-primary);

    font-size: 1.2rem;
}


.cs-file-upload-title {
    color:
        var(--cs-text-dark);

    font-size: 0.88rem;

    font-weight:
        var(--cs-font-semibold);
}


.cs-file-upload-text {
    max-width: 420px;

    margin: 0;

    color:
        var(--cs-text-muted);

    font-size: 0.74rem;

    line-height: 1.55;
}


/* ============================================================
   18. UPLOADED FILE
============================================================ */

.cs-uploaded-file {
    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        12px;

    margin-top: 10px;

    border:
        1px solid
        var(--cs-border-light);

    border-radius:
        var(--cs-radius-md);

    background:
        var(--cs-white);
}


.cs-uploaded-file-icon {
    display: inline-flex;

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

    flex: 0 0 auto;

    width: 38px;
    height: 38px;

    border-radius:
        var(--cs-radius-sm);

    background:
        var(--cs-primary-light);

    color:
        var(--cs-primary);
}


.cs-uploaded-file-info {
    flex: 1 1 auto;

    min-width: 0;
}


.cs-uploaded-file-name {
    display: block;

    overflow: hidden;

    color:
        var(--cs-text-dark);

    font-size: 0.8rem;

    font-weight:
        var(--cs-font-semibold);

    text-overflow: ellipsis;

    white-space: nowrap;
}


.cs-uploaded-file-size {
    display: block;

    margin-top: 2px;

    color:
        var(--cs-text-muted);

    font-size: 0.68rem;
}


/* ============================================================
   19. OTP INPUT
============================================================ */

.cs-otp-group {
    display: flex;

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

    gap: 10px;
}


.cs-otp-input {
    width: 50px;
    height: 54px;

    padding: 0;

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

    border-radius:
        var(--cs-radius-md);

    background:
        var(--cs-white);

    color:
        var(--cs-text-dark);

    font-size: 1.2rem;

    font-weight:
        var(--cs-font-bold);

    text-align: center;

    outline: none;

    transition:
        border-color var(--cs-transition-fast),
        box-shadow var(--cs-transition-fast);
}


.cs-otp-input:focus {
    border-color:
        var(--cs-primary);

    box-shadow:
        0 0 0 4px
        rgba(
            var(--cs-primary-rgb),
            0.08
        );
}


/* ============================================================
   20. PHONE INPUT
============================================================ */

.cs-phone-group {
    display: grid;

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

    gap: 9px;
}


.cs-country-code {
    text-align: center;
}


/* ============================================================
   21. INPUT GROUP
============================================================ */

.cs-input-group {
    display: flex;

    width: 100%;
}


.cs-input-group
.cs-form-control {
    position: relative;

    z-index: 1;

    border-radius: 0;
}


.cs-input-group
.cs-form-control:first-child {
    border-radius:
        var(--cs-radius-md)
        0
        0
        var(--cs-radius-md);
}


.cs-input-group
.cs-form-control:last-child {
    border-radius:
        0
        var(--cs-radius-md)
        var(--cs-radius-md)
        0;
}


.cs-input-addon {
    display: inline-flex;

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

    flex: 0 0 auto;

    min-width: 48px;

    padding:
        0
        13px;

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

    background:
        var(--cs-gray-50);

    color:
        var(--cs-gray-600);

    font-size: 0.82rem;

    font-weight:
        var(--cs-font-semibold);
}


.cs-input-addon:first-child {
    border-right: 0;

    border-radius:
        var(--cs-radius-md)
        0
        0
        var(--cs-radius-md);
}


.cs-input-addon:last-child {
    border-left: 0;

    border-radius:
        0
        var(--cs-radius-md)
        var(--cs-radius-md)
        0;
}


/* ============================================================
   22. SEARCH FIELD
============================================================ */

.cs-search-input {
    position: relative;

    width: 100%;
}


.cs-search-input > i {
    position: absolute;

    top: 50%;
    left: 15px;

    z-index: 2;

    transform:
        translateY(-50%);

    color:
        var(--cs-gray-400);

    pointer-events: none;
}


.cs-search-input
.cs-form-control {
    padding-left: 42px;
}


/* ============================================================
   23. FORM CARD
============================================================ */

.cs-form-card {
    position: relative;

    width: 100%;

    padding:
        clamp(
            22px,
            4vw,
            32px
        );

    border:
        1px solid
        var(--cs-border-light);

    border-radius:
        var(--cs-radius-xl);

    background:
        var(--cs-white);

    box-shadow:
        var(--cs-shadow-sm);
}


.cs-form-card-header {
    margin-bottom: 26px;
}


.cs-form-card-title {
    margin-bottom: 7px;

    color:
        var(--cs-text-heading);

    font-size:
        clamp(
            1.25rem,
            3vw,
            1.6rem
        );

    font-weight:
        var(--cs-font-bold);

    letter-spacing:
        -0.025em;
}


.cs-form-card-text {
    margin: 0;

    color:
        var(--cs-text-muted);

    font-size: 0.86rem;

    line-height: 1.65;
}


/* ============================================================
   24. FORM SECTION HEADER
============================================================ */

.cs-form-heading {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 20px;
}


.cs-form-heading-icon {
    display: inline-flex;

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

    flex: 0 0 auto;

    width: 38px;
    height: 38px;

    border-radius:
        var(--cs-radius-md);

    background:
        var(--cs-primary-light);

    color:
        var(--cs-primary);

    font-size: 0.95rem;
}


.cs-form-heading-content {
    min-width: 0;
}


.cs-form-heading-title {
    margin-bottom: 3px;

    color:
        var(--cs-text-dark);

    font-size: 1rem;

    font-weight:
        var(--cs-font-bold);
}


.cs-form-heading-text {
    margin: 0;

    color:
        var(--cs-text-muted);

    font-size: 0.76rem;

    line-height: 1.55;
}


/* ============================================================
   25. FORM DIVIDER
============================================================ */

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

    margin:
        26px
        0;

    border: 0;

    background:
        var(--cs-border-light);
}


/* ============================================================
   26. FORM ACTIONS
============================================================ */

.cs-form-actions {
    display: flex;

    flex-wrap: wrap;

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

    gap: 10px;

    margin-top: 26px;
}


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


.cs-form-actions-start {
    justify-content: flex-start;
}


/* ============================================================
   27. AUTH FORM HEADER
============================================================ */

.cs-auth-form-header {
    margin-bottom: 28px;
}


.cs-auth-form-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 12px;

    color:
        var(--cs-primary);

    font-size: 0.72rem;

    font-weight:
        var(--cs-font-bold);

    letter-spacing:
        0.055em;

    text-transform: uppercase;
}


.cs-auth-form-title {
    margin-bottom: 9px;

    color:
        var(--cs-text-heading);

    font-size:
        clamp(
            1.7rem,
            4vw,
            2.2rem
        );

    font-weight:
        var(--cs-font-extrabold);

    line-height: 1.2;

    letter-spacing:
        -0.04em;
}


.cs-auth-form-description {
    margin: 0;

    color:
        var(--cs-text-muted);

    font-size: 0.88rem;

    line-height: 1.65;
}


/* ============================================================
   28. AUTH FORM FOOTER
============================================================ */

.cs-auth-form-footer {
    margin-top: 24px;

    color:
        var(--cs-text-muted);

    font-size: 0.82rem;

    line-height: 1.55;

    text-align: center;
}


.cs-auth-form-footer a {
    color:
        var(--cs-primary);

    font-weight:
        var(--cs-font-semibold);
}


/* ============================================================
   29. PAYMENT FORM / UPI REFERENCE
============================================================ */

.cs-payment-form {
    position: relative;

    width: 100%;
}


.cs-upi-payment-box {
    padding:
        20px;

    border:
        1px solid
        rgba(
            var(--cs-primary-rgb),
            0.14
        );

    border-radius:
        var(--cs-radius-xl);

    background:
        var(--cs-primary-soft);
}


.cs-upi-payment-header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;

    margin-bottom: 18px;
}


.cs-upi-payment-title {
    margin-bottom: 4px;

    color:
        var(--cs-text-dark);

    font-size: 1rem;

    font-weight:
        var(--cs-font-bold);
}


.cs-upi-payment-text {
    margin: 0;

    color:
        var(--cs-text-muted);

    font-size: 0.78rem;

    line-height: 1.55;
}


/* ============================================================
   30. QR DISPLAY
============================================================ */

.cs-qr-box {
    display: flex;

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

    width: 100%;

    padding:
        18px;

    margin-bottom: 18px;

    border:
        1px solid
        var(--cs-border-light);

    border-radius:
        var(--cs-radius-lg);

    background:
        var(--cs-white);
}


.cs-qr-box img {
    display: block;

    width:
        min(
            100%,
            230px
        );

    height: auto;

    border-radius:
        var(--cs-radius-sm);
}


/* ============================================================
   31. PAYMENT AMOUNT
============================================================ */

.cs-payment-amount {
    display: flex;

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

    gap: 14px;

    padding:
        14px
        16px;

    margin-bottom: 18px;

    border:
        1px solid
        var(--cs-border-light);

    border-radius:
        var(--cs-radius-md);

    background:
        var(--cs-white);
}


.cs-payment-amount-label {
    color:
        var(--cs-text-muted);

    font-size: 0.8rem;

    font-weight:
        var(--cs-font-medium);
}


.cs-payment-amount-value {
    color:
        var(--cs-text-heading);

    font-size: 1.25rem;

    font-weight:
        var(--cs-font-extrabold);
}


/* ============================================================
   32. PAYMENT DISCLOSURE
============================================================ */

.cs-payment-disclosure {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-top: 18px;

    padding:
        13px
        14px;

    border:
        1px solid
        rgba(220, 104, 3, 0.13);

    border-radius:
        var(--cs-radius-md);

    background:
        var(--cs-warning-light);

    color:
        var(--cs-warning-dark);

    font-size: 0.73rem;

    line-height: 1.55;
}


.cs-payment-disclosure i {
    flex: 0 0 auto;

    margin-top: 2px;
}


/* ============================================================
   33. TRANSACTION ID FIELD
============================================================ */

.cs-transaction-field {
    position: relative;
}


.cs-transaction-field
.cs-form-control {
    padding-right: 46px;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    letter-spacing:
        0.025em;
}


/* ============================================================
   34. ASSESSMENT QUESTION
============================================================ */

.cs-question {
    position: relative;

    width: 100%;

    padding:
        clamp(
            20px,
            4vw,
            28px
        );

    border:
        1px solid
        var(--cs-border-light);

    border-radius:
        var(--cs-radius-xl);

    background:
        var(--cs-white);

    box-shadow:
        var(--cs-shadow-sm);
}


.cs-question-number-label {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 12px;

    color:
        var(--cs-primary);

    font-size: 0.72rem;

    font-weight:
        var(--cs-font-bold);

    letter-spacing:
        0.05em;

    text-transform: uppercase;
}


.cs-question-title {
    margin-bottom: 20px;

    color:
        var(--cs-text-heading);

    font-size:
        clamp(
            1.05rem,
            2.5vw,
            1.25rem
        );

    font-weight:
        var(--cs-font-bold);

    line-height: 1.55;
}


.cs-question-options {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


/* ============================================================
   35. RANGE INPUT
============================================================ */

.cs-range {
    width: 100%;

    accent-color:
        var(--cs-primary);

    cursor: pointer;
}


/* ============================================================
   36. DATE / TIME INPUT
============================================================ */

input[type="date"].cs-form-control,
input[type="time"].cs-form-control,
input[type="datetime-local"].cs-form-control {
    cursor: pointer;
}


/* ============================================================
   37. FORM LOADING STATE
============================================================ */

.cs-form.is-loading {
    pointer-events: none;
}


.cs-form.is-loading::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 20;

    border-radius:
        inherit;

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

    backdrop-filter:
        blur(1px);
}


.cs-form-loader {
    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 21;

    display: none;

    width: 34px;
    height: 34px;

    margin:
        -17px
        0
        0
        -17px;

    border:
        3px solid
        var(--cs-gray-200);

    border-top-color:
        var(--cs-primary);

    border-radius: 50%;

    animation:
        cs-form-spin
        0.8s
        linear
        infinite;
}


.cs-form.is-loading
.cs-form-loader {
    display: block;
}


@keyframes cs-form-spin {

    to {
        transform:
            rotate(360deg);
    }
}


/* ============================================================
   38. CAPTCHA AREA
============================================================ */

.cs-captcha-box {
    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        12px;

    border:
        1px solid
        var(--cs-border-light);

    border-radius:
        var(--cs-radius-md);

    background:
        var(--cs-gray-25);
}


/* ============================================================
   39. FORM NOTICE
============================================================ */

.cs-form-notice {
    margin-bottom: 22px;

    padding:
        14px
        16px;

    border-left:
        3px solid
        var(--cs-primary);

    border-radius:
        0
        var(--cs-radius-md)
        var(--cs-radius-md)
        0;

    background:
        var(--cs-primary-soft);

    color:
        var(--cs-gray-700);

    font-size: 0.78rem;

    line-height: 1.6;
}


/* ============================================================
   40. CHARACTER COUNTER
============================================================ */

.cs-character-counter {
    display: flex;

    justify-content: flex-end;

    margin-top: 5px;

    color:
        var(--cs-gray-400);

    font-size: 0.68rem;
}


/* ============================================================
   41. INLINE FORM
============================================================ */

.cs-inline-form {
    display: flex;

    align-items: flex-end;

    gap: 10px;

    width: 100%;
}


.cs-inline-form
.cs-form-group {
    flex: 1 1 auto;

    margin-bottom: 0;
}


/* ============================================================
   42. BOOTSTRAP COMPATIBILITY
============================================================ */

.form-control {
    min-height: 48px;

    border-color:
        var(--cs-border);

    border-radius:
        var(--cs-radius-md);

    font-size: 0.9rem;

    box-shadow: none;
}


.form-control:focus {
    border-color:
        var(--cs-primary);

    box-shadow:
        0 0 0 4px
        rgba(
            var(--cs-primary-rgb),
            0.08
        );
}


.form-select {
    min-height: 48px;

    border-color:
        var(--cs-border);

    border-radius:
        var(--cs-radius-md);

    font-size: 0.9rem;

    box-shadow: none;
}


.form-select:focus {
    border-color:
        var(--cs-primary);

    box-shadow:
        0 0 0 4px
        rgba(
            var(--cs-primary-rgb),
            0.08
        );
}


.form-check-input:checked {
    border-color:
        var(--cs-primary);

    background-color:
        var(--cs-primary);
}


.form-check-input:focus {
    border-color:
        var(--cs-primary);

    box-shadow:
        0 0 0 4px
        rgba(
            var(--cs-primary-rgb),
            0.08
        );
}


/* ============================================================
   43. AUTOFILL FIX
============================================================ */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color:
        var(--cs-text-dark);

    -webkit-box-shadow:
        0 0 0 1000px
        var(--cs-white)
        inset;

    transition:
        background-color
        9999s
        ease-out;
}


/* ============================================================
   44. TABLET
============================================================ */

@media (max-width: 991.98px) {

    .cs-form-row-3,
    .cs-form-row-4 {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .cs-form-card {
        padding:
            24px;
    }
}


/* ============================================================
   45. MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .cs-form-row,
    .cs-form-row-3,
    .cs-form-row-4 {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 0;
    }


    .cs-form-group {
        margin-bottom: 18px;
    }


    .cs-form-control,
    .careersetu-input,
    .careersetu-select,
    .careersetu-textarea,
    .form-control,
    .form-select {
        min-height: 48px;

        font-size: 16px;
    }


    textarea.cs-form-control,
    .careersetu-textarea {
        min-height: 120px;
    }


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

        border-radius:
            var(--cs-radius-lg);
    }


    .cs-form-actions {
        align-items: stretch;

        flex-direction: column-reverse;
    }


    .cs-form-actions
    .cs-btn {
        width: 100%;
    }


    .cs-form-actions-between {
        flex-direction: column;
    }


    .cs-upi-payment-box {
        padding:
            17px;

        border-radius:
            var(--cs-radius-lg);
    }


    .cs-upi-payment-header {
        flex-direction: column;
    }


    .cs-question {
        padding:
            20px;

        border-radius:
            var(--cs-radius-lg);
    }


    .cs-inline-form {
        align-items: stretch;

        flex-direction: column;
    }


    .cs-inline-form
    .cs-btn {
        width: 100%;
    }
}


/* ============================================================
   46. SMALL MOBILE
============================================================ */

@media (max-width: 575.98px) {

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


    .cs-form-card-header {
        margin-bottom: 22px;
    }


    .cs-form-control,
    .careersetu-input,
    .careersetu-select,
    .careersetu-textarea {
        padding:
            10px
            12px;
    }


    .cs-input-wrap
    .cs-form-control {
        padding-left: 40px;
    }


    .cs-otp-group {
        gap: 6px;
    }


    .cs-otp-input {
        width:
            clamp(
                40px,
                13vw,
                48px
            );

        height: 50px;

        font-size: 1.05rem;
    }


    .cs-phone-group {
        grid-template-columns:
            78px
            minmax(0, 1fr);
    }


    .cs-file-upload {
        min-height: 135px;

        padding:
            20px
            14px;
    }


    .cs-payment-amount {
        padding:
            13px;
    }


    .cs-payment-amount-value {
        font-size: 1.1rem;
    }


    .cs-option-card {
        padding:
            13px;
    }
}


/* ============================================================
   47. VERY SMALL MOBILE
============================================================ */

@media (max-width: 374.98px) {

    .cs-otp-group {
        gap: 4px;
    }


    .cs-otp-input {
        width: 38px;
        height: 46px;
    }


    .cs-phone-group {
        grid-template-columns:
            72px
            minmax(0, 1fr);
    }


    .cs-payment-amount {
        align-items: flex-start;

        flex-direction: column;

        gap: 5px;
    }
}


/* ============================================================
   48. ACCESSIBILITY
============================================================ */

.cs-password-toggle:focus-visible,
.cs-check-input:focus-visible,
.cs-radio-input:focus-visible,
.cs-file-upload:focus-within {
    outline:
        3px solid
        rgba(
            var(--cs-primary-rgb),
            0.16
        );

    outline-offset: 2px;
}


/* ============================================================
   49. REDUCED MOTION
============================================================ */

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

    .cs-form-control,
    .careersetu-input,
    .careersetu-select,
    .careersetu-textarea,
    .cs-option-card,
    .cs-file-upload,
    .cs-check-input,
    .cs-password-toggle {
        transition: none;
    }


    .cs-form-loader {
        animation-duration:
            1.5s;
    }
}


/* ============================================================
   50. PRINT
============================================================ */

@media print {

    .cs-form-actions,
    .cs-password-toggle,
    .cs-file-upload,
    .cs-form-loader {
        display: none !important;
    }


    .cs-form-control,
    .careersetu-input,
    .careersetu-select,
    .careersetu-textarea {
        border:
            1px solid
            #cccccc !important;

        background:
            #ffffff !important;

        color:
            #000000 !important;

        box-shadow:
            none !important;
    }
}


/* ============================================================
   END OF CAREERSETU PRO FORM SYSTEM
============================================================ */