:root {
  --ab-blue: #1060a0;
  --ab-red: #e84848;
}

/* Bootstrap theme overrides */
:root {
  --bs-primary: var(--ab-blue);
  --bs-primary-rgb: 16, 96, 160;
  --bs-danger: var(--ab-red);
  --bs-danger-rgb: 232, 72, 72;
}

.ab-navbar {
  background: var(--ab-blue);
}

.ab-navbar .navbar-brand,
.ab-navbar .nav-link,
.ab-navbar .navbar-toggler {
  color: #fff;
}

.ab-navbar .nav-link:hover {
  color: #fff;
  opacity: 0.9;
}

.ab-hero {
  background: linear-gradient(
    135deg,
    rgba(16, 96, 160, 1) 0%,
    rgba(16, 96, 160, 0.15) 70%
  );
}

.ab-card-hover {
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.ab-card-hover:hover {
  transform: translateY(-1px);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
}

.ab-price {
  font-weight: 700;
}

.ab-sale {
  text-decoration: line-through;
  opacity: 0.7;
}

.ab-badge-sale {
  background: var(--ab-red);
}
.env-banner {
  width: 100%;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  z-index: 1050;
}

/* Environment */
.env-dev {
  background: #fff3cd;
  color: #664d03;
} /* yellow */
.env-production {
  background: #e2e3e5;
  color: #1f2937;
}

/* Context accent */
.ctx-backoffice {
  box-shadow: inset 0 -3px 0 #0d6efd;
} /* blue */
.ctx-public {
  box-shadow: inset 0 -3px 0 #dc3545;
} /* red */
/* DEV navbar background */

/* Production keeps normal styling */
body.env-production .navbar.main-navbar {
  background: inherit;
}

/* Context underline */
body.ctx-backoffice .navbar.main-navbar {
  border-bottom: 3px solid #0d6efd;
}
body.ctx-public .navbar.main-navbar {
  border-bottom: 3px solid #dc3545;
}
/* Minimal footprint; always readable */
.env-ribbon {
  width: 100%;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
}

/* DEV: dark text on bright but narrow band */
.env-ribbon.env-dev {
  background: #ffc107; /* Bootstrap warning */
  color: #111827;
}

/* PROD: optional (or omit entirely by not rendering in production) */
.env-ribbon.env-production {
  background: #e5e7eb;
  color: #111827;
}

/* Context cue (border only, does not alter readability) */
.env-ribbon.ctx-backoffice {
  border-bottom: 3px solid #0d6efd;
} /* blue */
.env-ribbon.ctx-public {
  border-bottom: 3px solid #dc3545;
} /* red */
/* Make the options modal usable on mobile */
@media (max-width: 576px) {
  #abOptionsModal .modal-dialog {
    margin: 0; /* no wasted space */
    height: 100dvh; /* dynamic viewport height */
  }
  #abOptionsModal .modal-content {
    height: 100dvh;
    border-radius: 0; /* feels native */
  }
  #abOptionsModal .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* iOS momentum scroll */
  }
}