#fw-section-custom-html-c52c9b2b-8733-4e1d-bed3-d452a26bd231 {

.glass-bar {
  /* 1. Positioning & Floating (The "Inset" look) */

  position: fixed;

  top: 75px;             /* Distance from the top */
  left: 50%;
  transform: translateX(-50%);
  width: 90%;            /* Don't touch the sides */
  max-width: 600px;      /* Keep it centered on desktop */
  z-index: 1000;
  padding: 10px 24px;
  
  /* 2. The Dark Glass Effect */
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: 0 12px 40px rgba(0,0,0,0.45);

  
  /* 3. The "Pill" Shape & Border */
  border-radius: 50px;    /* Rounded like your bottom menu */
  border: 1px solid rgba(255, 255, 255, 0.15); /* Subtle highlight edge */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);   /* Soft shadow for depth */
  
  /* Text Styling */
  color: #ffffff;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
}

.glass-bar a {
  color: #fff;
  text-decoration: underline;
  font-weight: 600;
  margin-left: 5px;
}
.glass-bar {
  /* ... existing styles ... */
  
  /* Add this line to make the movement smooth */
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* This class will be toggled by JavaScript */
.glass-bar--hidden {
  transform: translate(-50%, -150%); /* Moves it up and out of view */
  opacity: 0;
}

}

#fw-section-custom-html-b9130e46-ba6c-4c7d-beeb-2fc7ad65ffb5 {

.glass-bar {
  /* 1. Positioning & Floating (The "Inset" look) */

  position: fixed;

  top: 75px;             /* Distance from the top */
  left: 50%;
  transform: translateX(-50%);
  width: 90%;            /* Don't touch the sides */
  max-width: 600px;      /* Keep it centered on desktop */
  z-index: 1000;
  padding: 10px 24px;
  
  /* 2. The Dark Glass Effect */
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: 0 12px 40px rgba(0,0,0,0.45);

  
  /* 3. The "Pill" Shape & Border */
  border-radius: 50px;    /* Rounded like your bottom menu */
  border: 1px solid rgba(255, 255, 255, 0.15); /* Subtle highlight edge */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);   /* Soft shadow for depth */
  
  /* Text Styling */
  color: #ffffff;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
}

.glass-bar a {
  color: #fff;
  text-decoration: underline;
  font-weight: 600;
  margin-left: 5px;
}
.glass-bar {
  /* ... existing styles ... */
  
  /* Add this line to make the movement smooth */
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* This class will be toggled by JavaScript */
.glass-bar--hidden {
  transform: translate(-50%, -150%); /* Moves it up and out of view */
  opacity: 0;
}

}
#fw-section-custom-html-4a739dd1-47fd-45fb-a66d-1157fea76837 {


/* 2. Horizontal Scroll Container */
.scroll-container {
  display: flex;
  gap: 20px;
  padding: 40px;
  overflow-x: auto; /* Enables scrolling */
  scroll-snap-type: x mandatory; /* Makes cards 'snap' into place */
  -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
}

/* Hide scrollbar for a cleaner look */
.scroll-container::-webkit-scrollbar {
  display: none;
}

/* 3. The Glass Card */
.glass-card {
  flex: 0 0 280px; /* Prevents cards from shrinking */
  scroll-snap-align: start;
  border-radius: 24px;
  overflow: visible; 
 
  
  /* Glassmorphism Core */
  background: rgba(255, 255, 255, 0.15); 
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari support */
  
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Colored Top Sections (Semi-transparent) */
.card-top {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 24px 24px 0 0;
}

/* Replacing the blue and orange with a subtle gray offset */
.priceline, .getyourguide {
  /* A deep slate gray with 50% transparency */
  background: rgba(45, 45, 48, 0.5); 
  
  /* Adding a very thin top highlight to make the gray look "metallic" */
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  
  /* This ensures the glass blur still works through the gray */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}




/* The Overlapping Shop Button */
.shop-btn {
  position: absolute;
  bottom: -18px;
  right: 20px;
  background: #111111;
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: 30px;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform 0.2s;
}

.shop-btn:hover { transform: scale(1.05); }

/* Bottom Content */
.card-bottom {
  padding: 40px 20px 25px;
  color: #fff; /* White text looks best on glass */
}

.card-bottom p {
  margin: 0;
  font-weight: 600;
  font-size: 1.1rem;
}

}