html {
   position: relative;
   min-height: 100%;
 }

 body {
   margin: 0;
   padding: 0 0 80px;
   /* Space for footer */
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   font-family: 'Roboto', 'Noto Sans TC', 'Helvetica Neue', Helvetica, Arial, 'PingFang TC', 'Hiragino Sans GB', 'Heiti TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif;
   position: relative;
   background-color: #fcebc1;
 }

 .header-sticky {
   position: sticky;
   top: 0;
   z-index: 1001;
 }

.menu-item {
  background-color: #b0e6fd;
  text-align: center;
}

.menu-item.active,
.menu-item:hover {
  background-color:#60c2ff ;
}

.menu-item a {
  text-decoration: none;
  color: #000;
  font-weight: bold;
  height: 50px;
  line-height: 50px;
  display: block;
}

 .banner {
   text-align: center;
   margin: 0 auto;
   max-width: 500px;
   width: 100%;
 }

 .main-content {
   max-width: 500px;
   margin: 0 auto;
   width: 100%;
   padding: 15px;
   flex: 1;
 }

 /* Filter Section Styling */
 .filter-box {
   background: rgba(255, 255, 255, 0.9);
   padding: 15px;
   border-radius: 10px;
   margin-bottom: 20px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }

 .filter-row {
   display: flex;
   align-items: center;
   margin-bottom: 12px;
 }

 .filter-label {
   font-weight: bold;
   font-size: 14px;
   color: #333;
   width: 75px;
   flex-shrink: 0;
 }

 .btn-group-custom {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
 }

 .btn-item {
   border-radius: 5px;
   background-color: white;
   color: black;
   border: 1px solid #ddd;
   cursor: pointer;
   padding: 4px 10px;
   font-size: 13px;
   font-weight: 500;
   transition: all 0.2s;
 }

 .btn-item:hover {
   background-color: #f0f0f0;
 }

 .btn-item.active {
   background-color: black;
   color: white;
   border-color: black;
 }

 /* Itinerary Card Styling */
 .itinerary-card {
   background: white;
   border-radius: 12px;
   margin-bottom: 20px;
   padding: 15px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   border: none;
 }

 .tag-row {
   display: flex;
   justify-content: space-between;
   margin-bottom: 10px;
   align-items: center;
 }

 .tag-destination-days {
   background: #FF5252;
   color: white;
   padding: 3px 12px;
   border-radius: 15px;
   font-size: 13px;
   font-weight: bold;
 }

 .tag-departure-info {
   color: #0288D1;
   font-size: 13px;
   font-weight: bold;
 }

 .itinerary-name {
   font-size: 18px;
   font-weight: bold;
   color: #333;
   margin-bottom: 12px;
   line-height: 1.3;
 }

 .info-item {
   margin-bottom: 6px;
   font-size: 14px;
 }

 .info-title {
   font-weight: bold;
   color: #555;
   width: 70px;
   display: inline-block;
 }

 .route-desc {
   background: #f8f9fa;
   padding: 10px;
   border-radius: 6px;
   font-size: 13px;
   color: #444;
   white-space: pre-line;
   border-left: 3px solid #0288D1;
   margin-top: 10px;
 }

 .btn-link-custom {
   display: block;
   width: 100%;
   text-align: center;
   border-radius: 8px;
   background-color: #FF9800;
   color: white;
   font-weight: bold;
   padding: 12px;
   margin-top: 15px;
   text-decoration: none !important;
   transition: background 0.3s;
 }

 .btn-link-custom:hover {
   background-color: #F57C00;
   color: white;
 }

 footer {
   position: absolute;
   bottom: 0;
   width: 100%;
   max-width: 500px;
   height: 60px;
   line-height: 60px;
   background-color: #60c2ff;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   justify-content: center;
   align-items: center;
   color: #000;
   font-size: 14px;
 }

 @media (max-width: 576px) {

   .menu-row,
   .banner,
   .main-content,
   footer {
     max-width: 100%;
   }
 }

 footer {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 60px;
   line-height: 60px;
   background-color: #60c2ff;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   justify-content: center;
   align-items: center;
   color: #000;
 }

 .footer-logo {
   height: 50px;
   margin: 0 auto;
   display: block;
   text-align: center;
 }


 .form-ipt {
   height: 50px !important;
   font-size: 14px;
 }



 @media (min-width: 576px) {
   .container-fluid .row {
     max-width: 500px;
     margin: 0 auto;
   }

   .banner,
   .container,
   footer {
     max-width: 500px;
   }
 }

 .modal-mask {
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: rgba(0, 0, 0, .5);
   z-index: 1050;
   display: flex;
 }

 .modal-wrapper {
   align-self: center !important;
   margin: 0 auto;
   background: #fff;
   padding: 5px;
   border-radius: 5px;
   width: 360px;
   transition: opacity 10s linear;
 }

 .modal-fade-enter,
 .modal-fade-leave-to {
   opacity: 0;
 }

 .modal-fade-enter-active,
 .modal-fade-leave-active {
   transition: opacity .3s linear;
 }

 .form-ipt.mx-datepicker {
   width: 100%;
 }

 .form-ipt.mx-datepicker .mx-input {
   padding: 24px 10px;
 }


 .icon-smap {
   display: inline-block;
   width: 35px;
   padding-top: 0px;
   padding-bottom: 0px;
   margin: auto;
 }

.title-line { padding-top: .5em; border-top: 2px dashed #ff7f7f; }
.sign-title { border-bottom: 2px solid #000; text-align: center; padding-bottom: 0.5em; }
.other-role+.other-role { padding-top: 1em; border-top: 1px solid #ff7f7f; }
.col-th{ position: sticky; left: 0; background-color: rgb(195, 230, 237); }
.col-th strong{ width: 5em; display: inline-block; }
.table-responsive{ position: relative; }
.table-responsive.dragtip:before{
    content: '左右拖動以檢視更多'; color: #fff;
    position: absolute; width: 100%; height: 100%;
    z-index: 3; background-color: rgba(0, 0, 0, .5);
    padding-top: 50%; font-size: 2em; text-align: center;
}
.btn-black{
  background-color: #000;
  border-color: #000;
  color: #fff;
}