/* Main Styles for Top Bin Rentals Website */

/* Global styles */
body {
  font-family: "Roboto", Arial, sans-serif;
  color: #333;
}

/* Header styles */
.navbar {
  padding-top: 0;
  padding-bottom: 0;
  height: 80px; /* Set fixed height to match logo */
  background-color: #e07000 !important;
}

.navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}

.navbar-brand img {
  height: 100px; /* Match navbar height */
  width: auto;
}

/* Navbar links */
.navbar-nav .nav-link {
  color: #000000 !important; /* Black text for links */
  padding-top: 0;
  padding-bottom: 0;
  line-height: 70px; /* Match navbar height */
  font-weight: 500;
  font-size: 18px;
  margin-right: 1.5rem;
}

/* Centered navbar styles */
.navbar-nav.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.navbar .navbar-nav {
  margin-left: auto;
  margin-right: auto;
}

/* Hero section styles */
.hero-section {
  min-height: 400px;
}

/* Bin card styles */
.bin-image {
  object-fit: cover;
}

.card-title {
  font-weight: 600;
}

.price-tag {
  display: inline-block;
}

/* Step circles in How It Works section */
.step-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #e07000;
  color: #ffffff;
}

/* Feature icons */
.feature-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #e07000;
  color: #ffffff;
}

/* Call to action box */
.cta-box {
  border-radius: 10px;
  background-image: linear-gradient(135deg, #e07000, #e67300);
}

/* Order form styles */
.form-label {
  font-weight: 500;
}

/* Confirmation styles */
.confirmation-icon {
  width: 80px;
  height: 80px;
  background-color: #e07000;
  color: #ffffff;
}

.step-number {
  width: 30px;
  height: 30px;
  min-width: 30px;
  font-weight: bold;
  background-color: #e07000;
  color: #ffffff;
}

/* Admin dashboard styles */
.sidebar {
  height: 100vh;
  background-color: #222;
  color: #ffffff;
}

.sidebar .nav-link {
  font-weight: 500;
  color: #000000;
}

.sidebar .nav-link.active {
  color: #e07000;
}

.sidebar-heading {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #e07000;
}

.me-md-2 {
  margin-right: 0rem !important;
}

/* Responsive adjustments */

@media (min-width: 992px) {
  .navbar .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
}

@media (max-width: 991.98px) {
  .navbar-collapse {
    background-color: #e07000;
    position: absolute;
    top: 70px; /* Position below navbar */
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0.5rem;
  }

  .navbar-nav .nav-link {
    line-height: normal;
    padding: 10px 15px;
    text-align: center;
    color: #000000 !important;
  }

  .navbar-nav {
    text-align: center;
  }
}

@media (max-width: 767.98px) {
  .sidebar {
    height: auto;
    position: static;
  }

  .hero-section {
    min-height: 300px;
  }

  .step-circle {
    width: 60px;
    height: 60px;
  }
  .navbar-brand img {
    height: 80px; /* Match navbar height */
    width: auto;
  }
}

/* Additional custom styles */
.btn-primary {
  background-color: #e07000;
  border-color: #e07000;
}

.btn-primary:hover {
  background-color: #e67300;
  border-color: #e67300;
}

.bg-primary {
  background-color: #e07000 !important;
}

.text-primary {
  color: #e07000 !important;
}

/* Custom bin sizes badge colors */
.badge.bg-10yard {
  background-color: #e07000;
}

.badge.bg-20yard {
  background-color: #e07000;
}

.badge.bg-30yard {
  background-color: #e07000;
}

.badge.bg-40yard {
  background-color: #e07000;
}

/* Footer styles */
footer {
  margin-top: 3rem;
  background-color: #000000;
  color: #ffffff;
}

footer a.text-light {
  color: #e07000 !important;
}

/* Form validation styles */
.invalid-feedback {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 80%;
  color: #dc3545;
}

/* Order status badges */
.order-status-pending {
  background-color: #e07000;
  color: #ffffff;
}

.order-status-confirmed {
  background-color: #28a745;
}

.order-status-delivered {
  background-color: #757575;
}

.order-status-returned {
  background-color: #6c757d;
}

.order-status-cancelled {
  background-color: #dc3545;
}

/* Button outlines */
.btn-outline-primary {
  color: #e07000;
  border-color: #e07000;
}

.btn-outline-primary:hover {
  background-color: #e07000;
  color: white;
  border-color: #e07000;
}

/* Card headers */
.card-header.bg-primary {
  background-color: #000000 !important;
  color: #ffffff;
  border-bottom: 2px solid #e07000;
}

/* Navigation active states */
.nav-link.active {
  color: #e07000 !important;
}

/* Navbar toggler (hamburger menu) styling */
.navbar-toggler {
  border-color: rgba(0, 0, 0, 0.5);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}