/*************************************************************
 * This is the style for the User Settings pages
 * 
 * @author (Anyanwu Benedict Chukwuemeka)
 * @version (v0.01)
 *************************************************************/ 



html:root
{
    --settingNavBdrWidth: 20.3125rem;
    --settingNavBoxWidth: 17.5rem;
    --settingTopPadding: 7rem;
    --settCtntSectAtnIconSize: 2rem;
    --settPymtLyrTopBcg: var(--genGreyTypeDark);
    --settPymtLyrBtmBcg: var(--genGreyTypeMid);
    --sett_prof_card_img_size: 4rem;
}



.settingBdr
{
    width: 100%;
}

.settingBdr .settingBox
{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: end;
    padding: 0 var(--genBorderSpacing);
}






/* ========= SETTING SECTOR NAV ======== */
.settingBox .settingNavBdr
{
    position: fixed;
    top: 0;
    left: calc((var(--sideNavBarWidth) + var(--genBorderSpacing)));
    width: var(--settingNavBdrWidth);
    opacity: 1;
    visibility: visible;
    overflow: hidden;
    transition: all 300ms ease-in-out;
    z-index: 0;
}

.settingNavBdr.hidden
{
    --settingNavBdrWidth: 0rem;
    opacity: 0;
    visibility: hidden;
}

.settingNavBdr .settingNavBox
{
    width: var(--settingNavBoxWidth);
    display: flex;
    flex-direction: column;
    padding-top: var(--settingTopPadding);
}

.settingNavBox .settingNavTitleBox
{
    width: 100%;
    margin-bottom: 0.75rem;
}

