/* ============================================================
   AFP Theme Tweaks
   Front-end overrides for TravelWP / thim-ekits widgets.
   Loaded on every front-end page so layout fixes apply
   wherever theme widgets are placed.
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   Thim Login Icon widget — hide "Çıkış Yap" (logout) link when
   the user is logged in, keeping only the "Hesabım" (profile)
   link. The widget's render() always prints both <a class="logout">
   and <a class="profile">; CSS is the least invasive way to drop
   one without forking the Thim plugin file (which would be
   overwritten on update). Users can still log out from the
   account page or wp-admin if needed.
   ──────────────────────────────────────────────────────────── */
.elementor-widget-thim-ekits-login-icon .thim-login-icon a.logout {
	display: none !important;
}

/* ─────────────────────────────────────────────────────────────
   "List Tours" widget (thim-ekits) — equal-height cards with
   bottom-aligned price row. Pure-CSS solution.

   FLEXBOX SPEC NOTE
   ─────────────────
   When a flex line has BOTH `flex-grow:1` items AND items with
   `margin: auto`, the auto margins consume ALL the free space
   FIRST and `flex-grow` is effectively ignored. Therefore we
   EXCLUDE AFP car cards from the bottom-alignment rules so the
   AFP attributes widget's flex-grow remains effective.

   STRATEGY
   ────────
   1. Stretch the chain (.tour-item → .elementor → .e-con →
      .e-con-inner) into flex columns so the inner content
      column fills the card height.
   2. AFP car cards (rule 5): the AFP attributes widget has
      flex-grow:1 and absorbs free vertical space. Separator +
      price sit at the bottom with their natural Elementor gap.
   3. Plain tour cards (rules 6a/b/c): the "bottom group" of
      the card (separator + price + duration / actions) is
      identified as either:
         a. A divider widget (.elementor-widget-divider) and
            every sibling AFTER it.
         b. The first nested container (.e-con) and every
            sibling AFTER it. (Most loop templates wrap the
            price + duration row in nested .e-con flex rows.)
      Bottom group items get `order: 100`; everything else keeps
      the default `order: 0`. A pseudo `::after` spacer with
      `order: 50` and `flex: 1 1 auto` sits between the two
      groups and absorbs free vertical space — same effect as
      injecting a real spacer DIV via JS, without needing JS.

   :has() / :is() browser support: Chrome 105+, Edge 105+,
   Firefox 121+, Safari 15.4+ — all modern browsers.
   ──────────────────────────────────────────────────────────── */

/* 1. Make every slide stretch to the tallest sibling. */
.thim-ekits-tours .swiper-slide,
.thim-ekits-tours .tour-item {
	height: auto !important;
	align-self: stretch !important;
	display: flex !important;
	flex-direction: column !important;
}

/* 2. Loop-template wrapper fills the slide height. */
.thim-ekits-tours .tour-item > .elementor[data-thim-ekit-type="loop_item"],
.thim-ekits-tours .tour-item > .elementor {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	width: 100%;
	min-height: 100%;
}

/* 3a. Card-level container (the outer .e-con / e-parent) fills the
       loop wrapper. */
.thim-ekits-tours .tour-item > .elementor > .e-con,
.thim-ekits-tours .tour-item > .elementor > .elementor-element.e-con {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
}

/* 3b. The Loop Item template typically wraps the card content inside a
       NESTED .e-con (with the .e-con-boxed class) which holds the
       .e-con-inner grid. We must force this nested content container
       to also be a stretching flex column — otherwise the flex chain
       breaks here and .e-con-inner cannot expand to fill the card.

       We target `.e-con-boxed` specifically so we don't accidentally
       force horizontal flex containers (e.g. the price-row container,
       which is .e-con-full not .e-con-boxed) into vertical layout. */
.thim-ekits-tours .tour-item .e-con-boxed {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
}

/* 4. The inner content wrapper (.e-con-inner) stretches too — both
      Boxed and Full-Width container layouts. */
.thim-ekits-tours .tour-item .e-con-inner {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
}

/* 5. AFP car-feature templates — let the AFP attributes widget absorb
      all free vertical space. Separator and price that follow it sit
      naturally at the bottom with their original Elementor gaps. */
.thim-ekits-tours .elementor-widget-afp_product_attributes {
	flex-grow: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
}

/* 6a. Bottom-group anchor: the first divider OR nested container in the
       content column, plus every sibling AFTER it. These elements are
       given `order: 100` so they always render after the pseudo-spacer
       (order: 50) and stay grouped together at the bottom of the card.
       `!important` is required because Elementor sometimes inlines
       `order: 0` on its containers via its own generated CSS. */
.thim-ekits-tours .tour-item .e-con-inner:not(:has(> .elementor-widget-afp_product_attributes)) > :is(.e-con, .elementor-widget-divider),
.thim-ekits-tours .tour-item .e-con-inner:not(:has(> .elementor-widget-afp_product_attributes)) > :is(.e-con, .elementor-widget-divider) ~ * {
	order: 100 !important;
}

