/* ============================================================
   CorfuDiscovery  -  the lower sections of a listing page, given the same care as "About this place":
   Where you'll be / Meeting point · Guest reviews · What's nearby · More activities
   Only styling, the markup is the production markup. The ids in the selectors make these rules win over the older ones in pages.css.
   ============================================================ */

/* ---------- one heading style for all of them: serif title + a soft line that runs out to the edge ---------- */
#cdf-sec-location > h2, #cdf-sec-reviews > h2, .cdf-after-content .gygil-related-tours__title, #cdf-sec-nearby .cdf-poi-header h3 {
  align-items: center; color: var(--ink, #1a242e); display: flex; font-family: var(--serif, Georgia, serif); font-size: 26px; font-weight: 500;
  gap: 14px; letter-spacing: -.01em; line-height: 1.2; margin: 0 0 16px;
}
#cdf-sec-location > h2::after, #cdf-sec-reviews > h2::after, .cdf-after-content .gygil-related-tours__title::after, #cdf-sec-nearby .cdf-poi-header h3::after {
  background: linear-gradient(90deg, var(--line-strong, #dbcfbc), transparent); content: ''; display: block; flex: 1; font-size: 0; height: 2px; margin: 0;
}

/* ---------- Where you'll be / Meeting point: the address and the map are ONE card ---------- */
#cdf-sec-location > p {
  align-items: center; background: var(--tc-listing-sections-ffffff,#fff); border: 1px solid var(--line, #e8dfd2); border-bottom: 0; border-radius: 22px 22px 0 0; color: var(--ink, #1a242e);
  display: flex; font-size: 15.5px; font-weight: 600; gap: 14px; line-height: 1.4; margin: 0 !important; padding: 16px 20px;
}
#cdf-sec-location > p::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5503a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 12-9 12S3 17 3 10a9 9 0 1 1 18 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / 21px no-repeat, var(--coral-soft, #fdebe7);
  border-radius: 12px; content: ''; flex: 0 0 40px; height: 40px;
}
#cdf-sec-location .cdf-map-wrap {
  border-radius: 22px; box-shadow: 0 1px 2px var(--tc-listing-sections-0f2a3b0a,rgba(15, 42, 59, .04)), 0 14px 38px var(--tc-listing-sections-0f2a3b12,rgba(15, 42, 59, .07)); height: 380px;
}
#cdf-sec-location > p + .cdf-map-wrap { border-radius: 0 0 22px 22px; }
#cdf-sec-location .cdf-map-directions {
  box-shadow: 0 6px 18px var(--tc-listing-sections-0f2a3b2e,rgba(15, 42, 59, .18)); right: 16px; top: 16px;
}
@media (max-width: 640px) {
  #cdf-sec-location .cdf-map-wrap { height: 300px; }
  #cdf-sec-location > p { padding: 14px 16px; }
}

/* ---------- Guest reviews ---------- */
#cdf-sec-reviews .rev-summary { display: flex; margin: 0 0 22px; padding: 0; }
#cdf-sec-reviews .rev-big {
  align-items: center; background: var(--tc-listing-sections-ffffff,#fff); border: 1px solid var(--line, #e8dfd2); border-radius: 22px; box-shadow: 0 1px 2px var(--tc-listing-sections-0f2a3b0a,rgba(15, 42, 59, .04)), 0 10px 28px var(--tc-listing-sections-0f2a3b0f,rgba(15, 42, 59, .06));
  column-gap: 24px; display: grid; grid-template-columns: auto 1fr; overflow: hidden; padding: 20px 34px 20px 28px; position: relative; row-gap: 2px; text-align: left;
}
#cdf-sec-reviews .rev-big::before {
  background: var(--coral-soft, #fdebe7); border-radius: 50%; content: ''; height: 90px; opacity: .7; position: absolute; right: -48px; top: -58px; width: 90px;
}
#cdf-sec-reviews .rev-big > * { position: relative; }
#cdf-sec-reviews .rev-big .n {
  border-right: 1px solid var(--line, #e8dfd2); color: var(--ink, #1a242e); font-size: 66px; grid-row: 1 / span 2; line-height: 1; padding-right: 24px;
}
#cdf-sec-reviews .rev-big .stars { align-self: end; justify-content: flex-start; margin: 0; }
#cdf-sec-reviews .rev-big .stars svg { height: 20px; width: 20px; }
#cdf-sec-reviews .rev-big .c { align-self: start; font-size: 14px; margin: 0; }

