/* ================= base ================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI',sans-serif;
}

body{
    background:#050505;
    color:white;
    overflow-x:hidden;
}

a{
    text-decoration:none;
    color:inherit;
}

img{
    max-width:100%;
}

/* ================= sidebar ================= */

.sidebar{
    width:250px;
    height:100vh;
    background:#000;
    position:fixed;
    left:0;
    top:0;
    padding:28px;
    border-right:2px solid gold;
    z-index:100;
}

.sidebar h2{
    color:gold;
    margin-bottom:50px;
    font-size:24px;
    font-weight:bold;
}

.sidebar a{
    display:block;
    padding:15px;
    margin-bottom:15px;
    border-radius:12px;
    transition:.3s;
    font-size:18px;
}

.sidebar a:hover{
    background:gold;
    color:black;
}

/* ================= main ================= */

.main{
    margin-left:270px;
    padding:40px;
}

h1{
    font-size:48px;
    margin-bottom:30px;
    font-weight:bold;
}

/* ================= buttons ================= */

button{
    background:gold;
    color:black;
    border:none;
    padding:13px 22px;
    border-radius:12px;
    cursor:pointer;
    font-weight:bold;
    font-size:15px;
    transition:.3s;
}

button:hover{
    background:#ffcc00;
    transform:translateY(-2px);
}

/* ================= dashboard ================= */

.hero-section{
    margin-bottom:28px;
}

.hero-section h1{
    font-size:72px;
    line-height:1;
    font-weight:900;
    margin-bottom:10px;
    letter-spacing:-2px;
}

.hero-section p{
    color:#bcbcbc;
    font-size:20px;
}

.modern-search-bar{
    width:100%;
    background:#111;
    border:1px solid rgba(255,215,0,.08);
    border-radius:24px;
    padding:24px;
    display:grid;
    grid-template-columns:
    repeat(5,1fr)
    180px;
    gap:18px;
    align-items:end;
    margin-bottom:35px;
}

.search-grow{
    grid-column:span 2;
}

.filter-group{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.filter-group label{
    color:gold;
    font-size:14px;
    font-weight:700;
}

.filter-group select,
.filter-group input{
    width:100%;
    height:58px;
    background:#1a1a1a;
    border:none;
    border-radius:16px;
    color:white;
    padding:0 18px;
    font-size:15px;
    outline:none;
}

.filter-group select:focus,
.filter-group input:focus{
    border:1px solid gold;
}

.search-btn{
    width:100%;
    height:58px;
    border:none;
    border-radius:16px;
    background:gold;
    color:black;
    font-size:18px;
    font-weight:800;
}

.results-text{
    color:#bdbdbd;
    font-size:18px;
    margin-bottom:25px;
}

/* ================= cards ================= */

.car-grid{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));
    gap:28px;
}

.car-card{
    background:#111;
    border-radius:28px;
    overflow:hidden;
    border:1px solid rgba(255,215,0,.18);
    transition:.35s ease;
    box-shadow:0 15px 35px rgba(0,0,0,.5);
}

.car-card:hover{
    transform:translateY(-12px);
    border-color:gold;
    box-shadow:0 25px 50px rgba(255,215,0,.15);
}

.car-card img{
    width:100%;
    height:250px;
    object-fit:contain;
    background:#181818;
    padding:25px;
}

.centered-car-content{
    padding:28px;
    text-align:center;
}

.centered-car-content h2{
    font-size:32px;
    margin-bottom:10px;
    line-height:1.2;
}

.car-subtitle{
    color:#b9b9b9;
    font-size:18px;
    margin-bottom:18px;
}

.modern-price{
    color:gold;
    font-size:42px;
    font-weight:bold;
    margin-bottom:25px;
}

.modern-price span{
    font-size:18px;
    color:#999;
    font-weight:normal;
}

.view-btn{
    width:100%;
    height:58px;
    font-size:17px;
    border-radius:16px;
}

/* ================= login ================= */

.login-container{
    width:100%;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px;
}

.login-box{
    width:100%;
    max-width:650px;
    background:#101010;
    border-radius:40px;
    padding:70px 55px;
    border:1px solid rgba(255,215,0,.15);
    box-shadow:
    0 0 40px rgba(255,215,0,.03),
    0 30px 80px rgba(0,0,0,.75);
    text-align:center;
}

.login-box h1{
    color:gold;
    font-size:72px;
    line-height:1.2;
    font-weight:900;
    margin-bottom:25px;
}

.login-subtitle{
    color:#d0d0d0;
    font-size:22px;
    margin-bottom:40px;
}