/* 6b. Pseudo flex-spacer — sits between the top widgets (order: 0) and
       the bottom group (order: 100). `flex: 1 1 auto` makes it absorb
       all free vertical space, docking the bottom group to the bottom
       of the card while preserving the natural Elementor gaps within
       each group.

       `min-height: 32px` GUARANTEES a visible breathing room between
       top and bottom groups even on tight cards (e.g. ones with extra
       chip rows that fill the natural content height). Equal-height
       row layout means the slightly increased card height propagates
       to all sibling cards. All declarations carry `!important` to
       defeat any inline / generated Elementor pseudo-element styles. */
.thim-ekits-tours .tour-item .e-con-inner:not(:has(> .elementor-widget-afp_product_attributes))::after {
	content: "" !important;
	display: block !important;
	flex: 1 1 auto !important;
	/*min-height: 32px !important;*/
	order: 50 !important;
	pointer-events: none !important;
	width: 100% !important;
}

/* 6c. Fallback for templates without any divider / nested container —
       just push the last child to the bottom group. */
.thim-ekits-tours .tour-item .e-con-inner:not(:has(> .elementor-widget-afp_product_attributes)):not(:has(> .e-con)):not(:has(> .elementor-widget-divider)) > :last-child {
	order: 100 !important;
}

/* ── AFP List slider: reset Bootstrap .row negative margins ──────────────
   When .row is used as the swiper container, its default margin: 0 -15px
   extends the element 15 px beyond each side of the parent. The parent
   (Elementor section / container) clips that overflow, cutting the last
   visible slide.  Setting both margins to 0 keeps items neatly inside the
   parent while preserving the spaceBetween gap controlled by Swiper/Thim.
   ──────────────────────────────────────────────────────────────────────── */
