/* Merchspine Marketplaces – default frontend styles.
   All selectors are scoped to plugin-prefixed .msp- classes only, so
   this cannot leak into theme/Elementor/other-plugin styles. Elementor
   widget instances layer their own generated CSS on top of this. */

.msp-marketplaces {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.msp-marketplaces * {
	box-sizing: border-box;
}

.msp-format {
	background: #fff;
	border: 1px solid #ECECEC;
	border-radius: 10px;
	padding: 18px 20px;
	min-width: 0;
}

.msp-format-header {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
	gap: 8px;
}

.msp-format-icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	color: #6B3FE0;
	display: inline-block;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.msp-format-icon--ebook {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h10a4 4 0 0 1 4 4v12H8a4 4 0 0 1-4-4V4z'/><rect x='16' y='6' width='4' height='14' rx='1'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h10a4 4 0 0 1 4 4v12H8a4 4 0 0 1-4-4V4z'/><rect x='16' y='6' width='4' height='14' rx='1'/></svg>");
}

.msp-format-icon--paperback,
.msp-format-icon--hardcover {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h13a3 3 0 0 1 3 3v13H7a3 3 0 0 1-3-3V4z'/><path d='M4 4v13a3 3 0 0 0 3 3h13' fill='none' stroke='white' stroke-width='1'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h13a3 3 0 0 1 3 3v13H7a3 3 0 0 1-3-3V4z'/></svg>");
}

.msp-format-icon--audiobook {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3a7 7 0 0 0-7 7v6a2 2 0 0 0 2 2h1v-7H6v-1a6 6 0 0 1 12 0v1h-2v7h1a2 2 0 0 0 2-2v-6a7 7 0 0 0-7-7z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3a7 7 0 0 0-7 7v6a2 2 0 0 0 2 2h1v-7H6v-1a6 6 0 0 1 12 0v1h-2v7h1a2 2 0 0 0 2-2v-6a7 7 0 0 0-7-7z'/></svg>");
}

/* A custom SVG icon uploaded via WP Admin → Marketplaces/Merchspine →
   Format Header Icons overrides whichever default shape above matched
   this format - this rule must stay AFTER the default per-format rules
   so it wins on selector order. Uses the CSS-mask + currentColor
   technique (safe only for SVGs), so the Elementor "Icon Color"
   control keeps recoloring it consistently regardless of the uploaded
   image's own original colors. */
.msp-format-icon--custom {
	-webkit-mask-image: var(--msp-format-icon-url);
	mask-image: var(--msp-format-icon-url);
}

/* A custom raster icon (PNG/JPG/WebP) is rendered as a real <img>
   rather than a CSS mask - arbitrary raster images used as a CSS mask
   source have inconsistent cross-browser support and can silently fail
   to render at all, which is why uploaded icons were not appearing.
   The wrapping span keeps the exact same width/height/spacing behavior
   as every other .msp-format-icon (so the Elementor Icon Size/Spacing
   controls keep working unchanged); only the "Icon Color" recolor
   effect is intentionally a no-op here, since an arbitrary raster image
   cannot safely be recolored via CSS - the icon staying visible always
   takes priority over forcing a recolor. */
.msp-format-icon--custom-img {
	background: none;
	-webkit-mask-image: none;
	mask-image: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.msp-format-icon--custom-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.msp-format-title {
	font-weight: 600;
	font-size: 15px;
}

.msp-marketplace-list {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
	/* No row-gap/spacing property here on purpose - the visible space
	   between rows now comes entirely from each row's own padding (see
	   .msp-marketplace-row below, controlled by the "Separator Padding"
	   Elementor control): row N's padding-bottom plus row N+1's
	   padding-top together form the total gap between their content.
	   This keeps the list itself a plain, un-opinionated flex container:
	   hidden ([hidden] => display:none) "See All" rows simply contribute
	   no box at all and therefore no padding of their own, so they can
	   never create empty space, with no gap-specific bookkeeping needed
	   anywhere. */
}

/* Marketplace separators: a top border on EVERY row gives a top line
   above the first marketplace and a line between every subsequent
   pair; a bottom border on .msp-marketplace-row--visible-last (kept in
   sync by the renderer + frontend.js, never the raw last DOM element)
   gives the line below the final VISIBLE marketplace - correct even
   while "See All Bookstores" is collapsed and hidden rows exist after
   it in the DOM.
   Padding is a plain, direct, static default here (8px top/bottom, 0
   left/right) - no CSS custom property, no calc(). The Elementor
   "Separator Padding" control (class-widget-marketplaces.php) overrides
   it per-device with a normal, directly-targeted `padding` declaration
   via Elementor's own standard DIMENSIONS 'selectors' output, the same
   proven pattern already used for "Format Container Padding" and "Buy
   Now Button Padding" elsewhere in this widget. Because border sits
   outside padding (border > padding > content), this padding is what
   supplies the breathing room around the border-top/border-bottom
   separator lines without ever needing to be combined/calculated
   together with anything else.
   `gap` here is a small, fixed, non-configurable value for the ONE
   remaining unstyled spacing relationship in this row: between the
   marketplace logo and the details wrapper next to it (name/price/
   button, which has its own dedicated "Details Gap" control below). */
.msp-marketplace-row {
	display: flex;
	align-items: center;
	gap: 10px;
	border-top: 1px solid #EEEEEE;
	padding: 8px 0;
}

.msp-marketplace-row--visible-last {
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #EEEEEE;
}

.msp-marketplace-row[hidden] {
	display: none;
}

.msp-marketplace-logo {
	flex: 0 0 auto;
	display: flex;
}

.msp-marketplace-logo img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	display: block;
}

/* Dedicated wrapper around ONLY the name/price/button - never the logo.
   flex:1 1 auto + min-width:0 here (not on the name alone) is what
   lets this whole group correctly absorb/share the row's remaining
   width next to the fixed-size logo; the name itself additionally
   shrinks/truncates first within that shared space (see
   .msp-marketplace-name below). `gap` here is the direct target of the
   "Details Gap" Elementor control - a plain, directly-set property on
   the exact element it's meant to affect, deliberately NOT inherited
   from anywhere else, so it can never be confused with the row's own
   logo-to-details spacing above or the format-level/separator-level
   spacing systems elsewhere in the widget. */
.msp-marketplace-details {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
}

/* Groups the name and ISBN as one column so the pair, together, takes
   over the role .msp-marketplace-name played alone before ISBN existed:
   absorbing/sharing the row's remaining width next to the fixed-size
   price/button. Present even when ISBN is hidden, so the name's own
   flex/truncation behaviour is identical either way. */
.msp-marketplace-text {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	gap: 2px;
}

.msp-marketplace-name {
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.msp-marketplace-isbn {
	font-size: 12px;
	color: inherit;
	opacity: 0.65;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.msp-marketplace-price {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}

.msp-marketplace-button {
	flex: 0 0 auto;
	display: inline-block;
	text-decoration: none;
	white-space: nowrap;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: #6B3FE0;
	background: #fff;
	border: 1.5px solid #6B3FE0;
	border-radius: 6px;
	padding: 6px 14px;
	transition: background-color .15s ease, color .15s ease;
}

.msp-marketplace-button:hover {
	background: #6B3FE0;
	color: #fff;
}

.msp-see-all {
	display: block;
	width: 100%;
	margin-top: 10px;
	background: none;
	border: none;
	cursor: pointer;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: #6B3FE0;
	padding: 6px 0;
}

.msp-see-all:hover {
	text-decoration: underline;
}

.msp-editor-placeholder {
	padding: 16px;
	border: 1px dashed #c3c4c7;
	border-radius: 6px;
	color: #646970;
	font-size: 13px;
	background: #f6f7f7;
}