/**
 * Quote Copy Share — quote-share.css
 * Lightweight, theme-agnostic, mobile-responsive.
 * @version 1.0.0
 */

/* ── Design tokens ────────────────────────────────────────────────────────── */
.qcs-popup {
	--qcs-accent:      #e60000;      /* overridden by PHP/JS per settings */
	--qcs-bg:          #1c1c1e;
	--qcs-bg-hover:    #2c2c2e;
	--qcs-text:        #ffffff;
	--qcs-text-muted:  rgba(255,255,255,.65);
	--qcs-border:      rgba(255,255,255,.10);
	--qcs-radius:      10px;
	--qcs-radius-sm:   7px;
	--qcs-shadow:      0 8px 32px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
	--qcs-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--qcs-arrow-left:  50%;          /* overridden by JS */
	--qcs-transition:  0.18s ease;
}

/* ── Popup container ──────────────────────────────────────────────────────── */
.qcs-popup {
	position:        absolute;
	z-index:         999999;
	display:         flex;
	flex-direction:  column;
	background:      var(--qcs-bg);
	border-radius:   var(--qcs-radius);
	box-shadow:      var(--qcs-shadow);
	padding:         6px;
	min-width:       190px;
	max-width:       260px;
	font-family:     var(--qcs-font);
	pointer-events:  none;
	opacity:         0;
	transform:       translateY(6px) scale(.97);
	transition:      opacity var(--qcs-transition),
	                 transform var(--qcs-transition);
	/* Prevent layout interference */
	box-sizing:      border-box;
	line-height:     1;
	-webkit-user-select: none;
	user-select:     none;
}

.qcs-popup--visible {
	opacity:        1;
	transform:      translateY(0) scale(1);
	pointer-events: auto;
}

/* ── Button row ───────────────────────────────────────────────────────────── */
.qcs-btn-row {
	display:   flex;
	gap:       4px;
	width:     100%;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.qcs-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             6px;
	flex:            1;
	padding:         8px 10px;
	border:          none;
	border-radius:   var(--qcs-radius-sm);
	background:      transparent;
	color:           var(--qcs-text);
	font-family:     var(--qcs-font);
	font-size:       13px;
	font-weight:     600;
	cursor:          pointer;
	transition:      background var(--qcs-transition), color var(--qcs-transition), transform 0.1s ease;
	white-space:     nowrap;
	-webkit-tap-highlight-color: transparent;
}

.qcs-btn:hover {
	background: var(--qcs-bg-hover);
}

.qcs-btn:active {
	transform: scale(.96);
}

.qcs-btn:focus-visible {
	outline:        2px solid var(--qcs-accent);
	outline-offset: 2px;
}

/* Copy button accent on success */
.qcs-btn--copy.qcs-btn--success {
	background: var(--qcs-accent);
	color:      #fff;
}

/* Share button with right accent bar */
.qcs-btn--share {
	border-left: 1px solid var(--qcs-border);
}

.qcs-btn svg {
	flex-shrink: 0;
	opacity:     .85;
}

/* ── Share sub-menu ───────────────────────────────────────────────────────── */
.qcs-share-menu {
	display:        flex;
	flex-direction: column;
	overflow:       hidden;
	max-height:     0;
	opacity:        0;
	transition:     max-height 0.22s ease, opacity 0.18s ease, margin 0.18s ease;
	margin-top:     0;
}

.qcs-share-menu--open {
	max-height: 240px;
	opacity:    1;
	margin-top: 4px;
}

.qcs-share-item {
	display:         flex;
	align-items:     center;
	gap:             10px;
	padding:         9px 12px;
	border-radius:   var(--qcs-radius-sm);
	color:           var(--qcs-text) !important;
	font-family:     var(--qcs-font);
	font-size:       13px;
	font-weight:     500;
	text-decoration: none !important;
	transition:      background var(--qcs-transition);
	-webkit-tap-highlight-color: transparent;
}

.qcs-share-item:hover {
	background: var(--qcs-bg-hover);
	color:      #fff !important;
}

.qcs-share-item:focus-visible {
	outline:        2px solid var(--qcs-accent);
	outline-offset: -2px;
	border-radius:  var(--qcs-radius-sm);
}

/* Network brand colours on icon */
.qcs-share-twitter  svg { color: #1d9bf0; }
.qcs-share-facebook svg { color: #1877f2; }
.qcs-share-whatsapp svg { color: #25d366; }
.qcs-share-linkedin svg { color: #0a66c2; }

/* ── Caret / Arrow ────────────────────────────────────────────────────────── */
.qcs-arrow {
	position:    absolute;
	width:       12px;
	height:      12px;
	background:  var(--qcs-bg);
	left:        var(--qcs-arrow-left);
	transform:   translateX(-50%) rotate(45deg);
	box-shadow:  2px 2px 4px rgba(0,0,0,.15);
}

/* Arrow BELOW the selection (popup is above) */
.qcs-popup--above .qcs-arrow {
	bottom: -6px;
	clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}

/* Arrow ABOVE the selection (popup is below) */
.qcs-popup--below .qcs-arrow {
	top: -6px;
	clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}

/* ── Divider between btn-row and share menu ───────────────────────────────── */
.qcs-share-menu--open::before {
	content:      '';
	display:      block;
	height:       1px;
	background:   var(--qcs-border);
	margin:       0 6px 4px;
}

/* ── Mobile tweaks ────────────────────────────────────────────────────────── */
@media ( max-width: 480px ) {
	.qcs-popup {
		min-width: 170px;
		max-width: 92vw;
	}

	.qcs-btn {
		font-size: 12px;
		padding:   8px 8px;
		gap:       5px;
	}

	.qcs-share-item {
		font-size: 12px;
		padding:   8px 10px;
	}
}

/* ── High-contrast / forced-colors support ───────────────────────────────── */
@media ( forced-colors: active ) {
	.qcs-popup  { border: 1px solid ButtonText; }
	.qcs-btn    { border: 1px solid ButtonText; }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
	.qcs-popup,
	.qcs-btn,
	.qcs-share-menu,
	.qcs-share-item {
		transition: none;
	}
}

/* ── Print: hide entirely ─────────────────────────────────────────────────── */
@media print {
	.qcs-popup { display: none !important; }
}