/* FAQ panel + "You might also like these hotels" on AccommodationItem.cshtml.
   Ported from CyprusParadise-NewDesigns/prototypes/hotel-highlights-pia-bella with the values it
   actually renders (page-refinements.css + october(-21)-refinements.css). The related cards
   themselves are the deals page's .deal-card (Home-v2.css, scoped by the .hp2 wrapper). */

/* ---- FAQ ---- */
#faq.cp-faq .cp-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}
#faq.cp-faq .cp-faq-column {
  padding: 0 18px;
  border: 1px solid #d8e0e0;
  border-radius: 10px;
  background: #fff;
}
#faq.cp-faq .cp-faq-item {
  margin: 0;
  border: 0;
  border-bottom: 1px solid #e3e8e8;
  border-radius: 0;
  background: transparent;
}
#faq.cp-faq .cp-faq-item:last-child { border-bottom: 0; }
#faq.cp-faq summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  color: #3c4e5a;
  font: 400 15px/1.4 Lato, "Segoe UI", sans-serif;
  cursor: pointer;
}
#faq.cp-faq summary::-webkit-details-marker { display: none; }
#faq.cp-faq summary span { flex: 1; }
#faq.cp-faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 0; /* undo JourneyPages.css's generic .aip-panel summary::after border chevron */
  transform: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m8 4 8 8-8 8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m8 4 8 8-8 8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .2s ease;
}
#faq.cp-faq details[open] summary::after { margin: 0; transform: rotate(90deg); }
#faq.cp-faq summary:focus-visible { outline: 3px solid #218887; outline-offset: 2px; border-radius: 4px; }
#faq.cp-faq .cp-faq-answer {
  padding: 0 20px 12px 0;
  color: #3c4e5a;
  font-size: 14px;
  line-height: 1.5;
}
#faq.cp-faq .cp-faq-answer p { margin: 0 0 8px; }
#faq.cp-faq .cp-faq-answer > :last-child { margin-bottom: 0; }
#faq.cp-faq .cp-faq-answer a { color: #218887; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { #faq.cp-faq summary::after { transition: none; } }
@media (max-width: 700px) {
  /* Phones: one single list in one box (the two desktop columns just run on). */
  #faq.cp-faq .cp-faq-grid { grid-template-columns: 1fr; gap: 0; margin-top: 18px; padding: 0 14px; border: 1px solid #d8e0e0; border-radius: 10px; background: #fff; }
  #faq.cp-faq .cp-faq-column { padding: 0; border: 0; border-radius: 0; background: transparent; }
  #faq.cp-faq .cp-faq-column + .cp-faq-column { border-top: 1px solid #e3e8e8; }
  #faq.cp-faq .cp-faq-answer { padding-right: 0; }
}

/* ---- You might also like these hotels ---- */
.hp2.aip-related { background: transparent; }
.aip-related .cp-recommendations { margin: 20px auto 0; padding-bottom: 20px; }
.aip-related .cp-recommendations > h2 { font-size: 30px; line-height: 1.3; margin: 0 0 8px; }
.aip-related .cp-recommendations > p { margin: 0 0 20px; }
.aip-related .cp-recommendations-shell { position: relative; }
.aip-related .cp-recommendations-track {
  display: flex;
  align-items: stretch;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 2px 1px 8px;
}
.aip-related .cp-recommendations-track::-webkit-scrollbar { display: none; }
.aip-related .cp-recommendations-track > .deal-card {
  flex: 0 0 calc((100% - 40px) / 3);
  min-width: 0;
  scroll-snap-align: start;
}
.aip-related .deal-skel--board { width: 90px; height: 12px; vertical-align: middle; }
.aip-related .deal-card__unavailable { margin: 0 0 4px; font-size: 14px; color: #707070; }

.aip-related :is(.cp-recommendation-prev, .cp-recommendation-next) {
  position: absolute;
  top: 120px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #d8e0e0;
  border-radius: 10px;
  background: #fff;
  color: #3c4e5a;
  box-shadow: 0 2px 8px #0002;
  cursor: pointer;
}
.aip-related .cp-recommendation-prev { left: -12px; }
.aip-related .cp-recommendation-next { right: -12px; }
.aip-related :is(.cp-recommendation-prev, .cp-recommendation-next)[hidden] { display: none; }
.aip-related :is(.cp-recommendation-prev, .cp-recommendation-next):focus-visible { outline: 3px solid #218887; outline-offset: 3px; }
.aip-related .cp-chevron {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.aip-related .cp-chevron--left { transform: rotate(180deg); }

@media (max-width: 980px) {
  .aip-related .cp-recommendations-track > .deal-card { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 767px) {
  .aip-related .cp-recommendations-track > .deal-card { flex-basis: 86%; }
  .aip-related .cp-recommendations > h2 { font-size: 24px; }
  .aip-related .cp-recommendation-prev { left: -6px; }
  .aip-related .cp-recommendation-next { right: -6px; }
}