/* Category Listing Styles */
.category-listing {
    padding-top: 60px;
}
.payment-info {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    color: #000;
}
.payment-info > span {
    display: flex;
    flex-direction: column;
    line-height: normal;
    margin-top: 3px;
}
.category-list-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 20px;
}

.category-list-wrap li {
    position: relative;
    background-color: var(--color-white);
    overflow: hidden;
    border-radius: 8px;
    border: solid 1px var(--border-plight);
    padding: 10px;
    transition: all 0.35s ease-in-out;
}

.cat-outer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 8px;
}

.category-list-wrap li .cat-img {
    width: 27px;
    height: 27px;
    position: relative;
}

.category-list-wrap li .cat-img img {
    position: relative;
    z-index: 1;
}

.category-list-wrap li .cat-img:before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    background: #FCE3CF;
    border-radius: 50%;
    right: -1px;
    bottom: 2px;
    transition: auto;
    transition: all 0.35s ease-in-out;
}

.category-list-wrap li .title-h {
    font-size: var(--font-regular);
    font-weight: 600;
    line-height: 24px;
    color: var(--text-color);
    margin-bottom: 0;
    display: block;
}

/* Plan Validity and Badge Styles */
.plan-validaty {
    font-size: 10px;
    font-weight: 600;
    line-height: normal;
    padding: 2px 8px;
    border-radius: 4px;
    align-self: flex-start;
}

.plan-validaty.active,
.badge-active {
    background-color: rgba(14, 148, 147, 0.2);
    color: var(--typo-primary) !important;
}

.plan-validaty.experie,
.badge-expired {
    background-color: rgba(254, 226, 226, 1);
    color: rgba(242, 71, 71, 1) !important;
}

.badge-pending {
    background-color: rgba(255, 193, 7, 0.2);
    color: rgba(255, 193, 7, 1) !important;
}

/* Membership List Styles */
.membership-list {
    margin-top: 40px;
}

.table-container {
    overflow-x: auto;
}

.custom-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: 10px;
    border: solid 1px var(--light-gray);
}

.custom-table thead {
    background-color: #322e2b;
    color: #fff;
    font-weight: 600;
}

.custom-table th {
    white-space: nowrap;
}

.custom-table th,
.custom-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--light-gray);
    border-right: solid 1px rgba(230, 230, 230, 1);
}

.custom-table th:last-child,
.custom-table td:last-child {
    border-right: none;
}

.custom-table tbody tr:nth-child(odd) {
    background-color: #f2f6fb;
}

.custom-table tbody tr:nth-child(even) {
    background-color: #fff;
}

.custom-table th:first-child {
    border-top-left-radius: 10px;
}

.custom-table th:last-child {
    border-top-right-radius: 10px;
}

.custom-table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

.custom-table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

.badge {
    display: inline-block;
    padding: 4px 8px;
    font-size: 14px;
    line-height: normal;
    font-weight: 500;
    border-radius: 4px;
}

.payment {
    font-weight: 500;
    color: #374151;
}

/* Payment Methods Styles */
.payment-methods {
    display: flex;
    gap: 25px;
}

.payment-methods .payment-option {
    width: 100%;
    background: #fff;
    border: solid 1px #fff;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: var(--font-small);
}

.payment-methods .payment-option.active {
    border: solid 1px var(--border-plight);
    color: var(--color-primary);
}

.payment-fields {
    margin-top: 20px;
    display: none;
}

.payment-fields.active {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Add Membership Button */
.add-membership-btn {
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
}

/* Category Listing Project Filter */
.category-listing .project-filter .custom-btn {
    padding: 7px 16px;
}

/* Select2 Container */
.select2-container {
    width: 100% !important;
}

/* Tab Title Styles */
.tab-title {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 20px;
}

.tab-title h5 {
    position: relative;
    width: fit-content;
    padding-bottom: 10px;
    margin-bottom: 0;
}

.tab-title h5::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 3px;
    background-color: var(--color-primary);
    border-radius: 40px;
}

.tab-title .project-filter .custom-btn:hover svg {
    filter: inherit;
}

.tab-title .project-filter .secondary-btn:hover svg path {
    stroke: var(--typo-primary) !important;
}

/* Custom Select for Filter */
.custom-select {
    position: relative;
}

.custom-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 5px 35px 5px 12px;
    border: 1px solid #FCE3CF;
    border-radius: 4px;
    width: 100%;
}

