/* ===== PAGE WRAPPER ===== */

.page-content{
    background:#f5f7ff;
    padding:40px;
    font-family:'Poppins',sans-serif;
}

/* TITLE */
.page-content h1{
    font-size:32px;
    margin-bottom:20px;
    font-weight:700;
}

/* ===== LAYOUT ===== */

.woocommerce-account .woocommerce{
    display:flex;
    align-items:flex-start;
    gap:5px;
}

/* ===== SIDEBAR ===== */

.woocommerce-MyAccount-navigation{
    width:260px;
    background:#fff;
    border-radius:18px;
    padding:20px;

    box-shadow:0 10px 30px rgba(0,0,0,0.06);
    position:sticky;
    top:20px;
}

.woocommerce-MyAccount-navigation ul{
    list-style:none;
    padding:0;
    margin:0;
}

.woocommerce-MyAccount-navigation li{
    margin-bottom:10px;
}

.woocommerce-MyAccount-navigation a{
    display:block;
    padding:12px 14px;
    border-radius:12px;
    text-decoration:none;
    color:#333;
    font-weight:500;
    transition:0.2s;
}

/* hover */
.woocommerce-MyAccount-navigation a:hover{
    background:#eafff1;
    color:#00c853;
}

/* active */
.woocommerce-MyAccount-navigation .is-active a{
    background:linear-gradient(135deg,#00c853,#3AE000);
    color:white;
}

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

.woocommerce-MyAccount-content{
    flex:1;
    background:#fff;
    border-radius:18px;
    padding:30px;

    box-shadow:0 10px 30px rgba(0,0,0,0.06);
}

/* GREETING CARD */
.woocommerce-MyAccount-content > p:first-child{
    font-size:18px;
    padding:16px;
    background:#f8fff9;
    border-left:4px solid #00c853;
    border-radius:12px;
}

/* highlight username */
.woocommerce-MyAccount-content strong{
    color:#00c853;
}

/* DESCRIPTION CARD */
.woocommerce-MyAccount-content > p:nth-child(2){
    margin-top:15px;
    padding:16px;
    background:#f5f7ff;
    border-radius:12px;
    line-height:1.6;
}

/* links */
.woocommerce-MyAccount-content a{
    color:#00c853;
    font-weight:600;
}

/* ===== HOVER EFFECTS ===== */

.woocommerce-MyAccount-navigation a,
.woocommerce-MyAccount-content{
    transition:all 0.25s ease;
}

/* ===== RESPONSIVE ===== */

@media(max-width:900px){

    .woocommerce{
        flex-direction:column;
    }

    .woocommerce-MyAccount-navigation{
        width:100%;
        position:relative;
    }
}