/* ------------------------------- PRICING ------------------------------- */

/* PRICING (LAYOUT) */

.pricing_section {
    min-height: calc(100vh - 86px); padding: 30px; margin-bottom: 20px; border: var(--surface-border); background: var(--white-color);
    border-radius: 12px;
}
.pricing {display: flex; gap: 16px;}
.pricing > div {width: 25%;}

@media (max-width: 1024px) {
    .pricing_section {min-height: 0; padding: 20px; border-radius: 10px;}
    .pricing {flex-wrap: wrap; gap: 14px;}
    .pricing > div {width: calc(50% - 7px);}
    .pricing > div:nth-of-type(1) {width: 100%;}
}

@media (max-width: 768px) {
    .pricing_section {padding: 0; margin-bottom: 12px; border: none; border-radius: 0;}
    .pricing {flex-direction: column; gap: 12px;}
    .pricing > div, .pricing > div:nth-of-type(1) {width: 100%;}
}

/* PRICING (INFO) */

.pricing_info {max-width: 800px;}
.pricing_info_title {font-size: 28px; font-weight: 600; line-height: 1.1;}
.pricing_info_desc {padding-top: 8px; font-size: 14px; line-height: 1.3; color: var(--gray-color-3);}
.pricing_info_desc > div {padding-top: 16px;}
.pricing_info_desc > div.bold {font-weight: 500;}
.pricing_info_desc > div > span {text-decoration: underline; cursor: pointer;}
.pricing_info_desc > div > span:hover {text-decoration: none;}

@media (max-width: 1024px) {
    .pricing_info {max-width: 100%;}
    .pricing_info_title {font-size: 30px;}
    .pricing_info_desc {padding-top: 10px; font-size: 15px; line-height: 1.5;}
    .pricing_info_desc > div {padding-top: 14px;}
}

@media (max-width: 768px) {
    .pricing_info_title {font-size: 26px; line-height: 1.2;}
    .pricing_info_desc {padding-top: 8px; font-size: 16px; line-height: 1.55;}
    .pricing_info_desc > div {padding-top: 14px;}
}

/* PRICING (INFO: GUEST) */

.pricing_info_badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; margin-bottom: 16px;
    background: var(--primary-color-8); color: var(--primary-color-2); border-radius: 8px;
    font-size: 12px; font-weight: 500; line-height: 1;
}

.pricing_info_features {display: flex; flex-direction: column; gap: 10px;}
.pricing_info_features > div {display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--gray-color-2);}
.pricing_info_features > div > i {color: var(--primary-color-3); font-size: 11px;}

@media (max-width: 1024px) {
    .pricing_info_badge {padding: 8px 14px; margin-bottom: 18px; font-size: 13px; border-radius: 10px;}
    .pricing_info_features {gap: 12px;}
    .pricing_info_features > div {gap: 12px; font-size: 15px;}
    .pricing_info_features > div > i {font-size: 12px;}
}

@media (max-width: 768px) {
    .pricing_info_badge {padding: 9px 16px; margin-bottom: 14px; font-size: 14px; border-radius: 12px;}
    .pricing_info_features {gap: 14px;}
    .pricing_info_features > div {gap: 12px; font-size: 16px;}
    .pricing_info_features > div > i {font-size: 13px;}
}

/* PRICING (ITEM) */

.pricing_item {
    position: relative; display: flex; flex-direction: column; height: 100%; padding: 20px; border: 1px solid var(--gray-color-11);
    border-radius: 8px;
}
.pricing_item.active {border-color: var(--primary-color-3);}
.pricing_item_badge {
    position: absolute; top: -12px; inset-inline-end: 16px; padding: 6px 10px; background: var(--primary-color-3);
    color: var(--white-color); border-radius: 8px; font-size: 12px; font-weight: 500; line-height: 1;
}
.pricing_item_title {font-size: 16px; font-weight: 600;}
.pricing_item_subtitle {padding-top: 4px; font-size: 14px; color: var(--gray-color-5);}
.pricing_item_price {padding-top: 16px; font-size: 24px; font-weight: 600;}
.pricing_item_price > span {font-size: 14px; font-weight: 400; text-transform: lowercase;}
.pricing_item_btn {margin-top: 20px;}
.pricing_item_active {
    display: flex; flex-direction: column; gap: 4px; margin-top: 20px; padding: 12px 14px; background: var(--primary-color-9);
    border: 1px solid var(--primary-color-3); border-radius: 8px;
}
.pricing_item_active_head {display: flex; align-items: center; gap: 8px; color: var(--primary-color-3); font-size: 14px; font-weight: 600;}
.pricing_item_active_head > i {font-size: 12px;}
.pricing_item_active_date {color: var(--gray-color-3); font-size: 13px;}

