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

body{
    background:#f5f5f5;
    padding-top:64px; /* reserve space for fixed navbar */
}

/* NAVBAR */

nav{
    background:#f8f5f5;
    color:#333;
    padding:12px 30px;

    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    position:fixed;
    top:0;
    left:0;
    right:0;
    width:100%;
    z-index:1100;
}

.logo{
    font-size:24px;
    font-weight:bold;
}

.btn{
    background:#1A3A4A;
    color:white;
    text-decoration:none;
    padding:8px 14px;
    border-radius:5px;
    margin-left:10px;
}

/* SEARCH */
.nav-center{
    flex:1;
    display:flex;
    justify-content:center;
}

#search{
    width:420px;
    max-width:60vw;
    padding:10px 12px;
    border:1px solid #ddd;
    border-radius:6px;
    outline:none;
}

.search-results{
    position:absolute;
    background:white;
    width:420px;
    max-width:60vw;
    margin-top:6px;
    border:1px solid #eee;
    border-radius:6px;
    box-shadow:0 6px 20px rgba(0,0,0,0.08);
    z-index:1200;
    display:none;
}

.search-results a{
    display:block;
    padding:10px 12px;
    color:#333;
    text-decoration:none;
    border-bottom:1px solid #f5f5f5;
}

.search-results a:hover{
    background:#f7f7f7;
}

/* CATEGORIES DROPDOWN */
.dropdown{
    position:relative;
    display:inline-block;
    margin-right:10px;
}

.dropbtn{
    background:transparent;
    border:1px solid #ddd;
    padding:8px 12px;
    border-radius:6px;
    cursor:pointer;
}

.dropdown-content{
    display:none;
    position:absolute;
    right:0;
    background-color:#fff;
    min-width:160px;
    box-shadow:0 6px 20px rgba(0,0,0,0.08);
    z-index:1000;
    border-radius:6px;
    overflow:hidden;
}

.dropdown-content a{
    color:#333;
    padding:10px 12px;
    text-decoration:none;
    display:block;
}

.dropdown:hover .dropdown-content{display:block;}

/* HERO */

.hero{
    position:relative;
    text-align:center;
    padding:20px 20px;
    min-height:600px;
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
}

.hero::before{
    content: "";
    position:absolute;
    inset:0;
    background: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25));
    z-index:1;
    border-radius:0;
}

.hero-content{
    position:relative;
    z-index:2;
    max-width:980px;
    padding:24px;
    backdrop-filter: none;
}

