/* ---------------------
   FLOATING HELPERS
   --------------------- */
.float-right {
  float: right;
  margin-left: 1rem;
  margin-bottom: 1rem;
  max-width: 450px;
}

.float-left {
  float: left;
  margin-right: 1rem;
  margin-bottom: 1rem;
  max-width: 450px;
}

/* On small screens floats collapse to block */
@media (max-width: 768px) {
  .float-right,
  .float-left {
    float: none;
    display: block;
    margin: 0 auto 1rem auto; /* center in block */
    max-width: 100%;
  }
}


/* ---------------------
   INLINE / SIDE-BY-SIDE BOXES
   --------------------- */
.inline-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.inline-box {
  flex: 1 1 45%;      /* two columns on medium screens */
  min-width: 200px;   /* prevents squishing too small */
}

@media (max-width: 600px) {
  .inline-box {
    flex: 1 1 100%;   /* full width on small screens */
  }
}


/* ---------------------
   BORDERS & PADDING
   --------------------- */
.bordered {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 12px 16px;
  background: #fafafa;
  box-sizing: border-box;
}
/* 





.float-right {
  float: right;
  margin-left: 20px;
  margin-bottom: 20px;
}

/* On narrow screens, drop float but keep the cap */
@media (max-width: 768px) {
  .float-right {
    float: none;
    display: block;
    margin: 0 auto 20px auto;  /* center */
  }
}

.long-desc-list {
    margin-left: 20px;
    border: 1px solid var(--bs-primary-light);
    padding-top: 20px;
    padding-right: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    background: var(--bs-primary-light-opaque);
    background: white;
}


/* Only affect the specific container using both classes */
.row.list-container.long-desc-list {
    font-weight: 600;
    color: var(--bs-primary-dark);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end; /* align right on larger screens */
}

/* Target the columns inside using Bootstrap's col classes */
.row.list-container.long-desc-list > .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
    box-sizing: border-box;
    padding: 0 10px; /* if desired */
}


.box-float-right {
  float: right;
  margin: 0 0 20px 20px;
  padding: 15px;
  border: 1px solid #a3b66d;
  border-radius: 6px;
  background: #fff;
  max-width: 500px;
}

.box-float-right .box-columns {
  display: flex;
  gap: 20px;
}

.box-float-right .box-columns > div {
  flex: 1;
}

@media (max-width: 768px) {
  .box-float-right {
    float: none;
    display: block;
    max-width: 100%;
    margin: 20px auto;
  }

  .box-float-right .box-columns {
    flex-direction: column;
  }
}


.box-float {
  float: right;
  margin-left: 20px;
  margin-bottom: 20px;
  max-width: 450px; /* keeps it from growing too wide */
}

@media (max-width: 768px) {
  .box-float {
    float: none;
    display: block;
    margin: 0 auto 20px auto; /* centers it */
    width: 100%;
    max-width: 100%;
  }
}

.list-container {
  border: 1px solid #ccc;      /* light border */
  border-radius: 8px;          /* rounded corners */
  padding: 20px;               /* space inside */
  margin: 20px 0 20px 20px;    /* more space outside */
  background: #fff;            /* optional white background */
}

/* On small screens, let it drop full-width */
@media (max-width: 768px) {
  .list-container {
    float: none !important;    /* override float-end */
    margin: 20px auto;         /* center with margin */
    width: 100%;               /* full width */
  }
}


.testing-float {
    border :1px solid var(--bs-primary-dark);
    margin-left: 20px;
    margin-bottom: 20px;
    padding:0px;
}

/* On small screens, let it drop full-width */
@media (max-width: 991.98px) {
  .testing-float {
    float: none !important;    /* override float-end */
    margin: 20px auto;         /* center with margin */
    width: 100%;               /* full width */
  }
}

/* xl Extra large screens (≥1200px and up to <1400px) */
@media (max-width: 1399.98px) {
    
}

/* lg Large screens (≥992px and up to <1200px) */
@media (max-width: 1199.98px) {
}

/* md Medium screens (tablets, ≥768px and up to <992px) */
@media (max-width: 991.98px) {
}

/* sm Small screens (landscape phones, ≥576px and up to <768px) */
@media (max-width: 767.98px) {
}

/* xs Extra small screens (portrait phones, <576px) */
@media (max-width: 575.98px) {
}


.center-content {
    text-align: center;
}
/* 

<div class="row float-end list-container long-desc-list testing-float">
  <div class="col-md-6">
    <ul class="checklist">
      <li>Flexibility</li>
      <li>Cultural Activities</li>
      <li>Walk, Hike, Bike</li>
      <li><em>Your</em> fitness levels</li>
      <li>Meals to fit <em>your</em> appetite</li>
      <li>Seasonal Highlights</li>
      <li>Festivals and Special Events</li>
    </ul>
  </div>
  <div class="col-md-6">
    <ul class="checklist">
      <li>Start / End Anywhere</li>
      <li>Kanto Region</li>
      <li>Kansai Region</li>
      <li>Northern Kyoto</li>
      <li>Japan Sea Coast</li>
      <li>Kyushu & Nearby Islands</li>
      <li>Shikoku</li>
    </ul>
  </div>
</div>
 */