/* =========================
   ACCOUNT PAGE
========================= */

.account-page{
    padding: 90px 0;
    background: #f6f7fb;
    min-height: 100vh;
}

/* =========================
   HERO
========================= */

.account-hero{
    position: relative;

    background:
    linear-gradient(
        135deg,
        #fff8ef,
        #fff4f7
    );

    border-radius: 22px;

    padding: 50px 30px;

    overflow: hidden;

    margin-bottom: 40px;

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

/* BORDER */

.account-hero::before{
    content: "";

    position: absolute;
    inset: 0;

    border-radius: 22px;

    padding: 2px;

    background:
    linear-gradient(
        90deg,
        #ff9f1a,
        #ff2d75
    );

    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    pointer-events: none;
}

/* DOTS */

.account-dot{
    position: absolute;
    border-radius: 50%;
}

.dot-one{
    width: 14px;
    height: 14px;
    background: #f0a020;

    top: 24px;
    right: 140px;
}

.dot-two{
    width: 10px;
    height: 10px;
    background: #d92d73;

    top: 40px;
    right: 120px;
}

.dot-three{
    width: 7px;
    height: 7px;
    background: #ff6b00;

    top: 18px;
    right: 100px;
}

/* CONTENT */

.account-content{
    text-align: center;
}

.account-content h1{
    font-size: 58px;
    font-weight: 700;
    color: #1e1a1a;

    margin-bottom: 16px;

    line-height: 1.1;
}

/* USER ROW */

.account-user-row{
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 16px;

    flex-wrap: wrap;
}

.account-user-row p{
    font-size: 22px;

    color: #333;

    margin: 0;
}

.account-user-row span{
    font-weight: 700;
    color: #111;
}

/* LOGOUT */

.logout-btn{
    color: #ff4d00;

    font-size: 16px;
    font-weight: 600;

    text-decoration: underline;

    transition: 0.3s;
}

.logout-btn:hover{
    color: #111;
}

/* =========================
   BODY
========================= */

.account-body{
    display: grid;

    grid-template-columns: 260px 1fr;

    gap: 24px;
}

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

.account-sidebar{
    background: #fff;

    border-radius: 18px;

    padding: 20px;

    height: fit-content;

    box-shadow:
    0 8px 25px rgba(0,0,0,0.05);
}

/* MENU */

.account-menu{
    display: flex;
    align-items: center;

    gap: 12px;

    text-decoration: none;

    padding: 14px 16px;

    border-radius: 12px;

    color: #444;

    font-size: 15px;
    font-weight: 600;

    margin-bottom: 10px;

    transition: 0.3s;
}

.account-menu i{
    font-size: 15px;
}

/* ACTIVE */

.account-menu.active,
.account-menu:hover{
    background:
    linear-gradient(
        90deg,
        #ff9f1a,
        #ff2d75
    );

    color: #fff;
}

/* =========================
   DETAILS CARD
========================= */

.account-details-card{
    background: #fff;

    border-radius: 20px;

    padding: 28px;

    box-shadow:
    0 8px 30px rgba(0,0,0,0.05);
}

/* TITLE */

.account-card-title{
    margin-bottom: 28px;
}

.account-card-title h3{
    font-size: 26px;

    font-weight: 700;

    color: #111;
}

/* GRID */

.account-form-grid{
    display: grid;

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

    gap: 20px;
}

/* INPUT */

.account-input-box label{
    display: block;

    font-size: 14px;
    font-weight: 600;

    margin-bottom: 10px;

    color: #444;
}

.account-input-box input{
    width: 100%;

    height: 52px;

    border: 1px solid #ddd;

    border-radius: 12px;

    padding: 0 16px;

    font-size: 14px;

    transition: 0.3s;
}

.account-input-box input:focus{
    border-color: #ff7a00;

    outline: none;
}

/* BUTTON */

.save-account-btn{
    margin-top: 28px;

    border: none;

    background:
    linear-gradient(
        90deg,
        #ff9f1a,
        #ff2d75
    );

    color: #fff;

    height: 52px;

    padding: 0 32px;

    border-radius: 12px;

    font-size: 15px;
    font-weight: 600;

    transition: 0.3s;
}

.save-account-btn:hover{
    transform: translateY(-3px);
}

/* =========================
   ACCOUNT METER
========================= */

.account-meter-section{
    margin: 40px 0;
}

.simple-meter-card{
    background: #fff;

    border-radius: 24px;

    padding: 35px 20px;

    box-shadow:
    0 8px 30px rgba(0,0,0,0.05);

    overflow: hidden;
}

/* GRAPH */

.meter-graph-wrap{
    position: relative;

    width: 340px;
    height: 200px;

    margin: auto;
}

/* SVG */

.meter-svg{
    width: 100%;
    height: 100%;
}

/* ARC */

.meter-bg{
    fill: none;

    stroke: #d8d8d8;

    stroke-width: 5;

    stroke-linecap: round;
}

.meter-progress{
    fill: none;

    stroke: #ff9800;

    stroke-width: 7;

    stroke-linecap: round;

    stroke-dasharray: 565;
    stroke-dashoffset: 565;

    transition: 1.2s ease;
}

.meter-progress2{
    fill: none;

    stroke: #ff3c78;

    stroke-width: 7;

    stroke-linecap: round;

    stroke-dasharray: 470;
    stroke-dashoffset: 470;

    transition: 1.2s ease;
}

/* DOTS */

.meter-dot{
    position: absolute;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    background:
    linear-gradient(
        135deg,
        #ffb300,
        #ff5e00
    );

    color: #fff;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 9px;

    bottom: 8px;
}

.dot-left{
    left: 35px;
}

.dot-right{
    left: 62px;
}

/* CENTER */

.meter-center-content{
    position: absolute;

    left: 50%;
    top: 55%;

    transform: translate(-50%,-50%);

    text-align: center;
}

.meter-line{
    width: 120px;
    height: 1px;

    background: #aaa;

    margin: 12px auto;
}

.meter-center-content p{
    font-size: 11px;

    color: #444;

    margin-bottom: 3px;

    text-transform: uppercase;

    letter-spacing: 1px;
}

.meter-center-content h3{
    font-size: 22px;

    font-weight: 700;

    margin: 0;
}

.meter-center-content span{
    color: #ff7a00;
}

/* =========================
   BOOKING HISTORY
========================= */

.booking-history-card{
    border: 1px solid #eee;

    border-radius: 16px;

    padding: 20px;

    margin-bottom: 18px;

    background: #fafafa;

    transition: 0.3s;
}

.booking-history-card:hover{
    transform: translateY(-3px);

    box-shadow:
    0 8px 20px rgba(0,0,0,0.06);
}

.booking-history-card h4{
    font-size: 20px;

    margin-bottom: 12px;

    color: #111;
}

.booking-history-card p{
    margin-bottom: 8px;

    color: #555;

    font-size: 14px;

    line-height: 1.7;
}

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

@media(max-width:991px){

    .account-page{
        padding: 70px 0;
    }

    .account-body{
        grid-template-columns: 1fr;
    }

    .account-content h1{
        font-size: 46px;
    }

    .account-user-row p{
        font-size: 20px;
    }

    .meter-graph-wrap{
        width: 300px;
        height: 180px;
    }

}

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

@media(max-width:576px){

    .account-page{
        padding: 55px 0;
    }

    .account-hero{
        padding: 40px 18px;

        border-radius: 18px;

        margin-bottom: 30px;
    }

    .account-content h1{
        font-size: 36px;
    }

    .account-user-row{
        gap: 10px;
    }

    .account-user-row p{
        font-size: 16px;
    }

    .logout-btn{
        font-size: 14px;
    }

    .account-sidebar{
        padding: 16px;
    }

    .account-menu{
        padding: 12px 14px;

        font-size: 14px;
    }

    .account-details-card{
        padding: 20px;

        border-radius: 16px;
    }

    .account-card-title{
        margin-bottom: 20px;
    }

    .account-card-title h3{
        font-size: 22px;
    }

    .account-form-grid{
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .account-input-box label{
        font-size: 13px;
    }

    .account-input-box input{
        height: 48px;

        font-size: 13px;
    }

    .save-account-btn{
        width: 100%;

        height: 48px;

        font-size: 14px;
    }

    .simple-meter-card{
        padding: 24px 14px;
    }

    .meter-graph-wrap{
        width: 100%;
        max-width: 280px;
        height: 170px;
    }

    .meter-center-content h3{
        font-size: 18px;
    }

    .meter-center-content p{
        font-size: 10px;
    }

    .meter-line{
        width: 90px;
    }

    .booking-history-card{
        padding: 16px;
    }

    .booking-history-card h4{
        font-size: 18px;
    }

    .booking-history-card p{
        font-size: 13px;
    }

}






/* =========================
   ACCOUNT LOGIN
========================= */

.account-login-page{
    padding:100px 0;
    background:#f5f7fb;
}

.account-login-box{
    display:grid;
    grid-template-columns:1fr 1fr;
    background:#fff;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,0.08);
}

.account-login-left{
    position:relative;
    padding:60px;
    background:#000;
    color:#fff;
}

.account-login-left img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0.35;
}

.account-login-left span,
.account-login-left h2,
.account-login-left p{
    position:relative;
    z-index:2;
}

.account-login-left h2{
    font-size:52px;
    font-weight:700;
    margin:20px 0;
}

.account-login-right{
    padding:70px;
}

.account-login-right h3{
    font-size:38px;
    font-weight:700;
    margin-bottom:35px;
}

.login-input-box{
    margin-bottom:25px;
}

.login-input-box label{
    display:block;
    margin-bottom:10px;
    font-weight:600;
}

.login-input-box input{
    width:100%;
    height:60px;
    border:1px solid #ddd;
    border-radius:14px;
    padding:0 20px;
}

.account-login-btn{
    width:100%;
    height:60px;
    border:none;
    border-radius:14px;
    background:#0095d9;
    color:#fff;
    font-size:18px;
    font-weight:600;
}

@media(max-width:991px){

    .account-login-box{
        grid-template-columns:1fr;
    }

    .account-login-right,
    .account-login-left{
        padding:40px 25px;
    }

}