/* Coconut travel templates (tourm-child).
   1. Rules React's stylesheet has for this markup but WordPress's copy of the Tourm stylesheet lacks
      (found by replica-audit/tools/css-diff.py).
   2. Photo frames: the design's photos are 424x274 (two-column cards), 312x274 (slider and three-column cards),
      872x536 (sliders, destination image) and 215px high (gallery). Photos uploaded in the admin come in any size,
      so they are cropped to these frames. */

/* 1. React-only rules */
.coconut-page .slider-area,
.coconut-packages .slider-area { text-align: center; }
.coconut-page .slider-arrow,
.coconut-packages .slider-arrow { border: none; transform: translateY(-50%); cursor: pointer; }
.coconut-page .slider-prev { left: 10px; }
.coconut-page .slider-next { right: 10px; }
.coconut-page .tour-box .tour-content,
.coconut-packages .tour-box .tour-content { text-align: start; }
.coconut-page .service-img img { width: 100%; }
.coconut-page .tour-slider-img img { width: 100%; height: auto; border-radius: 8px; }

/* WP Travel Engine styles every text input (position:relative; z-index:1; its own padding), which covers the search button */
.coconut-page .search-form input { position: static; z-index: auto; padding-top: 0; padding-bottom: 0; padding-left: 25px; color: var(--body-color); line-height: 26px; }

/* 2. Photo frames */
.coconut-page .tour-box_img img,
.coconut-packages .tour-box_img img { width: 100%; aspect-ratio: 424 / 274; object-fit: cover; }
.coconut-page .coconut-ratio-box .tour-box_img img,
.coconut-packages .coconut-ratio-box .tour-box_img img { aspect-ratio: 312 / 274; }
.coconut-page .tour-slider-img img,
.coconut-page .service-img img { aspect-ratio: 872 / 536; object-fit: cover; }
.coconut-page .gallery-box.style3 .gallery-img img { width: 100%; height: 215px; object-fit: cover; }
@media (min-width: 1400px) {
	.coconut-page .coconut-gallery-1 .gallery-box.style3 .gallery-img img,
	.coconut-page .coconut-gallery-4 .gallery-box.style3 .gallery-img img { width: 312px; }
	.coconut-page .coconut-gallery-2 .gallery-box.style3 .gallery-img img,
	.coconut-page .coconut-gallery-3 .gallery-box.style3 .gallery-img img { width: 536px; }
}

/* Package cards inside a details page: the theme sizes every .box-title in .tour-page-single at 40px */
.coconut-term-packages .tour-box .box-title { font-size: 18px; line-height: 1.417; margin-top: -0.32em; margin-bottom: 5px; }

/* Data the design has no place for */
.coconut-was { margin: 0 2px 0 8px; font-size: 0.75em; font-weight: 400; color: var(--body-color); }
.coconut-page button.th-btn { border: none; }
.coconut-page .tour-booking .review a { color: inherit; text-decoration: underline; }
.coconut-day-title { margin-bottom: 20px; font-size: 20px; }
.coconut-empty { width: 100%; margin: 0; padding: 30px; border-radius: 16px; background: var(--smoke-color, #f3f4f6); text-align: center; }
.coconut-result-count { margin-bottom: 24px; }