/* =========================================
   BMCMA Membership Application - Modern UI
========================================= */

:root {
    --member-primary: #075e50;
    --member-primary-dark: #06483f;
    --member-accent: #13a58b;
    --member-text: #253449;
    --member-muted: #687789;
    --member-border: #e1e8ee;
    --member-bg: #f4f7fa;
    --member-danger: #b42332;
}

.team-area {
    padding: 65px 0 85px;
    background: var(--member-bg);
}

.team-area .section-title {
    margin-bottom: 30px !important;
}

.team-area .section-title-para .alert {
    padding: 20px 24px;
    margin: 0;
    background: #fff8e8;
    border: 1px solid #f0dba6;
    border-left: 5px solid #d49a18;
    border-radius: 10px;
    color: #684d0b;
    font-size: 15px;
    line-height: 1.9;
    text-align: left;
    box-shadow: 0 4px 16px rgba(30, 50, 70, .04);
}

.member-form-wrapper {
    width: 100%;
    max-width: 100%;
    margin-top: 0 !important;
    padding: 38px 42px !important;
    background: #fff;
    border: 1px solid var(--member-border);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(28, 48, 68, .07);
    color: var(--member-text);
}

/* Introductory information */
.member-form-wrapper > .form-group:first-of-type {
    background: #f0f8f5;
    padding: 16px 18px;
    border: 1px solid #d7ebe4;
    border-radius: 9px;
    margin-bottom: 12px;
}

.member-form-wrapper p {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.8;
}

.member-form-wrapper small {
    display: block;
    color: #526476;
    font-size: 14px;
    line-height: 2;
}

.member-form-wrapper .form-group {
    margin-bottom: 23px;
}

.member-form-wrapper label {
    display: inline-block;
    padding: 0 !important;
    margin-bottom: 8px;
    color: #344458;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
}

.member-form-wrapper .col-form-label {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.member-form-wrapper .form-control {
    width: 100%;
    min-height: 45px;
    padding: 10px 13px !important;
    border: 1px solid #d7e0e8;
    border-radius: 7px;
    background-color: #fff;
    color: #243447 !important;
    font-family: inherit;
    font-size: 14px;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.member-form-wrapper textarea.form-control {
    min-height: 110px;
}

.member-form-wrapper .form-control::placeholder {
    color: #9aa7b5;
    opacity: 1;
}

.member-form-wrapper .form-control:focus {
    border-color: var(--member-accent);
    box-shadow: 0 0 0 3px rgba(19, 165, 139, .12);
    outline: none;
}

.member-form-wrapper input[type="file"].form-control {
    min-height: 45px;
    padding: 7px !important;
    background: #f9fbfc;
    font-size: 12px;
}

.member-form-wrapper input[type="file"]::file-selector-button {
    padding: 7px 10px;
    margin-right: 10px;
    border: 0;
    border-radius: 5px;
    background: #e4f2ed;
    color: var(--member-primary);
    cursor: pointer;
}

/* Section headings */
.member-form-wrapper h4 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 35px 0 22px !important;
    padding: 0 0 13px;
    border-bottom: 1px solid var(--member-border);
    color: var(--member-primary) !important;
    font-size: 18px;
    font-weight: 700;
}

.member-form-wrapper h4::before {
    content: "";
    width: 5px;
    height: 25px;
    flex: 0 0 5px;
    border-radius: 5px;
    background: var(--member-accent);
}

/* Application date */
.member-form-wrapper #time {
    display: none;
}

.member-form-wrapper .form-group:has(#time) {
    padding: 12px 15px;
    background: #f7f9fb;
    border: 1px solid var(--member-border);
    border-radius: 8px;
}

/* Radio choices */
.member-form-wrapper .form-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 35px;
    margin: 3px 12px 3px 0;
    padding: 6px 10px;
    border: 1px solid #e0e7ed;
    border-radius: 7px;
    background: #fff;
}

.member-form-wrapper .form-check-input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid #aab8c5;
    cursor: pointer;
}

.member-form-wrapper .form-check-input:checked {
    background-color: var(--member-primary);
    border-color: var(--member-primary);
}