.pricing_item_list {padding-top: 20px;}
.pricing_item_list > li {display: flex; padding-top: 6px; line-height: 1.3;}
.pricing_item_list > li.bold {font-weight: 600;}
.pricing_item_list > li.gray {padding-inline-start: 22px; color: var(--gray-color-8);}
.pricing_item_list > li > i {position: relative; top: 2px; padding-inline-end: 10px; font-size: 10px; font-weight: 400;}

@media (max-width: 1024px) {
    .pricing_item {padding: 22px; border-radius: 12px;}
    .pricing_item_badge {top: -12px; padding: 7px 12px; font-size: 12.5px; border-radius: 10px;}
    .pricing_item_title {font-size: 18px;}
    .pricing_item_subtitle {padding-top: 6px; font-size: 14.5px;}
    .pricing_item_price {padding-top: 18px; font-size: 26px;}
    .pricing_item_price > span {font-size: 15px;}
    .pricing_item_btn {height: 46px; margin-top: 22px; font-size: 15px;}
    .pricing_item_list {padding-top: 22px;}
    .pricing_item_list > li {padding-top: 10px; font-size: 15px; line-height: 1.5;}
    .pricing_item_list > li > i {top: 4px; padding-inline-end: 12px; font-size: 11px;}
    .pricing_item_list > li.gray {padding-inline-start: 23px;}
}

@media (max-width: 768px) {
    .pricing_item {padding: 20px; border-radius: 14px;}
    .pricing_item_badge {top: -12px; padding: 8px 14px; font-size: 13px; border-radius: 12px;}
    .pricing_item_title {font-size: 20px;}
    .pricing_item_subtitle {padding-top: 6px; font-size: 15.5px;}
    .pricing_item_price {padding-top: 18px; font-size: 28px;}
    .pricing_item_price > span {font-size: 16px;}
    .pricing_item_btn {height: 50px; margin-top: 22px; font-size: 16px; font-weight: 600;}
    .pricing_item_list {padding-top: 22px;}
    .pricing_item_list > li {padding-top: 12px; font-size: 16px; line-height: 1.55;}
    .pricing_item_list > li > i {top: 5px; padding-inline-end: 12px; font-size: 12px;}
    .pricing_item_list > li.gray {padding-inline-start: 24px;}
}

/* ------------------------------- BILLING ------------------------------- */

/* BILLING (BALANCE) */

.billing_balance {padding-top: 16px;}
.billing_balance_row {display: flex; align-items: center; justify-content: space-between; font-size: 13px;}
.billing_balance_label {color: var(--gray-color-3);}
.billing_balance_value {color: var(--black-color); font-weight: 600;}
.billing_topup_btn {margin-top: 20px;}

@media (max-width: 1024px) {
    .billing_balance {padding-top: 18px;}
    .billing_balance_row {font-size: 15px;}
    .billing_topup_btn {height: 46px; margin-top: 18px; font-size: 15px;}
}

@media (max-width: 768px) {
    .billing_balance {padding-top: 16px;}
    .billing_balance_row {font-size: 16.5px;}
    .billing_balance_value {font-size: 17px;}
    .billing_topup_btn {height: 50px; margin-top: 18px; font-size: 16px; font-weight: 600;}
}

/* BILLING (CREDITS INFO) */

.billing_credits_info {padding-top: 18px;}
.billing_credits_info_head {display: flex; align-items: center; gap: 10px;}
.billing_credits_info_icon {
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px;
    background: var(--primary-color-3); color: var(--white-color); border-radius: 8px;
}
.billing_credits_info_icon > i {font-size: 15px;}
.billing_credits_info_title {color: var(--black-color); font-size: 15px; font-weight: 600;}
.billing_credits_info_desc {padding-top: 12px; color: var(--gray-color-3); font-size: 13px; line-height: 1.45;}
.billing_credits_info_list {display: flex; flex-direction: column; gap: 10px; padding-top: 16px;}
.billing_credits_info_list > div {display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.4;}
.billing_credits_info_list > div > i {position: relative; top: 2px; flex: 0 0 auto; color: var(--primary-color-3); font-size: 12px;}
.billing_credits_info_list > div > span {color: var(--gray-color-2);}