.login-box form{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.login-box input{
    width:100%;
    height:75px;
    border:none;
    border-radius:20px;
    background:#ececec;
    padding:0 25px;
    font-size:20px;
    margin-bottom:25px;
    outline:none;
}

.login-btn{
    width:100%;
    height:75px;
    border:none;
    border-radius:20px;
    background:gold;
    color:black;
    font-size:24px;
    font-weight:900;
}

.login-footer{
    margin-top:28px;
    font-size:20px;
    color:#d0d0d0;
}

.login-footer a{
    color:gold;
    font-weight:700;
}

/* ================= details ================= */

.modern-details-card{
    width:100%;
    background:#111;
    border:1px solid rgba(255,215,0,.35);
    border-radius:35px;
    padding:40px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.details-image{
    display:flex;
    justify-content:center;
    align-items:center;
}

.details-image img{
    width:100%;
    max-width:650px;
    object-fit:contain;
}

.details-info h2{
    font-size:72px;
    margin-bottom:35px;
    line-height:1.1;
}

.details-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.info-box{
    background:#181818;
    border-radius:24px;
    padding:28px;
    border:1px solid rgba(255,255,255,.05);
}

.info-title{
    display:block;
    color:gold;
    font-size:15px;
    margin-bottom:12px;
    text-transform:uppercase;
}

.info-box p{
    font-size:22px;
    font-weight:600;
}

.gold-price{
    color:gold !important;
    font-size:42px !important;
}

.available-text{
    color:#27ff8a !important;
    font-weight:700 !important;
}

.unavailable-text{
    color:#ff4f4f !important;
    font-weight:700 !important;
}

.unavailable-box{
    margin-top:30px;
    background:#181818;
    border-radius:22px;
    padding:25px;
    border:1px solid rgba(255,255,255,.05);
}

.unavailable-box h3{
    color:gold;
    margin-bottom:18px;
    font-size:22px;
}

.date-badge{
    background:#101010;
    border:1px solid rgba(255,255,255,.05);
    border-radius:14px;
    padding:14px 18px;
    margin-bottom:12px;
    font-size:15px;
}

.available-msg{
    color:#9a9a9a;
}

/* ================= booking ================= */

.booking-container{
    display:grid;
    grid-template-columns:420px 1fr;
    gap:40px;
    align-items:flex-start;
}

.booking-image-card,
.booking-form-card{
    background:#111;
    border-radius:30px;
    padding:40px;
    border:1px solid rgba(255,215,0,.2);
}

.booking-image-card img{
    width:100%;
    height:250px;
    object-fit:contain;
    margin-bottom:20px;
}

.booking-image-card h2{
    font-size:38px;
    margin-bottom:10px;
}

.booking-image-card p{
    color:#bbb;
    font-size:18px;
}

.booking-price{
    margin-top:25px;
    color:gold;
    font-size:40px;
    font-weight:700;
}

.booking-price span{
    color:#aaa;
    font-size:20px;
}

.booking-form-card h2{
    font-size:38px;
    margin-bottom:35px;
}

.booking-form-card label{
    display:block;
    margin-bottom:10px;
    font-size:17px;
    font-weight:600;
}

.booking-form-card input{
    width:100%;
    height:60px;
    border:none;
    outline:none;
    border-radius:15px;
    padding:0 20px;
    font-size:16px;
    margin-bottom:25px;
    background:#f4f4f4;
}

.total-preview{
    width:100%;
    background:#181818;
    border-left:4px solid gold;
    border-radius:16px;
    padding:22px;
    margin-bottom:25px;
    line-height:1.8;
    font-size:18px;
}

.booking-note{
    background:#1a1a1a;
    border-left:4px solid gold;
    padding:20px;
    border-radius:12px;
    color:#ccc;
    margin-top:15px;
    margin-bottom:30px;
    line-height:1.8;
}

.confirm-btn{
    width:100%;
    height:60px;
    border-radius:16px;
    font-size:18px;
    font-weight:700;
}

/* ================= my bookings fix ================= */

.booking-table-wrapper{
    width:100%;
    overflow-x:auto;
    margin-top:30px;
}

.modern-table{
    width:100%;
    min-width:1500px;
    border-collapse:separate;
    border-spacing:0;
    background:#111;
    border-radius:24px;
    overflow:hidden;
}

.modern-table th{
    background:gold;
    color:black;
    padding:24px 18px;
    font-size:17px;
    text-align:center;
    font-weight:800;
    white-space:nowrap;
}

.modern-table td{
    padding:28px 18px;
    text-align:center;
    vertical-align:middle;
    border-bottom:1px solid rgba(255,255,255,.05);
    font-size:17px;
    line-height:1.6;
    white-space:nowrap;
}

.modern-table tr:last-child td{
    border-bottom:none;
}

.modern-table tr:hover{
    background:#181818;
}

.car-name{
    font-weight:700;
    font-size:19px;
    white-space:normal;
    min-width:180px;
}

.remaining-text{
    color:gold;
    font-weight:700;
}

.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:120px;
    padding:10px 18px;
    border-radius:50px;
    font-size:14px;
    font-weight:700;
}

.timeline-box{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:320px;
}

.timeline-step{
    background:#1a1a1a;
    color:#888;
    padding:8px 12px;
    border-radius:50px;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
}

.timeline-step.active{
    background:rgba(0,255,120,.15);
    color:#00ff88;
}

.timeline-line{
    width:20px;
    height:2px;
    background:#333;
}

.cancel-btn{
    min-width:110px;
    height:48px;
    border-radius:14px;
    font-size:15px;
    font-weight:700;
}

@media(max-width:1200px){

    .modern-table{
        min-width:1600px;
    }
}

/* ================= admin dashboard ================= */

.cards{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));
    gap:28px;
    margin-top:40px;
}

