/**
 * MMO Air - custom.css
 * phpVMS 7.0.5 / Bootstrap 5.3.x
 * Clean, single-source-of-truth version
 */

/* =========================
   0) Base / misc theme bits
   ========================= */

.select2-container { margin-top: 2px; }

.map-info-box {
  position: absolute;
  bottom: 0;
  padding: 20px;
  height: 100px;
  z-index: 9999;
  background-color: rgba(232, 232, 232, 0.9);
}

.map-info-label {
  display: block;
  padding: 5px;
  background-color: rgba(232, 232, 232, 0.9);
}

/* Dashboard tiles */
.dashboard-box { background: #067ec1; color: #fff; }

.dashboard-box .header {
  left: 0;
  right: 0;
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

.dashboard-box .icon-background {
  float: left;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  font-size: 125px;
}

.dashboard-box .icon { opacity: 0.1; }

.dashboard-box .description {
  position: absolute;
  color: #fff;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 1.3em;
}

.mini-splash {
  padding: 30px 0;
  text-align: center;
  color: #9a9a9a;
  font-weight: 300;
}

.font-large { font-size: 20px; }
.font-medium { font-size: 18px; }

.card-bg {
  float: left;
  position: absolute;
  display: block;
  bottom: 10px;
  width: 100%;
  height: 100%;
  font-size: 275px;
  text-align: center;
}

.blue-bg { background: #067ec1; }
.border-blue-bottom { border-bottom: 3px solid #067ec1; }

.full-height { height: 50vh; }

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.position-ref { position: relative; }
.m-b-md { margin-bottom: 30px; }

/* Bids */
.my-bids {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  margin: 15px;
  padding: 10px;
  border-radius: 0.1875rem;
  background-color: #fa7a50;
}

.my-bids a {
  color: #fff;
  text-decoration: none;
  text-align: center;
}

/* Search */
.search-form .form-control {
  border-radius: 5px;
  width: 250px;
}

/* fix dropdown menu on mobile view */
.dropdown-menu:not(.show) { display: none; }


/* =========================
   1) Brand color overrides
   ========================= */

:root {
  --mmo-brand: #EA00FF;

  /* Bootstrap vars */
  --primary: var(--mmo-brand);
  --info: var(--mmo-brand);
  --bs-primary: var(--mmo-brand);
  --bs-primary-rgb: 234, 0, 255;
}

.btn-primary,
.bg-primary {
  background-color: var(--mmo-brand) !important;
  border-color: var(--mmo-brand) !important;
}

.text-primary { color: var(--mmo-brand) !important; }

a { color: var(--mmo-brand); }
a:hover { color: var(--mmo-brand); }

.nav-link:hover { color: var(--mmo-brand) !important; }


/* =========================
   2) Full-width bleed helper
   (NO 100vw overflow; scoped overflow fix)
   ========================= */

/* phpVMS-safe full bleed */
.mmo-bleed {
  position: relative;

  width: 100vw;
  left: 50%;
  transform: translateX(-50%);

  overflow-x: clip;
}

@supports not (overflow: clip) {
  .mmo-bleed { overflow-x: hidden; }
}


/* =========================
   3) MMO Hero System
   ========================= */

/* Top pane: theme grey, tightened */
.mmo-top-pane {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}

.mmo-top-pane h2 { margin-bottom: 0.5rem !important; }
.mmo-top-pane .lead { margin-bottom: 0 !important; }

/* Hero pane */
.mmo-hero-pane {
  position: relative;

  background-image: url("/assets/img/hero-787.png");
  background-color: #000;
  background-size: cover;
  background-position: 70% center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  /* key fix: stop vertical centering band */
  display: flex;
  align-items: flex-start;

  /* key fix: don’t force giant empty height */
  min-height: auto;

  /* layout breathing room */
  padding-top: 0;
  padding-bottom: 2rem;
}

/* Mobile fallback (iOS/Safari dislike fixed backgrounds) */
@media (max-width: 991px) {
  .mmo-hero-pane {
    background-attachment: scroll;
    background-position: center center;
    padding-bottom: 1.5rem;
  }
}

/* Overlay */
.mmo-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 1;
}

/* Inner wrapper */
.mmo-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;

  /* tighter above-the-fold */
  padding-top: 0.75rem !important;
  padding-bottom: 1rem !important;
}

/* Glass frame */
.mmo-frame {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;

  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);

  max-width: 1400px;
  margin: 0 auto;

  /* padding */
  padding: 22px 28px 28px;

  /* pull frame up slightly into hero (keeps your look, but avoids giant band) */
  margin-top: 0px;
}

@media (max-width: 991px) {
  .mmo-frame {
    margin-top: 0px;
    padding: 18px;
  }
}


/* =========================
   4) Fleet Carousel styling
   ========================= */

.mmo-fleet-carousel {
  border-radius: 12px;
  overflow: hidden;

  display: flex;
  flex-direction: column;
}

.mmo-fleet-carousel .carousel-inner {
  border-radius: 12px;
  order: 1;
}

.mmo-fleet-carousel .carousel-item {
  background: rgba(0, 0, 0, 0.15);
}

.mmo-fleet-carousel .carousel-item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  max-height: 520px;
  background: rgba(0, 0, 0, 0.15);
}

