/* General */

body{
    margin:0;
    padding:0;
    font-family:'Segoe UI', sans-serif;
    background:#f4f6f9;
}

/* Dashboard Layout */

.dashboard-container{
    display:flex;
    min-height:100vh;
}

/* Sidebar */

.sidebar{
    width:260px;
    background:#0d3b66;
    color:white;

    position:fixed;
    top:0;
    left:0;
    bottom:0;

    padding:25px 20px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.sidebar-menu,
.sidebar-bottom{
    list-style:none;
    padding:0;
    margin:0;
}

.sidebar-menu li,
.sidebar-bottom li{
    margin-bottom:15px;
}

.sidebar-menu li a,
.sidebar-bottom li a{
    display:block;
    padding:12px 15px;

    color:white;
    text-decoration:none;

    border-radius:10px;

    transition:0.3s;
}

.sidebar-menu li a:hover,
.sidebar-bottom li a:hover{
    background:#124f8a;
}

.toggle-btn{
    background:none;
    border:none;
    color:white;
    font-size:1.5rem;
    margin-bottom:20px;
    cursor:pointer;
}

.sidebar{
    transition:0.3s;
}

.sidebar.collapsed{
    width:80px;
}

.sidebar.collapsed .logo{
    display:none;
}

.sidebar.collapsed span{
    display:none;
}

.sidebar.collapsed .logo,
.sidebar.collapsed span{
    display:none;
}


/* Main Content */

.main-content{
    margin-left:260px;
    padding: 30px 40px;
    transition:0.3s;
}

.main-content.expanded{
    margin-left:80px;
    padding:30px 40px;
}

.main-content h1{
    margin-top:0;
    margin-bottom:25px;
    font-size:2rem;
    color:#0d3b66;
}

/* Statistics Cards */

.stats-container{
    display:flex;
    gap:20px;
    margin-top:20px;
    flex-wrap:wrap;
}

.stats-card{
    background:white;

    width:250px;
    height:110px;

    border-radius:18px;

    padding:20px;

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

    box-shadow:0 4px 15px rgba(0,0,0,.08);

    transition:0.3s;
}

.stats-card:hover{
    transform:translateY(-5px);
}

.stats-card h6{
    margin:0;
    color:#777;
}

.stats-card h3{
    margin-top:8px;
    color:#0d3b66;
    font-weight:bold;
}

.icon-box{
    width:55px;
    height:55px;

    border-radius:15px;

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

    font-size:1.4rem;

    color:white;
}

.orders{
    background:#0d3b66;
}

.pending{
    background:#f39c12;
}

.completed{
    background:#27ae60;
}

/* Top Bar */

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

    margin-bottom:-19px;
}

.topbar-right{
    display:flex;
    align-items:center;
    gap:20px;
}

.profile-info{
    display:flex;
    align-items:center;
    gap:10px;
}

.profile-details h6{
    margin:0;
    color:#0d3b66;
    font-weight:600;
    padding-right:40px;
    padding-top:15px;
}

.profile-details small{
    color:#777;
    padding-right:45px;
}

/* notification bell */
.notification-btn{
    position:relative;

    width:45px;
    height:45px;

    border:none;
    border-radius:50%;

    background:white;

    box-shadow:0 3px 10px rgba(0,0,0,.08);

    cursor:pointer;

    font-size:1.2rem;
}

.notification-btn:hover{
    transform:translateY(-2px);
}

/* notification Badge */
.notification-badge{
    position:absolute;

    top:-4px;
    right:-4px;

    width:18px;
    height:18px;

    border-radius:50%;

    background:#dc3545;
    color:white;

    font-size:10px;

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

/* profile Avatar */
.profile-avatar{
    width:45px;
    height:45px;

    border-radius:50%;

    background:#0d3b66;
    color:white;

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

    font-weight:bold;

    box-shadow:0 3px 10px rgba(0,0,0,.08);
}

/* Recent Activity */

.activity-card{
    border:none;
    border-radius:15px;
    box-shadow:0 3px 10px rgba(0,0,0,0.08);
}
/* Category-card */
.category-card{
    background:white;

    border-radius:15px;

    padding:20px;

    box-shadow:0 4px 15px rgba(0,0,0,.08);
}

.item-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;


    padding:15px 0;

    border-bottom:1px solid #eee;
}

