/* =========================================================
   Water Can Management System
   File: css/client.css
   Part: 1
   Client Dashboard Layout
========================================================= */

/* ===============================
   CLIENT WRAPPER
================================ */

.client-wrapper{
    display:flex;
    flex-direction:column;
    min-height:100vh;
}

/* ===============================
   TOP NAVBAR
================================ */

.client-navbar{

    position:sticky;
    top:0;
    z-index:100;

    height:72px;

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

    padding:0 24px;

    background:rgba(10,20,35,.88);

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.08);

}

.client-logo{

    display:flex;
    align-items:center;
    gap:12px;

    font-size:1.3rem;
    font-weight:700;
    color:#fff;

}

.client-logo i{

    color:var(--primary);
    font-size:1.6rem;

}

.client-nav-right{

    display:flex;
    align-items:center;
    gap:16px;

}

.client-avatar{

    width:44px;
    height:44px;

    border-radius:50%;
    object-fit:cover;

    border:2px solid rgba(255,255,255,.15);

}

.client-user{

    display:flex;
    align-items:center;
    gap:12px;

}

.client-user-info h4{

    font-size:.9rem;

}

.client-user-info span{

    font-size:.78rem;
    color:var(--text-muted);

}

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

.client-page{

    flex:1;

    padding:28px;

}

.client-header{

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

    flex-wrap:wrap;

    gap:20px;

    margin-bottom:30px;

}

.client-header h2{

    font-size:1.8rem;
    font-weight:800;

}

.client-header p{

    color:var(--text-muted);

}

/* ===============================
   DASHBOARD GRID
================================ */

.client-dashboard{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:24px;

}

/* ===============================
   SUMMARY CARD
================================ */

.summary-card{

    position:relative;

    overflow:hidden;

    padding:24px;

    border-radius:22px;

    background:var(--glass);

    backdrop-filter:blur(18px);

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

    transition:.3s;

}

.summary-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-lg);

}

.summary-card::after{

    content:"";

    position:absolute;

    width:140px;
    height:140px;

    right:-45px;
    top:-45px;

    border-radius:50%;

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

}

.summary-icon{

    width:58px;
    height:58px;

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

    border-radius:18px;

    background:rgba(59,130,246,.14);

    color:var(--primary);

    font-size:1.4rem;

    margin-bottom:18px;

}

.summary-title{

    color:var(--text-muted);

    font-size:.9rem;

}

.summary-value{

    font-size:2rem;

    font-weight:800;

    margin:10px 0;

}

.summary-desc{

    color:var(--text-muted);

    font-size:.82rem;

}

/* ===============================
   QUICK ACTIONS
================================ */

.client-actions{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(180px,1fr));

    gap:20px;

    margin-top:30px;

}

.action-card{

    text-align:center;

    padding:26px;

    border-radius:20px;

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

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

    cursor:pointer;

    transition:.3s;

}

.action-card:hover{

    background:rgba(59,130,246,.12);

    transform:translateY(-6px);

}

.action-card i{

    font-size:2rem;

    color:var(--primary);

    margin-bottom:16px;

}

.action-card h4{

    margin-bottom:8px;

}

.action-card p{

    color:var(--text-muted);

    font-size:.84rem;

}

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

.client-profile{

    display:flex;

    align-items:center;

    gap:20px;

    padding:24px;

    border-radius:22px;

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

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

    margin-top:30px;

}

.client-profile img{

    width:90px;
    height:90px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid rgba(59,130,246,.2);

}

.profile-details{

    flex:1;

}

.profile-details h3{

    margin-bottom:8px;

}

.profile-details p{

    color:var(--text-muted);

}

.profile-meta{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-top:15px;

}

.profile-meta span{

    display:flex;

    align-items:center;

    gap:8px;

    color:var(--text-light);

    font-size:.86rem;

}

/* ===============================
   DELIVERY STATUS
================================ */

.delivery-status{

    margin-top:30px;

    padding:24px;

    border-radius:22px;

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

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

}

.delivery-status-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:24px;

}

.delivery-status h3{

    font-size:1.15rem;

}

.delivery-progress{

    margin-top:20px;

}

.delivery-info{

    display:flex;

    justify-content:space-between;

    margin-bottom:12px;

    color:var(--text-muted);

}

/* ===============================
   END OF PART 1
================================ */


/* =========================================================
   Water Can Management System
   File: css/client.css
   Part: 2
   Orders • Billing • Payments • Wallet • Transactions
========================================================= */


/* =========================================================
   ORDER HISTORY
========================================================= */

.order-history{

    margin-top:30px;

}

.order-history-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:20px;

}

.order-table-wrapper{

    overflow-x:auto;

    border-radius:22px;

}

.order-table{

    width:100%;

    min-width:850px;

    border-collapse:collapse;

}

.order-table thead{

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

}

