/* css/main.css
   Bootstrap-only build: keep styling in Bootstrap v4 and avoid template CSS. */
@import url("bootstrap.min.css");

/* Brand theme overrides (Bootstrap v4) */
:root {
  /* Match the original index.html (MobApp) purple->pink gradient look */
  --ofit-primary: #fa2a8f;
  --ofit-primary-hover: #e54595;
  --ofit-accent-a: #4a0d8f;
  --ofit-accent-b: #fa2a8f;
  --ofit-dark: #111827;
  --ofit-body-bg: #f8fafc;
  --ofit-text: #111827;
}

body {
  background-color: #f8fafc;
  background-color: var(--ofit-body-bg);
  color: #111827;
  color: var(--ofit-text);
}

a {
  color: #fa2a8f;
  color: var(--ofit-primary);
}

a:hover,
a:focus {
  color: #e54595;
  color: var(--ofit-primary-hover);
}

.bg-dark {
  background-color: #111827 !important;
  background-color: var(--ofit-dark) !important;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.85);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: rgba(255, 255, 255, 1);
}

.navbar-dark .navbar-nav .nav-link.active {
  color: #fff;
}

.btn-primary {
  background-color: #fa2a8f !important;
  border-color: #fa2a8f !important;
  background-image: linear-gradient(135deg, var(--ofit-accent-a) 0%, var(--ofit-accent-b) 100%) !important;
  border-color: var(--ofit-accent-b) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #e54595 !important;
  border-color: #e54595 !important;
  background-image: linear-gradient(135deg, var(--ofit-accent-b) 0%, var(--ofit-primary-hover) 100%) !important;
  border-color: var(--ofit-primary-hover) !important;
}

.btn-outline-primary {
  color: #fa2a8f !important;
  border-color: #fa2a8f !important;
  color: var(--ofit-primary) !important;
  border-color: var(--ofit-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: #fa2a8f !important;
  border-color: #fa2a8f !important;
  background-color: var(--ofit-primary) !important;
  border-color: var(--ofit-primary) !important;
}

/* Bootstrap components that still use default primary */
.bg-primary {
  background-color: #4a0d8f !important;
  background-image: linear-gradient(135deg, var(--ofit-accent-a) 0%, var(--ofit-accent-b) 100%) !important;
}

.text-primary {
  color: #fa2a8f !important;
  color: var(--ofit-primary) !important;
}

.border-primary {
  border-color: #fa2a8f !important;
  border-color: var(--ofit-primary) !important;
}

.badge-primary {
  background-color: #fa2a8f !important;
  background-color: var(--ofit-primary) !important;
}

.list-group-item.active {
  background-color: #fa2a8f !important;
  border-color: #fa2a8f !important;
  background-color: var(--ofit-primary) !important;
  border-color: var(--ofit-primary) !important;
}

.page-item.active .page-link {
  background-color: #fa2a8f !important;
  border-color: #fa2a8f !important;
  background-color: var(--ofit-primary) !important;
  border-color: var(--ofit-primary) !important;
}

/* Wider content for list pages (opt-in per page via .ofit-wide) */
.container.ofit-wide {
  max-width: 1400px;
}

@media (min-width: 1600px) {
  .container.ofit-wide {
    max-width: 1520px;
  }
}

/* Product detail: keep media area stable even if images have different sizes */
.ofit-media-frame {
  height: 320px;
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .ofit-media-frame {
    height: 420px;
  }
}

.ofit-media-frame > img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Carousel should inherit the frame height and center images */
.ofit-media-frame .carousel,
.ofit-media-frame .carousel-inner,
.ofit-media-frame .carousel-item {
  height: 100%;
  width: 100%;
}

.ofit-media-frame .carousel-item img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.ofit-carousel-center {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}