.settingNavTitleBox .settingNavTitleText
{
    color: var(--genWhiteTypeMid);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.settingNavBox .settingNavOptBox
{
    --settingNavOptClr: var(--genWhiteTypeLight);
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.625rem 0.75rem;
    outline: none;
    border: none;
    border-radius: 0.3125rem;
    background-color: #00000000;
    transition: all 300ms ease-in-out;
    cursor: pointer;
}

.settingNavOptBox.active 
{
    --settingNavOptClr: var(--genGreenTypeLight);
    background-color: #ffffff15;
}

.settingNavOptBox .settingNavOptIcon
{
    width: 1.5625rem;
    height: 1.5625rem;
}

.settingNavOptIcon .settingNavOptSvg
{
    width: 100%;
    height: 100%;
    fill: var(--settingNavOptClr);
    transition: all 300ms ease-in-out;
}

.settingNavOptBox .settingNavOptText
{
    margin-left: 0.625rem;
    color: var(--settingNavOptClr);
    font-size: 1rem;
    font-weight: 600;
    transition: all 300ms ease-in-out;
}





/* =========== SETTING CTNT =========== */

.settingBox .settCtntBdr
{
    width: calc((100% - var(--settingNavBdrWidth)));
    transition: all 300ms ease-in-out;
}

.settCtntBdr .settCtntBox
{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.settCtntBox .settCtntTab
{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding-top: var(--settingTopPadding);
}

.settCtntTab .settCtntTitleBox
{
    width: 100%;
    padding-bottom: 1rem;
    border-bottom: 0.0625rem solid var(--genGreyTypeLight);
}

.settCtntTitleBox .settCtntTitleText
{
    display: flex;
    flex-direction: row;
    font-size: 1.75rem;
}

.settCtntTitleText .major
{
    color: var(--genGreenTypeBright);
}

.settCtntTitleText .minor
{
    color: var(--genWhiteTypeBright);
}



/* =========== SECTION ========== */

.settCtntTab .settCtntSectBdr
{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 2rem 0;
    border-radius: 0.5rem;
    background-color: #ffffff15;
}

.settCtntSectBdr .settCtntSectBox
{
    width: 100%;
    padding: 0 2rem;
}


/* -------- Horizontal section -------- */
.sett_ctnt_hrtl
{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}


/* -------- Vertical section -------- */
.sett_ctnt_vrtl
{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}



/* ------- Section Info ------- */
.sett_ctnt_info
{
    width: fit-content;
    display: flex;
    flex-direction: column;
}

.sett_ctnt_hrtl .sett_ctnt_info
{
    max-width: 75%;
}

.sett_ctnt_vrtl .sett_ctnt_info
{
    width: 100%;
}


.settCtntSectTitleBox .settCtntSectTitleText
{
    color: var(--genWhiteTypeLight);
    font-size: 1.125rem;
}

.sett_ctnt_info .settCtntSectDescBox
{
    margin-top: 0.5rem;
}

.settCtntSectDescBox .settCtntSectDescText
{
    width: 100%;
    color: var(--genWhiteTypeMid);
    font-size: 1rem;
}


/* -------- Section Action Btn ------- */

.settCtntSectAtnBdr .settCtntSectAtnBox
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.settCtntSectAtnBtn
{
    outline: none;
    border: none;
    background-color: #00000000;
    cursor: pointer;
}

.settCtntSectAtnIcon
{
    width: var(--settCtntSectAtnIconSize);
    height: var(--settCtntSectAtnIconSize);
}

.settCtntSectAtnIcon .settCtntSectAtnSvg
{
    width: 100%;
    height: 100%;
    fill: var(--genWhiteTypeLight);
}






/* =============== Manage Membership ========== */
.mng_mbsp_base .mng_mbsp_hdr_btm
{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.mng_mbsp_hdr_TtlTxt .mjr
{
    color: var(--genGreenTypeLight2);
}

.mng_mbsp_hdr_btm .mng_mbsp_hdr_billBox
{
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.mng_mbsp_hdr_billBox .mng_mbsp_hdr_billTxt
{
    color: var(--genWhiteTypeMid);
    font-size: 0.875rem;
    text-align: center;
}

.mng_mbsp_hdr_btm .mng_mbsp_hdr_atnBdr
{
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

.mng_mbsp_base .mng_mbsp_ctnt_box
{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 var(--genStatic_pd) var(--genStatic_pd);
}

.mng_mbsp_ctnt_box .mng_mbsp_card_bdr
{
    width: 100%;
    border-radius: 0.625rem;
    background-color: var(--genGreyTypeDark);
    margin-bottom: 1rem;
    padding: 0.875rem var(--genStatic_pd);
}

.mng_mbsp_card_bdr .mng_mbsp_card_box
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.mng_mbsp_card_box .mng_mbsp_card_icon_bdr
{
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: var(--genGreyTypeMid);
    margin-right: var(--genStatic_pd);
}

.mng_mbsp_card_icon_bdr .mng_mbsp_card_icon_box
{
    width: 75%;
    height: 75%;
}

.mng_mbsp_card_icon_box .mng_mbsp_card_icon_svg
{
    width: 100%;
    height: 100%;
    fill: var(--genGreenTypeMid);
}

.mng_mbsp_card_box .mng_mbsp_card_desc_bdr
{
    width: -moz-fit-content;
    width: fit-content;
}

.mng_mbsp_card_desc_bdr .mng_mbsp_card_desc_box
{
    display: flex;
    flex-direction: column;
}

.mng_mbsp_card_desc_box .mng_mbsp_card_desc_mjr_box
{
    width: 100%;
}

.mng_mbsp_card_desc_mjr_box .mng_mbsp_card_desc_mjr_txt
{
    color: var(--genWhiteTypeDark);
    font-size: 0.75rem;
}

.mng_mbsp_card_desc_box .mng_mbsp_card_desc_mnr_box
{
    width: 100%;
}

.mng_mbsp_card_desc_mnr_box .mng_mbsp_card_desc_mnr_txt
{
    color: var(--genWhiteTypeMid2);
    font-size: 0.875rem;
}






/* ============== Billing History ============= */
.bill_hist_ctnt_box
{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.bill_hist_ctnt_box .bill_hist_card_bdr
{
    position: relative;
    width: 100%;
    margin-bottom: 2rem;
}

.bill_hist_card_bdr::after
{
    content: '';
    position: absolute;
    bottom: -1rem;
    left: 0%;
    width: 100%;
    height: 0.0625rem;
    border-radius: .625rem;
    background-color: var(--genGreyTypeMid);
    pointer-events: none;
}

.bill_hist_card_bdr:last-child:after
{
    content: none;
    display: none;
}

.bill_hist_card_bdr .bill_hist_card_box
{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 var(--genStatic_pd);
}

.bill_hist_card_box .bill_hist_card_pymt_bdr
{
    width: 100%;
}

.bill_hist_card_pymt_bdr .bill_hist_card_pymt_box
{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: .3125rem;
}

.bill_hist_card_pymt_box .bill_hist_card_pymt_price_box
{
    width: -moz-fit-content;
    width: fit-content;
}

.bill_hist_card_pymt_price_box .bill_hist_card_pymt_price_txt
{
    color: var(--genWhiteTypeLight);
    font-size: 1.0625rem;
}

.bill_hist_card_pymt_box .bill_hist_card_pymt_status_box
{
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.bill_hist_card_pymt_status_box::before
{
    content: '';
    position: absolute;
    left: -0.3125rem;
    border-radius: 50%;
    border: 0.3125rem solid var(--genWhiteTypeMid);
    transform: translateX(-100%);
    pointer-events: none;
}

.bill_hist_card_pymt_status_box[data-pymt-status="true"]::before
{
    border-color: var(--genGreenTypeLight);
}

.bill_hist_card_pymt_status_box[data-pymt-status="false"]::before
{
    border-color: var(--warningClr);
}

.bill_hist_card_pymt_status_box .bill_hist_card_pymt_status_txt
{
    color: var(--genWhiteTypeMid);
    font-size: 0.875rem;
}

.bill_hist_card_box .bill_hist_card_name_box
{
    width: 100%;
}

.bill_hist_card_name_box .bill_hist_card_name_txt
{
    color: var(--genGreenTypeLight2);
    font-size: .9375rem;
    font-weight: 600;
}

.bill_hist_card_box .bill_hist_card_det_bdr
{
    width: 100%;
    margin-top: 0.875rem;
}

.bill_hist_card_det_bdr .bill_hist_card_det_box
{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.bill_hist_card_det_box .bill_hist_card_issue_ttl_box
{
    width: -moz-fit-content;
    width: fit-content;
}

.bill_hist_card_issue_ttl_box .bill_hist_card_issue_ttl_txt
{
    color: var(--genWhiteTypeMid);
    font-size: 0.875rem;
}

.bill_hist_card_det_box .bill_hist_card_issue_date_box
{
    width: -moz-fit-content;
    width: fit-content;
}

.bill_hist_card_issue_date_box .bill_hist_card_issue_date_txt
{
    color: var(--genWhiteTypeLight);
    font-size: 0.875rem;
}






/* ============== PAYMENT OPTIONS ============= */

.pymt_mtds_hdr_atnBdr
{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: end;
}

.pymt_mtds_ctnt_box
{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--myListCLCatalogItemWidth), 1fr));
    grid-template-rows: auto;
    justify-items: center;
    gap: 0.9375rem;
    padding: 0 var(--genStatic_pd);
}

.pymt_mtds_ctnt_box .pymt_card_bdr
{
    width: 100%;
    max-width: 21.875rem;
    max-height: 12.5rem;
    margin-bottom: 1.25rem;
    aspect-ratio: 16/9;
    border-radius: 0.625rem;
    border: 0.0625rem solid var(--genGreyTypeMid);
    overflow: hidden;
}

.pymt_card_bdr[data-pymt-card-default="true"]
{
    box-shadow: 0rem 0rem 0rem 0.125rem var(--genGreenTypeMid);
}

.pymt_card_bdr .pymt_card_box
{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}


.pymt_card_box .pymt_card_det_bdr
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 7;
}

.pymt_card_det_bdr .pymt_card_det_box
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pymt_card_det_box .pymt_card_det_name_box
{
    width: 100%;
    padding: 0.625rem 2.8125rem 0.625rem 0.625rem;
}

.pymt_card_det_name_box .pymt_card_det_name_txt
{
    --pymt_card_det_name_txtNo: 1;
    --pymt_card_det_name_txtH: 1.4;
    position: relative;
    -webkit-line-clamp: var(--pymt_card_det_name_txtNo);
    -webkit-box-orient: vertical;
    line-clamp:  var(--pymt_card_det_name_txtNo);
    display: -webkit-box;
    max-height: calc(var(--pymt_card_det_name_txtNo) * 1em * var(--pymt_card_det_name_txtH));
    line-height: var(--pymt_card_det_name_txtH);
    -webkit-hyphens: auto;
    hyphens: auto;
    color: var(--genWhiteTypeLight);
    font-size: 0.875rem;
    overflow-wrap: break-word;
    overflow: hidden;
}

.pymt_card_det_box .pymt_card_det_info_box
{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: flex-end;
    padding: 0.75rem;
}

.pymt_card_det_info_box .pymt_card_det_info_txt
{
    font-size: 0.875rem;
}

.pymt_card_det_info_txt .num_trim
{
    color: var(--genWhiteTypeLight);
}

.pymt_card_det_info_txt .num_exp
{
    color: var(--genGreenTypeLight);
}



.pymt_card_box .pymt_card_base_icon_bdr
{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3.125rem;
    height: 3.125rem;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 5;
}

.pymt_card_base_icon_bdr .pymt_card_base_icon_box
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 0.0625rem solid var(--genGreenTypeMid2);
    background-color: var(--genGreyTypeLight);
}

.pymt_card_base_icon_box .pymt_card_base_icon_svg
{
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--genWhiteTypeLight);
}


.pymt_card_box .pymt_card_sqr_bdr
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--settPymtLyrTopBcg);
    pointer-events: none;
    z-index: 1;
}

