/* =========================================================
   SPOUSE INFORMATION TABLE
   ========================================================= */

.spouse-table-wrapper {

    width: 100%;

    box-sizing: border-box;

    margin-top: 20px;

    direction: rtl;

    border-radius: 16px;

    border:
        1px solid rgba(255, 255, 255, 0.10);

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

    overflow: hidden;

    display: none;

    transition:
        opacity 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;

}


/* =========================================================
   SHOW TABLE
   ========================================================= */

.spouse-table-wrapper.show {

    display: block;

}


/* =========================================================
   ACTIVE STATE
   ========================================================= */

.spouse-table-wrapper.active {

    border-color:
        rgba(191, 215, 48, 0.25);

    box-shadow:
        0 0 25px rgba(191, 215, 48, 0.04);

}


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

.spouse-table-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 18px 20px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);

}


.spouse-table-header h3 {

    margin: 0;

    font-size: 12px;

    font-weight: 600;

    color: #ffffff;

}


/* =========================================================
   ADD BUTTON
   ========================================================= */

.spouse-add-btn {

    border: none;

    border-radius: 999px;

    padding: 10px 18px;

    font-family: inherit;

    font-size: 14px;

    cursor: pointer;

    background: #bfd730;

    color: #111;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


.spouse-add-btn:hover {

    transform: translateY(-1px);

    box-shadow:
        0 5px 18px
        rgba(191, 215, 48, 0.25);

}


/* =========================================================
   TABLE SCROLL
   ========================================================= */

.spouse-table-scroll {

    width: 100%;

    overflow-x: auto;

    scrollbar-width: thin;

    scrollbar-color:
        #a21c43
        #ffffff;

    -webkit-overflow-scrolling: touch;

}


/* =========================================================
   CHROME / EDGE / OPERA / SAFARI
   ========================================================= */

.spouse-table-scroll::-webkit-scrollbar {

    height: 8px;

}


.spouse-table-scroll::-webkit-scrollbar-track {

    background: #ffffff;

    border-radius: 999px;

}


.spouse-table-scroll::-webkit-scrollbar-thumb {

    background: #a21c43;

    border-radius: 999px;

    border: 2px solid #ffffff;

}


.spouse-table-scroll::-webkit-scrollbar-thumb:hover {

    background: #8c1739;

}


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

.spouse-table {

    width: 100%;

    min-width: 1250px;

    border-collapse: collapse;

    direction: rtl;

}


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

.spouse-table th {

    padding: 13px 12px;

    white-space: nowrap;

    font-size: 13px;

    font-weight: 600;

    color: #ffffff;

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

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);

    text-align: center;

}


/* =========================================================
   TABLE CELLS
   ========================================================= */

.spouse-table td {

    padding: 10px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.06);

    text-align: center;

    vertical-align: middle;

}


/* =========================================================
   INPUTS / SELECTS
   ========================================================= */

.spouse-table input,
.spouse-table select {

    width: 100%;

    min-width: 120px;

    box-sizing: border-box;

    padding: 9px 10px;

    border-radius: 8px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

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

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;

    outline: none;

}


.spouse-table input:focus,
.spouse-table select:focus {

    border-color: #bfd730;

    box-shadow:
        0 0 0 2px
        rgba(191, 215, 48, 0.10);

}


.spouse-table select option {

    background: #202020;

    color: #ffffff;

}


/* =========================================================
   FIRST / LAST NAME
   ========================================================= */

.spouse-table td:nth-child(1) input,
.spouse-table td:nth-child(2) input {

    min-width: 150px;

}


/* =========================================================
   FATHER NAME
   ========================================================= */

.spouse-table td:nth-child(3) input {

    min-width: 140px;

}


/* =========================================================
   EDUCATION
   ========================================================= */

.spouse-table td:nth-child(4) select {

    min-width: 150px;

}


/* =========================================================
   JOB
   ========================================================= */

.spouse-table td:nth-child(5) input {

    min-width: 170px;

}


/* =========================================================
   WORK ADDRESS
   ========================================================= */

.spouse-table td:nth-child(6) input {

    min-width: 250px;

}


/* =========================================================
   WORK PHONE
   ========================================================= */

.spouse-phone-input {

    min-width: 150px !important;

    direction: ltr;

    text-align: center;

}


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

.spouse-delete-btn {

    border: none;

    border-radius: 8px;

    padding: 8px 12px;

    font-family: inherit;

    cursor: pointer;

    background:
        rgba(220, 50, 50, 0.15);

    color: #ff7777;

    transition: 0.25s ease;

}


.spouse-delete-btn:hover {

    background:
        rgba(220, 50, 50, 0.25);

    transform: translateY(-1px);

}


/* =========================================================
   DEFAULT / PLACEHOLDER ROW
   ========================================================= */

.spouse-default-record {

    opacity: 0.55;

}


.spouse-default-record input,
.spouse-default-record select,
.spouse-default-record button {

    cursor: default;

}


/* =========================================================
   EMPTY MESSAGE
   ========================================================= */

.spouse-table-empty {

    padding: 18px 20px;

    text-align: center;

    font-size: 13px;

    color:
        rgba(255, 255, 255, 0.55);

}


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

@media (max-width: 768px) {

    .spouse-table-header {

        align-items: flex-start;

        flex-direction: column;

    }


    .spouse-add-btn {

        width: 100%;

    }

}