/* ===== ToletBazaar brand theme — derived from the logo (red / yellow / black) ===== */
:root {
  --brand-red: #E30000;
  --brand-red-dark: #A80000;
  --brand-yellow: #FFDD00;
  --brand-black: #141414;
}

body { color: #212529; }

/* Links & primary actions */
a { color: var(--brand-red); }
a:hover { color: var(--brand-red-dark); }

.text-brand-red { color: var(--brand-red) !important; }

.btn-primary { background-color: var(--brand-red); border-color: var(--brand-red); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--brand-red-dark) !important;
  border-color: var(--brand-red-dark) !important;
}
.btn-outline-primary { color: var(--brand-red); border-color: var(--brand-red); }
.btn-outline-primary:hover { background-color: var(--brand-red); border-color: var(--brand-red); color: #fff; }
.btn-check:checked + .btn-outline-primary,
.btn-outline-primary:active { background-color: var(--brand-red) !important; border-color: var(--brand-red) !important; }

.btn-warning { background-color: var(--brand-yellow); border-color: var(--brand-yellow); color: #1a1a1a; font-weight: 600; }
.btn-warning:hover { background-color: #e6c700; border-color: #e6c700; color: #1a1a1a; }

.text-primary { color: var(--brand-red) !important; }
.bg-primary { background-color: var(--brand-red) !important; }
.badge.bg-primary { background-color: var(--brand-red) !important; }
.border-primary { border-color: var(--brand-red) !important; }

.badge.bg-warning { background-color: var(--brand-yellow) !important; color: #1a1a1a !important; }
.rating-stars .fa-star { color: var(--brand-yellow); }

.form-label { font-weight: 600; }

/* ===== Navbar (white, per reference design) ===== */
.navbar.bg-white { border-bottom: 1px solid #eee; }
.navbar-light .nav-link { color: #333; font-weight: 500; }
.navbar-light .nav-link:hover { color: var(--brand-red); }
.user-avatar {
  background: var(--brand-red); color: #fff; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem;
}
.brand-logo { height: 44px; width: auto; }

/* ===== Hero (image replaced with a brand-colored gradient — see chat note on stock photos) ===== */
.hero {
  position: relative;
  background: linear-gradient(135deg, #1a1a1a 0%, #2b2b2b 55%, var(--brand-red) 140%);
  color: #fff;
  padding: 5rem 0 7rem;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 40px);
  pointer-events: none;
}
.hero .hero-highlight { color: var(--brand-yellow); }
.hero-search-card {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 15px 40px rgba(0,0,0,0.25);
  margin-top: -3.5rem;
  z-index: 2;
}

/* ===== Category quick-links grid ===== */
.category-card {
  display: block; text-align: center; background: #fff; border-radius: 12px;
  padding: 1.5rem 1rem; text-decoration: none; color: #212529;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: transform .15s ease, box-shadow .15s ease;
}
.category-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); color: #212529; }
.category-card .icon-circle { margin-bottom: .5rem; }
@media (min-width: 768px) {
  .category-col { flex: 0 0 20%; max-width: 20%; }
}
.icon-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(227,0,0,0.1); color: var(--brand-red); font-size: 1.25rem;
}
.icon-circle-lg { width: 64px; height: 64px; font-size: 1.5rem; }

/* ===== Property cards ===== */
.property-card { position: relative; border: none; box-shadow: 0 2px 12px rgba(0,0,0,0.07); }
.property-card img { background: #eee; }
.property-card .card-badges { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; z-index: 2; }
.pill-badge { font-size: 0.72rem; font-weight: 700; padding: .3rem .65rem; border-radius: 999px; }
.pill-available-now { background: #16a34a; color: #fff; }
.pill-available-later { background: var(--brand-yellow); color: #1a1a1a; }
.pill-rented { background: #6c757d; color: #fff; }
.pill-featured { background: var(--brand-yellow); color: #1a1a1a; }
.pill-outline { background: #f1f1f1; color: #333; font-weight: 600; font-size: .72rem; padding: .3rem .6rem; border-radius: 999px; }

/* ===== Why choose us / how it works ===== */
.feature-card { background: #fff; border-radius: 12px; padding: 2rem 1.5rem; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.05); height: 100%; }
.step-item { text-align: center; }
.step-item .icon-circle { background: var(--brand-red); color: #fff; }

/* ===== CTA band ===== */
.cta-band { background: var(--brand-red); color: #fff; padding: 3.5rem 0; text-align: center; }
.cta-band .btn-cta {
  background: var(--brand-yellow); color: #1a1a1a; font-weight: 700; border: none;
  padding: .65rem 1.75rem; border-radius: 8px;
}
.cta-band .btn-cta:hover { background: #e6c700; }

/* ===== Footer (black, per reference design) ===== */
footer.site-footer { background: var(--brand-black); color: #ccc; }
footer.site-footer a { color: #ccc; text-decoration: none; }
footer.site-footer a:hover { color: var(--brand-yellow); }
footer.site-footer h6 { color: #fff; font-weight: 700; margin-bottom: 1rem; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: #262626; margin-right: .5rem;
}
.footer-social a:hover { background: var(--brand-red); color: #fff; }
.footer-bottom { border-top: 1px solid #2a2a2a; padding: 1rem 0; text-align: center; font-size: .85rem; color: #888; }

/* ===== Admin ===== */
.admin-sidebar { background: var(--brand-black) !important; }
.admin-sidebar a:hover, .admin-sidebar a.active { background: var(--brand-red) !important; color: #fff; }
.admin-logo-badge { background: #fff; border-radius: 8px; padding: 6px 10px; display: inline-flex; align-items: center; }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }

.stat-card { background: #fff; border-radius: 10px; padding: 1.1rem 1.25rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); height: 100%; }
.stat-card .stat-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; color: #888; letter-spacing: .03em; }
.stat-card .stat-value { font-size: 1.9rem; font-weight: 800; color: #1a1a1a; margin-top: .35rem; }
.stat-card .stat-icon { float: right; color: var(--brand-red); font-size: 1.2rem; }
.stat-card.accent-yellow .stat-icon { color: #c9a600; }