.custom-select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 18px;
    height: 9px;
    pointer-events: none;
    transform: translateY(-50%);
    background-image: url('data:image/svg+xml,<svg width="18" height="9" viewBox="0 0 18 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.99953 8.80062C8.29953 8.80062 7.59953 8.53063 7.06953 8.00063L0.549531 1.48062C0.259531 1.19062 0.259531 0.710625 0.549531 0.420625C0.839531 0.130625 1.31953 0.130625 1.60953 0.420625L8.12953 6.94062C8.60953 7.42062 9.38953 7.42062 9.86953 6.94062L16.3895 0.420625C16.6795 0.130625 17.1595 0.130625 17.4495 0.420625C17.7395 0.710625 17.7395 1.19062 17.4495 1.48062L10.9295 8.00063C10.3995 8.53063 9.69953 8.80062 8.99953 8.80062Z" fill="%230E9493"/></svg>');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Modal Styles for Add Membership */
.custom-modal .modal-dialog {
    max-width: 961px;
    border: none !important;
}
.custom-modal .modal-dialog-cacel {
    max-width: 361px;
    border: none !important;
}

.modal .modal-dialog .modal-content, .modal .modal-dialog-cacel .modal-content {
    padding: 30px;
    border: none;
    box-shadow: none;
    background-color: var(--light-gray);
    border-radius: 8px;
}

.modal .modal-dialog .modal-content .tab-title,  .modal .modal-dialog-cacel .modal-content .tab-title {
    align-items: center;
}

.modal .modal-dialog .modal-content .tab-title h5,  .modal .modal-dialog-cacel .modal-content .tab-title h5 {
    margin: 0;
}

.modal .modal-dialog .modal-content .tab-title button.btn-close, .modal .modal-dialog-cacel .modal-content .tab-title button.btn-close {
    border: solid 2px #564B43;
    border-radius: 50%;
    background-size: 10px !important;
    background-position: center;
    font-size: 0;
    height: 22px;
    width: 22px;
}

.custom-modal label {
    font-size: var(--font-small);
    line-height: normal;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--h-color);
}

.input-icon input {
    font-size: var(--font-small);
    min-height: 40px;
    background-color: var(--color-white);
    border-color: var(--color-white);
    border-radius: 8px;
}

.input-icon textarea {
    font-size: var(--font-small);
    min-height: 180px;
    background-color: var(--color-white);
    border-color: var(--color-white);
    border-radius: 8px;
    resize: none;
}

.input-icon input:focus,
.input-icon textarea:focus,
.input-icon select:focus {
    box-shadow: none;
    border-color: var(--color-primary);
}

.input-icon select {
    font-size: var(--font-small);
    min-height: 40px;
    background-color: var(--color-white);
    border-color: var(--color-white);
    border-radius: 8px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml,<svg width="18" height="9" viewBox="0 0 18 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.99953 8.80062C8.29953 8.80062 7.59953 8.53063 7.06953 8.00063L0.549531 1.48062C0.259531 1.19062 0.259531 0.710625 0.549531 0.420625C0.839531 0.130625 1.31953 0.130625 1.60953 0.420625L8.12953 6.94062C8.60953 7.42062 9.38953 7.42062 9.86953 6.94062L16.3895 0.420625C16.6795 0.130625 17.1595 0.130625 17.4495 0.420625C17.7395 0.710625 17.7395 1.19062 17.4495 1.48062L10.9295 8.00063C10.3995 8.53063 9.69953 8.80062 8.99953 8.80062Z" fill="%230E9493"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

.payment-fields {
    width: 100%;
}

.payment-fields .form-group {
    width: 100%;
}

.modal-overlay {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

/* Responsive Styles */
@media (max-width: 1200px) {
    .category-list-wrap {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

@media (max-width: 992px) {
    .category-list-wrap {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .category-list-wrap {
        grid-template-columns: 1fr 1fr;
    }
    
    .payment-methods {
        flex-direction: column;
        gap: 15px;
    }
    
    .tab-title {
        flex-direction: column;
        gap: 16px;
    }
}

@media (max-width: 576px) {
    .category-list-wrap {
        grid-template-columns: 1fr;
    }
    
    .custom-table {
        font-size: 14px;
    }
    
    .custom-table th,
    .custom-table td {
        padding: 8px 12px;
    }
}