/* ==========================================================================
   Biz Listing Online — shared design system
   Loaded after bootstrap.min.css on every page (public + admin) so plain
   selectors here win on source order without needing !important for most
   Bootstrap component overrides.
   ========================================================================== */

:root {
  --bl-gold: #E9A400;
  --bl-gold-dark: #B98000;
  --bl-gold-light: #FDF3DC;
  --bl-ink: #1B1F27;
  --bl-body: #3C4250;
  --bl-muted: #6B7280;
  --bl-border: #E6E8EC;
  --bl-bg: #F6F7F9;
  --bl-surface: #FFFFFF;
  --bl-dark: #14181F;
  --bl-dark-2: #1C222B;
  --bl-success: #198754;
  --bl-success-dark: #0F6B3F;
  --bl-danger: #DC3545;
  --bl-radius-sm: .5rem;
  --bl-radius: .75rem;
  --bl-radius-lg: 1.25rem;
  --bl-shadow-sm: 0 1px 3px rgba(20,24,31,.07), 0 1px 2px rgba(20,24,31,.05);
  --bl-shadow: 0 6px 20px rgba(20,24,31,.08);
  --bl-shadow-lg: 0 20px 48px rgba(20,24,31,.16);
  --bl-transition: .18s ease;
}

/* ---------- base ---------- */
::selection { background: var(--bl-gold); color: #1a1a1a; }

*:focus-visible {
  outline: 2px solid var(--bl-gold);
  outline-offset: 2px;
}

body { color: var(--bl-body); }

a { color: var(--bl-success); }
a:hover { color: var(--bl-success-dark); }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--bl-ink);
  letter-spacing: -.01em;
}

.text-muted { color: var(--bl-muted) !important; }

hr { opacity: .08; }

/* thin, unobtrusive scrollbar (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d7dae0; border-radius: 999px; border: 2px solid #fff; }
::-webkit-scrollbar-thumb:hover { background: #b9bec8; }

/* ---------- buttons ---------- */
.btn {
  border-radius: var(--bl-radius-sm);
  font-weight: 500;
  letter-spacing: .01em;
  transition: transform var(--bl-transition), box-shadow var(--bl-transition), background-color var(--bl-transition), border-color var(--bl-transition), color var(--bl-transition);
}
.btn:active { transform: translateY(1px); }
.btn-lg { border-radius: var(--bl-radius); }
.btn-sm { border-radius: .4rem; }

.btn-success {
  background-color: var(--bl-success);
  border-color: var(--bl-success);
  box-shadow: 0 2px 8px rgba(25,135,84,.25);
}
.btn-success:hover, .btn-success:focus {
  background-color: var(--bl-success-dark);
  border-color: var(--bl-success-dark);
  box-shadow: 0 4px 14px rgba(25,135,84,.32);
}
.btn-success:active, .btn-success.active {
  background-color: var(--bl-success-dark) !important;
  border-color: var(--bl-success-dark) !important;
}
.btn-outline-success {
  color: var(--bl-success);
  border-color: var(--bl-success);
}
.btn-outline-success:hover, .btn-outline-success:focus {
  background-color: var(--bl-success);
  border-color: var(--bl-success);
}

.btn-warning {
  background-color: var(--bl-gold);
  border-color: var(--bl-gold);
  color: #21242c;
  box-shadow: 0 2px 8px rgba(233,164,0,.28);
}
.btn-warning:hover, .btn-warning:focus {
  background-color: var(--bl-gold-dark);
  border-color: var(--bl-gold-dark);
  color: #21242c;
  box-shadow: 0 4px 14px rgba(233,164,0,.35);
}
.btn-warning:active, .btn-warning.active {
  background-color: var(--bl-gold-dark) !important;
  border-color: var(--bl-gold-dark) !important;
  color: #21242c !important;
}
.btn-check:checked + .btn-warning,
.btn-check:active + .btn-warning { background-color: var(--bl-gold-dark); border-color: var(--bl-gold-dark); }

