/* Uses this theme's own CSS custom properties (see inc/customizer.php)
   so the widget follows whatever dark/light palette + fonts the site
   owner has configured, instead of a separate hardcoded look. Card
   styling mirrors the theme's own "processing" notice pattern
   (--msg-info / --msg-info-bg / --msg-info-text, e.g. .vo-row.st-processing,
   .woocommerce-info) since "link is generating" is exactly that kind of
   in-progress status. The button mirrors .btn-primary-header's gold
   gradient treatment. */

.mlm-btn {
	display: inline-flex;
	position: relative;
	overflow: hidden;
	padding: 12px 28px;
	border-radius: var(--radius-sm, 3px);
	background: linear-gradient(135deg, var(--gold, #c8922a) 0%, var(--rm-accent-dim, var(--gold-dim, #6b4a10)) 100%);
	color: var(--rm-on-accent, var(--accent-text, #08070a)) !important;
	border: none;
	font-family: var(--font-body, 'Raleway', sans-serif);
	font-weight: 800;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: 0 1px 0 rgba(255,255,255,0.15);
	line-height: 1.4;
	transition: all var(--transition, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
}
.mlm-btn-lbl, .mlm-btn-hov { display: block; transition: transform .24s ease, opacity .24s ease; white-space: nowrap; pointer-events: none; }
.mlm-btn-hov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--rm-accent-dim, var(--gold-dim, #6b4a10)), var(--gold, #c8922a)); transform: translateY(110%); opacity: 0; border-radius: inherit; }
.mlm-btn:hover { box-shadow: var(--shadow-gold, 0 0 18px rgba(200,146,42,0.4)); transform: translateY(-1px); color: var(--accent-text, #08070a); }
.mlm-btn:hover .mlm-btn-lbl { transform: translateY(-110%); opacity: 0; }
.mlm-btn:hover .mlm-btn-hov { transform: translateY(0); opacity: 1; }

.mlm-generating {
	display: inline-flex;
	flex-direction: column;
	gap: 6px;
	max-width: 380px;
	padding: 12px 16px;
	border-radius: var(--radius-sm, 3px);
	background: var(--msg-info-bg, #1a1722);
	border: 1px solid var(--msg-info, #2563eb);
	text-align: left;
	font-family: var(--font-body, 'Raleway', sans-serif);
}
.mlm-generating-header { display: flex; align-items: center; gap: 8px; }
@keyframes mlm-spin { to { transform: rotate(360deg); } }
.mlm-generating-title {
	font-weight: 700;
	font-size: 0.86rem;
	color: var(--msg-info-text, var(--text-primary, #f0ece4));
}
.mlm-generating-msg { font-size: 0.8rem; color: var(--text-secondary, #9a9088); transition: opacity .3s; }
.mlm-email-note { font-size: 0.72rem; color: var(--text-muted, #504848); }

/* Compact variant: contexts where this shortcode's saved content gets
   re-rendered inside a small card grid (e.g. Rank Membership's "My
   Unlocks" dashboard) rather than on its own post -- the full card
   above is fine there but makes those cards balloon in height.

   The wrap is a column flexbox around the pill + email note; flex's
   default stretch behavior makes the note match the pill's width
   automatically (whichever is naturally wider sets the wrap's width,
   the other stretches to fill it) without hardcoding a pixel value. */
.mlm-generating-compact-wrap {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
}
.mlm-generating-compact {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: var(--radius-sm, 3px);
	background: var(--msg-info-bg, #1a1722);
	border: 1px solid var(--msg-info, #2563eb);
	font-family: var(--font-body, 'Raleway', sans-serif);
	font-weight: 600;
	font-size: 0.76rem;
	color: var(--msg-info-text, var(--text-primary, #f0ece4));
}
.mlm-generating-compact-wrap .mlm-email-note {
	text-align: left;
}
.mlm-spinner-sm {
	width: 14px; height: 14px; flex-shrink: 0;
	border: 2px solid var(--border-light, #322e44);
	border-top-color: var(--gold, #c8922a);
	border-radius: 50%;
	animation: mlm-spin 0.9s linear infinite;
}

/* [mega_preview] -- photo/video/size stats + a gallery that's already
   visible underneath a height-clipped fade, with the toggle button
   floating over that fade (not a fully-hidden spoiler). Toggled via
   the "checkbox hack": a hidden checkbox + CSS sibling selectors, no
   JS needed. */
.mlm-preview-card {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 18px 20px;
	border-radius: var(--radius-lg, 10px);
	background: var(--bg-card, #1c1a24);
	font-family: var(--font-body, 'Raleway', sans-serif);
	max-width: 780px;
	margin: 12px auto;
}
.mlm-preview-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 22px;
}
.mlm-preview-stat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--text-secondary, #9a9088);
	white-space: nowrap;
}
.mlm-preview-stat svg { width: 15px; height: 15px; flex-shrink: 0; }

.mlm-preview-checkbox { display: none; }

.mlm-preview-wrap {
	position: relative;
	overflow: hidden;
	max-height: 260px;
	transition: max-height 0.4s ease;
}
.mlm-preview-checkbox:checked ~ .mlm-preview-wrap {
	/* Deliberately NOT a huge number like 4000px: max-height's
	   transition duration is spread across the full DECLARED range
	   (260 -> this value), not the actual content height -- so while
	   max-height is still above the real content height, nothing
	   visibly moves yet, and the whole visible collapse/expand happens
	   in whatever fraction of the 0.4s remains once it crosses below
	   the real height. The bigger this number is relative to actual
	   content, the more that shows up as "stuck, then snaps shut".
	   1400px comfortably covers the preview image's realistic height
	   range (a single 740px-wide image; even a generously-configured
	   grid stays well under this) while staying much closer to real
	   content height than 4000px was, which is what actually smooths
	   out the close transition. A perfectly proportional animation
	   would need JS to measure the real height -- this is the
	   pure-CSS middle ground.
	*/
	max-height: 1400px;
}

.mlm-preview-gallery {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.mlm-preview-gallery img {
	width: 100%;
	height: auto;
	display: block;
}

.mlm-preview-fade {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 18px;
	background: linear-gradient(to bottom, transparent 0%, var(--bg-card, #1c1a24) 92%);
	cursor: pointer;
}
.mlm-preview-checkbox:checked ~ .mlm-preview-wrap .mlm-preview-fade {
	position: static;
	background: none;
	padding: 14px 0 0;
}

.mlm-preview-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 22px;
	border-radius: 999px;
	/* Flat gold at 50% transparency -- no gradient. color-mix() keeps
	   this theme-aware (respects whatever --gold actually resolves to)
	   rather than a hardcoded rgba() guess; the rgba() line above it is
	   a plain fallback for browsers old enough not to support
	   color-mix(), overridden by the line below wherever it's supported. */
	background: rgba(200, 146, 42, 0.85);
	background: color-mix(in srgb, var(--gold, #c8922a) 85%, transparent);
	color: var(--rm-on-accent, var(--accent-text, #08070a));
	border: none;
	font-size: 0.76rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: box-shadow var(--transition, 0.3s), transform var(--transition, 0.3s);
}
.mlm-preview-fade:hover .mlm-preview-toggle { box-shadow: var(--shadow-gold, 0 0 18px rgba(200,146,42,0.4)); transform: translateY(-1px); }
.mlm-preview-toggle-open { display: none; }
.mlm-preview-checkbox:checked ~ .mlm-preview-wrap .mlm-preview-toggle-closed { display: none; }
.mlm-preview-checkbox:checked ~ .mlm-preview-wrap .mlm-preview-toggle-open { display: inline-flex; align-items: center; gap: 6px; }