.summary-card{
    background:white;

    border-radius:15px;

    padding:25px;

    box-shadow:0 4px 15px rgba(0,0,0,.08);

    position:sticky;

    top:20px;
}


.item-info h6{
    margin-bottom:5px;
}

.item-info small{
    color:#6c757d;
}
/* order-card */
.order-card{

    background:white;

    border-radius:15px;

    padding:20px;

    margin-bottom:15px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    box-shadow:0 4px 15px rgba(0,0,0,.08);

    cursor:pointer;

    transition:.3s;

}
.status-badge{

    background:#e8f5e9;

    color:#2e7d32;

    padding:6px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:600;

}

.order-link{
    text-decoration:none;
    color:inherit;
}


.order-card:hover{
    transform:translateY(-3px);
}

/* timeline detail*/
.timeline{

    margin-top:20px;

}

.timeline-step{

    position:relative;

    padding-left:40px;

    margin-bottom:25px;

    color:#999;

    font-weight:500;

}

.timeline-step::before{

    content:'';

    position:absolute;

    left:0;

    top:3px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#ddd;

}

.timeline-step::after{

    content:'';

    position:absolute;

    left:8px;

    top:22px;

    width:2px;

    height:30px;

    background:#ddd;

}

.timeline-step:last-child::after{

    display:none;

}

.timeline-step.active{

    color:#0d6efd;

    font-weight:600;

}

.timeline-step.active::before{

    background:#0d6efd;

}
 /* summary-item*/
.summary-item{

    display:flex;

    justify-content:space-between;

    margin-bottom:10px;

    font-size:14px;

}

/* accordion-items*/
.accordion-item{

    border:none;

    border-radius:15px;

    overflow:hidden;

    margin-bottom:15px;

    box-shadow:0 4px 15px rgba(0,0,0,.08);

}

.accordion-button{

    font-weight:600;

    font-size:16px;

}

.accordion-button:not(.collapsed){

    background:#0d4a84;

    color:white;

}

.accordion-body{

    background:white;

}

/* Booking-Form*/

.booking-form label{

    font-weight:600;

    margin-bottom:8px;

}

.booking-form textarea,
.booking-form input,
.booking-form select{

    border-radius:12px;

}

.btn-primary{

    padding:12px;

    border-radius:12px;

    font-weight:600;

}

/* =====================================
   QUANTITY CONTROLS
===================================== */

.quantity-controls2{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:14px;

    min-width:170px;

}

.qty2-btn2{

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:#0d6efd;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

    flex-shrink:0;

}

.qty2-btn2:hover{

    transform:scale(1.05);

}

.qty2-value2{

    width:70px;

    height:58px;

    border-radius:14px;

    border:1px solid #d8dce4;

    background:#f5f6f8;

    color:#222;

    text-align:center;

    font-size:30px;

    font-weight:600;

    outline:none;

    flex-shrink:0;

}

.qty2-btn2:active{

    transform:scale(0.95);

}


/* Cancel-Order*/
.cancel-card{

    max-width:700px;

    margin:40px auto;

    background:#fff;

    padding:30px;

    border-radius:15px;

    box-shadow:0 4px 15px rgba(0,0,0,0.1);

}

.cancel-title{

    color:#dc3545;

    font-weight:700;

    margin-bottom:20px;

}

.cancel-label{

    font-weight:600;

    margin-bottom:10px;

    display:block;

}

.cancel-textarea{

    width:100%;

    min-height:150px;

    border:1px solid #ddd;

    border-radius:10px;

    padding:15px;

    resize:none;

}

