.search-panel{overflow:visible;isolation:isolate}.service-tabs{flex-wrap:wrap;row-gap:8px}.service-tabs button{appearance:none;background:transparent;border:0;padding:0;color:var(--muted);font:inherit;cursor:pointer}.service-tabs button.active{color:var(--brand);font-weight:700;border-bottom:2px solid var(--brand);padding-bottom:14px}.service-search-hint{margin:0 18px 16px;color:var(--muted);font-size:12px}.service-search-fields{padding-bottom:8px}.destination-field{position:relative}.destination-suggestions{position:absolute;z-index:20;top:calc(100% + 8px);left:0;right:0;max-height:260px;overflow-y:auto;background:#fff;border:1px solid #e4e0da;border-radius:12px;box-shadow:0 12px 28px rgba(30,27,24,.16);padding:6px}.destination-suggestion{display:flex;width:100%;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:#25211e;text-align:left;cursor:pointer;font:inherit}.destination-suggestion:hover,.destination-suggestion:focus{background:#f5f2ed;outline:none}.destination-suggestion small{flex:none;color:#77716a;font-size:12px}@media(max-width:540px){
  /* Mobile: keep service tabs on a single scrollable row instead of wrapping into a
     cramped two-line block. Users swipe horizontally to reach Spa/Experience/Tours/Others. */
  .search-type.service-tabs{
    flex-wrap:nowrap;
    row-gap:0;
    gap:20px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;            /* Firefox */
    scroll-snap-type:x proximity;
    padding-bottom:2px;
  }
  .search-type.service-tabs::-webkit-scrollbar{display:none} /* Chrome/Safari */
  .service-tabs button{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start}
  .service-tabs button.active{padding-bottom:12px}
  .service-search-hint{margin:0 14px 14px}
}

/* Ferry terminal autocomplete (homepage search panel) */
.ferry-terminal-suggestions {
    position: absolute;
    z-index: 200;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
    background: #fff;
    border: 1px solid #d7ddda;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
}
.ferry-terminal-option {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10px 14px;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #f0f4f1;
    cursor: pointer;
    gap: 2px;
}
.ferry-terminal-option:last-child { border-bottom: 0; }
.ferry-terminal-option:hover, .ferry-terminal-option:focus { background: #fff7f3; outline: none; }
.ferry-terminal-option span { font-size: 14px; color: #17221d; font-weight: 500; }
.ferry-terminal-option small { font-size: 11.5px; color: #63706d; }
/* Parent label needs position:relative for the absolutely-positioned dropdown */
.search-fields label { position: relative; }
.service-search-fields label { position: relative; }
.ferry-search-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; align-items: end; }
.ferry-search-fields label { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 500; }
.ferry-search-fields select, .ferry-search-fields input { padding: 0.55rem 0.65rem; border: 1px solid #d7ddda; border-radius: 8px; }
.ferry-departure-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.ferry-departure-card { display: grid; grid-template-columns: 1.1fr 1.4fr auto; gap: 1rem; align-items: center; border: 1px solid #e4ebe6; border-radius: 12px; padding: 1rem 1.25rem; background: #fff; }
.ferry-operator { display: flex; align-items: center; gap: 0.75rem; }
.ferry-operator img { width: 48px; height: 48px; object-fit: contain; }
.ferry-operator div { display: flex; flex-direction: column; }
.ferry-route { display: flex; flex-direction: column; gap: 0.2rem; }
.ferry-price { display: flex; flex-direction: column; gap: 0.35rem; text-align: right; }
.ferry-passenger { border: 1px solid #e4ebe6; border-radius: 10px; padding: 0.85rem 1rem; margin-bottom: 0.85rem; }
.ferry-passenger legend { font-weight: 600; padding: 0 0.4rem; }
.ferry-contact { border: 1px solid #e4ebe6; border-radius: 10px; padding: 0.85rem 1rem; margin-bottom: 1rem; }
.ferry-contact legend { font-weight: 600; padding: 0 0.4rem; }
@media (max-width: 768px) { .ferry-departure-card { grid-template-columns: 1fr; } .ferry-price { text-align: left; } }