/* =========================================================================
   THIMZE: WISHLIST VISIBILITY + WISHLIST/SHARE ACTION ROW
   -------------------------------------------------------------------------
   1) Hides the Thimze Account Studio (TAS) wishlist heart button
      (.tas-heart-btn) everywhere it's rendered site-wide (shop/category/
      search/related grids, via TAS's own woocommerce_after_shop_loop_item
      hook), since the single product page now gets its own dedicated
      wishlist button (.tas-wishlist-btn) rendered directly into the new
      action row below Order Now — see loobek_tas_wishlist_button_html()
      in woo_hooks.php. TAS's wishlist functionality itself is untouched,
      only the loop heart button's visibility is restricted.
   2) Styles the new "Wishlist | Share" button row below Order Now.
   3) Styles the new Share modal (Web Share API fallback).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. HIDE THE TAS WISHLIST HEART BUTTON ON SHOP/CATEGORY/SEARCH/RELATED GRIDS
   TAS hooks this onto woocommerce_after_shop_loop_item, so it can appear on
   any WooCommerce loop template site-wide. Hiding it here collapses cleanly
   since it's an absolutely-positioned overlay on the thumbnail, not a flex
   child — no layout shift.
------------------------------------------------------------------------- */
.tas-heart-btn {
	display: none !important;
}

/* Quick View modal (in case a future TAS version adds it there too) */
#ts-quickshop-modal .tas-heart-btn {
	display: none !important;
}

/* The single-product wishlist button (.tas-wishlist-btn) renders directly
   inside our slot server-side now, so no relocation/hide rules are needed
   for it — just style it to match the action row, below. */
#tm-wishlist-slot .tas-wishlist-btn {
	display: flex !important;
	width: 100%;
	height: 100%;
	margin: 0 !important;
}


/* -------------------------------------------------------------------------
   2. WISHLIST + SHARE ACTION ROW (single product page only)
   Compact rounded "pill" buttons, sized to their content, sitting side by
   side with a small gap — not stretched to fill the row width.
------------------------------------------------------------------------- */
.tm-product-actions-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 14px 0 0;
}

.tm-product-actions-row > * {
	flex: 0 0 auto;
}

/* Shared button look for both the wishlist button and the share button */
.tm-product-actions-row .tm-action-button,
.tm-product-actions-row #tm-wishlist-slot .tas-wishlist-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	width: auto !important;
	height: 34px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	box-sizing: border-box;
	font-family: var(--loobek-button-font);
	font-weight: 500 !important;
	font-size: 13px !important;
	line-height: 18px !important;
	color: var(--loobek-button-bg) !important;
	background-color: transparent !important;
	border: 1px solid var(--loobek-button-bg) !important;
	border-radius: 999px !important;
	text-align: center;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.tm-product-actions-row .tm-action-icon svg,
.tm-product-actions-row #tm-wishlist-slot .tas-wishlist-btn svg {
	width: 14px !important;
	height: 14px !important;
}

.tm-product-actions-row .tm-action-button:hover,
.tm-product-actions-row .tm-action-button:focus-visible,
.tm-product-actions-row .tm-action-button:active,
.tm-product-actions-row #tm-wishlist-slot .tas-wishlist-btn:hover,
.tm-product-actions-row #tm-wishlist-slot .tas-wishlist-btn:focus-visible,
.tm-product-actions-row #tm-wishlist-slot .tas-wishlist-btn:active {
	color: #fff !important;
	background-color: var(--loobek-button-bg) !important;
	border-color: var(--loobek-button-bg) !important;
}

/* Once a product is already wishlisted, TAS adds an "active" class — give
   that state its own colour (a warm pink/red, the conventional "favourited
   heart" colour) so it reads as a persistent status, not just a hover. */
.tm-product-actions-row #tm-wishlist-slot .tas-wishlist-btn.active {
	color: #fff !important;
	background-color: #D4537E !important;
	border-color: #D4537E !important;
}

.tm-product-actions-row #tm-wishlist-slot .tas-wishlist-btn.active:hover,
.tm-product-actions-row #tm-wishlist-slot .tas-wishlist-btn.active:focus-visible {
	background-color: #B23F63 !important;
	border-color: #B23F63 !important;
}

.tm-product-actions-row .tm-action-button:active,
.tm-product-actions-row #tm-wishlist-slot .tas-wishlist-btn:active {
	transform: scale(0.98);
}