.order-table th{

    padding:16px;

    text-align:left;

    font-size:.88rem;

    font-weight:700;

    color:#fff;

}

.order-table td{

    padding:16px;

    border-top:1px solid rgba(255,255,255,.08);

    color:var(--text-light);

}

.order-table tbody tr{

    transition:.25s;

}

.order-table tbody tr:hover{

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

}


/* =========================================================
   ORDER STATUS
========================================================= */

.order-status{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:7px 14px;

    border-radius:50px;

    font-size:.75rem;

    font-weight:700;

}

.status-delivered{

    background:rgba(34,197,94,.15);

    color:var(--success);

}

.status-processing{

    background:rgba(59,130,246,.15);

    color:var(--primary);

}

.status-pending{

    background:rgba(245,158,11,.15);

    color:var(--warning);

}

.status-cancelled{

    background:rgba(239,68,68,.15);

    color:var(--danger);

}


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

.billing-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:24px;

    margin-top:30px;

}

.bill-card{

    padding:24px;

    border-radius:22px;

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

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

    transition:.3s;

}

.bill-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-lg);

}

.bill-label{

    color:var(--text-muted);

    font-size:.9rem;

}

.bill-amount{

    font-size:2rem;

    font-weight:800;

    margin:12px 0;

}

.bill-date{

    color:var(--text-muted);

    font-size:.82rem;

}


/* =========================================================
   PAYMENT CARD
========================================================= */

.payment-card{

    margin-top:30px;

    padding:28px;

    border-radius:22px;

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

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

}

.payment-card h3{

    margin-bottom:20px;

}

.payment-options{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:18px;

    margin-bottom:25px;

}

.payment-option{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px;

    border-radius:18px;

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

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

    cursor:pointer;

    transition:.25s;

}

.payment-option:hover{

    border-color:var(--primary);

    background:rgba(59,130,246,.08);

}

.payment-option.active{

    border-color:var(--primary);

    background:rgba(59,130,246,.14);

}

.payment-option i{

    font-size:1.5rem;

    color:var(--primary);

}


/* =========================================================
   PAYMENT SUMMARY
========================================================= */

.payment-summary{

    padding:22px;

    border-radius:18px;

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

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

}

.summary-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 0;

}

.summary-row.total{

    margin-top:12px;

    padding-top:16px;

    border-top:1px solid rgba(255,255,255,.08);

    font-size:1.1rem;

    font-weight:700;

}


/* =========================================================
   WALLET
========================================================= */

.wallet-card{

    margin-top:30px;

    position:relative;

    overflow:hidden;

    padding:28px;

    border-radius:24px;

    background:linear-gradient(
        135deg,
        #2563eb,
        #0f172a
    );

    color:#fff;

}

.wallet-card::after{

    content:"";

    position:absolute;

    right:-40px;

    top:-40px;

    width:180px;
    height:180px;

    border-radius:50%;

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

}

.wallet-label{

    font-size:.9rem;

    opacity:.8;

}

.wallet-balance{

    font-size:2.4rem;

    font-weight:800;

    margin:18px 0;

}

.wallet-number{

    letter-spacing:3px;

    font-size:1rem;

    opacity:.9;

}


/* =========================================================
   TRANSACTION HISTORY
========================================================= */

.transaction-history{

    margin-top:30px;

}

.transaction-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:18px;

    border-radius:18px;

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

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

    margin-bottom:15px;

    transition:.25s;

}

.transaction-item:hover{

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

}

.transaction-left{

    display:flex;

    align-items:center;

    gap:15px;

}

.transaction-icon{

    width:52px;
    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:rgba(59,130,246,.15);

    color:var(--primary);

    font-size:1.2rem;

}

.transaction-title{

    font-weight:600;

}

.transaction-date{

    color:var(--text-muted);

    font-size:.82rem;

}

.transaction-right{

    text-align:right;

}

.transaction-price{

    font-size:1rem;

    font-weight:700;

}

.credit{

    color:var(--success);

}

.debit{

    color:var(--danger);

}


/* =========================================================
   SEARCH & FILTER
========================================================= */

.client-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:16px;

    margin-bottom:22px;

}

.client-toolbar-left,
.client-toolbar-right{

    display:flex;

    align-items:center;

    gap:14px;

    flex-wrap:wrap;

}

.client-toolbar input,
.client-toolbar select{

    min-width:180px;

}


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

.client-empty{

    text-align:center;

    padding:70px 20px;

}

.client-empty i{

    font-size:4rem;

    color:var(--primary);

    margin-bottom:18px;

}

.client-empty h3{

    margin-bottom:10px;

}

.client-empty p{

    color:var(--text-muted);

}


/* =========================================================
   END OF PART 2
========================================================= */
/* =========================================================
   Water Can Management System
   File: css/client.css
   Part: 3
   Delivery Timeline • Notifications • Settings • Support
   Responsive • End of File
========================================================= */


