/* === START Moorings status – pier + Boat-12.svg === */
/* === START Moorings status – pier + Boat-12.svg === */



.sbc-moorings-status-card {
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #f5f7ff;
}

.sbc-moorings-pause-notice {
  max-width: 640px;
  margin: 1rem auto;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(180, 83, 9, 0.25);
  border-left: 4px solid #b45309;
  border-radius: 6px;
  background: #fff7ed;
  color: #431407;
  font-size: 0.98rem;
  line-height: 1.5;
}

.sbc-moorings-pause-notice p {
  margin: 0 0 0.65rem;
}

.sbc-moorings-pause-notice p:last-child {
  margin-bottom: 0;
}

/* Container for the little diagram */
.sbc-moorings-pier-visual {
  position: relative;
  width: 260px; /* gives room for left + right labels */
  height: 90px;
  margin: 0.5rem auto 0.75rem;
}

/* The pier: vertical plank in the middle */
.sbc-moorings-pier-line {
  position: absolute;
  left: 50%;
  top: 4px;
  bottom: 4px;
  width: 18px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0.15)
  );
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}

/* Shared layout for both boat columns */
.sbc-moorings-boats-row {
  position: absolute;
  top: 6px;
  bottom: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3px;
}

/* Boats on the RIGHT side of the pier */
.sbc-moorings-boats-row--right {
  left: 50%;
  transform: translateX(18%); /* smaller number = closer to pier */
}

/* Boats on the LEFT side of the pier */
.sbc-moorings-boats-row--left {
  left: 50%;
  transform: translateX(-118%); /* more negative = further left from pier */
  align-items: flex-end;
}

/* A single boat + its label */
.sbc-boat-row {
  display: flex;
  align-items: center;
  gap: 4px; /* spacing between icon and name */
}

/* Mirror the layout on the left so text sits on the outer side */
.sbc-moorings-boats-row--left .sbc-boat-row {
  flex-direction: row-reverse;
}

.sbc-moorings-boats-row--left .sbc-boat-label {
  text-align: right;
}

/* Boat label text */
.sbc-boat-label {
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0.9;
}

/* Base boat slot – uses your Boat-12 white PNG */
.sbc-boat {
  width: 30px;
  height: 26px;
  background-image: url('https://scallowayboatingclub.com/wp-content/uploads/2025/12/Boat-12-white.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.35; /* free berth */
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Occupied berth – brighter and nudged slightly towards the pier */
.sbc-boat--occupied {
  opacity: 1;
  transform: translateX(-2px);
}

/* Extra vessels indicator if count > slots (pill style) */
.sbc-boat-extra {
  align-self: flex-end;
  margin-top: 4px;
  font-size: 0.8rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.35);
  opacity: 0.9;
}

/* Text under the diagram */
.sbc-moorings-status-text {
  margin-top: 0.1rem;
}

/* Extra rafted vessels line under the main status */
.sbc-moorings-extra-text {
  margin-top: 0.15rem;
  font-size: 0.8rem;
  opacity: 0.9;
}

/* Legacy "vessel names" line (not really used now but safe to keep) */
.sbc-moorings-vessel-names {
  margin-top: 0.25rem;
  font-size: 0.85rem;
  opacity: 1;
}

/* Flip left-side boats so they face the pier */
.sbc-moorings-boats-row--left .sbc-boat {
  transform: scaleX(-1);
}

/* For occupied boats on the left, keep the small nudge as well */
.sbc-moorings-boats-row--left .sbc-boat.sbc-boat--occupied {
  transform: scaleX(-1) translateX(2px);
}



/* END Mooriing Staus Style */