@media (max-width: 1024px) {
    .billing_credits_info_head {gap: 12px;}
    .billing_credits_info_icon {width: 36px; height: 36px; border-radius: 10px;}
    .billing_credits_info_icon > i {font-size: 16px;}
    .billing_credits_info_title {font-size: 16px;}
    .billing_credits_info_desc {padding-top: 12px; font-size: 14.5px; line-height: 1.55;}
    .billing_credits_info_list {gap: 12px; padding-top: 16px;}
    .billing_credits_info_list > div {font-size: 14.5px; line-height: 1.5;}
    .billing_credits_info_list > div > i {font-size: 13px;}
}

@media (max-width: 768px) {
    .billing_credits_info_title {font-size: 17px;}
    .billing_credits_info_desc {padding-top: 12px; font-size: 15.5px;}
    .billing_credits_info_list {gap: 14px; padding-top: 16px;}
    .billing_credits_info_list > div {font-size: 15.5px;}
    .billing_credits_info_list > div > i {top: 3px; font-size: 13.5px;}
}

/* BILLING (SECTION) */

.container > .billing_content_col {padding-bottom: 0;}
.billing_section {
    min-height: calc(100vh - 86px); padding: 14px 20px 20px; margin-bottom: 20px; border: var(--surface-border);
    background: var(--white-color); border-radius: 12px;
}

@media (max-width: 1024px) {
    .billing_section {min-height: 0; padding: 14px; border-radius: 10px;}
}

@media (max-width: 768px) {
    .billing_section {padding: 0; margin-bottom: 12px; border: none;}
}

/* BILLING (PLACEHOLDER) */

.billing_empty {min-height: 360px; margin-bottom: 20px;}

@media (max-width: 1024px) {
    .billing_empty {min-height: 0;}
}

@media (max-width: 768px) {
    .billing_empty {margin-bottom: 12px;}
}

/* BILLING (CONTROLS) */

.billing_controls {display: flex; align-items: center;}
.billing_controls > div {display: flex; width: 50%;}
.billing_controls > div:nth-of-type(1) > div + div {margin-inline-start: 10px;}
.billing_controls > div:nth-of-type(2) {justify-content: flex-end;}
.billing_controls_title {color: var(--black-color); font-size: 18px; font-weight: 500;}

@media (max-width: 1024px) {
    .billing_controls {flex-wrap: wrap; gap: 12px;}
    .billing_controls > div {width: 100%;}
    .billing_controls > div:nth-of-type(2) {justify-content: flex-start;}
    .billing_controls_title {font-size: 19px;}
}

@media (max-width: 768px) {
    .billing_controls {gap: 14px;}
    .billing_controls_title {font-size: 20px; font-weight: 600;}
}

/* BILLING (TABLE) */

#billing_table {padding-top: 16px;}
.billing_table_wrap {width: 100%;}

.billing_col_invoice {min-width: 140px;}
.billing_col_date {min-width: 160px;}
.billing_col_type {min-width: 120px;}
.billing_col_status {min-width: 100px;}
.billing_col_amount {min-width: 110px;}
.billing_col_id {min-width: 110px;}

.billing_table {
    width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden;
    border: 1px solid var(--gray-color-13); border-radius: 10px;
    font-size: 13px; color: var(--gray-color-2); text-align: start;
}
.billing_table > thead > tr > td {
    padding: 12px 16px; border-bottom: 1px solid var(--gray-color-13);
    background: var(--gray-color-15); color: var(--gray-color-5); font-size: 13px; font-weight: 500;
}
.billing_table > tbody > tr {transition: background 0.15s;}
.billing_table > tbody > tr > td {padding: 14px 16px; vertical-align: middle; border-bottom: 1px solid var(--gray-color-14);}
.billing_table > tbody > tr:last-child > td {border-bottom: none;}
.billing_table td[data-label]::before {display: none;}

.billing_table .billing_invoice {color: var(--black-color); font-weight: 500; white-space: nowrap;}
.billing_table .billing_date {color: var(--gray-color-3); white-space: nowrap;}
.billing_table .billing_type {color: var(--gray-color-3);}
.billing_table .billing_amount {color: var(--black-color); font-weight: 500;}
.billing_table .billing_id {color: var(--gray-color-5);}

