/* ============================================================
   H2c Itinerary Map — [h2c_itinerary_map] shortcode styles
   ============================================================ */

/* Map container */
.h2c-itinerary-map-container {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

/* ---- Numbered day dot marker ---- */
.h2c-itin-marker {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f60c09;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
}

.h2c-itin-marker:hover {
  transform: scale(1.2);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}

.h2c-itin-marker.clicked {
  transform: scale(1.25);
  background: #c50906;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}

/* ---- Popup wrapper ---- */
.h2c-itin-popup .maplibregl-popup-content {
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
  width: 220px;
}

.h2c-itin-popup .maplibregl-popup-tip {
    border-top-color: #fff;
    position: relative;
    top: -2px;
}
.h2c-itin-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip {
    top: 0;
}
.h2c-itin-popup .maplibregl-popup-close-button {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 2;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.h2c-itin-popup .maplibregl-popup-close-button:hover {
  background: rgba(0, 0, 0, 0.55);
}

/* ---- Card inside popup — extends .tour-itinerary-item-card ---- */
.h2c-itin-popup-card {
  cursor: default;
}

.h2c-itin-popup-card .top {
  position: relative;
}

.h2c-itin-popup-card .image-wrapper {
  height: 120px;
  overflow: hidden;
}

.h2c-itin-popup-card .item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.h2c-itin-popup-card .tour-days {
  position: absolute;
  bottom: 6px;
  left: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.h2c-itin-popup-card .tour-themes {
  position: relative;
  bottom: auto;
  left: auto;
  margin-bottom: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.h2c-itin-popup-card .tour-themes .theme-capsule {
  background-color: #eee;
}

/* Day badge */
.h2c-itin-popup-day-badge {
  color: #fff;
  background: #999;
  font-size: 13px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  line-height: 1.4;
}

.h2c-itin-popup-card .theme-capsule {
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  font-size: 10px;
  padding: 4px 6px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 3px;
  line-height: 1;
  height: auto !important;
}

.h2c-itin-popup-card .theme-capsule img {
  width: 12px;
  height: 12px;
  object-fit: contain;
}

.h2c-itin-popup-card .item-card-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.h2c-itin-popup-card .item-title {
  display: flex;
  font-size: 15px;
  font-weight: 500;
  margin: 0;
  line-height: 1.3;
}

.h2c-itin-popup-card .item-cost, 
.h2c-itin-popup-card .item-label {
  margin: 0 !important;
  font-size: 14px !important;
  font-family: "Outfit", sans-serif;
}

/* ---- Recenter control (sits below the zoom +/- buttons) ---- */
/* Hidden until the map view moves away from its initial position */
.h2c-map-recenter-ctrl {
  margin-top: 10px !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.h2c-map-recenter-ctrl.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.maplibregl-ctrl-recenter {
  width: 29px;
  height: 29px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #fff;
  border: 0;
  cursor: pointer;
}

.maplibregl-ctrl-recenter:hover {
  background: #f2f2f2;
}

.maplibregl-ctrl-recenter span {
  display: block;
  width: 14px;
  height: 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' width='512' height='512' x='0' y='0' viewBox='0 0 94.073 94.072' style='enable-background:new 0 0 512 512' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M91.465 5.491a1.996 1.996 0 0 0-2.18.434l-8.316 8.316C72.046 5.057 60.125 0 47.399 0c-2.692 0-5.407.235-8.068.697C21.218 3.845 6.542 17.405 1.944 35.244a2 2 0 0 0 1.936 2.499h12.738a2 2 0 0 0 1.878-1.313c3.729-10.193 12.992-17.971 23.598-19.814a31.022 31.022 0 0 1 5.288-.456c8.428 0 16.299 3.374 22.168 9.5l-8.445 8.444a2.001 2.001 0 0 0 1.414 3.414H90.7a2 2 0 0 0 2-2V7.338c0-.808-.489-1.537-1.235-1.847zM90.192 56.328H77.455c-.839 0-1.59.523-1.878 1.312-3.729 10.193-12.992 17.972-23.598 19.814a31.03 31.03 0 0 1-5.288.456c-8.428 0-16.3-3.374-22.168-9.5l8.444-8.444a2 2 0 0 0-1.414-3.414H3.374a2 2 0 0 0-2 2v28.181a2 2 0 0 0 3.414 1.413l8.316-8.315c8.922 9.183 20.843 14.241 33.569 14.241 2.693 0 5.408-.235 8.069-.697 18.112-3.146 32.789-16.708 37.387-34.547.155-.6.023-1.234-.354-1.725a2.008 2.008 0 0 0-1.583-.775z' fill='%231a1a1a' opacity='1'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

/* ---- Ctrl+scroll / pinch-to-zoom hint pill ---- */
.h2c-map-scroll-hint {
  position: absolute;
  bottom: 10px; /* sit above the MapLibre attribution bar */
  right: 10px;
  left: auto;
  background: rgba(0, 0, 0, 0.48);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 20px;
  pointer-events: none;
  z-index: 5;
  opacity: 0.72;
  transition: opacity 0.25s ease, background 0.25s ease;
  user-select: none;
}

.h2c-map-scroll-hint kbd {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 3px;
  padding: 1px 5px;
}

/* Highlight when triggered by a scroll attempt */
.h2c-map-scroll-hint.active {
  background: rgba(0, 0, 0, 0.75);
  opacity: 1;
}

/* Show correct text per device type */
.h2c-map-hint-mobile  { display: none; }
.h2c-map-hint-desktop { display: inline; }

@media (hover: none) and (pointer: coarse) {
  .h2c-map-hint-desktop { display: none; }
  .h2c-map-hint-mobile  { display: inline; }
}

/* ============================================================
   Accommodation popup
   ============================================================ */

/* Blue header: day badge + "Stay Package" title */
.h2c-itin-accom-header {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  padding: 10px 12px 8px;
}

.h2c-itin-accom-title {
  font-size: 14px;
  font-weight: 700;
  color: #213246;
  margin: 0;
  line-height: 1.2;
}

/* Scrollable list of accommodation cards */
.h2c-itin-accom-list {
  max-height: 200px;
  overflow-y: auto;
  padding-bottom: 20px;
}

/* "or" divider between cards */
.h2c-itin-accom-or {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #aaa;
  padding: 3px 0;
  position: relative;
  margin-top: 25px;
}

.h2c-itin-accom-or::before,
.h2c-itin-accom-or::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 38%;
  height: 1px;
  background: #e8e8e8;
}

.h2c-itin-accom-or::before { left: 8%; }
.h2c-itin-accom-or::after  { right: 8%; }

/* Each accommodation card inside the popup */
.h2c-itin-accom-popup-wrap .h2c-itin-popup-card.accommodation {
  cursor: default;
}

.h2c-itin-accom-popup-wrap .h2c-itin-popup-card.accommodation .image-wrapper {
  height: 100px;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

.h2c-itin-accom-popup-wrap .h2c-itin-popup-card.accommodation .item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.h2c-itin-accom-popup-wrap .h2c-itin-popup-card.accommodation .bottom {
  padding: 8px 10px 28px;
}

.h2c-itin-accom-popup-wrap .h2c-itin-popup-card.accommodation .item-title {
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 3px;
  line-height: 1.3;
}

.h2c-itin-accom-popup-wrap .h2c-itin-popup-card.accommodation .item-cost {
  font-size: 14px;
  margin: 0;
  color: #213246;
  font-weight: 600;
}

.h2c-itin-accom-popup-wrap .h2c-itin-popup-card.accommodation {
    margin: 5px;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    opacity: 0.4;
}
.h2c-itin-accom-popup-wrap .h2c-itin-popup-card.accommodation.active {
  border: 2px solid #f60c09;
  opacity: 1;
}

.h2c-itin-accom-popup-wrap .h2c-itin-popup-card.accommodation .item-label {
    background-color: #fff;
    border: 1px solid #999;
    color: #213246;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 50px;
    font-size: 13px !important;
    font-weight: 600;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: -23px;
    width: 80%;
}
.h2c-itin-accom-popup-wrap .h2c-itin-popup-card.accommodation .item-label span {
  font-weight: 400;
}
.h2c-itin-accom-popup-wrap .h2c-itin-popup-card.accommodation.active .item-label {
    background-color: #f60c09;
    border-color: #f60c09;
    color: #fff;
}
/* Day badge in accommodation header */
.h2c-itin-accom-header .h2c-itin-popup-day-badge {
  flex-shrink: 0;
  font-size: 14px;
  color: #213246;
  background-color: #fff;
}

.h2c-itin-accom-popup-wrap .h2c-itin-popup-card.accommodation .item-location svg {
    width: 18px;
}
.h2c-itin-accom-popup-wrap .h2c-itin-popup-card.accommodation .item-location {
    display: flex;
    gap: 2px;
    font-size: 13px;
    font-weight: 500;
    margin: 4px 0 2px;
    color: #999;
}

.h2c-itin-accom-popup-wrap .h2c-itin-popup-card.accommodation .item-location svg {
    width: 18px;
}
.h2c-itin-accom-popup-wrap .h2c-itin-popup-card.accommodation .item-location {
    display: flex;
    gap: 2px;
    font-size: 13px;
    font-weight: 500;
    margin: 4px 0 2px;
    color: #999;
}