/* what the site's own reviewers rated, criterion by criterion */
#cdf-sec-reviews .cdf-rv-avgs {
  background: var(--tc-listing-sections-ffffff,#fff); border: 1px solid var(--line, #e8dfd2); border-radius: 20px; gap: 12px 34px; margin: 0 0 22px; padding: 20px 24px;
}
#cdf-sec-reviews .cdf-rv-avgs::before { color: var(--navy, #0f2a3b); content: 'What guests rated'; font-size: 13px; font-weight: 800; grid-column: 1 / -1; letter-spacing: .06em; text-transform: uppercase; }
#cdf-sec-reviews .cdf-rv-avg i { background: var(--sand-2, #f3ece2); height: 7px; }

/* the guest reviews: a grid of cards, like the Google reviews */
#cdf-sec-reviews .rev-list {
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  background: var(--tc-listing-sections-ffffff,#fff); border: 1px solid var(--line, #e8dfd2); border-radius: 20px; padding: 20px 24px;
}
#cdf-sec-reviews .rev-list .review {
  background: var(--sand, #faf6f0); border: 1px solid var(--line, #e8dfd2); border-radius: 16px;
  box-shadow: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 16px 16px 14px;
}
#cdf-sec-reviews .rev-list .review .top { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
#cdf-sec-reviews .rev-list .review .av {
  width: 42px; height: 42px; background: var(--sand-2, #f3ece2); color: var(--navy, #0f2a3b); font-weight: 700;
}
#cdf-sec-reviews .rev-list .review .who b { color: var(--ink, #1a242e); font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
#cdf-sec-reviews .rev-list .review .who span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted, #768591); }
#cdf-sec-reviews .rev-list .review .rstars { gap: 2px; margin: 0; }
#cdf-sec-reviews .rev-list .review .rstars svg { height: 14px; width: 14px; }
#cdf-sec-reviews .rev-list .review p { margin: 0; max-width: none; font-size: 14.5px; line-height: 1.6; color: var(--body, #44515d); }
#cdf-sec-reviews .rev-read-all { margin-top: 20px; }

/* "Stayed or visited? Sign in to leave a review." */
#cdf-sec-reviews .cdf-rv-muted {
  align-items: center; background: var(--coral-soft, #fdebe7); border-radius: 16px; color: var(--ink, #1a242e); display: flex; font-size: 15px; gap: 12px; margin: 0 0 22px; padding: 14px 18px;
}
#cdf-sec-reviews .cdf-rv-muted::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c53f2b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z'/%3E%3C/svg%3E") center / 18px no-repeat, var(--tc-listing-sections-ffffff,#fff);
  border-radius: 50%; content: ''; flex: 0 0 34px; height: 34px;
}
#cdf-sec-reviews .cdf-rv-muted a { color: var(--coral-deep, #c53f2b); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) {
  /* one line: no icon, the words flow as text (they were laid out as three columns) */
  #cdf-sec-reviews .cdf-rv-muted { display: block; font-size: 13.5px; line-height: 1.45; padding: 13px 12px; text-align: center; }
  #cdf-sec-reviews .cdf-rv-muted::before { display: none; }
}

/* the review form */
#cdf-sec-reviews .cdf-rv-form { border-radius: 22px; box-shadow: 0 1px 2px var(--tc-listing-sections-0f2a3b0a,rgba(15, 42, 59, .04)), 0 10px 28px var(--tc-listing-sections-0f2a3b0f,rgba(15, 42, 59, .06)); }

@media (max-width: 640px) {
  #cdf-sec-reviews .rev-list { grid-template-columns: 1fr; padding: 14px; }
  #cdf-sec-reviews .rev-list .review .top { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; }
  #cdf-sec-reviews .rev-list .review .av { width: 38px; height: 38px; }
  #cdf-sec-reviews .rev-big { column-gap: 16px; padding: 16px 20px 16px 18px; width: 100%; }
  #cdf-sec-reviews .rev-big .n { font-size: 52px; padding-right: 16px; }
}

/* ---------- What's nearby (the points of interest) ---------- */
/* the plugin's own title ("Points of Interest") stays in the page for search engines but is not drawn */
#cdf-sec-nearby .cdf-poi-header h3 { font-size: 0; margin: 0 0 6px; }
#cdf-sec-nearby .cdf-poi-header h3::before { color: var(--ink, #1a242e); content: "What's nearby"; display: inline; font: 500 26px/1.2 var(--serif, Georgia, serif); letter-spacing: -.01em; margin: 0; }
#cdf-sec-nearby .cdf-poi-header::after {
  color: var(--body, #4a5560); content: 'Sights, beaches and places to eat within easy reach of here.'; display: block; font: 400 15px/1.5 var(--sans, system-ui, sans-serif); margin: 0 0 20px;
}