.tm-product-actions-row .tm-action-button:focus-visible,
.tm-product-actions-row #tm-wishlist-slot .tas-wishlist-btn:focus-visible {
	outline: 2px solid var(--loobek-primary-color);
	outline-offset: 2px;
}

.tm-product-actions-row .tm-action-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 0;
}

.tm-product-actions-row .tm-action-label {
	display: inline-block;
}

/* TAS's own wishlist button renders its own icon + label text as direct
   children (not wrapped in .tm-action-icon/.tm-action-label), so just make
   sure whatever icon element it uses sits centered and doesn't add its own
   stray margin inside our flex layout. */
.tm-product-actions-row #tm-wishlist-slot .tas-wishlist-btn svg,
.tm-product-actions-row #tm-wishlist-slot .tas-wishlist-btn i {
	margin: 0 !important;
	flex: 0 0 auto;
}
.tm-product-actions-row.tm-no-wishlist #tm-wishlist-slot {
	display: none !important;
}

.tm-wishlist-slot:empty {
	display: none !important;
}


/* -------------------------------------------------------------------------
   3. SHARE MODAL
------------------------------------------------------------------------- */
.ts-popup-modal .popup-container.share-modal-container {
	width: 480px;
	max-width: calc(100% - 30px);
	max-height: calc(100vh - 60px);
	overflow-y: auto;
	padding: 30px;
	box-sizing: border-box;
}

.share-modal-content h3 {
	margin: 0 0 20px;
	font-size: var(--loobek-h6-font-size);
	line-height: var(--loobek-h6-line-height);
}

.share-options {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.share-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 8px;
	background-color: transparent;
	border: 1.5px solid var(--loobek-border, rgba(0,0,0,0.12));
	border-radius: 10px;
	color: var(--loobek-text-color);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	text-align: center;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

body.image-button-radius .share-option {
	border-radius: 8px;
}

.share-option:hover,
.share-option:focus-visible {
	border-color: var(--loobek-primary-color);
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.share-option:focus-visible {
	outline: 2px solid var(--loobek-primary-color);
	outline-offset: 2px;
}

.share-option-icon {
	display: inline-flex;
	line-height: 0;
}

.share-option-icon svg {
	display: block;
}

.share-option-label {
	font-size: var(--loobek-main-small-2-font-size);
	line-height: 16px;
}

/* -------------------------------------------------------------------------
   Close button — override the theme's default filled-square .close style
   (used elsewhere for compare/quickshop/cart popups) with a plain bordered
   circle outline, scoped to just this modal so nothing else is affected.
------------------------------------------------------------------------- */
#ts-share-modal .popup-container.share-modal-container .close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	background-image: none !important;
	border: 1.5px solid var(--loobek-border, rgba(0,0,0,0.15)) !important;
	border-radius: 50% !important;
	color: var(--loobek-text-color);
	padding: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

#ts-share-modal .popup-container.share-modal-container .close:hover,
#ts-share-modal .popup-container.share-modal-container .close:focus-visible {
	border-color: var(--loobek-primary-color) !important;
	color: var(--loobek-primary-color);
	background: transparent !important;
}

#ts-share-modal .popup-container.share-modal-container .close svg {
	display: block;
}

/* The theme's base .close style draws its own X via an icomoon ::after
   glyph (content: "\e906"). We render our own inline SVG X instead, so
   suppress the built-in one here to avoid showing two X's stacked. */
#ts-share-modal .popup-container.share-modal-container .close:after {
	content: none !important;
}

.share-copy-confirmation {
	min-height: 20px;
	margin: 16px 0 0;
	font-size: var(--loobek-main-small-font-size);
	color: var(--loobek-primary-color);
	text-align: center;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.share-copy-confirmation.show {
	opacity: 1;
}

html.tm-share-modal-open,
html.tm-share-modal-open body {
	overflow: hidden;
}

@media only screen and (max-width: 575px) {
	.share-options {
		grid-template-columns: repeat(3, 1fr);
	}
	.ts-popup-modal .popup-container.share-modal-container {
		padding: 24px 18px;
	}
}

/* -------------------------------------------------------------------------
   RESPONSIVE — action row
------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
	.tm-product-actions-row {
		gap: 10px;
	}
}

@media only screen and (max-width: 359px) {
	/* Extremely narrow screens: stack gracefully instead of squeezing */
	.tm-product-actions-row > * {
		flex: 1 1 100%;
	}
}