/* =====================================================
   My Membership — Quick Toolbar styles
   Shown just under the post/page H1. Namespaced with .wlm- to avoid
   clashing with theme CSS.
===================================================== */

.wlm-quick-toolbar {
	position: relative; /* positioning context for .wlm-qt-toast, below */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 100%;
	gap: 8px;
	margin: 10px 0 18px;
}

/* ---- Base icon button — overrides the larger pill styles the reused
   classes (.wlm-save-btn / .wlm-copy-btn) carry at the end of the
   post, shrinking them down to a compact icon-only button here. ---- */
.wlm-quick-toolbar .wlm-qt-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 10px;
	cursor: pointer;
	color: #444;
	transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.wlm-quick-toolbar .wlm-qt-btn:hover { background: #eee; }
.wlm-quick-toolbar .wlm-qt-btn:active { transform: scale( 0.94 ); }
.wlm-quick-toolbar .wlm-qt-btn:disabled { opacity: .5; cursor: default; }

.wlm-qt-icon { flex: 0 0 auto; pointer-events: none; }

/* Screen-reader-only text (kept for the labels the reused JS updates
   — e.g. "Saved" / "Save for Later" — without showing them in this
   compact row; aria-label on the button covers the accessible name). */
.wlm-qt-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* ---- Hover tooltip (pointer devices only — on touch, the aria-label
   still covers accessibility, and there's no persistent hover state
   to anchor a tooltip to). ---- */
.wlm-qt-tooltip {
	position: absolute;
	bottom: calc( 100% + 7px );
	left: 50%;
	transform: translateX( -50% ) translateY( 4px );
	background: #222;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	padding: 5px 9px;
	border-radius: 6px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .12s ease, transform .12s ease;
	z-index: 5;
}
.wlm-qt-tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX( -50% );
	border: 5px solid transparent;
	border-top-color: #222;
}
@media ( hover: hover ) and ( pointer: fine ) {
	.wlm-quick-toolbar .wlm-qt-btn:hover .wlm-qt-tooltip,
	.wlm-quick-toolbar .wlm-qt-btn:focus-visible .wlm-qt-tooltip {
		opacity: 1;
		visibility: visible;
		transform: translateX( -50% ) translateY( 0 );
	}
}

/* ---- Save for Later — active (saved) state, matching the teal used
   by the same button at the end of the post. ---- */
.wlm-quick-toolbar .wlm-qt-save.is-saved {
	background: #006666;
	border-color: #006666;
	color: #fff;
}

/* ---- Copy Full Text — brief "copied" confirmation, same teal accent. ---- */
.wlm-quick-toolbar .wlm-qt-copy.is-copied {
	background: #006666;
	border-color: #006666;
	color: #fff;
}

/* ---- Article Background — subtle ring once a non-default background
   is active, so the icon reflects current state at a glance. Toggled
   by quick-toolbar.js. ---- */
.wlm-quick-toolbar .wlm-qt-bg.is-active {
	border-color: #006666;
	box-shadow: 0 0 0 1px #006666;
}

/* ---- Small transient toast used by quick-toolbar.js for the
   Highlights hint and the Article Background confirmation. Anchored
   just under the toolbar row itself (not the bottom of the viewport)
   so the message appears right next to the icon the member clicked. ---- */
.wlm-qt-toast {
	position: absolute;
	left: 50%;
	top: calc( 100% + 10px );
	transform: translateX( -50% ) translateY( -6px );
	max-width: calc( 100vw - 32px );
	background: #222;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	padding: 10px 16px;
	border-radius: 10px;
	box-shadow: 0 4px 18px rgba( 0, 0, 0, .25 );
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease, transform .18s ease;
	z-index: 9999;
}
.wlm-qt-toast.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateX( -50% ) translateY( 0 );
}

/* ---- Mobile ---- */
@media ( max-width: 600px ) {
	.wlm-quick-toolbar { gap: 6px; }
	.wlm-quick-toolbar .wlm-qt-btn { width: 34px; height: 34px; border-radius: 9px; }

	/* Wider allowance than desktop, and text kept to one line
	   outright, so short lines like "Article background: Light
	   Yellow" never wrap on a narrow phone screen. Desktop's
	   calc(100vw - 32px) is plenty of room there — this override is
	   mobile-only. */
	.wlm-qt-toast {
		max-width: calc( 100vw - 8px );
		padding: 9px 10px;
		font-size: 12.5px;
		white-space: nowrap;
	}
}

/* ---- Dark Mode (WL Custom theme's own Dark Mode engine — see the
   "THEME COUPLING" notice at the top of wl-membership.php) ---- */
[data-wlcustom-dm="dark"] .wlm-quick-toolbar .wlm-qt-btn {
	background: #23262b;
	border-color: #3a3f47;
	color: #ddd;
}
[data-wlcustom-dm="dark"] .wlm-quick-toolbar .wlm-qt-btn:hover {
	background: #2c3038;
}