/*trip page*/

.trip-data {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap; /* Makes it wrap on small screens */gap: 1rem;padding: 1rem;border: 1px solid #eee;border-radius: 8px;background: #fafafa;}
.trip-record {display: flex; flex-wrap: wrap;gap: 1rem;}
.trip-record .pill {background: #fff; border: 1px solid #ddd; border-radius: 30px; padding: 6px 14px;font-size: 14px; color: #333; display: flex; align-items: center; gap: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);}
.trip-record .pill del {color: #999; margin-right: 6px;}
.trip-record .review i { color: #f5c518; /* Gold stars */}
/* Social share area */
.social ul { list-style: none; display: flex; gap: 0.75rem; margin: 0;padding: 0;align-items: center;}
.social ul li {display: flex; gap: 0.5rem; align-items: center;}
.social ul li a { display: inline-flex; justify-content: center; align-items: center; width: 34px;height: 34px; border-radius: 50%; background: #eee;color: #333;text-decoration: none; transition: all 0.3s ease;}
.social ul li a:hover {background: #333; color: #fff;}

/* Responsive tweak */
@media (max-width: 768px) {.trip-data {    flex-direction: column; align-items: flex-start;}.social { width: 100%;display: flex;justify-content: flex-start;}
}


.icon-all-top{border: solid 1px var(--bg-dim); position: relative; background: var(--bg-dim);}
.all-icon-detail {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 10px;}

.all-icon-detail .content {display: flex;align-items: center;gap: 10px;padding: 8px 10px;       /* compact padding */border: 1px solid #eee;border-radius: 8px;background: #fff;min-height: 48px;          /* small but consistent height */}

/* Icon */
.all-icon-detail .content i {font-size: 20px;           /* modest size to save space */color: var(--brand, #0ea5e9);flex-shrink: 0;line-height: 1;
}

/* Text block */
.all-icon-detail .cont1 p {margin: 0;font-size: 12px;line-height: 1.1;color: #6b7280;            /* subtle label color */letter-spacing: .1px;
}

.all-icon-detail .cont1 h6 {margin: 2px 0 0;font-size: 14px;line-height: 1.2;font-weight: 600;color: #111827;white-space: nowrap;       /* prevent wrapping to save space */overflow: hidden;text-overflow: ellipsis;
}

/* Mobile: 2 columns */
@media (max-width: 576px) {.all-icon-detail {  grid-template-columns: repeat(2, minmax(0, 1fr));  gap: 8px;}.all-icon-detail .content {  padding: 8px;            /* even tighter on small screens */}.all-icon-detail .content i {  font-size: 18px;}.all-icon-detail .cont1 h6 {  font-size: 13px;}
}


#overview ul li{position: relative;padding-left: 30px;margin-bottom: 10px;display: block;}
#overview ul li:before{content: "\f00c";position: absolute;left: 0;top: 0;font-family: "Font Awesome 6 Free";font-weight: 900;color: #fff;background: #00b600;font-size: 14px;width: 20px;height: 20px;border-radius: 50%;text-align: center;}


.icon-section {display: flex;flex-wrap: wrap; gap: 20px; margin: 1rem 0;}
.icon-data {display: flex;align-items: center;gap: 12px; padding: 10px 14px;border: 1px solid #eee;border-radius: 8px;background: #fff;flex: 1 1 auto;min-width: 220px;}
.icon-data i {font-size: 22px;color: var(--brand, #0ea5e9);flex-shrink: 0;}
.icon-data span {font-size: 14px;color: #6b7280; display: block;}
.icon-data strong {font-size: 15px;font-weight: 600;color: #111827;display: block;line-height: 1.3;}


.accordion-item {margin: 5px 0;border: 1px solid var(--bg-dim, #ddd);border-radius: 6px;overflow: hidden;background: #fff;}

.accordion-header {margin: 0;}

.accordion-button {font-weight: bold;font-size: 17px;padding: 12px 16px;background: #f9f9f9;border: none;cursor: pointer;display: block;width: 100%;text-align: left;
}

.accordion-button:focus {outline: none;box-shadow: none;}

.accordion-collapse {border-top: 1px solid var(--bg-dim, #ddd);}

.accordion-body {padding: 12px 16px;font-size: 14px;line-height: 1.6;color: #333;}

.content-section p {margin-bottom: 1em;}


/* Common list styles */
.included ul li,.excluded ul li {position: relative; padding-left: 32px;       /* give space for icon circle */
  margin-bottom: 8px; line-height: 1.4;  display: block;}

/* Included items (green circle with check) */
.included ul li::before { content: "\f00c"; /* check icon */  font-family: "Font Awesome 6 Free";  font-weight: 900;
  position: absolute;  left: 0;  top: 50%;  transform: translateY(-50%); /* vertical align center */
  color: #fff;  background: #00b600;  font-size: 12px;  width: 20px;  height: 20px;
  border-radius: 50%;  text-align: center;  line-height: 20px;        /* centers the icon */}

/* Excluded items (red circle with cross) */
.excluded ul li::before {  content: "\f00d"; /* cross icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  background: #da4343;
  font-size: 12px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
}

/* Generic circle icon utility (can be reused) */
.fa-xmark {
  background: #065691;
  color: #fff;
  font-size: 20px;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 10px;
}


:root{
  --brand: #190063;       /* your brand color */
  --bg-dim: #e5e7eb;      /* soft divider */
  --text-600: #374151;    /* dark text */
  --text-400: #6b7280;    /* muted text */
}

#trip-reviews .trip-section-title{
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text-600);
}

.review-item{
  position: relative;
}

.review-item .avatar{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.rating-p{
  /* If using a rating plugin, keep the input visible; otherwise hide and show stars */
  margin-top: -2px;
}

.review-text{
  margin-top: 8px;
  color: var(--text-600);
  line-height: 1.6;
}

#trip-reviews hr{
  border: 0;
  border-top: 1px solid var(--bg-dim);
}

/* Optional star color if your rating plugin renders <i> or svg */
.rating-p i,
.rating-p .fa-star,
.rating-p .fa-star-half-alt,
.rating-p .fa-star-half-stroke,
.rating-p svg{
  color: #f5c518;
}

/* If you decide to hide the input and draw custom stars, uncomment:
.rating-p .rating{
  display: none;
}
*/

/* Small screens: stack nicely */
@media (max-width: 576px){
  .review-item .avatar{
    width: 48px; height: 48px;
  }
  #trip-reviews .trip-section-title{
    font-size: 20px;
  }
}