/* =========================================================
   DELIVERY TIMELINE
========================================================= */

.delivery-timeline{

    position:relative;

    margin-top:30px;

    padding-left:30px;

}

.delivery-timeline::before{

    content:"";

    position:absolute;

    left:9px;
    top:0;
    bottom:0;

    width:2px;

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

}

.timeline-item{

    position:relative;

    padding-bottom:28px;

}

.timeline-item:last-child{

    padding-bottom:0;

}

.timeline-item::before{

    content:"";

    position:absolute;

    left:-28px;
    top:4px;

    width:18px;
    height:18px;

    border-radius:50%;

    background:var(--primary);

    border:4px solid #08121f;

}

.timeline-item.completed::before{

    background:var(--success);

}

.timeline-item.pending::before{

    background:var(--warning);

}

.timeline-item.cancelled::before{

    background:var(--danger);

}

.timeline-item h4{

    margin-bottom:6px;

    color:#fff;

}

.timeline-item p{

    color:var(--text-muted);

    font-size:.86rem;

}

.timeline-time{

    margin-top:6px;

    font-size:.78rem;

    color:var(--text-muted);

}


/* =========================================================
   ADDRESS CARD
========================================================= */

.address-card{

    margin-top:30px;

    padding:24px;

    border-radius:22px;

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

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

}

.address-card h3{

    margin-bottom:18px;

}

.address-item{

    display:flex;

    align-items:flex-start;

    gap:16px;

}

.address-item i{

    width:50px;
    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:rgba(59,130,246,.15);

    color:var(--primary);

    font-size:1.2rem;

}


/* =========================================================
   NOTIFICATIONS
========================================================= */

.client-notifications{

    margin-top:30px;

}

.notification-card{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:18px;

    margin-bottom:16px;

    border-radius:18px;

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

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

    transition:.25s;

}

.notification-card:hover{

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

}

.notification-icon{

    width:50px;
    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    background:rgba(59,130,246,.15);

    color:var(--primary);

    flex-shrink:0;

}

.notification-body{

    flex:1;

}

.notification-body h4{

    margin-bottom:6px;

}

.notification-body p{

    color:var(--text-muted);

    font-size:.86rem;

}

.notification-date{

    margin-top:8px;

    font-size:.78rem;

    color:var(--text-muted);

}


/* =========================================================
   SUPPORT CARD
========================================================= */

.support-card{

    margin-top:30px;

    padding:28px;

    border-radius:22px;

    text-align:center;

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

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

}

.support-card i{

    font-size:3rem;

    color:var(--primary);

    margin-bottom:20px;

}

.support-card h3{

    margin-bottom:10px;

}

.support-card p{

    color:var(--text-muted);

    max-width:500px;

    margin:0 auto 25px;

}


/* =========================================================
   SETTINGS
========================================================= */

.client-settings{

    margin-top:30px;

}

.settings-section{

    padding:26px;

    border-radius:22px;

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

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

    margin-bottom:24px;

}

.settings-section h3{

    margin-bottom:20px;

}

.setting-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:16px 0;

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

}

.setting-row:last-child{

    border-bottom:none;

}

.setting-title{

    font-weight:600;

}

.setting-description{

    color:var(--text-muted);

    font-size:.84rem;

    margin-top:4px;

}


/* =========================================================
   FAQ
========================================================= */

.faq{

    margin-top:30px;

}

.faq-item{

    margin-bottom:18px;

    border-radius:18px;

    overflow:hidden;

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

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

}

.faq-question{

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    padding:18px 20px;

    font-weight:600;

}

.faq-answer{

    padding:0 20px 20px;

    color:var(--text-muted);

    line-height:1.7;

}


/* =========================================================
   PROFILE STATS
========================================================= */

.profile-stats{

    display:grid;

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

    gap:20px;

    margin-top:30px;

}

.profile-stat{

    text-align:center;

    padding:22px;

    border-radius:20px;

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

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

}

.profile-stat h2{

    font-size:2rem;

    margin-bottom:8px;

}

.profile-stat span{

    color:var(--text-muted);

}


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

