/* ====== Global Styles ====== */

body{
    font-family: Arial, sans-serif;
    margin:0;
    padding:0;
    background:#fafafa;
}

section{
    max-width:1100px;
    margin:50px auto;
    padding:20px;
}

/* ====== Hero Section ====== */

.hero{
    text-align:center;
    padding:60px 20px;
    background:#f4f6f8;
    border-radius:8px;
}

.hero-buttons{
    margin-top:20px;
}

/* ====== Buttons ====== */

.btn-primary{
    background:#2c7be5;
    color:#fff;
    padding:12px 20px;
    text-decoration:none;
    border-radius:5px;
    margin-right:10px;
    display:inline-block;
}

.btn-secondary{
    background:#555;
    color:#fff;
    padding:12px 20px;
    text-decoration:none;
    border-radius:5px;
    display:inline-block;
}

/* ====== How It Works ====== */

.steps{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.step{
    flex:1;
    min-width:220px;
    background:#f5f5f5;
    padding:20px;
    border-radius:6px;
}

/* ====== Search / Browse Page ====== */

.search-bar{
    margin-bottom:30px;
}

.search-bar input,
.search-bar select{
    padding:10px;
    margin-right:10px;
}

/* ====== Listings Grid ====== */

.listing-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:20px;
}

.listing-card{
    border:1px solid #ddd;
    border-radius:8px;
    overflow:hidden;
    background:#fff;
}

.listing-card img{
    width:100%;
    height:200px;
    object-fit:cover;
}

.listing-card h3{
    padding:10px;
    margin:0;
}

.location{
    padding:0 10px;
    color:#666;
}

.price{
    padding:10px;
    font-weight:bold;
}

.view-btn{
    display:block;
    text-align:center;
    background:#2b7cff;
    color:white;
    padding:10px;
    text-decoration:none;
}

/* ====== Submit / Manage Listing Page ====== */

form{
    background:#fff;
    padding:20px;
    border-radius:6px;
    box-shadow:0 2px 5px rgba(0,0,0,0.1);
    margin-bottom:30px;
}

form label{
    display:block;
    margin-top:10px;
    font-weight:bold;
}

form input[type="text"],
form input[type="email"],
form input[type="url"],
form input[type="file"]{
    width:100%;
    padding:8px;
    margin-top:5px;
    border-radius:4px;
    border:1px solid #ccc;
    box-sizing:border-box;
}

form .form-buttons{
    margin-top:20px;
}

form .form-buttons button{
    padding:10px 15px;
    border:none;
    border-radius:4px;
    cursor:pointer;
    margin-right:10px;
    font-weight:bold;
}

form .form-buttons button[type="submit"]{
    background-color:#1a73e8;
    color:#fff;
}

form .form-buttons button[type="button"]{
    background-color:#f44336;
    color:#fff;
}

form .form-buttons button:hover{
    opacity:0.9;
}

/* ====== Listing Management Table ====== */

table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    border-radius:6px;
    overflow:hidden;
    box-shadow:0 2px 5px rgba(0,0,0,0.1);
}

table th,
table td{
    padding:12px;
    text-align:left;
    border-bottom:1px solid #eee;
}

table th{
    background:#1a73e8;
    color:#fff;
}

table tr:hover{
    background:#f1f1f1;
}

/* ====== Images ====== */

img{
    border-radius:4px;
    max-width:100%;
}

/* ====== Status Indicators ====== */

.status-active{
    color:green;
    font-weight:bold;
}

.status-paused{
    color:red;
    font-weight:bold;
}

/* ===== HEADER ===== */

.site-header{
background:white;
border-bottom:1px solid #e5e5e5;
position:sticky;
top:0;
z-index:100;
}

.header-inner{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:15px 20px;
}

/* logo */

.logo a{
font-size:22px;
font-weight:bold;
text-decoration:none;
color:#222;
}

/* navigation */

.main-nav a{
margin:0 15px;
text-decoration:none;
color:#333;
font-weight:500;
}

.main-nav a:hover{
color:#2c7be5;
}

/* right side */

.header-actions{
display:flex;
align-items:center;
gap:15px;
}

.header-actions a{
text-decoration:none;
color:#333;
}

/* CTA button */

.btn-host{
background:#ff6b35;
color:white;
padding:10px 16px;
border-radius:6px;
font-weight:bold;
}

.btn-host:hover{
background:#e55a2a;
}

/* logout */

.logout{
color:#666;
font-size:14px;
}

.search-hero{
margin-top:25px;
display:flex;
justify-content:center;
gap:10px;
flex-wrap:wrap;
}

.search-hero input,
.search-hero select{
padding:12px;
border-radius:6px;
border:1px solid #ccc;
min-width:200px;
}

.search-hero button{
background:#2c7be5;
color:white;
border:none;
padding:12px 18px;
border-radius:6px;
cursor:pointer;
}