.btn-dark {
  background-color: var(--bl-dark);
  border-color: var(--bl-dark);
}
.btn-dark:hover, .btn-dark:focus {
  background-color: #262d38;
  border-color: #262d38;
}
.btn-outline-dark { color: var(--bl-dark); border-color: #cfd3da; }
.btn-outline-dark:hover, .btn-outline-dark:focus { background-color: var(--bl-dark); border-color: var(--bl-dark); }

.btn-outline-light { border-color: rgba(255,255,255,.55); }
.btn-outline-light:hover, .btn-outline-light:focus { background-color: rgba(255,255,255,.14); border-color: #fff; color: #fff; }

.btn-danger { box-shadow: 0 2px 8px rgba(220,53,69,.22); }
.btn-danger:hover, .btn-danger:focus { box-shadow: 0 4px 14px rgba(220,53,69,.3); }

.btn-primary {
  background-color: var(--bl-ink);
  border-color: var(--bl-ink);
}
.btn-primary:hover, .btn-primary:focus { background-color: #2a3040; border-color: #2a3040; }

.btn-link { color: var(--bl-success); text-decoration: none; }
.btn-link:hover { color: var(--bl-success-dark); text-decoration: underline; }

/* ---------- forms ---------- */
.form-control, .form-select {
  border-radius: var(--bl-radius-sm);
  border-color: var(--bl-border);
  transition: border-color var(--bl-transition), box-shadow var(--bl-transition);
}
.form-control:focus, .form-select:focus {
  border-color: var(--bl-gold);
  box-shadow: 0 0 0 .2rem rgba(233,164,0,.18);
}
.form-label { font-weight: 500; color: var(--bl-ink); font-size: .875rem; }
.form-check-input:checked {
  background-color: var(--bl-success);
  border-color: var(--bl-success);
}
.form-check-input:focus {
  border-color: var(--bl-gold);
  box-shadow: 0 0 0 .2rem rgba(233,164,0,.18);
}
.input-group .btn { border-radius: 0 var(--bl-radius-sm) var(--bl-radius-sm) 0; }
.input-group .form-control:not(:last-child) { border-radius: var(--bl-radius-sm) 0 0 var(--bl-radius-sm); }

/* ---------- cards & panels ---------- */
.card {
  border: 1px solid var(--bl-border);
  border-radius: var(--bl-radius);
  box-shadow: var(--bl-shadow-sm);
}
.card-header {
  background-color: var(--bl-surface);
  border-bottom: 1px solid var(--bl-border);
  border-radius: var(--bl-radius) var(--bl-radius) 0 0 !important;
  font-weight: 600;
  color: var(--bl-ink);
}
.card-footer {
  background-color: #fbfbfc;
  border-top: 1px solid var(--bl-border);
}

/* Generic "panel" surfaces built from Bootstrap utilities (.bg-light.shadow)
   are used across listing cards, search filters and forms site-wide. */
.bg-light.shadow {
  background-color: var(--bl-surface) !important;
  border: 1px solid var(--bl-border);
  border-radius: var(--bl-radius);
  box-shadow: var(--bl-shadow-sm) !important;
  transition: box-shadow var(--bl-transition), transform var(--bl-transition);
}
.row > .col-xl-4 > .bg-light.shadow,
.row > .col-lg-6 > .bg-light.shadow,
.row > .col-md-6 > .bg-light.shadow {
  overflow: hidden;
}
.row > [class*="col-"] > .bg-light.shadow:hover {
  box-shadow: var(--bl-shadow) !important;
  transform: translateY(-3px);
}

/* ---------- business card (partials/listing_card.php) ---------- */
.bl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bl-surface);
  border: 1px solid var(--bl-border);
  border-radius: var(--bl-radius-lg);
  box-shadow: var(--bl-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--bl-transition), transform var(--bl-transition), border-color var(--bl-transition);
}
.bl-card:hover {
  box-shadow: var(--bl-shadow);
  transform: translateY(-4px);
  border-color: #d8dce3;
}
.bl-card-badge {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 2;
  background: rgba(20,24,31,.82);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .3rem .6rem;
  border-radius: 999px;
}
.bl-card-media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #fafafa, #eef0f2);
  border-bottom: 1px solid var(--bl-border);
  overflow: hidden;
}
.bl-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1.1rem;
}
.bl-card-body {
  padding: 1.1rem 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.bl-card-title {
  font-size: 1.05rem;
  margin-bottom: .35rem;
}
.bl-card-title a {
  color: var(--bl-ink);
  font-weight: 600;
  text-decoration: none;
}
.bl-card-title a:hover { color: var(--bl-success); }
.bl-card-desc {
  color: var(--bl-muted);
  font-size: .88rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: .85rem;
}
.bl-card-meta {
  font-size: .82rem;
  color: var(--bl-muted);
  margin-bottom: .9rem;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.bl-card-meta a { color: var(--bl-muted); text-decoration: none; }
.bl-card-meta a:hover { color: var(--bl-success); text-decoration: underline; }
.bl-card-footer {
  margin-top: auto;
  padding-top: .85rem;
  border-top: 1px solid var(--bl-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.bl-card-rating {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}
.bl-card-score {
  background: var(--bl-ink);
  color: #fff;
  font-weight: 700;
  font-size: .82rem;
  padding: .2rem .45rem;
  border-radius: .4rem;
  flex-shrink: 0;
}
.bl-card-rating .star_rating { font-size: 14px; }
.bl-card-reviews {
  font-size: .72rem;
  color: var(--bl-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bl-card-status {
  font-size: .76rem;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.bl-card-status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.bl-card-status.is-open { color: var(--bl-success); }
.bl-card-status.is-closed { color: var(--bl-danger); }

.shadow { box-shadow: var(--bl-shadow-sm) !important; }
.shadow-sm { box-shadow: 0 1px 2px rgba(20,24,31,.06) !important; }
.shadow-lg { box-shadow: var(--bl-shadow-lg) !important; }

/* ---------- badges & status pills ---------- */
.badge { font-weight: 500; letter-spacing: .01em; border-radius: .4rem; }
.badge.bg-secondary { background-color: #5b6472 !important; }

/* ---------- alerts / flash toast ---------- */
.alert {
  border: 1px solid transparent;
  border-radius: var(--bl-radius-sm);
  box-shadow: var(--bl-shadow);
}
.flash-alert {
  border-left: 4px solid currentColor;
  border-radius: var(--bl-radius-sm);
  animation: bl-slide-in .25s ease;
}
@keyframes bl-slide-in {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ---------- tables ---------- */
.table {
  --bs-table-hover-bg: #FBF6E8;
  border-color: var(--bl-border);
}
.table thead th {
  background-color: #FAFAFB;
  color: var(--bl-ink);
  font-weight: 600;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom-width: 1px;
}
.table > :not(caption) > * > * { vertical-align: middle; }

/* ---------- pagination ---------- */
.pagination .page-link {
  border-radius: .4rem;
  margin: 0 2px;
  border-color: var(--bl-border);
  color: var(--bl-ink);
}
.pagination .page-item.active .page-link {
  background-color: var(--bl-ink);
  border-color: var(--bl-ink);
}
.pagination .page-link:hover { background-color: var(--bl-gold-light); color: var(--bl-ink); }
.pagination li.active { background: var(--bl-gold-light) !important; }

/* ---------- breadcrumbs ---------- */
.breadcrumb-item + .breadcrumb-item::before { color: var(--bl-muted); }
.breadcrumb a { color: var(--bl-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--bl-success); }
.breadcrumb-item.active { color: var(--bl-ink); }

/* ---------- dropdowns ---------- */
.dropdown-menu {
  border: 1px solid var(--bl-border);
  border-radius: var(--bl-radius);
  box-shadow: var(--bl-shadow-lg);
  padding: .5rem;
}
.dropdown-item {
  border-radius: .4rem;
  padding: .5rem .75rem;
  transition: background-color var(--bl-transition);
}
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--bl-gold-light); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--bl-success); color: #fff; }
.dropdown-header { color: var(--bl-muted); font-weight: 600; text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; }

/* ---------- nav-pills (admin sidebar) ---------- */
.nav-pills .nav-link {
  border-radius: .5rem;
  transition: background-color var(--bl-transition), color var(--bl-transition);
}
.nav-pills .nav-link:hover { background-color: rgba(255,255,255,.08); color: #fff; }
.nav-pills .nav-link.active { background-color: var(--bl-gold); color: #21242c; font-weight: 600; }

/* ---------- misc ---------- */
.rounded { border-radius: var(--bl-radius-sm) !important; }
.rounded-3 { border-radius: var(--bl-radius) !important; }

.list-group-item { border-color: var(--bl-border); }

::placeholder { color: #98a1ad; opacity: 1; }