@media (max-width: 991px) {
  .mmo-fleet-carousel .carousel-item img { max-height: 360px; }
}

/* Caption */
.mmo-fleet-carousel .carousel-caption {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  display: inline-block;
  padding: 6px 14px;
  color: #fff !important;
}

.mmo-fleet-carousel .carousel-caption h6,
.mmo-fleet-carousel .carousel-caption p {
  color: #fff !important;
}

/* Indicators below caption */
.mmo-fleet-carousel .carousel-indicators {
  order: 2;
  position: static;
  margin: 12px 0 0;

  overflow-x: auto;
  white-space: nowrap;
  justify-content: center;

  gap: 8px;
  padding: 0 6px 8px;
}

/* optional indicator scrollbar styling */
.mmo-fleet-carousel .carousel-indicators::-webkit-scrollbar {
  height: 6px;
}
.mmo-fleet-carousel .carousel-indicators::-webkit-scrollbar-thumb {
  background: rgba(234, 0, 255, 0.25);
  border-radius: 999px;
}

/* Brand indicators */
.mmo-fleet-carousel .carousel-indicators [data-bs-target] {
  width: 34px;
  height: 6px;
  border-radius: 999px;

  background-image: none !important;
  box-shadow: none !important;
  border: none !important;

  background-color: var(--mmo-brand) !important;
  opacity: 0.28;

  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.mmo-fleet-carousel .carousel-indicators .active {
  opacity: 1;
  transform: scaleX(1.05);
  box-shadow: 0 0 10px rgba(234, 0, 255, 0.85);
  background-color: var(--mmo-brand) !important;
}

/* Extra safety */
.carousel-indicators button { background-image: none !important; }


/* =========================
   5) Pink carousel arrows
   ========================= */

.mmo-fleet-carousel .carousel-control-prev-icon,
.mmo-fleet-carousel .carousel-control-next-icon {
  filter: none;
  background-size: 100% 100%;
}

.mmo-fleet-carousel .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23EA00FF' viewBox='0 0 16 16'%3E%3Cpath d='M11 1 3 8l8 7V1z'/%3E%3C/svg%3E");
}

.mmo-fleet-carousel .carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23EA00FF' viewBox='0 0 16 16'%3E%3Cpath d='M5 1v14l8-7-8-7z'/%3E%3C/svg%3E");
}

.mmo-fleet-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.mmo-fleet-carousel .carousel-control-next:hover .carousel-control-next-icon {
  filter: drop-shadow(0 0 6px rgba(234, 0, 255, 0.8));
}