.cancel-textarea:focus{

    outline:none;

    border-color:#dc3545;

    box-shadow:0 0 5px rgba(220,53,69,0.3);

}

.cancel-actions{

    margin-top:20px;

    display:flex;

    gap:10px;

}

.cancel-btn{

    background:#dc3545;

    border:none;

    color:white;

    padding:12px 25px;

    border-radius:8px;

    font-weight:600;

}

.cancel-btn:hover{

    background:#bb2d3b;

}

.back-btn{

    background:#6c757d;

    color:white;

    padding:12px 25px;

    border-radius:8px;

    text-decoration:none;

}


.back-btn:hover{

    background:#5c636a;

    color:white;

}

/* =====================================
   MODERN DARK MODE - WASHEASY
===================================== */

body.dark{

    background: #0f172a;

    color: #f8fafc;

}

/* Main Content Area */

body.dark .main-content{

    background: #0f172a;

}

/* Sidebar */

body.dark .sidebar{

    background: #020617;

    border-right: 1px solid #1e293b;

}

/* Sidebar Links */

body.dark .sidebar a{

    color: #cbd5e1;

}

body.dark .sidebar a:hover{

    background: #1e293b;

    color: #ffffff;

}

body.dark .sidebar .active{

    background: #2563eb;

    color: white;

}

/* Topbar */

body.dark .topbar{

    background: #020617;

    border-bottom: 1px solid #1e293b;

}

/* Cards */

body.dark .card,
body.dark .stats-card,
body.dark .booking-form,
body.dark .order-card{

    background: #1e293b !important;

    color: #f8fafc !important;

    border: 1px solid #334155;

    box-shadow: 0 4px 12px rgba(0,0,0,0.25);

}

/* Statistics Cards */

body.dark .stats-card h3{

    color: #60a5fa;

}

body.dark .stats-card h6{

    color: #cbd5e1;

}

/* Forms */

body.dark input,
body.dark textarea,
body.dark select{

    background: #334155 !important;

    color: #f8fafc !important;

    border: 1px solid #475569;

}

body.dark input:focus,
body.dark textarea:focus,
body.dark select:focus{

    border-color: #3b82f6;

    box-shadow: 0 0 0 0.2rem rgba(59,130,246,0.25);

}

/* Placeholder */

body.dark input::placeholder,
body.dark textarea::placeholder{

    color: #94a3b8;

}

/* Labels */

body.dark label{

    color: #e2e8f0;

}

/* Tables */

body.dark table{

    color: #f8fafc;

}

body.dark thead{

    background: #334155;

}

body.dark tbody tr{

    background: #1e293b;

}

body.dark tbody tr:hover{

    background: #334155;

}

/* Headings */

body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6{

    color: #f8fafc;

}

/* Paragraphs */

body.dark p,
body.dark span{

    color: #cbd5e1;

}

/* Buttons */

body.dark .btn-primary{

    background: #2563eb;

    border-color: #2563eb;

}

body.dark .btn-primary:hover{

    background: #1d4ed8;

    border-color: #1d4ed8;

}

/* Secondary Buttons */

body.dark .btn-outline-dark{

    border-color: #475569;

    color: #f8fafc;

}

body.dark .btn-outline-dark:hover{

    background: #334155;

}

/* Dropdown */

body.dark .dropdown-menu{

    background: #1e293b;

    border: 1px solid #334155;

}

body.dark .dropdown-item{

    color: #f8fafc;

}

body.dark .dropdown-item:hover{

    background: #334155;

}

/* Links */

body.dark a{

    color: #60a5fa;

}

body.dark a:hover{

    color: #93c5fd;

}

/* Alerts */

body.dark .alert-success{

    background: #14532d;

    color: #dcfce7;

    border: none;

}

body.dark .alert-warning{

    background: #78350f;

    color: #fef3c7;

    border: none;

}