.pymt_card_sqr_bdr .pymt_card_sqr_box
{
    width: 50%;
    height: 100%;
    background-color: var(--genGreyTypeMid);
}


.pymt_card_box .pymt_card_crv_elem
{
    --bdr_rad: 70%;
    position: absolute;
    pointer-events: none;
    z-index: 3;
}

.pymt_card_crv_elem.pymt_card_crv_top
{
    top: 0;
    left: 0;
    width: 50%;
    height: 50%;
    border-bottom-left-radius: var(--bdr_rad);
    background-color: var(--settPymtLyrTopBcg);
}

.pymt_card_crv_elem.pymt_card_crv_btm
{
    right: 0;
    bottom: 0;
    width: 50%;
    height: 50%;
    border-top-right-radius: var(--bdr_rad);
    background-color: var(--settPymtLyrBtmBcg);
}


.pymt_card_box .pymt_card_atn_bdr
{
    position: absolute;
    top: 0;
    right: 0;
    width: -moz-fit-content;
    width: fit-content;
    z-index: 9;
}

.pymt_card_atn_bdr .pymt_card_atn_box
{
    width: 100%;
}


/* --------- Add New Payment Method --------- */
.add_pymt_mtd_base
{
    background-color: #000000c3;
}


.add_pymt_mtd_base .add_pymt_mtd_bcg
{
    background-image: none;
    -webkit-backdrop-filter: blur(0.625rem);
    backdrop-filter: blur(0.625rem);
}






