/* =====================================
   BONDOK LUXURY PROFILE
===================================== */

.profile-page{
    min-height:100vh;

    padding:125px 6% 80px;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(201,162,39,.055),
            transparent 35%
        ),
        #0B0B0B;
}


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

.profile-header{
    width:100%;
    max-width:900px;

    margin:0 auto 50px;

    text-align:center;
}

.profile-header > span{
    display:block;

    margin-bottom:12px;

    color:#C9A227;

    font-family:'Cinzel',serif;

    font-size:12px;

    letter-spacing:4px;
}

.profile-header h1{
    margin:0 0 12px;

    color:#fff;

    font-family:'Cinzel',serif;

    font-size:42px;

    font-weight:500;

    letter-spacing:2px;
}

.profile-header p{
    margin:0;

    color:#858585;

    font-family:'Poppins',sans-serif;

    font-size:13px;
}


/* =====================================
   MAIN CONTAINER
===================================== */

.profile-container{
    width:100%;
    max-width:980px;

    margin:0 auto;

    display:flex;
    flex-direction:column;

    gap:20px;
}


/* =====================================
   ALL CARDS
===================================== */

.profile-card{
    width:100%;

    padding:34px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.015)
        );

    border:1px solid rgba(201,162,39,.14);

    box-shadow:
        0 25px 70px rgba(0,0,0,.28);
}


/* =====================================
   PROFILE OVERVIEW CARD
===================================== */

.profile-overview-card{
    padding:0;

    overflow:hidden;
}


/* =====================================
   PROFILE OVERVIEW
===================================== */

.profile-overview{

    width:100%;

    display:grid;

    grid-template-columns:150px minmax(0,1fr);

    column-gap:48px;

    row-gap:18px;

    align-items:start;

    padding:38px;
}


/* =====================================
   BRAND IMAGE
===================================== */

.profile-brand-mark{

    width:150px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    gap:11px;

    grid-column:1;

    grid-row:1 / span 2;
}

.profile-brand-image{

    width:135px;
    height:135px;

    flex:0 0 135px;

    position:relative;
}

.profile-brand-image img{

    display:block;

    width:135px;
    height:135px;

    object-fit:cover;

    border-radius:50%;

    border:1px solid #C9A227;

    background:#080808;

    box-shadow:
        0 0 0 6px rgba(201,162,39,.035),
        0 12px 35px rgba(0,0,0,.45);
}

.profile-brand-mark > span{

    color:#C9A227;

    font-family:'Cinzel',serif;

    font-size:10px;

    letter-spacing:3px;

    text-align:center;
}


/* =====================================
   ACCOUNT CONTENT
===================================== */

.profile-overview-content{

    width:100%;

    min-width:0;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    grid-column:2;

    grid-row:1;
}

.profile-overview-label{

    display:block;

    margin:0 0 8px;

    color:#C9A227;

    font-family:'Cinzel',serif;

    font-size:11px;

    line-height:1.2;

    letter-spacing:3px;
}

.profile-overview-content h2{

    width:100%;

    margin:0 0 8px;

    color:#fff;

    font-family:'Cinzel',serif;

    font-size:32px;

    font-weight:500;

    line-height:1.2;

    letter-spacing:1.5px;

    word-break:break-word;
}

.profile-overview-content > p{

    width:100%;

    margin:0 0 18px;

    color:#858585;

    font-family:'Poppins',sans-serif;

    font-size:13px;

    line-height:1.5;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}


/* =====================================
   ACCOUNT META
===================================== */

.profile-account-meta{

    width:auto;

    max-width:100%;

    display:flex;

    align-items:stretch;

    flex-wrap:nowrap;

    gap:8px;

    margin:0;
}

.profile-status,
.profile-member-since{

    min-height:42px;

    display:flex;

    align-items:center;

    gap:7px;

    padding:9px 12px;

    box-sizing:border-box;

    border:1px solid rgba(201,162,39,.18);

    background:rgba(255,255,255,.015);

    color:#999;

    font-family:'Poppins',sans-serif;

    font-size:10px;

    line-height:1.2;

    letter-spacing:.45px;

    white-space:nowrap;
}

.profile-status i{

    color:#7d9e61;

    font-size:7px;

    flex:0 0 auto;
}

.profile-member-since i{

    color:#C9A227;

    flex:0 0 auto;
}