body.dark .alert-danger{

    background: #7f1d1d;

    color: #fee2e2;

    border: none;

}


body.dark .accordion-button::after{

    filter: brightness(0) invert(1);

}

body.dark .order-summary{

    background: #1e293b !important;

    color: #f8fafc !important;

    border: 1px solid #334155;

}

body.dark .order-summary h4,
body.dark .order-summary h5,
body.dark .order-summary p{

    color: #f8fafc !important;

}

body.dark .booking-details{

    background: #1e293b !important;

    color: white !important;

}

body.dark #map{

    border: 1px solid #334155;

    border-radius: 10px;

}

body.dark .bg-white{

    background: #1e293b !important;

}

body.dark .container,
body.dark .container-fluid{

    color: #f8fafc;

}

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

body.dark .card,
body.dark .stats-card,
body.dark .booking-form,
body.dark .order-card,
body.dark .summary-card,
body.dark .cancel-card,
body.dark .cancel-order-card,
body.dark .notification-item,
body.dark .laundry-card{

    background:linear-gradient(
        145deg,
        #1e293b,
        #162233
    ) !important;

    color:#f8fafc !important;

    border:1px solid #334155;

    box-shadow:0 8px 20px rgba(0,0,0,.28);

}

body.dark .summary-card h2,
body.dark .summary-card h3,
body.dark .summary-card h4,
body.dark .summary-card h5,
body.dark .summary-card p,
body.dark .summary-card span{

    color: #f8fafc !important;

}
/* =====================================
   BOOK LAUNDRY
===================================== */

body.dark .accordion-item{

    background:#1e293b;

    border:1px solid #334155;

}

body.dark .accordion-body{

    background:#1e293b;

}

body.dark .accordion-button{

    background:#2563eb !important;

    color:#ffffff !important;

    font-weight:700;

}

body.dark .accordion-button:not(.collapsed){

    background:#2563eb !important;

}

body.dark .accordion-button::after{

    filter:brightness(0) invert(1);

}

body.dark .laundry-title,
body.dark .laundry-title h4,
body.dark .laundry-title h5,
body.dark .laundry-title h6,

body.dark .item-info,
body.dark .item-info h4,
body.dark .item-info h5,
body.dark .item-info h6,

body.dark .service-title{

    color:#ffffff !important;

}

body.dark .item-price{

    color:#cbd5e1 !important;

}

body.dark .order-guide{

    background:#12324d;

    color:#dbeafe;

    border:1px solid #24598b;

}

/* =====================================
   QUANTITY CONTROLS
===================================== */

body.dark .qty2-btn2{

    background:#0d6efd;

    color:#ffffff;

}

body.dark .qty2-btn2:hover{

    background:#0b5ed7;

}

body.dark .qty2-value2{

    background:#3b4758;

    color:#ffffff;

    border:1px solid #4b596d;

}

body.dark .notification-item{

    background:#1e293b;

    border:1px solid #334155;

}

body.dark .notification-item h5{

    color:#ffffff;

}

body.dark .notification-item small{

    color:#cbd5e1;

}

body.dark .stats-card h3{

    color:#60a5fa;

}

body.dark .stats-card h6{

    color:#ffffff;

}



/* Pending Pickup */

body.dark .status-pending{

    background: #f59e0b;

    color: white !important;

}

/* Out For Delivery */

body.dark .status-delivery{

    background: #3b82f6;

    color: white !important;

}

/* Cancelled */

body.dark .status-cancelled{

    background: #ef4444;

    color: white !important;

}

/* Delivered */

body.dark .status-completed{

    background: #10b981;

    color: white !important;

}

/* Cancel Order Page */

body.dark .cancel-order-container{

    background: #1e293b !important;

    color: #f8fafc !important;

    border: 1px solid #334155;

}