#cdf-sec-nearby .poi-item {
  border-radius: 18px; box-shadow: 0 1px 2px var(--tc-listing-sections-0f2a3b08,rgba(15, 42, 59, .03)); min-height: 88px; padding: 16px 16px 16px 18px; transition: border-color .18s, box-shadow .18s, transform .18s;
}
#cdf-sec-nearby .poi-item:hover { border-color: var(--coral, #e5503a); box-shadow: 0 10px 26px var(--tc-listing-sections-0f2a3b17,rgba(15, 42, 59, .09)); transform: translateY(-2px); }
#cdf-sec-nearby .poi-item::before { border-radius: 14px; }

/* the kind of place: its own little icon and a small label above the name */
#cdf-sec-nearby .poi-tab-panel[data-category="transport"] { --cdf-poi-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='14' rx='3'/%3E%3Cpath d='M4 11h16M8 21v-4M16 21v-4'/%3E%3Ccircle cx='8.5' cy='14' r='.8'/%3E%3Ccircle cx='15.5' cy='14' r='.8'/%3E%3C/svg%3E"); --cdf-poi-kind: 'Getting around'; }
#cdf-sec-nearby .poi-tab-panel[data-category="restaurants"] { --cdf-poi-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 3v8a2 2 0 0 0 4 0V3M6 11v10M17 3c-2 2-3 5-3 8h3v10'/%3E%3C/svg%3E"); --cdf-poi-kind: 'Eat & drink'; }
#cdf-sec-nearby .poi-tab-panel[data-category="healthcare"] { --cdf-poi-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3C/svg%3E"); --cdf-poi-kind: 'Health'; }
#cdf-sec-nearby .poi-tab-panel[data-category="shopping"] { --cdf-poi-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h13l-1.5 8H8L6 4H3'/%3E%3Ccircle cx='9' cy='19' r='1.3'/%3E%3Ccircle cx='17' cy='19' r='1.3'/%3E%3C/svg%3E"); --cdf-poi-kind: 'Shopping'; }
#cdf-sec-nearby .poi-item::after { -webkit-mask-image: var(--cdf-poi-ico, var(--cdf-poi-pin)); mask-image: var(--cdf-poi-ico, var(--cdf-poi-pin)); }
#cdf-sec-nearby .poi-name::before {
  color: var(--coral-deep, #c53f2b); content: var(--cdf-poi-kind, 'Nearby'); display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .09em; margin-bottom: 4px; text-transform: uppercase;
}
#cdf-sec-nearby .poi-name { font-size: 16px; line-height: 1.25; overflow: visible; text-overflow: clip; white-space: normal; }

/* the distance becomes a small pill */
#cdf-sec-nearby .poi-distance {
  background: var(--sand, #faf6f0); border: 1px solid var(--line, #e8dfd2); border-radius: 999px; padding: 6px 11px 6px 9px;
}
#cdf-sec-nearby .poi-distance::before { height: 13px; width: 13px; }
#cdf-sec-nearby .poi-address { color: var(--muted, #6b7782); margin-top: 3px; overflow: visible; text-overflow: clip; white-space: normal; }