.profile-member-since strong{

    color:#C9A227;

    font-weight:500;
}


/* =====================================
   MY ORDERS
   SAME ROW AS WELCOME BACK
===================================== */

.profile-my-orders-btn{

    grid-column:2;

    grid-row:1;

    width:270px;

    max-width:270px;

    min-height:58px;

    margin:0;

    padding:12px 16px;

    box-sizing:border-box;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    align-self:start;

    justify-self:end;

    text-decoration:none;

    background:
        linear-gradient(
            135deg,
            #9f7b16 0%,
            #C9A227 45%,
            #dfc04d 100%
        );

    border:1px solid rgba(228,198,90,.75);

    border-radius:8px;

    color:#080808;

    box-shadow:
        0 8px 22px rgba(201,162,39,.14),
        inset 0 1px 0 rgba(255,255,255,.28);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        filter .3s ease;
}

.profile-my-orders-btn span{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:2px;

    color:#080808;

    font-family:'Cinzel',serif;

    font-size:13px;

    font-weight:600;

    line-height:1.2;

    letter-spacing:1.8px;
}

.profile-my-orders-btn small{

    order:-1;

    margin:0;

    font-family:'Poppins',sans-serif;

    font-size:7px;

    font-weight:600;

    line-height:1;

    letter-spacing:2px;

    text-transform:uppercase;

    color:rgba(8,8,8,.58);
}

.profile-my-orders-btn i{

    width:34px;

    height:34px;

    flex:0 0 34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(8,8,8,.22);

    border-radius:50%;

    color:#080808;

    font-size:11px;

    transition:
        transform .3s ease,
        background .3s ease;
}

.profile-my-orders-btn:hover{

    transform:translateY(-2px);

    filter:brightness(1.05);

    box-shadow:
        0 12px 28px rgba(201,162,39,.22),
        inset 0 1px 0 rgba(255,255,255,.35);
}

.profile-my-orders-btn:hover i{

    transform:translateX(4px);

    background:rgba(8,8,8,.08);
}


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

.profile-section-title{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:24px;
}

.profile-section-title > i{

    width:42px;
    height:42px;

    flex:0 0 42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(201,162,39,.25);

    color:#C9A227;

    font-size:15px;
}

.profile-section-title span{

    display:block;

    margin-bottom:5px;

    color:#C9A227;

    font-family:'Cinzel',serif;

    font-size:11px;

    letter-spacing:2.5px;
}

.profile-section-title h2{

    margin:0;

    color:#fff;

    font-family:'Cinzel',serif;

    font-size:21px;

    font-weight:500;
}


/* =====================================
   FORM
===================================== */

.profile-form-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:18px;
}

.profile-field{

    display:flex;

    flex-direction:column;

    gap:8px;
}

.profile-field-full{

    grid-column:1 / -1;
}

.profile-field label{

    color:#aaa;

    font-family:'Poppins',sans-serif;

    font-size:12px;
}

.profile-field input,
.profile-field textarea{

    width:100%;

    padding:14px 16px;

    border:1px solid rgba(255,255,255,.09);

    outline:none;

    background:#101010;

    color:#fff;

    font-family:'Poppins',sans-serif;

    font-size:13px;

    transition:.3s ease;
}

.profile-field textarea{

    min-height:100px;

    resize:vertical;
}

.profile-field input:focus,
.profile-field textarea:focus{

    border-color:rgba(201,162,39,.55);

    box-shadow:
        0 0 0 2px rgba(201,162,39,.04);
}

.profile-field input[readonly]{

    color:#777;

    cursor:not-allowed;
}


/* =====================================
   ACTION CARD
===================================== */

.profile-actions-card{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    padding:23px 28px;

    border:1px solid rgba(201,162,39,.12);

    background:#0f0f0f;
}

.profile-actions-card > div span{

    display:block;

    margin-bottom:5px;

    color:#C9A227;

    font-family:'Cinzel',serif;

    font-size:11px;

    letter-spacing:2px;
}

.profile-actions-card p{

    margin:0;

    color:#777;

    font-size:12px;
}

.save-profile-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    min-width:175px;

    padding:13px 24px;

    border:1px solid #C9A227;

    background:#C9A227;

    color:#0B0B0B;

    font-family:'Poppins',sans-serif;

    font-size:12px;

    font-weight:600;

    letter-spacing:.5px;

    cursor:pointer;

    transition:.3s ease;
}