body.dark .cancel-order-container h1,
body.dark .cancel-order-container h2,
body.dark .cancel-order-container h3,
body.dark .cancel-order-container h4,
body.dark .cancel-order-container p,
body.dark .cancel-order-container label{

    color: #f8fafc !important;

}

/* Order Cards */

body.dark .order-card h3,
body.dark .order-card h4,
body.dark .order-card h5,
body.dark .order-card p{

    color: #ffffff !important;

}

/* =====================================
   PASSWORD PAGES
===================================== */

body.dark .password-card{

    background: linear-gradient(
        145deg,
        #1e293b,
        #0f172a
    ) !important;

    color: #f8fafc !important;

    border: 1px solid #334155;

    border-radius: 18px;

    box-shadow: 0 4px 12px rgba(0,0,0,.25);

}

/* Headings */

body.dark .password-card h3{

    color: #ffffff;

    margin-bottom: 20px;

}

/* Django Form Inputs */

body.dark .password-card input{

    background: #334155 !important;

    color: #f8fafc !important;

    border: 1px solid #475569;

    border-radius: 10px;

    padding: 12px;

}

/* Focus */

body.dark .password-card input:focus{

    border-color: #3b82f6;

    box-shadow: 0 0 0 0.2rem rgba(59,130,246,.25);

}

/* Labels */

body.dark .password-card label{

    color: #e2e8f0;

    font-weight: 500;

}

/* Help Text */

body.dark .password-card .helptext{

    color: #94a3b8;

}

/* Error Messages */

body.dark .password-card .errorlist{

    color: #ef4444;

    list-style: none;

    padding-left: 0;

}

/* Success Message Page */

body.dark .password-success{

    background: linear-gradient(
        145deg,
        #14532d,
        #166534
    );

    color: #dcfce7;

    border: 1px solid #22c55e;

    border-radius: 15px;

    padding: 20px;

    font-weight: 600;

}

body.dark .qty2-value2{

    background:#3b4758;

    border:1px solid #4b596d;

    color:#fff;

}

body.dark .qty2-btn2{

    background:#0d6efd;

    color:#fff;

}

/* =====================================
   GLOBAL COMPONENTS
===================================== */

body.dark .page-container{

    background:#0f172a;

    color:#f8fafc;

}

body.dark .page-title{

    color:#ffffff;

}

body.dark .mobile-card{

    background:#1e293b;

    border:1px solid #334155;

    color:#f8fafc;

    box-shadow:0 8px 20px rgba(0,0,0,.25);

}



/* ==========================================
   GOOGLE PLACES AUTOCOMPLETE
========================================== */

/* ---------- LIGHT MODE ---------- */

body.light .pac-container{

    background:#ffffff !important;

    color:#212529 !important;

    border:1px solid #dee2e6 !important;

    box-shadow:0 10px 25px rgba(0,0,0,.12);

}

body.light .pac-item{

    background:#ffffff !important;

    color:#212529 !important;

    border-top:1px solid #f1f1f1;

}

body.light .pac-item:hover{

    background:#f5f5f5 !important;

}

body.light .pac-item-query{

    color:#212529 !important;

    font-weight:600;

}

/* ==========================================
   LIGHT MODE FIXES
   (Leave Dark Mode Untouched)
========================================== */