.card{
    background:#111;
    border:1px solid rgba(255,215,0,.15);
    border-radius:28px;
    padding:35px;
    transition:.35s ease;
    box-shadow:0 15px 35px rgba(0,0,0,.45);
}

.card:hover{
    transform:translateY(-8px);
    border-color:gold;
    box-shadow:0 25px 50px rgba(255,215,0,.12);
}

.card h2{
    color:gold;
    font-size:58px;
    margin-bottom:10px;
    line-height:1;
    font-weight:900;
}

.card p{
    color:#d5d5d5;
    font-size:20px;
    font-weight:500;
}

/* dashboard title */

.main h1{
    font-size:72px;
    font-weight:900;
    margin-bottom:10px;
    letter-spacing:-2px;
}

/* admin dashboard spacing */

.main{

    margin-left:270px;

    padding:40px;

    width:calc(100% - 270px);

}
/* ================= admin cars ================= */

.filter-form{
    display:flex;
    gap:15px;
    align-items:center;
    margin-bottom:35px;
}

.filter-form select{
    width:220px;
    height:55px;
    background:#1a1a1a;
    border:none;
    border-radius:14px;
    color:white;
    padding:0 18px;
    font-size:15px;
    outline:none;
}

.filter-form button{
    height:55px;
    padding:0 30px;
    font-size:16px;
    font-weight:700;
}

.car-content{
    padding:28px;
}

.admin-top-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:15px;
    margin-bottom:18px;
}

.admin-top-row h2{
    font-size:36px;
    line-height:1.2;
}

.admin-category{
    color:#bdbdbd;
    font-size:18px;
    margin-bottom:25px;
}

.green{
    background:rgba(0,255,120,.15);
    color:#00ff88;
}

.red{
    background:rgba(255,70,70,.15);
    color:#ff4f4f;
}

.rental-info{
    display:flex;
    flex-direction:column;
    gap:15px;
    margin-bottom:28px;
}

.rental-box{
    background:#181818;
    border-radius:16px;
    padding:18px;
    border:1px solid rgba(255,255,255,.05);
}

.rental-label{
    display:block;
    color:gold;
    font-size:13px;
    margin-bottom:8px;
    text-transform:uppercase;
}

.rental-box p{
    color:white;
    font-size:15px;
    line-height:1.6;
}

.admin-btns{
    display:flex;
    gap:15px;
    margin-top:25px;
}

.edit-btn,
.delete-btn{
    flex:1;
    height:52px;
    border-radius:14px;
    font-size:16px;
    font-weight:700;
}

.delete-btn{
    background:#ff4f4f;
    color:white;
}

.delete-btn:hover{
    background:#ff2f2f;
}

/* ================= admin bookings ================= */

.table-container{
    width:100%;
    overflow-x:auto;
    margin-top:35px;
}

.table-container table{
    width:100%;
    min-width:1400px;
    border-collapse:separate;
    border-spacing:0;
    background:#111;
    border-radius:24px;
    overflow:hidden;
}

.table-container th{
    background:gold;
    color:black;
    padding:22px 18px;
    text-align:center;
    font-size:16px;
    font-weight:800;
    white-space:nowrap;
}

.table-container td{
    padding:26px 18px;
    text-align:center;
    border-bottom:1px solid rgba(255,255,255,.05);
    font-size:16px;
    line-height:1.7;
    white-space:nowrap;
}

.table-container tr:last-child td{
    border-bottom:none;
}

.table-container tr:hover{
    background:#181818;
}

.table-container button{
    width:120px;
    height:46px;
    margin-bottom:10px;
    border-radius:12px;
    font-size:15px;
    font-weight:700;
}

.payment-btn{
    background:#00bfff;
    color:white;
}

.payment-btn:hover{
    background:#0099cc;
}

.approve-btn{
    background:#00cc66;
    color:white;
}

.approve-btn:hover{
    background:#00aa55;
}

.reject-btn{
    background:#ff4f4f;
    color:white;
}

.reject-btn:hover{
    background:#ff2f2f;
}

/* ================= responsive ================= */