.save-profile-btn:hover{

    background:#e0ba35;

    transform:translateY(-2px);
}

.save-profile-btn:disabled{

    opacity:.6;

    cursor:not-allowed;

    transform:none;
}

.profile-message{

    min-height:15px;

    margin-top:-8px;

    text-align:right;

    color:#C9A227;

    font-size:12px;
}


/* =====================================
   ORDERS
===================================== */

.orders-profile-card{

    padding-bottom:28px;
}

.profile-orders{

    display:flex;

    flex-direction:column;

    gap:10px;
}

.profile-orders-loading{

    padding:28px;

    text-align:center;

    color:#777;

    font-size:12px;
}

.profile-order-item{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:17px 20px;

    background:#101010;

    border:1px solid rgba(255,255,255,.06);

    transition:.3s ease;
}

.profile-order-item:hover{

    border-color:rgba(201,162,39,.22);

    transform:translateY(-1px);
}

.profile-order-main{

    display:flex;

    flex-direction:column;

    gap:5px;
}

.profile-order-label{

    color:#C9A227;

    font-family:'Cinzel',serif;

    font-size:10px;

    letter-spacing:2px;
}

.profile-order-main strong{

    color:#fff;

    font-family:'Cinzel',serif;

    font-size:15px;

    letter-spacing:1px;
}

.profile-order-main small{

    color:#777;

    font-size:11px;
}

.profile-order-side{

    display:flex;

    align-items:center;

    gap:15px;
}

.profile-order-status{

    padding:6px 10px;

    border:1px solid rgba(201,162,39,.2);

    color:#C9A227;

    font-size:10px;

    text-transform:uppercase;

    letter-spacing:.7px;
}

.profile-order-side strong{

    color:#C9A227;

    font-size:13px;

    white-space:nowrap;
}


/* =====================================
   VIEW ALL ORDERS
   LUXURY BUTTON
===================================== */

.continue-shopping-btn{

    width:100%;

    min-height:58px;

    margin-top:14px;

    padding:13px 18px;

    box-sizing:border-box;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    text-decoration:none;

    background:
        linear-gradient(
            135deg,
            rgba(159,123,22,.10),
            rgba(201,162,39,.045)
        );

    border:1px solid rgba(201,162,39,.35);

    border-radius:8px;

    color:#C9A227;

    font-family:'Cinzel',serif;

    font-size:11px;

    font-weight:500;

    letter-spacing:2px;

    box-shadow:
        0 8px 24px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.025);

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease,
        color .3s ease;
}

.continue-shopping-btn i{

    width:32px;

    height:32px;

    flex:0 0 32px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(201,162,39,.35);

    border-radius:50%;

    color:#C9A227;

    font-size:10px;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}

.continue-shopping-btn:hover{

    transform:translateY(-2px);

    border-color:rgba(201,162,39,.7);

    background:
        linear-gradient(
            135deg,
            rgba(159,123,22,.18),
            rgba(201,162,39,.08)
        );

    color:#dfc04d;

    box-shadow:
        0 12px 30px rgba(201,162,39,.10),
        inset 0 1px 0 rgba(255,255,255,.04);
}

.continue-shopping-btn:hover i{

    transform:translateX(4px);

    background:rgba(201,162,39,.12);

    color:#dfc04d;
}


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

.profile-orders-empty{

    padding:32px 20px;

    text-align:center;
}

.profile-orders-empty i{

    display:block;

    margin-bottom:13px;

    color:#C9A227;

    font-size:24px;
}

.profile-orders-empty h3{

    color:#fff;

    font-family:'Cinzel',serif;

    font-size:17px;

    font-weight:500;

    margin-bottom:8px;
}

.profile-orders-empty p{

    margin:0 0 15px;

    color:#777;

    font-size:12px;
}

.profile-orders-empty a{

    color:#C9A227;

    font-size:12px;

    text-decoration:none;
}


/* =====================================
   TABLET
===================================== */