/* ---------- More activities (GetYourGuide) ---------- */
.l-section.cdf-after-content:has(.gygil-related-tours) { border-top: 0; padding-top: 0; }
.cdf-after-content .gygil-related-tours {
  background: var(--sand-2, #f3ece2); border: 1px solid var(--line, #e8dfd2); border-radius: 24px; margin: 0 !important; overflow: visible; padding: clamp(14px, 2.4vw, 24px) clamp(14px, 2vw, 18px) clamp(14px, 2.4vw, 22px);
}
.cdf-after-content .gygil-related-tours__title { font-size: 26px; margin-bottom: 18px; }
.cdf-after-content .gygil-related-tours__grid { align-items: start; gap: 12px; margin-top: 0; }
/* as many columns as fit: a GetYourGuide card needs about 205px */
.cdf-after-content .gygil-related-tours__grid[data-cols] { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }
.cdf-after-content .gygil-related-tours__cell { min-height: 0; }

@media (max-width: 640px) {
  #cdf-sec-location > h2, #cdf-sec-reviews > h2, .cdf-after-content .gygil-related-tours__title, #cdf-sec-nearby .cdf-poi-header h3 { font-size: 23px; }
}

/* ============================================================
   The little facts blocks (quick facts, amenities, tour highlights): each one sits on a white card.
   Before, their "background" was the same sand as the page, so they looked like loose text.
   ============================================================ */

:root { --lf-shadow: 0 1px 2px rgba(15, 42, 59, .04), 0 8px 22px rgba(15, 42, 59, .05); }

/* key facts at the top of a listing: open now, price, amenities … */
.l-section .highlights { gap: 14px; }
.l-section .highlight { background: var(--tc-listing-sections-ffffff,#fff); border-color: var(--line, #e8dfd2); border-radius: 18px; box-shadow: var(--lf-shadow); padding: 16px 18px; }
.l-section .highlight .hi { background: var(--coral-soft, #fcebe5); border-radius: 13px; box-shadow: none; color: var(--coral-deep, #c53f2b); height: 44px; width: 44px; }
.l-section .highlight h4 { color: var(--ink, #1a242e); }
.l-section .highlight p { color: var(--body, #4a5560); }

/* what the place offers */
.amen-grid[data-style="list"] { gap: 12px; }
.amen-grid[data-style="list"] .amenity {
  background: var(--tc-listing-sections-ffffff,#fff); border: 1px solid var(--line, #e8dfd2); border-radius: 16px; box-shadow: 0 1px 2px var(--tc-listing-sections-0f2a3b0a,rgba(15, 42, 59, .04)); padding: 11px 14px; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.amen-grid[data-style="list"] .amenity:hover { border-color: var(--coral, #e5503a); box-shadow: var(--lf-shadow); transform: translateY(-1px); }
.amen-grid[data-style="list"] .amenity .ai { background: var(--coral-soft, #fcebe5); border-radius: 50%; height: 34px; width: 34px; }
.amen-grid[data-style="list"] .amenity .ai svg { height: 18px; width: 18px; }
.amen-grid[data-style="tags"] .amenity { background: var(--tc-listing-sections-ffffff,#fff); border: 1px solid var(--line, #e8dfd2); box-shadow: 0 1px 2px var(--tc-listing-sections-0f2a3b0a,rgba(15, 42, 59, .04)); }

/* tour: duration, group size, languages … */
.cdf-tour-quickfacts .qf { background: var(--tc-listing-sections-ffffff,#fff); border-color: var(--line, #e8dfd2); border-radius: 18px; box-shadow: var(--lf-shadow); }
.cdf-tour-quickfacts .qf-ic { background: var(--coral-soft, #fcebe5); border-radius: 13px; box-shadow: none; color: var(--coral-deep, #c53f2b); }
.cdf-tour-quickfacts .qf-v { color: var(--ink, #1a242e); }

/* tour highlights */
.cdf-hl-grid { gap: 12px; }
.cdf-hl-grid li { align-items: center; background: var(--tc-listing-sections-ffffff,#fff); border: 1px solid var(--line, #e8dfd2); border-radius: 16px; box-shadow: 0 1px 2px var(--tc-listing-sections-0f2a3b0a,rgba(15, 42, 59, .04)); padding: 13px 16px; }
.cdf-hl-grid .hl-ic { background: var(--coral, #e5503a); color: var(--tc-listing-sections-ffffff,#fff); height: 30px; width: 30px; }

/* ---------- the soft coral corner circle of the rating card, on the cards of What's included, Review Highlights and Google reviews ---------- */
#cdf-sec-included .cdf-incl-col, .cdf-ai-highlights .review-insights-summary-card, .cdf-grev__head { overflow: hidden; position: relative; }
#cdf-sec-included .cdf-incl-col::before, .cdf-ai-highlights .review-insights-summary-card::before, .cdf-grev__head::before {
  background: var(--coral-soft, #fdebe7); border-radius: 50%; content: ''; height: 90px; opacity: .7; pointer-events: none; position: absolute; right: -48px; top: -58px; width: 90px;
}
/* the Google card's score and stars sit at the right of its header, so its circle goes in the left corner instead */
.cdf-grev__head::before { left: -48px; right: auto; }
#cdf-sec-included .cdf-incl-col > *, .cdf-ai-highlights .review-insights-summary-card > *, .cdf-grev__head > * { position: relative; }