/* BILLING (STATUS) */

.billing_status {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--gray-color-14);
    color: var(--gray-color-3); border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1;
}
.billing_status::before {content: ''; width: 6px; height: 6px; background: var(--gray-color-8); border-radius: 50%;}
.billing_status.processed {background: var(--primary-color-8); color: var(--primary-color-2);}
.billing_status.processed::before {background: var(--primary-color-3);}
.billing_status.success {background: var(--green-color-5); color: var(--green-color-1);}
.billing_status.success::before {background: var(--green-color-2);}
.billing_status.rejected {background: var(--red-color-4); color: var(--red-color-1);}
.billing_status.rejected::before {background: var(--red-color-2);}

.billing_no_data {
    width: 100%; padding: 40px 20px; border: 1px dashed var(--gray-color-11); border-radius: 10px; background: var(--gray-color-15);
    color: var(--gray-color-5); font-size: 13px; text-align: center;
}

@media (max-width: 1024px) {
    #billing_table {padding-top: 18px;}
    .billing_table_wrap {overflow-x: auto;}
    .billing_table {font-size: 14.5px;}
    .billing_table > thead > tr > td {padding: 14px 16px; font-size: 13.5px;}
    .billing_table > tbody > tr > td {padding: 16px;}
    .billing_status {padding: 6px 12px; font-size: 12.5px;}
    .billing_no_data {padding: 36px 18px; font-size: 14.5px; border-radius: 12px;}
}

@media (max-width: 768px) {
    #billing_table {padding-top: 14px;}
    .billing_table_wrap {overflow-x: visible;}
    .billing_table {display: block; overflow: visible; border: none; border-radius: 0;}
    .billing_table > thead {display: none;}
    .billing_table > tbody {display: block;}
    .billing_table > tbody > tr {
        display: block; padding: 16px 18px; margin-bottom: 14px; border: 1px solid var(--gray-color-13); border-radius: 12px;
        background: var(--white-color);
    }
    .billing_table > tbody > tr:hover {background: var(--white-color);}
    .billing_table > tbody > tr > td {
        display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: none;
        font-size: 15.5px;
    }
    .billing_table > tbody > tr > td[data-label]::before {
        display: inline-block; flex: 0 0 auto; content: attr(data-label); color: var(--gray-color-5); font-size: 13.5px;
        font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px;
    }
    .billing_table .billing_date {white-space: normal; text-align: end;}
    .billing_table .billing_amount {font-size: 16.5px; font-weight: 600;}
    .billing_status {padding: 7px 14px; font-size: 13px;}
    .billing_status::before {width: 7px; height: 7px;}
    .billing_no_data {padding: 32px 16px; font-size: 15px; border-radius: 12px;}
}

/* ------------------------------- MODAL SUBSCRIPTIONS ------------------------------- */

.modal_subscription_items {display: flex; gap: 12px; width: 100%; margin-top: 18px;}

.modal_subscription_item {
    width: 33.333%; padding: 16px 20px; border: 1px solid var(--gray-color-14); border-radius: 6px; cursor: pointer;
    user-select: none;
}
.modal_subscription_item > div:nth-of-type(1) {font-size: 16px; font-weight: 600;}
.modal_subscription_item > div:nth-of-type(2) {padding-top: 12px; font-size: 24px; font-weight: 600;}
.modal_subscription_item > div:nth-of-type(2) > span {font-size: 14px; font-weight: 400;}
.modal_subscription_item > div:nth-of-type(3) {padding-top: 6px; color: var(--gray-color-5); font-size: 13px;}

.modal_subscription_item.active, .modal_subscription_item:hover {
    border-color: var(--primary-color-3); background-color: var(--primary-color-3); color: var(--white-color);
}
.modal_subscription_item.active > div:nth-of-type(3), .modal_subscription_item:hover > div:nth-of-type(3) {color: var(--white-color);}

@media (max-width: 768px) {
    .modal_subscription_items {flex-direction: column; gap: 10px; margin-top: 14px;}
    .modal_subscription_item {width: 100%; padding: 14px 16px;}
    .modal_subscription_item > div:nth-of-type(2) {padding-top: 8px; font-size: 20px;}
}