body:not(.dark) .stats-card,
body:not(.dark) .card,
body:not(.dark) .order-card,
body:not(.dark) .summary-card,
body:not(.dark) .booking-form,
body:not(.dark) .laundry-card,
body:not(.dark) .cancel-order-card,
body:not(.dark) .notification-item{

    background:#ffffff;

    color:#1f2937;

    border:1px solid #e5e7eb;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

body:not(.dark) .accordion-item{

    background:#ffffff;

    border:1px solid #dee2e6;

}

body:not(.dark) .accordion-body{

    background:#ffffff;

}

body:not(.dark) .accordion-button{

    background:#0d6efd;

    color:#ffffff;

}

body:not(.dark) .accordion-button:not(.collapsed){

    background:#0b5ed7;

    color:#ffffff;

}

body:not(.dark) .accordion-button::after{

    filter:brightness(0) invert(1);

}

/* Clothing Category */

body:not(.dark) .laundry-title,
body:not(.dark) .item-title,
body:not(.dark) .item-name,
body:not(.dark) h5,
body:not(.dark) h6{

    color:#1f2937;

}

/* Prices */

body:not(.dark) .item-price{

    color:#6b7280;

}

/* Quantity Box */

body:not(.dark) .qty2-value2{

    background:#eef2f7;

    color:#1f2937;

    border:1px solid #d5d9df;

}

/* Quantity Buttons */

body:not(.dark) .qty2-btn2{

    background:#0d6efd;

    color:#fff;

}

/* Order Summary */

body:not(.dark) .order-summary{

    background:#ffffff;

    border:1px solid #e5e7eb;

}

/* Booking Guide */

body:not(.dark) .booking-details{

    background:#dff6ff;

    color:#0f4c81;

}

/* ---------- DARK MODE ---------- */

body.dark .pac-container{

    background:#1f2a44 !important;

    color:#ffffff !important;

    border:1px solid #3b4f74 !important;

    box-shadow:0 10px 25px rgba(0,0,0,.35);

}

body.dark .pac-item{

    background:#1f2a44 !important;

    color:#ffffff !important;

    border-top:1px solid #31415f;

}

body.dark .pac-item:hover{

    background:#31415f !important;

}

body.dark .pac-item-query{

    color:#ffffff !important;

    font-weight:600;

}

.whatsapp-float{

    position: fixed;

    bottom: 25px;

    right: 25px;

    width: 45px;

    height: 65px;

    background: #25D366;

    color: white;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 32px;

    text-decoration: none;

    box-shadow: 0 6px 20px rgba(0,0,0,.3);

    z-index: 9999;

    transition: all .3s ease;

}

.whatsapp-float:hover{

    transform: scale(1.1);

    color: white;

}

.whatsapp-float i{

    line-height: 1;

}

/* Admin_dashboard Css*/
.admin-card{

    background: #17253d;

    color: white;

    border-radius: 15px;

    padding: 20px;

    box-shadow: 0 4px 12px rgba(0,0,0,.15);

}

.admin-card h3{

    font-size: 2rem;

    font-weight: 700;

}

.admin-card p{

    margin: 0;

    opacity: .8;

}

.admin-card table{

    color: white;

}

.admin-card th{

    color: #60a5fa;

}

input{

    width:100%;

    padding:12px 15px;

    border:1px solid #dee2e6;

    border-radius:10px;

    outline:none;

    transition:.3s;

}

input:focus{

    border-color:#0d6efd;

    box-shadow:0 0 0 .2rem rgba(13,110,253,.25);

}

label{

    font-weight:600;

}

.modal-content{

    border-radius:18px;

}

.modal-header{

    border-top-left-radius:18px;

    border-top-right-radius:18px;

}

#customerDeleteForm input{

    text-align:center;

    font-size:22px;

    letter-spacing:8px;

    font-weight:bold;

}


.order-item-card{

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

    padding-bottom:15px;

}

@media(max-width:768px){

            .card,
    .admin-card{

        padding:18px !important;

        border-radius:18px;

    }

    .order-item-card .d-flex{

        flex-direction:column;

        align-items:flex-start !important;

    }

    .order-item-card strong.text-success{

        margin-top:10px;

        font-size:18px;

    }

        .cancel-buttons{

        display:flex;
        flex-direction:column;
        gap:10px;

    }

    .cancel-buttons .btn{

        width:100%;

    }


.notification-actions{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    margin-bottom:25px;

    flex-direction:column;

    }

.notification-actions .btn{

    flex:1;

    width:100%;

}

.cancel-actions{

    display:flex;

    gap:15px;

    justify-content:center;

    margin-top:30px;

}

.cancel-btn{

    flex:1;

}

.back-btn{

    flex:1;

    text-align:center;

}

}
/* =====================================================
   WASH EASY PREMIUM MOBILE BOTTOM NAVIGATION
===================================================== */