/* =============== Notification Preferences ========== */
.mngNtfyTtlBox
{
    width: calc((100% - 2.8125rem));
}

.mngNtfyTtlBox .mngNtfyTtlText
{
    color: var(--genWhiteTypeLight);
    font-size: 1rem;
}








/* ============ PROFILE MANAGEMENT ============ */

.sett_ctnt_vrtl:has(+ .sett_ctnt_hrtl .sett_prof_card_bdr)
{
    margin-bottom: 2rem;
}

.sett_ctnt_hrtl:has( .sett_prof_card_bdr):not(:last-child)
{
    margin-bottom: 1rem;
}

.sett_prof_card_bdr
{
    max-width: 75%;
}

.sett_prof_card_bdr .sett_prof_card_box
{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.sett_prof_card_box .sett_prof_card_img_bdr
{
    width: var(--sett_prof_card_img_size);
    height: var(--sett_prof_card_img_size);
    box-shadow: 0rem 0rem 0rem 0.125rem var(--genGreenTypeMid2);
    border-radius: 50%;
    overflow: hidden;
}

.sett_prof_card_img_bdr .sett_prof_card_img_box
{
    width: 100%;
    height: 100%;
}

.sett_prof_card_img_box .sett_prof_card_img_src
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.sett_prof_card_box .sett_prof_card_ttl_box
{
    width: calc((100% - var(--sett_prof_card_img_size)));
    padding-left: 0.75rem;
}

.sett_prof_card_ttl_box .sett_prof_card_ttl_txt
{
    color: var(--genWhiteTypeLight);
    font-size: 1rem;
    text-align: left;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
}


/* ------- Profile Managemnet Modal ------- */

.mng_prof_hdr_TtlTxt .mjr
{
    color: var(--genGreenTypeLight);
}

.mng_prof_hdr_btm
{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 0.5rem;
}

.mng_profs_ctnt_box
{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0.5rem var(--genStatic_pd);
}

.mng_profs_ctnt_box .mng_prof_card_bdr
{
    width: 100%;
    margin-bottom: 1.25rem;
}

.mng_prof_card_bdr .mng_prof_card_box
{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.mng_prof_card_box .mng_prof_card_det_bdr
{
    width: -moz-fit-content;
    width: fit-content;
    max-width: 70%;
}

.mng_prof_card_det_bdr .mng_prof_card_det_box
{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.mng_prof_card_det_box .mng_prof_card_det_ttl_box
{
    width: -moz-fit-content;
    width: fit-content;
    margin-bottom: 0.5rem;
}

.mng_prof_card_det_ttl_box .mng_prof_card_det_ttl_txt
{
    color: var(--genGreenTypeMid);
    font-size: 0.875rem;
}

.mng_prof_card_det_box .mng_prof_card_det_desc_box
{
    width: -moz-fit-content;
    width: fit-content;
}

.mng_prof_card_det_desc_box .mng_prof_card_det_desc_txt
{
    color: var(--genWhiteTypeMid);
    font-size: 0.875rem;
}

.mng_prof_card_atn_box .genBtnBox
{
    max-width: 9.375rem;
}

.mng_prof_card_atn_box .genBtnBox .genBtnText
{
    --lineNo: 1;
    --lineHeight: 1.4;
    position: relative;
    max-width: calc((100% - var(--genBtnIconSize)));
    display: -webkit-box;
    max-height: calc(var(--lineNo) * 1em * var(--lineHeight));
    line-height: var(--lineHeight);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lineNo);
    line-clamp: var(--lineNo);
    -webkit-hyphens: auto;
    hyphens: auto;
    text-align: left;
    overflow-wrap: break-word;
    overflow: hidden;
}


/* -------------- Profile Lock Settings -------------- */
.mng_prof_lock_toggle_bdr
{
    width: 100%;
    margin-bottom: 1.125rem;
}

.mng_prof_lock_toggle_bdr .mng_prof_lock_toggle_box
{
    width: 80%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.mng_prof_lock_toggle_box .mng_prof_lock_toggle_det_box
{
    max-width: calc((100% - var(--genTick_chkBaseW)));
    cursor: pointer;
}

.mng_prof_lock_toggle_det_box .mng_prof_lock_toggle_det_txt
{
    color: var(--genWhiteTypeMid);
    font-size: 0.875rem;
}















@media(hover: hover)
{
    .settingNavOptBox:hover
    {
        background-color: #ffffff15;
    }
}








@media only screen and (max-width: 64rem)
{
    html:root
    {
        --settCtntSectAtnIconSize: 1.875rem;
    }

    .settingBox .settCtntBdr
    {
        width: 100%;
    }

    .settCtntBdr .settCtntBox
    {
        gap: 0rem;
    }

    .settCtntBox .settCtntTab
    {
        padding-top: calc((4rem + 1.25rem));
    }

    .settCtntTitleBox .settCtntTitleText
    {
        color: var(--genWhiteTypeLight);
        font-size: 1.375rem;
    }

    .settCtntSectTitleBox .settCtntSectTitleText
    {
        font-size: 1rem;
    }
    
    .settCtntSectDescBox .settCtntSectDescText
    {
        font-size: 0.875rem;
    }

}



@media only screen and (max-width: 48rem)
{
    .mng_mbsp_base .mng_mbsp_hdr_btm
    {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
}



@media only screen and (max-width: 30.3125rem)
{
    html:root
    {
        --settCtntSectAtnIconSize: 1.625rem;
    }

    .settCtntTitleBox .settCtntTitleText
    {
        color: var(--genWhiteTypeLight);
        font-size: 1.125rem;
    }

    .settCtntTab .settCtntSectBdr
    {
        padding: 1.5625rem 0;
    }

    .settCtntSectBdr .settCtntSectBox
    {
        padding: 0 1.5625rem;
    }

    .settCtntSectTitleBox .settCtntSectTitleText
    {
        font-size: 1rem;
    }
    
    .settCtntSectDescBox .settCtntSectDescText
    {
        font-size: 0.875rem;
    }

}