/* Coconut: Elementor pages rebuilt from real widgets (Gallery, Resort, Resort Details, Service Details).
   Scope: body.coconut-widget-page, added by inc/coconut-elementor.php. Built by replica-audit/tools/build-simple-pages.php. */

/* ---------------------------------------------------------------- containers standing in for theme boxes
   Elementor's .e-con resets radius and margins that the theme's .widget / .sidebar-area set. */
.coconut-widget-page .e-con.widget { border-radius: 8px; }
.coconut-widget-page .e-con.sidebar-area { margin-left: 0; margin-bottom: 0; } /* the column's left padding carries React's 10px */
/* React's .page-single is plain block flow: margins collapse between the reviews, the reply form and the blocks above */
.coconut-widget-page .e-con.page-single { display: block; }

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

/* ---------------------------------------------------------------- sidebar: categories widget
   React shows a map pin before each category and the post count in brackets. */
.coconut-widget-page .widget_categories li a::before { content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 8px; vertical-align: middle; background: url(../img/theme-img/map.svg) no-repeat center / contain; }
.coconut-widget-page .widget_categories .category-number::before { content: "("; }
.coconut-widget-page .widget_categories .category-number::after { content: ")"; }

/* ---------------------------------------------------------------- "From our gallery" (Tourm Gallery Masonry)
   Drawn like React's gallery-box style3: 8px corners; from 1400px two rows of 312 + 536 / 536 + 312 by 215px,
   below that every image full width. */
.coconut-widget-page .coconut-gallery .row { --bs-gutter-x: 24px; --bs-gutter-y: 24px; }
.coconut-widget-page .coconut-gallery .row > * { width: 100%; }
.coconut-widget-page .coconut-gallery .gallery-box .gallery-img,
.coconut-widget-page .coconut-gallery .gallery-box .gallery-img::after,
.coconut-widget-page .coconut-gallery .gallery-box .gallery-img img { border-radius: 8px; }
.coconut-widget-page .coconut-gallery .gallery-box .gallery-img img { height: auto; }
@media (min-width: 1400px) {
	.coconut-widget-page .coconut-gallery .row > * { flex: 0 0 auto; }
	/* (312 + 24) / 896 and (536 + 24) / 896 of the 872px column plus gutters: exact, and never wraps on sub-pixels */
	.coconut-widget-page .coconut-gallery .row > :nth-child(4n+1),
	.coconut-widget-page .coconut-gallery .row > :nth-child(4n+4) { width: 37.5%; }
	.coconut-widget-page .coconut-gallery .row > :nth-child(4n+2),
	.coconut-widget-page .coconut-gallery .row > :nth-child(4n+3) { width: 62.5%; }
	.coconut-widget-page .coconut-gallery .gallery-box .gallery-img img { height: 215px; object-fit: cover; }
}

/* ---------------------------------------------------------------- Leave a Reply (Contact Form 7 "Coconut – Leave a Reply") */
.coconut-widget-page .coconut-reply-form .wpcf7-form-control-wrap { display: block; }
.coconut-widget-page .coconut-reply-form .wpcf7-list-item { display: block; margin: 0; }
.coconut-widget-page .coconut-reply-form .wpcf7-list-item label { display: block; cursor: pointer; } /* keeps the theme's -0.3rem label margins */
/* the theme hides checkboxes and draws the box on "input ~ label"; CF7's label is a span after the input */
.coconut-widget-page .coconut-reply-form .wpcf7-list-item-label { position: relative; display: block; padding-left: 30px; color: var(--body-color); }
.coconut-widget-page .coconut-reply-form .wpcf7-list-item-label::before { content: ""; position: absolute; left: 0; top: 3.5px; width: 18px; height: 18px; line-height: 18px; text-align: center; font-family: var(--icon-font); font-weight: 700; font-size: 12px; background-color: var(--white-color); border: 1px solid var(--th-border-color); }
.coconut-widget-page .coconut-reply-form input[type="checkbox"]:checked + .wpcf7-list-item-label::before { content: "\f00c"; color: var(--white-color); background-color: var(--theme-color); border-color: var(--theme-color); }
/* the submit is an <input class="th-btn">: undo the generic input sizing and the form's input border */
.coconut-widget-page .coconut-reply-form .wpcf7-submit { width: auto; height: auto; padding: 18.8px 35px; border: none; border-radius: 48px; background-color: var(--theme-color); color: var(--white-color); font-size: 16px; line-height: 26px; }
.coconut-widget-page .coconut-reply-form .wpcf7-submit:hover { background-color: var(--title-color); }
.coconut-widget-page .coconut-reply-form .wpcf7-spinner { position: absolute; margin: 20px 0 0 12px; }
.coconut-widget-page .coconut-reply-form .wpcf7-response-output { margin: 24px 0 0; }