.mobile-bottom-nav{

    display:none;

}

@media (max-width:768px){

    .mobile-bottom-nav{

        position:fixed;

        left:0;

        right:0;

        bottom:0;

        height:78px;

        background:#0d3b66;

        display:flex;

        justify-content:space-around;

        align-items:center;

        z-index:9999;

        border-top-left-radius:28px;

        border-top-right-radius:28px;

        box-shadow:
            0 -4px 25px rgba(0,0,0,.12),
            0 -1px 2px rgba(0,0,0,.08);

        animation:slideUpNav .45s ease;

    }

    .mobile-bottom-nav a{

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        color:white;

        text-decoration:none;

        font-size:12px;

        position:relative;

        transition:all .25s ease;

        -webkit-tap-highlight-color:transparent;

    }

    .mobile-bottom-nav a:hover{

        color:#4EA5FF;

    }

    .mobile-bottom-nav a:active{

        transform:scale(.92);

    }

    .mobile-bottom-nav i{

        font-size:20px;

        margin-bottom:4px;

    }

    .mobile-bottom-nav a.active{

        color:#4EA5FF;

    }

    .mobile-bottom-nav a.active .book-circle{

    background:#1e90ff;

    box-shadow:
        0 0 25px rgba(30,144,255,.45);

}

    .mobile-bottom-nav a.active i{

        transform:translateY(-8px);

    }

    .mobile-bottom-nav a.active span{

        font-weight:700;

    }

    .mobile-notification-badge{

        position:absolute;

        top:-2px;

        right:-6px;

        width:18px;

        height:18px;

        background:#dc3545;

        color:white;

        border-radius:50%;

        display:flex;

        justify-content:center;

        align-items:center;

        font-size:10px;

        font-weight:bold;

    }

    .book-button{

        margin-top:-42px;

    }

    .book-circle{

        width:68px;

        height:68px;

        background:#2E8BFF;

        border-radius:50%;

        display:flex;

        justify-content:center;

        align-items:center;

        box-shadow:0 10px 22px rgba(0,0,0,.28);

        transition:.3s;

    }

    .book-circle:hover{

        transform:translateY(-3px);

    }

    .book-circle i{

        color:white;

        font-size:26px;

        margin:0;

    }

    .dashboard-container .sidebar{

        display:none;

    }

    .page-container{

    width:100%;

    max-width:1400px;

    margin:auto;

    }

    .page-title{

    font-size:2rem;

    font-weight:700;

    margin-bottom:25px;

    }

    .mobile-card{

    background:white;

    border-radius:18px;

    padding:20px;

    box-shadow:0 4px 15px rgba(0,0,0,.08);

 }


    .main-content{

        margin-left:0 !important;

        width:100%;

        padding-bottom:100px;

    }

  

}

.mobile-bottom-nav{

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

}

/* Navigation Animation */

@keyframes slideUpNav{

    from{

        transform:translateY(100%);

        opacity:0;

    }

    to{

        transform:translateY(0);

        opacity:1;

    }

}

  .notification-item{

    background:white;

    padding:18px;

    border-radius:16px;

    margin-bottom:15px;

    box-shadow:0 3px 10px rgba(0,0,0,.08);

 }

 .laundry-card{

    background:white;

    border-radius:18px;

    padding:18px;

    margin-bottom:18px;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.laundry-title{

    font-size:18px;

    font-weight:700;

    padding-bottom:12px;

    border-bottom:1px solid #eee;

    margin-bottom:15px;

}

.booking-title{

    font-weight:700;

    margin-bottom:18px;

}

.order-guide{

    background:#eaf6ff;

    color:#0d3b66;

    border-radius:18px;

    padding:20px;

    margin-bottom:20px;

}