@media (max-width:992px){

    .billing-grid{

        grid-template-columns:1fr 1fr;

    }

    .profile-stats{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

    .client-page{

        padding:20px;

    }

    .client-navbar{

        padding:0 16px;

    }

    .client-user-info{

        display:none;

    }

    .client-profile{

        flex-direction:column;

        text-align:center;

    }

    .payment-options{

        grid-template-columns:1fr;

    }

    .transaction-item{

        flex-direction:column;

        align-items:flex-start;

    }

    .setting-row{

        flex-direction:column;

        align-items:flex-start;

    }

}

@media (max-width:576px){

    .client-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .billing-grid{

        grid-template-columns:1fr;

    }

    .client-actions{

        grid-template-columns:1fr;

    }

    .summary-card{

        padding:20px;

    }

    .wallet-balance{

        font-size:2rem;

    }

    .support-card{

        padding:22px;

    }

}


/* =========================================================
   PRINT SUPPORT
========================================================= */

@media print{

    .client-navbar,
    .btn,
    .client-actions,
    .support-card{

        display:none !important;

    }

    body{

        background:#ffffff !important;

        color:#000 !important;

    }

    .summary-card,
    .bill-card,
    .payment-card,
    .wallet-card,
    .address-card{

        background:#fff !important;

        border:1px solid #ccc !important;

        box-shadow:none !important;

        color:#000 !important;

    }

}


/* =========================================================
   END OF client.css
========================================================= */

/* =========================================================
   Water Can Management System
   File: css/client.css
   Part: 4
   Advanced UI Components & Utilities
========================================================= */


/* =========================================================
   FLOATING ACTION BUTTON
========================================================= */

.fab{

    position:fixed;

    right:24px;
    bottom:24px;

    width:58px;
    height:58px;

    border:none;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:#fff;

    cursor:pointer;

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

    font-size:1.3rem;

    box-shadow:var(--shadow-lg);

    transition:var(--transition);

    z-index:900;

}

.fab:hover{

    transform:translateY(-6px) scale(1.05);

}

.fab:active{

    transform:scale(.95);

}


/* =========================================================
   SCROLL TO TOP
========================================================= */

.scroll-top{

    position:fixed;

    right:24px;
    bottom:95px;

    width:48px;
    height:48px;

    border-radius:50%;

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

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

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

    color:#fff;

    cursor:pointer;

    opacity:0;
    visibility:hidden;

    transition:.3s;

}

.scroll-top.show{

    opacity:1;
    visibility:visible;

}

.scroll-top:hover{

    background:var(--primary);

}


/* =========================================================
   LOADING SKELETON
========================================================= */

.skeleton{

    position:relative;

    overflow:hidden;

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

    border-radius:12px;

}

.skeleton::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.10),
        transparent
    );

    animation:skeletonLoading 1.3s infinite;

}

.skeleton-title{

    width:180px;
    height:18px;

}

.skeleton-text{

    width:100%;
    height:14px;

    margin-top:12px;

}

.skeleton-avatar{

    width:70px;
    height:70px;

    border-radius:50%;

}


/* =========================================================
   SHIMMER CARD
========================================================= */

.loading-card{

    padding:24px;

    border-radius:22px;

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

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

}


/* =========================================================
   SUCCESS MESSAGE
========================================================= */

.success-banner{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px;

    border-radius:18px;

    background:rgba(34,197,94,.12);

    border-left:5px solid var(--success);

    margin-bottom:20px;

}

.success-banner i{

    color:var(--success);

    font-size:1.4rem;

}


/* =========================================================
   ERROR MESSAGE
========================================================= */

.error-banner{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px;

    border-radius:18px;

    background:rgba(239,68,68,.12);

    border-left:5px solid var(--danger);

    margin-bottom:20px;

}

.error-banner i{

    color:var(--danger);

    font-size:1.4rem;

}


/* =========================================================
   INFO BOX
========================================================= */

.info-box{

    display:flex;

    gap:16px;

    padding:20px;

    border-radius:18px;

    background:rgba(59,130,246,.10);

    border:1px solid rgba(59,130,246,.20);

}

.info-box i{

    font-size:1.4rem;

    color:var(--primary);

}


/* =========================================================
   TAGS
========================================================= */

.tag-group{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.tag{

    padding:8px 14px;

    border-radius:999px;

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

    color:var(--text-light);

    font-size:.8rem;

    transition:.25s;

}

.tag:hover{

    background:rgba(59,130,246,.15);

    color:#fff;

}


/* =========================================================
   DIVIDER
========================================================= */

.client-divider{

    height:1px;

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

    margin:30px 0;

}


/* =========================================================
   FADE HELPERS
========================================================= */

.fade-in{

    animation:fadeClient .35s ease;

}

.slide-up{

    animation:slideClient .4s ease;

}

.zoom-in{

    animation:zoomClient .3s ease;

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes fadeClient{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes slideClient{

    from{

        opacity:0;
        transform:translateY(20px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes zoomClient{

    from{

        opacity:0;
        transform:scale(.95);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}

@keyframes skeletonLoading{

    from{

        transform:translateX(-100%);

    }

    to{

        transform:translateX(100%);

    }

}


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

@media (max-width:768px){

    .fab{

        width:52px;
        height:52px;

        right:18px;
        bottom:18px;

    }

    .scroll-top{

        right:18px;
        bottom:82px;

    }

    .tag-group{

        gap:8px;

    }

}


/* =========================================================
   END OF client.css
========================================================= */