@media(max-width:1200px){

    .main h1{
        font-size:58px;
    }

    .table-container table{
        min-width:1500px;
    }
}

@media(max-width:900px){

    .car-grid{
        grid-template-columns:1fr;
    }

    .modern-details-card,
    .booking-container{
        grid-template-columns:1fr;
    }

    .hero-section h1,
    .main h1{
        font-size:46px;
    }
}

/* ================= analytics ================= */

.analytics-grid{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));
    gap:25px;
    margin-top:40px;
    margin-bottom:35px;
}

.analytics-card{
    background:#111;
    border-radius:28px;
    padding:35px;
    border:1px solid rgba(255,215,0,.12);
    overflow:hidden;
}

.analytics-card h2{
    font-size:clamp(28px, 2vw, 52px);
    line-height:1.1;
    color:#ffd700;
    font-weight:700;
    word-break:break-word;
    overflow-wrap:anywhere;
}

.analytics-card p{
    color:#d0d0d0;
    font-size:18px;
}

.overdue-card h2{
    color:#ff5c5c;
}

.revenue-card h2{
    font-size:clamp(24px, 1.8vw, 42px);
}

/* ================= activity ================= */

.activity-box{
    background:#111;
    border-radius:28px;
    padding:35px;
    border:1px solid rgba(255,255,255,.05);
}

.activity-box h2{
    margin-bottom:25px;
    font-size:32px;
}

.activity-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 0;
    border-bottom:1px solid rgba(255,255,255,.05);
    color:#d0d0d0;
}

.activity-item:last-child{
    border-bottom:none;
}

.activity-item span{
    color:gold;
}

/* ================= quick actions ================= */

.quick-actions{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));
    gap:22px;
    margin-top:35px;
}

.quick-card{
    background:#111;
    border-radius:24px;
    padding:30px;
    text-align:center;
    border:1px solid rgba(255,215,0,.12);
    font-size:22px;
    font-weight:700;
    transition:.3s;
}

.quick-card:hover{
    transform:translateY(-6px);
    border-color:gold;
}

/* ================= booking search ================= */

.booking-search-bar{
    display:flex;
    gap:15px;
    margin-bottom:25px;
}

.booking-search-bar input{
    flex:1;
    height:58px;
    border:none;
    border-radius:16px;
    background:#1a1a1a;
    color:white;
    padding:0 20px;
    font-size:16px;
    outline:none;
}

.booking-search-bar button{
    width:160px;
    height:58px;
}

/* ================= register ================= */

.register-container{
    width:100%;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px 20px;
}

.register-box{
    width:100%;
    max-width:700px;
    background:#101010;
    border-radius:40px;
    padding:70px 55px;
    border:1px solid rgba(255,215,0,.15);
    box-shadow:
    0 0 40px rgba(255,215,0,.03),
    0 30px 80px rgba(0,0,0,.75);
    text-align:center;
}

.register-box h1{
    color:gold;
    font-size:88px;
    line-height:1;
    font-weight:900;
    margin-bottom:40px;
}

.register-box form{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.register-box input{
    width:100%;
    height:82px;
    border:none;
    border-radius:22px;
    background:#ececec;
    padding:0 28px;
    font-size:22px;
    margin-bottom:24px;
    outline:none;
}

.register-btn{
    width:100%;
    height:82px;
    border:none;
    border-radius:22px;
    background:gold;
    color:black;
    font-size:26px;
    font-weight:900;
    margin-top:10px;
    transition:.3s;
}

.register-btn:hover{
    background:#ffcc00;
    transform:translateY(-3px);
}

.activity-item{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    padding:24px 0;
    border-bottom:1px solid rgba(255,255,255,.05);
    color:white;
}

.activity-date{
    color:#ffd700;
    font-size:15px;
    white-space:nowrap;
}

.activity-sub{
    margin-top:8px;
    color:#bdbdbd;
    font-size:14px;
}

.empty-activity{
    color:#bdbdbd;
    margin-top:20px;
}

.empty-cars{
    width:100%;
    background:#111;
    border:1px solid rgba(255,215,0,.2);
    border-radius:20px;
    padding:60px;
    text-align:center;
    color:#bdbdbd;
    font-size:20px;
    margin-top:20px;
}

.top-user-bar{

    position:fixed;

    top:20px;

    right:30px;

    z-index:99999;

}

.user-info{

    display:flex;

    align-items:center;

    gap:12px;

    background:#111;

    border:1px solid rgba(255,215,0,.15);

    padding:10px 16px;

    border-radius:14px;

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

}

.user-avatar{

    width:40px;

    height:40px;

    border-radius:50%;

    background:#ffd700;

    color:black;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

}

.user-name{

    color:white;

    font-size:15px;

    font-weight:700;

    font-family:'Segoe UI',sans-serif;

}