.member-form-wrapper .form-check-label {
    margin: 0;
    padding: 0 !important;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

/* Certificate tables */
.member-form-wrapper table {
    width: 100%;
    margin: 12px 0 18px;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid var(--member-border);
    border-radius: 9px;
    overflow: hidden;
}

.member-form-wrapper table thead th {
    padding: 12px;
    background: #f0f5f7;
    border-bottom: 1px solid var(--member-border);
    color: #405466;
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
}

.member-form-wrapper table td {
    padding: 10px;
    border-bottom: 1px solid #edf1f4;
    vertical-align: middle;
}

.member-form-wrapper table tbody tr:last-child td {
    border-bottom: 0;
}

.member-form-wrapper table img {
    max-width: 85px;
    max-height: 65px;
    object-fit: cover;
    border-radius: 5px;
}

.member-form-wrapper .btn_add_more {
    display: inline-flex;
    position: static;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border: 1px solid #b9e3d6;
    border-radius: 7px;
    background: #eaf7f1;
    color: var(--member-primary);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease;
}

.member-form-wrapper .btn_add_more:hover {
    background: var(--member-primary);
    border-color: var(--member-primary);
    color: #fff;
}

.member-form-wrapper .removeItem {
    padding: 6px 9px !important;
    border-radius: 6px;
    background: #fff0f0;
    color: #b42332;
    cursor: pointer;
}

.member-form-wrapper .removeItem:hover {
    background: #b42332;
    color: #fff;
}

/* Factory photo area */
.member-form-wrapper #factory_Wrapper {
    padding: 20px !important;
    background: #f6f9fb;
    border: 1px dashed #b8c9d4;
    border-radius: 10px;
}

/* Validation */
.member-form-wrapper .error {
    display: block;
    margin-top: 5px;
    padding: 0;
    background: transparent !important;
    color: var(--member-danger) !important;
    font-size: 12px;
    line-height: 1.5;
    float: none;
}

.member-form-wrapper .form-control.is-invalid {
    border-color: var(--member-danger);
}

/* Submit button */
.member-form-wrapper button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 13px 22px !important;
    border: 0;
    border-radius: 8px;
    background: var(--member-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .2px;
    box-shadow: 0 5px 14px rgba(7, 94, 80, .18);
    transition: background .2s ease, transform .2s ease;
}

.member-form-wrapper button[type="submit"]:hover {
    background: var(--member-primary-dark);
    transform: translateY(-1px);
}

.member-form-wrapper button[type="submit"]:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
}

/* Loader */
#loader {
    margin: 25px auto !important;
}

#loader img {
    width: 55px !important;
    height: 55px;
    object-fit: contain;
}

/* Datepicker */
.ui-datepicker {
    z-index: 99999 !important;
    padding: 8px;
    border: 1px solid var(--member-border) !important;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .12);
}

.ui-datepicker-header {
    border: 0 !important;
    border-radius: 6px;
    background: var(--member-primary) !important;
    color: #fff !important;
}

.ui-datepicker-title {
    color: #fff !important;
}

.ui-datepicker .ui-state-default {
    border: 0 !important;
    border-radius: 5px;
    background: #f4f7fa !important;
    color: #344458 !important;
    text-align: center;
}

.ui-datepicker .ui-state-default:hover,
.ui-datepicker .ui-state-active {
    background: var(--member-primary) !important;
    color: #fff !important;
}

/* Responsive */
@media (max-width: 991px) {
    .member-form-wrapper {
        padding: 28px 24px !important;
    }

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

    .member-form-wrapper h4 {
        margin-top: 28px !important;
    }
}

@media (max-width: 767px) {
    .team-area {
        padding: 35px 0 50px;
    }

    .member-form-wrapper {
        padding: 20px 15px !important;
        border-radius: 10px;
    }

    .member-form-wrapper h4 {
        font-size: 16px;
    }

    .member-form-wrapper .form-check {
        margin-right: 5px;
        padding: 6px 8px;
    }

    .member-form-wrapper table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .team-area .section-title-para .alert {
        padding: 15px;
        font-size: 13px;
    }

    .member-form-wrapper button[type="submit"] {
        width: 100%;
    }
}


.member-form-heading {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e5ebef;
}

.member-heading-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 13px;
    background: #e8f5ef;
    color: #075e50;
    font-size: 25px;
}

.member-eyebrow {
    color: #13816d;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.member-form-heading h2 {
    margin: 5px 0 6px;
    color: #1f3347;
    font-size: 25px;
    font-weight: 750;
}

.member-form-heading p {
    color: #718093;
    font-size: 13px;
}

@media (max-width: 575px) {
    .member-heading-icon {
        width: 45px;
        height: 45px;
        flex-basis: 45px;
        font-size: 20px;
    }

    .member-form-heading h2 {
        font-size: 19px;
    }
}


.member-submit-section {
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px solid #e5ebef;
}

.member-submit-note {
    margin-bottom: 16px;
    color: #718093;
    font-size: 13px;
    line-height: 1.7;
}

.member-submit-section button[type="submit"] {
    max-width: 360px;
}

@media (max-width: 575px) {
    .member-submit-section button[type="submit"] {
        max-width: none;
    }
}

.member-application-date {
    color: #075e50;
    font-weight: 700;
    font-size: 14px;
}