@media(max-width:800px){

    .profile-overview{

        grid-template-columns:125px minmax(0,1fr);

        column-gap:30px;

        padding:30px;
    }

    .profile-brand-mark{

        width:125px;
    }

    .profile-brand-image{

        width:115px;
        height:115px;

        flex-basis:115px;
    }

    .profile-brand-image img{

        width:115px;
        height:115px;
    }

    .profile-overview-content h2{

        font-size:28px;
    }

    .profile-account-meta{

        gap:7px;
    }

    .profile-status,
    .profile-member-since{

        font-size:9px;

        padding:8px 10px;
    }

    .profile-my-orders-btn{

        width:250px;

        max-width:250px;
    }
}


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

@media(max-width:700px){

    .profile-page{

        padding:115px 14px 55px;
    }

    .profile-header{

        margin-bottom:32px;
    }

    .profile-header > span{

        font-size:10px;
    }

    .profile-header h1{

        font-size:29px;
    }

    .profile-header p{

        font-size:11px;
    }

    .profile-container{

        max-width:100%;
    }

    .profile-card{

        padding:22px 18px;
    }


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

    .profile-overview{

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:20px;

        padding:28px 20px;

        text-align:center;
    }


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

    .profile-brand-mark{

        width:100%;

        display:flex;

        align-items:center;

        justify-content:center;

        grid-column:auto;

        grid-row:auto;
    }

    .profile-brand-image{

        width:105px;
        height:105px;

        flex:0 0 105px;

        margin:0 auto;
    }

    .profile-brand-image img{

        width:105px;
        height:105px;
    }


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

    .profile-overview-content{

        width:100%;

        align-items:center;

        grid-column:auto;

        grid-row:auto;
    }

    .profile-overview-label{

        font-size:10px;

        text-align:center;
    }

    .profile-overview-content h2{

        font-size:25px;

        text-align:center;
    }

    .profile-overview-content > p{

        font-size:11px;

        text-align:center;

        white-space:normal;

        overflow:visible;

        text-overflow:initial;
    }


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

    .profile-account-meta{

        width:100%;

        display:flex;

        flex-direction:column;

        align-items:stretch;

        gap:8px;
    }

    .profile-status,
    .profile-member-since{

        width:100%;

        min-height:40px;

        justify-content:center;

        font-size:10px;

        white-space:normal;
    }


    /* =================================
       MOBILE MY ORDERS
    ================================= */

    .profile-my-orders-btn{

        grid-column:auto;

        grid-row:auto;

        width:100%;

        max-width:320px;

        min-height:58px;

        margin:0 auto;

        padding:13px 16px;

        align-self:center;

        justify-self:center;
    }

    .profile-my-orders-btn span{

        font-size:13px;

        letter-spacing:1.5px;
    }

    .profile-my-orders-btn small{

        font-size:7px;

        letter-spacing:2px;
    }

    .profile-my-orders-btn i{

        width:36px;

        height:36px;

        flex-basis:36px;
    }


    /* =================================
       MOBILE VIEW ALL ORDERS
    ================================= */

    .continue-shopping-btn{

        min-height:56px;

        margin-top:12px;

        padding:12px 14px;

        font-size:10px;

        letter-spacing:1.5px;
    }

    .continue-shopping-btn i{

        width:30px;

        height:30px;

        flex-basis:30px;
    }


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

    .profile-form-grid{

        grid-template-columns:1fr;
    }

    .profile-field-full{

        grid-column:auto;
    }

    .profile-field label{

        font-size:11px;
    }

    .profile-field input,
    .profile-field textarea{

        font-size:12px;
    }


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

    .profile-actions-card{

        flex-direction:column;

        align-items:stretch;
    }

    .save-profile-btn{

        width:100%;
    }


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

    .profile-order-item{

        align-items:flex-start;

        flex-direction:column;
    }

    .profile-order-side{

        width:100%;

        justify-content:space-between;
    }
}


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

@media(max-width:450px){

    .profile-page{

        padding-left:10px;

        padding-right:10px;
    }

    .profile-header h1{

        font-size:26px;
    }

    .profile-section-title h2{

        font-size:18px;
    }

    .profile-section-title > i{

        width:37px;

        height:37px;

        flex-basis:37px;
    }

    .profile-overview-content h2{

        font-size:23px;
    }

    .profile-my-orders-btn{

        max-width:290px;
    }

    .continue-shopping-btn{

        min-height:54px;

        font-size:9px;

        letter-spacing:1.3px;
    }

}