/* 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;
}

/* --- Carousel & Thumbnail Styles Moved from HTML --- */

/* Bootstrap Carousel Overrides for uniform height */
.carousel-item {
    height: 420px; /* Fixed height for stability */
    background: rgba(0, 0, 0, 0.03);
    border-radius: 0.25rem;
}

@media (max-width: 768px) {
    .carousel-item {
        height: 300px;
    }
}

.carousel-item img {
    max-height: 100%;
    width: auto;
    max-width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
}

/* Shopee-style Thumbnails with Bootstrap Grid */
#product-thumbnails-container .thumbnail-wrapper {
    width: 80px;
    height: 80px;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s;
    margin: 4px;
}

#product-thumbnails-container .thumbnail-wrapper.active {
    border-color: #fd378e; /* Using template secondary pink */
}

#product-thumbnails-container .thumbnail-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Darken control icons for better visibility */
.carousel-control-prev,
.carousel-control-next {
    width: 50px;
    opacity: 0.8;
    transition: opacity 0.2s;
    background: transparent !important;
    border: none;
}

.carousel-control-prev:hover,
.carousel-control-next:hover,
.carousel-control-prev:focus,
.carousel-control-next:focus {
    opacity: 1;
    background: transparent !important;
    outline: none;
    border: none;
    box-shadow: none;
}

.custom-carousel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #333;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    user-select: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}