/* ========= Cascade Alaskan Malamutes - Main Styles ========= */
:root {
  --primary:   #2d5a27;
  --primary-dark: #1e3d1a;
  --accent:    #d4a017;
  --light-bg:  #f8f5f0;
  --card-shadow: 0 4px 18px rgba(0,0,0,.10);
}

body { background: var(--light-bg); font-family: 'Segoe UI', sans-serif; }

/* ---- Navbar ---- */
#mainNav { background: var(--primary); box-shadow: 0 2px 12px rgba(0,0,0,.3); }
#mainNav .navbar-brand { font-size: 1.25rem; color: #fff !important; }
#mainNav .nav-link { color: rgba(255,255,255,.85) !important; font-weight: 500; transition: color .2s; }
#mainNav .nav-link:hover, #mainNav .nav-link.active { color: var(--accent) !important; }
#mainNav .dropdown-menu { border: none; box-shadow: var(--card-shadow); }

/* ---- Hero ---- */
.hero-section {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, #4a7c44 100%);
  color: #fff;
  padding: 5rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.hero-section::before {
  content: '';
  position: absolute; inset: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400"><circle cx="650" cy="50" r="200" fill="rgba(255,255,255,.04)"/><circle cx="100" cy="350" r="180" fill="rgba(255,255,255,.03)"/></svg>') no-repeat center;
  background-size: cover;
}
.hero-section .hero-icon { font-size: 5rem; opacity: .15; }
.hero-badge { background: var(--accent); color: #1a1a1a; font-weight: 700; border-radius: 50px; padding: .3rem 1rem; display: inline-block; font-size: .85rem; }

/* ---- Cards ---- */
.listing-card { border: none; border-radius: 14px; box-shadow: var(--card-shadow); transition: transform .25s, box-shadow .25s; overflow: hidden; }
.listing-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,.15); }
.listing-card .card-img-top { height: 210px; object-fit: cover; }
.listing-card .card-img-placeholder { height: 210px; background: linear-gradient(135deg,#e8f5e9,#c8e6c9); display:flex; align-items:center; justify-content:center; font-size: 3.5rem; color: var(--primary); }
.listing-card .badge-category { background: var(--primary); color: #fff; font-size: .72rem; border-radius: 50px; padding: .2rem .65rem; }
.listing-card .price-tag { font-size: 1.35rem; font-weight: 700; color: var(--primary); }
.featured-badge { background: var(--accent); color: #1a1a1a; font-size: .7rem; font-weight: 700; padding: .2rem .55rem; border-radius: 4px; }

/* ---- Buttons ---- */
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); }
.btn-warning { background: var(--accent); border-color: var(--accent); color: #1a1a1a; font-weight: 600; }
.btn-warning:hover { background: #b8891a; border-color: #b8891a; color: #fff; }

/* ---- Section headings ---- */
.section-title { font-weight: 800; color: var(--primary); position: relative; padding-bottom: .6rem; }
.section-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 50px; height: 4px; background: var(--accent); border-radius: 2px; }
.section-title.center::after { left: 50%; transform: translateX(-50%); }

/* ---- Search bar ---- */
.search-wrap { background: #fff; border-radius: 14px; box-shadow: var(--card-shadow); padding: 1.5rem; }
.search-wrap .form-control, .search-wrap .form-select { border-color: #dee2e6; padding: .65rem 1rem; }
.search-wrap .form-control:focus, .search-wrap .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(45,90,39,.2); }

/* ---- Category pills ---- */
.category-pill { display: inline-block; padding: .35rem .9rem; border-radius: 50px; background: #fff; border: 2px solid var(--primary); color: var(--primary); font-weight: 600; font-size: .85rem; cursor: pointer; transition: all .2s; text-decoration: none; margin: .2rem; }
.category-pill:hover, .category-pill.active { background: var(--primary); color: #fff; }

/* ---- Status badges ---- */
.status-Pending   { background: #fff3cd; color: #856404; border: 1px solid #ffc107; }
.status-Confirmed { background: #cfe2ff; color: #084298; border: 1px solid #0d6efd; }
.status-Shipped   { background: #e0cffc; color: #4a1e91; border: 1px solid #6f42c1; }
.status-Completed { background: #d1e7dd; color: #0a3622; border: 1px solid #198754; }
.status-Cancelled { background: #f8d7da; color: #58151c; border: 1px solid #dc3545; }

/* ---- Messages ---- */
.chat-box { height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: .6rem; padding: 1rem; background: #f3f4f6; border-radius: 12px; }
.msg-bubble { max-width: 72%; padding: .6rem 1rem; border-radius: 18px; font-size: .93rem; line-height: 1.45; position: relative; }
.msg-user  { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.msg-admin { background: #fff; color: #222; border: 1px solid #e0e0e0; border-bottom-left-radius: 4px; align-self: flex-start; }
.msg-time  { font-size: .72rem; opacity: .6; display: block; margin-top: .2rem; }

/* ---- Detail page ---- */
.listing-detail-img { width: 100%; max-height: 420px; object-fit: cover; border-radius: 14px; }
.listing-detail-placeholder { width: 100%; height: 300px; background: linear-gradient(135deg,#e8f5e9,#c8e6c9); border-radius: 14px; display:flex; align-items:center; justify-content:center; font-size: 5rem; color: var(--primary); }
.detail-price { font-size: 2.2rem; font-weight: 800; color: var(--primary); }

/* ---- Footer ---- */
.site-footer { background: var(--primary-dark); color: #ccc; padding-top: 3rem; }
.footer-link { color: rgba(255,255,255,.65); text-decoration: none; display: block; margin-bottom: .4rem; transition: color .2s; }
.footer-link:hover { color: var(--accent); }

/* ---- Admin ---- */
.admin-sidebar { background: var(--primary-dark); min-height: 100vh; padding: 1.5rem 0; }
.admin-sidebar .nav-link { color: rgba(255,255,255,.75); padding: .65rem 1.4rem; border-radius: 0 30px 30px 0; margin-right: 1rem; font-weight: 500; transition: all .2s; }
.admin-sidebar .nav-link:hover, .admin-sidebar .nav-link.active { background: rgba(255,255,255,.12); color: var(--accent); }
.admin-card { border: none; border-radius: 14px; box-shadow: var(--card-shadow); }
.stat-card { border-radius: 14px; padding: 1.4rem; color: #fff; box-shadow: var(--card-shadow); }

/* ---- Misc ---- */
.page-hero { background: var(--primary); color: #fff; padding: 2.5rem 0; }
.breadcrumb-item a { color: var(--accent); }
.table-hover tbody tr:hover { background: rgba(45,90,39,.05); }
.alert { border-radius: 10px; }
.form-label { font-weight: 600; color: #444; }
.form-control, .form-select { border-radius: 8px; }
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(45,90,39,.2); }
.order-card { border-radius: 14px; border: none; box-shadow: var(--card-shadow); }

@media (max-width: 768px) {
  .hero-section { padding: 3rem 0 2.5rem; }
  .detail-price { font-size: 1.6rem; }
}