.hero-content h1, .hero-content p{color:#fff}

.hero-btn{background:#4ECDC4;color:#fff;padding:12px 22px;border-radius:6px;display:inline-block;margin-top:12px;text-decoration:none}

.hero h1{
    font-size:50px;
    margin-bottom:20px;
}

.hero p{
    font-size:20px;
    margin-bottom:30px;
}

.hero-btn{
    background:#1A3A4A;
    color:white;
    padding:15px 30px;
    text-decoration:none;
    border-radius:5px;
}

/* FEATURES */

.features{
    display:flex;
    justify-content:center;
    gap:20px;
    padding:50px;
}

.card{
    background:white;
    width:250px;
    padding:20px;
    border-radius:10px;
    text-align:center;
    box-shadow:0 0 10px rgba(0,0,0,.1);
}

/* PRODUCTS SHOWCASE */
.products-section{
    padding:24px 16px;
}

.browse-container{max-width:1200px;margin:32px auto;padding:20px}
.filters{display:flex;gap:12px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.filters form{display:flex;gap:8px;align-items:center;flex:1;min-width:220px}
.filters form input[type="text"]{flex:1;padding:10px 12px;border:1px solid #ddd;border-radius:6px}
.filters .btn{padding:9px 12px}
.filters .category-select{min-width:180px}

.browse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.browse-card{background:#fff;border-radius:12px;padding:14px;box-shadow:0 8px 22px rgba(0,0,0,0.06);display:flex;flex-direction:column;justify-content:space-between}
.browse-card img{width:100%;height:180px;object-fit:cover;border-radius:8px;margin-bottom:10px}
.browse-card h3{font-size:17px;margin:8px 0}
.browse-card .meta{color:#657080;font-size:14px;margin:4px 0}
.browse-card .price{font-weight:700;color:#1A3A4A;margin-top:8px}
.browse-card .rent{display:inline-block;margin-top:12px;padding:9px 14px;background:#2b7cff;color:#fff;border-radius:8px;text-decoration:none}

/* small screen adjustments */
@media (max-width:720px){
    .browse-container{padding:14px;margin:18px auto}
    .filters{flex-direction:column;align-items:stretch}
    .filters form{width:100%}
    .filters .category-select{width:100%;margin-top:8px}
    .nav-center{display:none} /* hide large search in navbar on small screens */
}

/* subtle hover */
.browse-card:hover{transform:translateY(-4px);transition:transform .18s ease}

.products-scroll{
    display:flex;
    gap:18px;
    overflow-x:auto;
    padding:18px 24px;
}

.product-card{
    background:#fff;
    border-radius:10px;
    box-shadow:0 6px 18px rgba(0,0,0,0.06);
    padding:12px;
    min-width:220px;
    max-width:240px;
    text-align:center;
    flex:0 0 auto;
}

.product-card img{
    width:100%;
    height:140px;
    object-fit:cover;
    border-radius:8px;
}

.product-card h3{font-size:16px;margin:10px 0 6px}
.product-card .meta{color:#666;margin:6px 0}
.product-card .rent-btn{display:inline-block;margin-top:8px;padding:8px 12px;background:#4ECDC4;color:#fff;border-radius:6px;text-decoration:none}

.cat-btn{padding:8px 12px;border-radius:6px;border:1px solid #ddd;background:#fff;cursor:pointer}
.cat-btn.active{background:#4ECDC4;color:#fff;border-color:#4ECDC4}

/* LOGIN & SIGNUP */

.form-container{
    width:400px;
    margin:60px auto;
    background:white;
    padding:30px;
    border-radius:10px;
    box-shadow:0 0 10px rgba(0,0,0,.1);
}

.form-container h2{
    text-align:center;
    margin-bottom:20px;
}

.form-container input,
.form-container select{
    width:100%;
    padding:12px;
    margin-bottom:15px;
    border:1px solid #ccc;
    border-radius:5px;
}

.form-container button{
    width:100%;
    padding:12px;
    background:#1A3A4A;
    color:white;
    border:none;
    border-radius:5px;
    cursor:pointer;
}

.form-container p{
    margin-top:15px;
    text-align:center;
}

/* FOOTER */

footer{
    background:#1A3A4A;
    color:white;
    text-align:center;
    padding:20px;
    margin-top:50px;
}

/* BOOKING / BOOK_ITEM PAGE */
.wrap{max-width:960px;margin:42px auto;padding:22px}
.booking-card{background:#fff;padding:22px;border-radius:12px;box-shadow:0 10px 30px rgba(10,30,40,0.06)}
.booking-row{display:flex;gap:28px;align-items:flex-start}
.booking-left{flex:0 0 360px}
.booking-left img{width:100%;border-radius:10px;border:1px solid #eef3f8}
.booking-right{flex:1}
.booking-right h2{margin-bottom:6px}
.booking-label{display:block;margin:12px 0 6px;font-weight:600;color:#24333b}
.booking-input[type="date"]{padding:10px;border:1px solid #e2e8ee;border-radius:8px;width:220px}
.btn-primary{background:#2b7cff;color:#fff;padding:12px 16px;border-radius:8px;border:none;cursor:pointer}
.muted{color:#6b7a89}
.booking-info{margin-top:12px;background:#fbfdff;padding:12px;border-radius:8px;border:1px solid #eef3f8}
.form-error{color:#8b1f1f;background:#fff4f4;padding:10px;border-radius:8px;margin-bottom:10px}

@media (max-width:820px){
    .booking-row{flex-direction:column}
    .booking-left{flex:0 0 auto}
    .booking-input[type="date"]{width:100%}
}