.thim-ekits-tours.thim-ekits-sliders,
.thim-ekits-tours.thim-ekits-sliders.row {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ── TravelWP / AFP single product booking tabs (Bootstrap) ────────────────
   Bootstrap CSS normally provides .tab-content > .tab-pane { display:none }.
   Some page configs (Elementor, plugin conflicts) skip Bootstrap's stylesheet
   so both tab panels become visible at once. These rules enforce the correct
   hide/show behaviour without depending on Bootstrap being loaded.
   ─────────────────────────────────────────────────────────────────────────── */
.group-from-booking .tab-content > .tab-pane {
	display: none;
}
.group-from-booking .tab-content > .tab-pane.active {
	display: block;
}

/* ── Elementor Nested Tabs — defensive override ────────────────────────────
   On WooCommerce single product pages our plugin loads afp-products.css and
   afp-comment.js which Elementor's theme-builder preview (/?thim_elementor_kit=)
   does NOT load. This means the on-disk cached CSS for the widget
   (custom-widget-nested-tabs.min.css) may not be enqueued for the page's
   specific CSS output, leaving both panels visible.

   The two rules below mirror the critical display logic from that file and
   apply with !important so they win regardless of load order:
     • inactive panels (.e-con inside .e-n-tabs-content that lack .e-active)
       must be hidden.
     • before Elementor's JS adds .e-activated, the first child panel must be
       visible so the page doesn't flash empty on load.
   ─────────────────────────────────────────────────────────────────────────── */
.elementor-widget-n-tabs .e-n-tabs-content > .e-con:not(.e-active) {
	display: none !important;
}
.elementor-widget-n-tabs .e-n-tabs:not(.e-activated) > .e-n-tabs-content > .e-con:first-child {
	display: flex !important;
}

/* ── Product gallery: reset theme's ul margin that shifts slides right ─── */
.woocommerce-product-gallery ul,
.woocommerce-product-gallery ol,
.ekits-product-slides__wrapper ul,
.ekits-product-slides__wrapper ol,
.ekits-product-thumbnails__wrapper ul,
.ekits-product-thumbnails__wrapper ol {
	margin: 0;
	padding: 0;
}

/* ───── Fallback for the legacy non-template markup ───── */
.thim-ekits-tours .tour-item .item_border {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	flex: 1 1 auto;
}

.thim-ekits-tours .tour-item .item_content,
.thim-ekits-tours .tour-item .wrapper_content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.thim-ekits-tours .tour-item .read_more {
	margin-top: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AFP Program Widget — Accordion (Itinerary toggle) görünümü
   Tam olarak TravelWP demo görselindeki stil
   ═══════════════════════════════════════════════════════════════════════════ */

/* Temel item — flex değil block, kart görünümü */
.afp-program .tours-interary-items .interary-toggle.interary-item {
	display: block !important;
	background: #ffffff;
	border: 1px solid #e8edf1 !important;
	border-radius: 14px !important;
	padding: 18px 22px !important;
	margin-bottom: 10px !important;
	box-shadow: none;
	min-height: unset;
}

.afp-program .tours-interary-items .interary-toggle.interary-item:last-child {
	margin-bottom: 0 !important;
}

/* Sol ikon halkasını gizle (number olmadığında boş yer kaplar) */
.afp-program .tours-interary-items .interary-toggle.interary-item .icon-left {
	display: none !important;
}

/* İçerik alanı tam genişlik */
.afp-program .tours-interary-items .interary-toggle.interary-item .item_content {
	display: block !important;
	width: 100% !important;
	padding: 0 !important;
	overflow: visible !important;
}

/* Başlık — küçük, orta kalınlıkta, tıklanabilir */
.afp-program .tours-interary-items .interary-toggle.interary-item .item_content h3 {
	position: relative !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: #1a202c !important;
	margin: 0 !important;
	padding-right: 28px !important;
	cursor: pointer !important;
}

/* + ikonu (kapalı durum) */
.afp-program .tours-interary-items .interary-toggle.interary-item .item_content h3::after {
	content: "+" !important;
	font-family: inherit !important;
	font-size: 18px !important;
	font-weight: 300 !important;
	color: #9aa5b4 !important;
	position: absolute !important;
	top: 50% !important;
	right: 0 !important;
	transform: translateY(-50%) !important;
	line-height: 1 !important;
}

/* Açık durum — başlık rengi ve − ikonu */
.afp-program .tours-interary-items .interary-toggle.interary-item .item_content h3.active {
	color: var(--phys-body_color_primary, #0a7a8b) !important;
	margin-bottom: 14px !important;
}

.afp-program .tours-interary-items .interary-toggle.interary-item .item_content h3.active::after {
	content: "−" !important;
	color: var(--phys-body_color_primary, #0a7a8b) !important;
}

/* İçerik bölümü — başlangıçta gizli, açıldığında görünür */
.afp-program .tours-interary-items .interary-toggle.interary-item .item_content .interary-toggle-content {
	display: none;
	font-size: 14px;
	line-height: 1.7;
	color: #4a5568;
	padding-top: 4px;
}

.afp-program .tours-interary-items .interary-toggle.interary-item .item_content .interary-toggle-content p:last-child {
	margin-bottom: 0;
}

/* Mobil: sağ padding daha küçük */
@media (max-width: 600px) {
	.afp-program .tours-interary-items .interary-toggle.interary-item {
		padding: 15px 18px !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   AFP Product Image widgets — Grid Gallery fix
   ─────────────────────────────────────────────────────────────────────────
   tours-image.css prefixes every grid rule with
   .elementor-widget-thim-ekits-tours-image. AFP subclasses (afp-estate-image,
   afp-tours-image, …) produce a different wrapper class so none of those
   rules ever match. We replicate only the grid-specific block here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ul.columns margin reset (theme-tweaks already resets slides/thumbnails ul) */
.ekits-product-columns__wrapper ul,
.ekits-product-columns__wrapper ol {
	margin: 0;
	padding: 0;
}

/* Wrapper: position:relative for the Gallery button + fixed landscape ratio
   so the grid height never stretches to match a square/portrait source image.
   aspect-ratio drives height from the container width; grid fills 100%. */
:is(
	.elementor-widget-afp-estate-image,
	.elementor-widget-afp-tours-image,
	.elementor-widget-afp-cars-image,
	.elementor-widget-afp-boat-image,
	.elementor-widget-afp-transfer-image
) .ekits-product-columns__wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
}

/* Grid layout — height:100% lets it fill the aspect-ratio-constrained wrapper */
:is(
	.elementor-widget-afp-estate-image,
	.elementor-widget-afp-tours-image,
	.elementor-widget-afp-cars-image,
	.elementor-widget-afp-boat-image,
	.elementor-widget-afp-transfer-image
) .ekits-product-columns__wrapper .columns {
	display: grid;
	height: 100%;
	grid-template-columns: repeat(var(--ekits-tour-image-column, 3), 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: var(--thim-ekits-gallery-column-gap, 24px);
	grid-row-gap: var(--thim-ekits-gallery-row-gap, 15px);
	align-items: stretch;
	align-content: space-between;
	justify-items: stretch;
	justify-content: center;
}

/* Every grid cell fills its column width; li fills its row height */
:is(
	.elementor-widget-afp-estate-image,
	.elementor-widget-afp-tours-image,
	.elementor-widget-afp-cars-image,
	.elementor-widget-afp-boat-image,
	.elementor-widget-afp-transfer-image
) .ekits-product-columns__wrapper .columns li {
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

/* Anchor wrapping the image must fill the li height */
:is(
	.elementor-widget-afp-estate-image,
	.elementor-widget-afp-tours-image,
	.elementor-widget-afp-cars-image,
	.elementor-widget-afp-boat-image,
	.elementor-widget-afp-transfer-image
) .ekits-product-columns__wrapper .columns li a {
	display: block;
	height: 100%;
}

/* Images fill the cell — object-fit:cover crops instead of squishing */
:is(
	.elementor-widget-afp-estate-image,
	.elementor-widget-afp-tours-image,
	.elementor-widget-afp-cars-image,
	.elementor-widget-afp-boat-image,
	.elementor-widget-afp-transfer-image
) .ekits-product-columns__wrapper .columns li img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* First image spans the full left column (rows 1–2) */
:is(
	.elementor-widget-afp-estate-image,
	.elementor-widget-afp-tours-image,
	.elementor-widget-afp-cars-image,
	.elementor-widget-afp-boat-image,
	.elementor-widget-afp-transfer-image
) .ekits-product-columns__wrapper .columns li:first-child {
	grid-area: 1 / 1 / 3 / 3;
}

/* "Show more" pill button — absolute over the grid */
:is(
	.elementor-widget-afp-estate-image,
	.elementor-widget-afp-tours-image,
	.elementor-widget-afp-cars-image,
	.elementor-widget-afp-boat-image,
	.elementor-widget-afp-transfer-image
) .ekits-product-columns__wrapper .more-photos-button {
	position: absolute;
	bottom: 14px;
	right: 13px;
	height: 44px;
	padding: 12px 16px;
	border-radius: 200px;
	background: #fff;
	display: inline-flex;
	flex-wrap: nowrap;
	gap: 8px;
	align-items: center;
	color: #1e1e1e;
	cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tours Comment / Review Section — Modern Redesign
   Targets both the original TravelWP widget and the AFP custom widget.
   ═══════════════════════════════════════════════════════════════════════════ */

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #reviews.woocommerce-Reviews {
	font-family: inherit;
}

/* ── Review Top Section ─────────────────────────────────────────────────── */

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .review-top-section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	background: #fff;
	border: 1px solid #e8edf2;
	border-radius: 20px;
	padding: 32px 36px;
	margin-bottom: 32px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
	align-items: start;
}

@media (max-width: 680px) {
	:is(
		.elementor-widget-thim-ekits-tours-comment,
		.elementor-widget-afp_comment
	) .review-top-section {
		grid-template-columns: 1fr;
		padding: 24px 20px;
	}
}

/* Header row: Title + Write Review button */
:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .review-top-section .header {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 4px;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .review-top-section .header .title {
	font-size: 20px !important;
	font-weight: 700 !important;
	color: #1a202c !important;
	margin: 0 !important;
}

/* Write a Review button */
:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .review-top-section #tour-add-new-review {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 10px 20px !important;
	height: auto !important;
	background: var(--phys-body_color_primary, #0a7a8b) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 100px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	cursor: pointer !important;
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
	box-shadow: 0 4px 12px rgba(10, 122, 139, 0.25) !important;
	white-space: nowrap !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .review-top-section #tour-add-new-review:hover {
	background: var(--phys-body_color_primary-dark, #0a7a8b) !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 18px rgba(10, 122, 139, 0.35) !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .review-top-section #tour-add-new-review svg path {
	stroke: #fff !important;
}

/* ── AFP review summary block (new template overrides TravelWP's) ────────
   Class names use the `afp-rev-` prefix so theme stylesheets that target
   .statistic / .statistic-detail / .full-width / .rating-number / .progress
   never match. This keeps the layout fully under our control.
   ──────────────────────────────────────────────────────────────────────── */

.afp-rev-stats {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 28px;
	align-items: stretch;
	width: 100%;
	margin: 0;
}

@media (max-width: 600px) {
	.afp-rev-stats {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

.afp-rev-stats__avg {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px 20px;
	border-radius: 16px;
	background: linear-gradient(135deg, #f0faf9 0%, #e6f4f6 100%);
	text-align: center;
	min-width: 0;
}

.afp-rev-stats__avg-num {
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
	color: var(--phys-body_color_primary, #0a7a8b);
	white-space: nowrap;
}

.afp-rev-stats__avg-stars {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.afp-rev-stats__avg-count {
	font-size: 12px;
	font-weight: 500;
	color: #718096;
	white-space: nowrap;
}

/* Inline-SVG-free 5-star widget. Pure CSS implementation that does NOT
   rely on the WooCommerce font, so it always renders correctly. */
.afp-rev-stars {
	--afp-star-size: 18px;
	--afp-star-empty: #c9d6da;
	--afp-star-filled: #f59e0b;
	position: relative;
	display: inline-block;
	width: calc( var(--afp-star-size) * 5 + 4px * 4 );
	height: var(--afp-star-size);
	font-size: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c9d6da'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77 5.82 21.02 7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>");
	background-size: var(--afp-star-size) var(--afp-star-size);
	background-repeat: repeat-x;
	background-position: 0 center;
}

.afp-rev-stars__fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f59e0b'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77 5.82 21.02 7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>");
	background-size: var(--afp-star-size) var(--afp-star-size);
	background-repeat: repeat-x;
	background-position: 0 center;
	overflow: hidden;
	pointer-events: none;
}

/* Right column: rating breakdown bars */
.afp-rev-stats__bars {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	min-width: 0;
}

.afp-rev-stats__row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
}

.afp-rev-stats__row-label {
	flex: 0 0 60px;
	font-size: 13px;
	font-weight: 500;
	color: #4a5568;
	white-space: nowrap;
}

.afp-rev-stats__row-track {
	flex: 1 1 0%;
	min-width: 0;
	height: 8px;
	background: #e8edf2;
	border-radius: 100px;
	overflow: hidden;
}

.afp-rev-stats__row-fill {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--phys-body_color_primary, #0a7a8b), #14b8a6);
	border-radius: 100px;
	transition: width 0.6s ease;
}

.afp-rev-stats__row-num {
	flex: 0 0 24px;
	font-size: 13px;
	font-weight: 600;
	color: #718096;
	text-align: left;
}

/* ── Legacy summary CSS (kept for any page where our template override
   doesn't kick in — e.g. category archives that re-use the same widget). */
:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .review-top-section .statistic {
	grid-column: 1 / -1 !important;
	display: grid !important;
	grid-template-columns: 200px 1fr !important;
	gap: 28px !important;
	align-items: stretch !important;
	flex-wrap: nowrap !important;
	margin-bottom: 0 !important;
}

@media (max-width: 480px) {
	:is(
		.elementor-widget-thim-ekits-tours-comment,
		.elementor-widget-afp_comment
	) .review-top-section .statistic {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .statistic-general {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	flex-shrink: 0 !important;
	align-self: stretch !important;
	background: linear-gradient(135deg, #f0faf9 0%, #e6f4f6 100%) !important;
	border-radius: 16px !important;
	padding: 24px 28px !important;
	text-align: center !important;
	overflow: hidden !important;
}

/* Force the number + stars to stack vertically, never side-by-side */
:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .statistic-general .review-average-rating {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 6px !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .average-rating {
	font-size: 40px !important;
	font-weight: 800 !important;
	color: var(--phys-body_color_primary, #0a7a8b) !important;
	line-height: 1 !important;
	white-space: nowrap !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .statistic-general .rating {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
	text-align: center !important;
}

/* Star rating — keep WooCommerce's default markup intact (overflow:hidden +
   text-indent / padding-top hides the "X out of 5" text). We only override
   colours and ensure the WooCommerce icon font is used. */
:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .statistic-general .rating .star-rating {
	float: none !important;
	display: inline-block !important;
	margin: 0 auto !important;
	font-size: 18px !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .statistic-general .rating .star-rating::before {
	color: #b2ccd1 !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .statistic-general .rating .star-rating span::before {
	color: #f59e0b !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .statistic-general .review-count {
	font-size: 12px !important;
	color: #718096 !important;
	font-weight: 500 !important;
	white-space: nowrap !important;
}

/* Progress bar breakdown */
:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .statistic-detail {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	width: 100% !important;
	min-width: 0 !important;
	align-self: stretch !important;
	justify-content: center !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .statistic-detail-item {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	width: 100% !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .rating-label {
	flex: 0 0 55px !important;
	font-size: 13px !important;
	color: #4a5568 !important;
	font-weight: 500 !important;
	white-space: nowrap !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .review-top-section .statistic-detail-item .full-width {
	flex: 1 1 0% !important;
	width: auto !important;
	min-width: 60px !important;
	max-width: none !important;
	margin-right: 0 !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .progress {
	height: 8px !important;
	background: #e8edf2 !important;
	border-radius: 100px !important;
	overflow: hidden !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .progress-bar {
	height: 100% !important;
	background: linear-gradient(90deg, var(--phys-body_color_primary, #0a7a8b), #14b8a6) !important;
	border-radius: 100px !important;
	transition: width 0.6s ease !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .review-top-section .statistic-detail-item .rating-number {
	flex-shrink: 0 !important;
	width: auto !important;
	min-width: 20px !important;
	font-size: 13px !important;
	color: #718096 !important;
	font-weight: 600 !important;
	text-align: left !important;
}

/* ── Sort & Filter Bar ──────────────────────────────────────────────────── */

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .tour-commentlist-sort-filter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
	padding: 14px 20px;
	background: #f7f9fb;
	border-radius: 14px;
	border: 1px solid #e8edf2;
}

/* Gallery filter pills */
:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .gallery-filter {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .gallery-filter a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 7px 16px !important;
	border-radius: 100px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #4a5568 !important;
	background: #fff !important;
	border: 1.5px solid #e2e8f0 !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
	line-height: 1 !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .gallery-filter a:hover,
:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .gallery-filter a.active {
	background: var(--phys-body_color_primary, #0a7a8b) !important;
	border-color: var(--phys-body_color_primary, #0a7a8b) !important;
	color: #fff !important;
}

/* Sort by dropdown */
:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .sort-by {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .sort-by .label {
	color: #718096;
	font-weight: 500;
	white-space: nowrap;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .sort-by .option {
	position: relative;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .sort-by .option .toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 7px 14px;
	background: #fff;
	border: 1.5px solid #e2e8f0;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 500;
	color: #2d3748;
	cursor: pointer;
	transition: border-color 0.2s ease;
	line-height: 1;
	user-select: none;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .sort-by .option .toggle:hover {
	border-color: var(--phys-body_color_primary, #0a7a8b);
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #tour-sort-by {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	list-style: none !important;
	margin: 0 !important;
	padding: 6px !important;
	min-width: 150px;
	z-index: 100;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #tour-sort-by.is-open {
	display: block;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #tour-sort-by li {
	margin: 0 !important;
	padding: 0 !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #tour-sort-by li a {
	display: block !important;
	padding: 9px 14px !important;
	border-radius: 8px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #4a5568 !important;
	text-decoration: none !important;
	transition: background 0.15s ease, color 0.15s ease !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #tour-sort-by li a:hover,
:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #tour-sort-by li.active a {
	background: #f0faf9 !important;
	color: var(--phys-body_color_primary, #0a7a8b) !important;
}

/* ── Review Cards ───────────────────────────────────────────────────────── */

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #reviews #comments ol.commentlist,
:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #reviews ol.commentlist {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #reviews li.review,
:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #reviews li.comment {
	list-style: none !important;
	margin: 0 !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #reviews #comments .commentlist .comment_container,
:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #reviews .comment_container {
	/* Flex (not grid): when WP omits the avatar (show_avatars off or anonymous
	   review), grid's `auto 1fr` places .comment-text in track 1 (auto) and
	   leaves track 2 (1fr) empty, squeezing the text to min-content width.
	   Flex degrades gracefully — a single child gets the full row, two
	   children split as avatar (fixed) + text (grow). */
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: 18px !important;
	background: #fff !important;
	border: 1px solid #e8edf2 !important;
	border-radius: 18px !important;
	padding: 24px !important;
	margin-bottom: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
	transition: box-shadow 0.2s ease !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #reviews .comment_container > .comment-text {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	width: auto !important;
	max-width: 100% !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #reviews .comment_container:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09) !important;
}

@media (max-width: 480px) {
	:is(
		.elementor-widget-thim-ekits-tours-comment,
		.elementor-widget-afp_comment
	) #reviews .comment_container {
		flex-direction: column !important;
		padding: 18px !important;
	}
}

/* Avatar */
:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #reviews .comment_container .avatar {
	flex: 0 0 52px !important;
	width: 52px !important;
	height: 52px !important;
	max-width: 52px !important;
	max-height: 52px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	border: 2px solid #e8edf2 !important;
	position: static !important;
	float: none !important;
	margin-top: 2px !important;
}

/* Comment text block */
:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #reviews .comment_container .comment-text {
	margin: 0 !important;
	border: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
}

/* Star rating row */
:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #reviews .comment-text .star-rating {
	float: none !important;
	display: inline-flex !important;
	margin-bottom: 6px !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #reviews .comment-text .star-rating::before {
	color: #e2e8f0 !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #reviews .comment-text .star-rating span::before {
	color: #f59e0b !important;
}

/* Tour review title */
:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #reviews .comment-text .tour-review-title {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #1a202c !important;
	margin-bottom: 6px !important;
	line-height: 1.4 !important;
}

/* Meta: author + date */
:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #reviews .comment-text .meta {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	flex-wrap: wrap !important;
	margin-bottom: 10px !important;
	font-size: 13px !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #reviews .comment-text .meta .woocommerce-review__author {
	font-weight: 700 !important;
	color: #2d3748 !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #reviews .comment-text .meta time,
:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #reviews .comment-text .meta .woocommerce-review__dash,
:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #reviews .comment-text .meta .woocommerce-review__published-date {
	color: #a0aec0 !important;
	font-size: 12px !important;
	font-weight: 400 !important;
}

/* Review body text */
:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #reviews .comment-text .description {
	margin-bottom: 14px !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #reviews .comment-text .description p {
	font-size: 14px !important;
	line-height: 1.75 !important;
	color: #4a5568 !important;
	margin-bottom: 0 !important;
}

/* Review images grid */
:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #reviews .comment-text .tour-review-images {
	list-style: none !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	padding: 0 !important;
	margin: 0 !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #reviews .comment-text .tour-review-images li {
	/* Travel Booking's product-review.css forces li width:100px, height:100px
	   which makes 3 thumbnails wrap to a second row inside the narrow comment
	   column even though our <img> sizing is 80x80. Match li to img so the
	   thumbnails actually pack 3-4 per row. */
	margin: 0 !important;
	width: 80px !important;
	height: 80px !important;
	min-width: 0 !important;
	max-width: 80px !important;
	flex: 0 0 80px !important;
	overflow: hidden !important;
	border-radius: 10px !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #reviews .comment-text .tour-review-images li img {
	width: 80px !important;
	height: 80px !important;
	min-width: 0 !important;
	max-width: 80px !important;
	object-fit: cover !important;
	border-radius: 10px !important;
	border: 1px solid #e8edf2 !important;
	transition: transform 0.2s ease !important;
	cursor: pointer !important;
	display: block !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) #reviews .comment-text .tour-review-images li img:hover {
	transform: scale(1.05) !important;
}

/* No reviews message */
:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .woocommerce-noreviews {
	text-align: center;
	color: #a0aec0;
	font-size: 14px;
	padding: 40px 20px;
	background: #f7f9fb;
	border-radius: 14px;
	border: 1px dashed #e2e8f0;
}

/* ── Pagination ─────────────────────────────────────────────────────────── */

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) nav.woocommerce-pagination,
:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .woocommerce-pagination {
	margin-top: 32px !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .woocommerce-pagination .page-numbers {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .woocommerce-pagination .page-numbers li {
	margin: 0 !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .woocommerce-pagination .page-numbers li .page-numbers {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 40px !important;
	height: 40px !important;
	padding: 0 14px !important;
	border-radius: 100px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #4a5568 !important;
	background: #fff !important;
	border: 1.5px solid #e2e8f0 !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .woocommerce-pagination .page-numbers li .page-numbers:hover {
	background: var(--phys-body_color_primary, #0a7a8b) !important;
	border-color: var(--phys-body_color_primary, #0a7a8b) !important;
	color: #fff !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .woocommerce-pagination .page-numbers li .page-numbers.current {
	background: var(--phys-body_color_primary, #0a7a8b) !important;
	border-color: var(--phys-body_color_primary, #0a7a8b) !important;
	color: #fff !important;
	box-shadow: 0 4px 10px rgba(10, 122, 139, 0.25) !important;
}

:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .woocommerce-pagination .page-numbers li .page-numbers.prev,
:is(
	.elementor-widget-thim-ekits-tours-comment,
	.elementor-widget-afp_comment
) .woocommerce-pagination .page-numbers li .page-numbers.next {
	background: #f7f9fb !important;
	border-color: #e2e8f0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AFP Buttons widget — multi-action button row (WhatsApp, Phone, Booking…)
   Inline SVG icons; no FontAwesome dependency. Styled to render correctly
   inside Loop Item templates as well as standalone.
   ═══════════════════════════════════════════════════════════════════════════ */

.afp-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	width: 100%;
}

.afp-buttons__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 18px;
	min-height: 44px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	border: 0;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
	box-sizing: border-box;
	white-space: nowrap;
	color: #ffffff;
	background-color: var(--phys-body_color_primary, #0a7a8b);
}

.afp-buttons__btn:hover,
.afp-buttons__btn:focus-visible {
	color: #ffffff;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.afp-buttons__btn:active {
	transform: translateY(0);
}

/* Per-type defaults — used when the editor doesn't override colours. */
.afp-buttons__btn--whatsapp {
	background-color: #25D366;
}
.afp-buttons__btn--whatsapp:hover,
.afp-buttons__btn--whatsapp:focus-visible {
	background-color: #1eb155;
}

.afp-buttons__btn--telegram {
	background-color: #229ED9;
}
.afp-buttons__btn--telegram:hover,
.afp-buttons__btn--telegram:focus-visible {
	background-color: #1c8bbf;
}

.afp-buttons__btn--phone {
	background-color: #2D7DD2;
}
.afp-buttons__btn--phone:hover,
.afp-buttons__btn--phone:focus-visible {
	background-color: #1e63b3;
}

.afp-buttons__btn--email {
	background-color: #E07A5F;
}
.afp-buttons__btn--email:hover,
.afp-buttons__btn--email:focus-visible {
	background-color: #c0644b;
}

.afp-buttons__btn--cart {
	background-color: #1A1A2E;
}
.afp-buttons__btn--cart:hover,
.afp-buttons__btn--cart:focus-visible {
	background-color: #2d2d4a;
}

/* Editor-only: shown when a button has no resolvable target (e.g. missing
   WhatsApp number / Telegram username). Front-end never receives this class
   because resolve_action() returns empty href and the row is skipped. */
.afp-buttons__btn--placeholder {
	background-color: #fef3c7;
	color: #92400e;
	border: 1px dashed #f59e0b;
	cursor: help;
	box-shadow: none;
}
.afp-buttons__btn--placeholder:hover,
.afp-buttons__btn--placeholder:focus-visible {
	background-color: #fde68a;
	color: #78350f;
	transform: none;
	box-shadow: none;
}
.afp-buttons__btn--placeholder svg {
	fill: #92400e;
}

/* Icon-only mode: square aspect, no label. */
.afp-buttons__btn--square {
	min-width: 44px;
	width: 44px;
	padding: 0;
	flex: 0 0 auto;
}
.afp-buttons__btn--icon-only {
	gap: 0;
}

/* Grow mode: button absorbs leftover space (good for "Rezerve Et" CTAs).
   `flex-basis: 0` + `min-width: 0` lets the button shrink below its natural
   content width when the row uses `flex-wrap: nowrap` and space is tight,
   so all buttons stay on a single line. The label gets ellipsis-truncated
   instead of pushing the button to the next row. */
.afp-buttons__btn--grow {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
}
.afp-buttons__btn--grow .afp-buttons__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

/* Inline-SVG sizing. */
.afp-buttons__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 0;
}
.afp-buttons__icon svg {
	width: 18px;
	height: 18px;
	display: block;
	fill: currentColor;
}

.afp-buttons__label {
	display: inline-block;
	line-height: 1.2;
}

/* Loop Item context: keep the row aligned at card bottom. */
.thim-ekits-tours .tour-item .afp-buttons {
	justify-content: flex-end;
}

/* ─────────────────────────────────────────────────────────────
   AFP Filter Search dropdown — stacking-context fix.

   The custom dropdown panel is `position:absolute` inside the
   widget wrap. When the parent Elementor section has no z-index,
   sibling sections rendered AFTER it in the DOM (e.g. an "icons"
   row below the hero) end up painted on top, covering the panel's
   bottom items.

   filter-search.js adds the `.afp-fs-elevate` class to every
   Elementor structural ancestor (section / container / widget)
   when the dropdown opens, and removes it on close. The class
   only adds z-index — no layout / sizing change — so it is safe
   to apply to any Elementor element regardless of its other
   styles.
   ──────────────────────────────────────────────────────────── */
.afp-fs-elevate {
	position: relative;
	z-index: 9999 !important;
}

/* ─────────────────────────────────────────────────────────────
   Force the Elementor column / inner section that hosts the
   reviews widget to span its full row.

   Reason: even though our scoped review CSS makes #reviews and
   .comment_container fill 100% of THEIR container, the
   container itself is whatever Elementor column the editor
   dropped the widget into. When that column is, say, 50% wide
   (a common 50/50 hero+sidebar layout) the entire review block
   collapses to the left half of the row, which is exactly the
   "sola sıkışmış" symptom the user reports.

   `:has()` lets us walk back up from the widget and stretch its
   ancestor column / inner-section to 100% width in CSS only —
   no template change, no editor reconfiguration. Supported in
   every evergreen browser since late 2023.

   Scoped to the two review widgets specifically so unrelated
   sibling widgets in the same column (if any) don't suddenly
   bend the layout around them.
   ──────────────────────────────────────────────────────────── */
.elementor-column:has(> .elementor-widget-wrap > .elementor-widget-thim-ekits-tours-comment),
.elementor-column:has(> .elementor-widget-wrap > .elementor-widget-afp_comment),
.e-con:has(> .elementor-widget-thim-ekits-tours-comment),
.e-con:has(> .elementor-widget-afp_comment),
.elementor-section:has(.elementor-widget-thim-ekits-tours-comment),
.elementor-section:has(.elementor-widget-afp_comment) {
	width: 100% !important;
	max-width: 100% !important;
	flex-basis: 100% !important;
}

.elementor-widget-thim-ekits-tours-comment,
.elementor-widget-afp_comment {
	width: 100% !important;
	max-width: 100% !important;
}

.elementor-widget-thim-ekits-tours-comment > .elementor-widget-container,
.elementor-widget-afp_comment > .elementor-widget-container {
	width: 100% !important;
	max-width: 100% !important;
}

/* ─────────────────────────────────────────────────────────────
   Native single-tour reviews layout fallback.

   The block of review-card CSS above is gated by
   `:is(.elementor-widget-thim-ekits-tours-comment,
        .elementor-widget-afp_comment)` which only matches when
   the reviews are rendered through an Elementor widget. When the
   visitor hits Travel Booking's native single-tour template
   (reviews tab opened from /tours/.../#tab-reviews) there is no
   Elementor wrapper, the scoped block does not match, and the
   theme's own narrow-column CSS leaves the comments squeezed on
   the left of the content area.

   The selectors below mirror the key layout rules for that
   "no-Elementor" case. They target `#reviews.woocommerce-Reviews`
   which exists in both code paths but is unique enough to avoid
   bleeding into unrelated WooCommerce review listings.
   ──────────────────────────────────────────────────────────── */
.woocommerce-Tabs-panel--reviews,
.woocommerce-Tabs-panel--reviews #reviews,
#reviews.woocommerce-Reviews,
#reviews.woocommerce-Reviews #comments {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

#reviews.woocommerce-Reviews ol.commentlist {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
	width: 100% !important;
}

#reviews.woocommerce-Reviews ol.commentlist > li.review,
#reviews.woocommerce-Reviews ol.commentlist > li.comment {
	list-style: none !important;
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
}

#reviews.woocommerce-Reviews .comment_container {
	/* Flex over grid: same rationale as the Elementor-scoped block — when
	   show_avatars is off or the avatar HTML is empty, grid `auto 1fr` leaves
	   the .comment-text in track 1 (auto, sized to min-content) and the 1fr
	   track collapses, producing the "sola sıkışmış yorum" symptom. */
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: 18px !important;
	background: #fff !important;
	border: 1px solid #e8edf2 !important;
	border-radius: 18px !important;
	padding: 24px !important;
	margin: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

#reviews.woocommerce-Reviews .comment_container > .comment-text {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	width: auto !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
}

#reviews.woocommerce-Reviews .comment_container .avatar {
	flex: 0 0 52px !important;
	width: 52px !important;
	height: 52px !important;
	max-width: 52px !important;
	max-height: 52px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	border: 2px solid #e8edf2 !important;
	position: static !important;
	float: none !important;
	margin-top: 2px !important;
}

/* Review images: cap each <li> at the same 80px the <img> uses so 3-4
   thumbnails always pack horizontally even inside narrower comment
   columns (Travel Booking's product-review.css forces 100px otherwise). */
#reviews.woocommerce-Reviews .comment-text .tour-review-images {
	list-style: none !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	padding: 0 !important;
	margin: 12px 0 0 !important;
}

#reviews.woocommerce-Reviews .comment-text .tour-review-images li {
	margin: 0 !important;
	width: 80px !important;
	height: 80px !important;
	min-width: 0 !important;
	max-width: 80px !important;
	flex: 0 0 80px !important;
	overflow: hidden !important;
	border-radius: 10px !important;
}

#reviews.woocommerce-Reviews .comment-text .tour-review-images li img {
	width: 80px !important;
	height: 80px !important;
	min-width: 0 !important;
	max-width: 80px !important;
	object-fit: cover !important;
	border-radius: 10px !important;
	border: 1px solid #e8edf2 !important;
	display: block !important;
}

@media (max-width: 480px) {
	#reviews.woocommerce-Reviews .comment_container {
		flex-direction: column !important;
		padding: 18px !important;
	}
}