/* Utility classes for visibility toggling */
.d-none { display: none !important; }
/* .hidden { display: none !important; } */
/* .block { display: block !important; } */

/* Custom overrides for Bootstrap if needed */
:root {
  --bs-primary: #2F855A;
  --bs-primary-rgb: 47, 133, 90;
  --bs-link-color: #2F855A;
  --bs-link-hover-color: #276749;
  /* Brand secondary for custom UI elements (do not override bs-secondary globally) */
  --brand-secondary: #6c757d;
}
body { background-color: #f8f9fa; }
.card img { object-fit: cover; }
.card-img-top { height: 220px; object-fit: cover; }
.navbar .badge { box-shadow: 0 0 0 2px #198754; }
.card .btn { width: 100%; }
.table img { object-fit: cover; }
/* Ensure anchors styled as buttons/nav links have no underline */
a.no-underline { text-decoration: none !important; }
/* Consistent styling for "Back to ..." buttons across views */
.back-pill {
  display: inline-block;
  background-color: transparent;
  color: var(--brand-secondary);
  padding: 0.375rem 0.75rem; /* ~btn-sm */
  border-radius: 0.5rem;
  border: 1px solid var(--brand-secondary);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.no-underline:hover .back-pill, .back-pill:hover {
  background-color: var(--brand-secondary);
  color: #fff;
  border-color: var(--brand-secondary);
}
/* Subtle hover elevation for cards in Tailwind-styled views */
.card-hover { transition: box-shadow 0.2s ease, transform 0.2s ease; }
.card-hover:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); transform: translateY(-1px); }
/* Ensure all image carousels match cattle investment width */
.carousel-uniform {
  max-width: 28rem; /* matches md:max-w-md (~448px) used by cattle card */
}
.carousel-uniform .carousel-slide img {
  width: 100%;
  height: 16rem; /* h-64 */
  object-fit: cover;
}

/* Mobile: force full-width to match cattle investment appearance */
@media (max-width: 640px) {
  .carousel-uniform {
    width: 100%;
    max-width: 100%;
  }
  .carousel-uniform .carousel-slide,
  .carousel-uniform .carousel-slide img {
    width: 100%;
  }
}
/* Brand utilities for consistent primary tone across Bootstrap and custom views */
.btn-brand { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; color: #fff !important; }
.btn-brand:hover { background-color: #276749 !important; border-color: #276749 !important; }
.text-brand { color: var(--bs-primary) !important; }
.bg-brand { background-color: var(--bs-primary) !important; }
.badge-brand { background-color: var(--bs-primary) !important; }
/* Make delivery/pickup radios show green when selected */
input.form-check-input[type="radio"][name="delivery_method"] {
  accent-color: #28a745; /* Bootstrap success green */
}

/* Selected option text: bold black when its radio is checked */
input.form-check-input[type="radio"][name="delivery_method"]:checked + label.form-check-label {
  font-weight: 600; /* semibold */
  color: #212529; /* Bootstrap body color (black-ish) */
}

/* Force Bootstrap radio circle to green when checked */
input.form-check-input[type="radio"][name="delivery_method"]:checked {
  background-color: #28a745;
  border-color: #28a745;
}

/* Green focus ring for accessibility */
input.form-check-input[type="radio"][name="delivery_method"]:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
}

/* Password input toggle icon inside the field - MOVED TO header.php */
/*.password-field .form-control { padding-right: 2.5rem; }
.password-toggle {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  padding: 0;
  line-height: 0;
  color: var(--brand-secondary);
}
.password-toggle:hover { color: var(--bs-primary); }
.password-toggle svg { width: 20px; height: 20px; }*/
/* Active pagination link: brand green */
.pagination .page-item.active .page-link {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}
/* Ensure hover/focus maintains brand styling */
.pagination .page-item.active .page-link:hover,
.pagination .page-item.active .page-link:focus {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}

/* Override primary colors to HerdVest Green (Global Fix for Blue UI) */
.text-primary { color: #2F855A !important; }
.bg-primary { background-color: #2F855A !important; }
.border-primary { border-color: #2F855A !important; }
/* Tailwind ring/border focus overrides */
.focus\:ring-primary:focus { --tw-ring-color: #2F855A !important; box-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important; }
.focus\:border-primary:focus { border-color: #2F855A !important; }
/* Bootstrap overrides */
.btn-primary { background-color: #2F855A !important; border-color: #2F855A !important; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: #276749 !important; border-color: #276749 !important; }
.btn-outline-primary { color: #2F855A !important; border-color: #2F855A !important; }
.btn-outline-primary:hover { background-color: #2F855A !important; color: #fff !important; }