/* Rank Membership & Gems - Public Styles */

/* ============================================================
   THEME-AWARE COLOR SYSTEM
   Reads the active theme's CSS custom properties (e.g. Velvet's
   --bg-card, --gold, --text-primary, etc.) so every plugin component
   below automatically matches the site's palette and follows
   [data-theme="light"]/[data-theme="dark"] with no JS of its own.
   Declared once on :root (this stylesheet loads on every front-end
   page already) so any component anywhere can use var(--rm-*)
   without redeclaring this block. If the active theme has no token
   system, every var() falls back to a sensible default of its own.
   ============================================================ */
:root {
	--rm-card-bg:      var(--bg-card, #ffffff);
	--rm-elevated-bg:  var(--bg-elevated, #f4f3ff);
	--rm-border:       var(--border, #e5e1f5);
	--rm-border-light: var(--border-light, #ddd6f8);
	--rm-radius-lg:    var(--radius-lg, 12px);
	--rm-radius-sm:    var(--radius-sm, 8px);
	--rm-text-primary: var(--text-primary, #1a1a1a);
	--rm-text-secondary: var(--text-secondary, #555555);
	--rm-text-muted:   var(--text-muted, #888888);
	--rm-accent:       var(--gold, #5b21b6);
	--rm-accent-light: var(--gold-light, #7c3aed);
	--rm-accent-dim:   var(--gold-dim, #4c1d95);
	--rm-on-accent:    #ffffff;
	--rm-font-display: var(--font-display, inherit);
	--rm-font-body:    var(--font-body, inherit);
	--rm-transition:   var(--transition, 0.25s ease);
	--rm-transition-fast: var(--transition-fast, 0.15s ease);
	--rm-shadow-card:  var(--shadow-card, 0 20px 60px rgba(0, 0, 0, 0.35));
	--rm-shadow-accent:var(--shadow-gold, 0 0 18px rgba(91, 33, 182, 0.35));
	--rm-warning:      var(--msg-warning, #d97706);
	--rm-warning-bg:   var(--msg-warning-bg, #fffbeb);
	--rm-warning-text: var(--msg-warning-text, #92400e);
	--rm-success:      var(--msg-success, #16a34a);
	--rm-error:        var(--msg-error, #dc2626);
	--rm-error-bg:     var(--msg-error-bg, #fef2f2);
	--rm-error-text:   var(--msg-error-text, #b3261e);
	--rm-leave-hover:  var(--crimson-light, #e0435a);
	--rm-leave-border: var(--crimson, #c02030);
}

/* ============================================================
   ACCESS BLOCKED POP-UP
   ============================================================ */
#rm-access-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(5, 5, 8, 0.88);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
/* Matches the light-mode overlay treatment used elsewhere on Velvet
   (age-gate / search overlay) -- swaps the dark glass for a warm,
   light glass instead of just dimming a dark tint. Sites without
   [data-theme] simply never match this rule and keep the dark glass. */
[data-theme="light"] #rm-access-overlay {
	background: rgba(237, 232, 224, 0.92);
}

body.rm-modal-open { overflow: hidden; }

.rm-modal {
	background: var(--rm-card-bg);
	border: 1px solid var(--rm-border);
	border-radius: var(--rm-radius-lg);
	max-width: 460px;
	width: 100%;
	padding: 40px 36px;
	text-align: center;
	box-shadow: var(--rm-shadow-card);
	font-family: var(--rm-font-body);
}
.rm-modal-icon { font-size: 36px; margin-bottom: 10px; }
.rm-modal h2 {
	margin: 0 0 12px;
	font-size: 22px;
	font-family: var(--rm-font-display);
	font-weight: 600;
	color: var(--rm-text-primary);
}
.rm-modal-message { color: var(--rm-text-secondary); margin-bottom: 22px; line-height: 1.6; }

/* Clickable Order ID (opens the order-details popup) -- shared between
   [rm_crypto_orders] and Balance History, so styled here rather than
   duplicated in each page's own stylesheet. */
.rm-crypto-order-id-link {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: var(--rm-accent, inherit);
	text-decoration: underline;
	cursor: pointer;
}
.rm-crypto-order-id-link:hover {
	color: var(--rm-text-primary, inherit);
}

.rm-order-detail-rows {
	text-align: left;
	margin-bottom: 14px;
}
.rm-order-detail-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	border-bottom: 1px solid var(--rm-border, rgba(128,128,128,0.2));
	font-size: 13px;
}
.rm-order-detail-row:last-child {
	border-bottom: none;
}
.rm-order-detail-label {
	color: var(--rm-text-secondary);
	flex-shrink: 0;
}
.rm-order-detail-value {
	color: var(--rm-text-primary);
	font-weight: 600;
	text-align: right;
	word-break: break-all;
}
.rm-order-detail-explorer-link {
	display: block;
	text-align: center;
	margin-bottom: 14px;
	color: var(--rm-accent, inherit);
	text-decoration: underline;
	font-size: 13px;
}

.rm-modal-ranks {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.rm-rank-chip {
	background: var(--rm-elevated-bg);
	border: 1px solid var(--rm-border-light);
	border-radius: var(--rm-radius-sm);
	padding: 10px 16px;
	min-width: 110px;
	transition: border-color var(--rm-transition-fast);
}
.rm-rank-chip .rm-rank-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--rm-text-muted); margin-bottom: 4px; font-family: var(--rm-font-body); }
.rm-rank-chip strong { display: block; font-size: 15px; color: var(--rm-text-primary); font-family: var(--rm-font-display); }
.rm-rank-chip .rm-rank-points { display: block; font-size: 12px; color: var(--rm-text-muted); margin-top: 2px; }
.rm-rank-required { border-color: var(--rm-accent-dim); }
.rm-rank-arrow { font-size: 20px; color: var(--rm-text-muted); }

.rm-points-needed {
	display: inline-block;
	font-weight: 600;
	font-size: 13px;
	color: var(--rm-warning-text);
	background: var(--rm-warning-bg);
	border: 1px solid var(--rm-warning);
	border-radius: var(--rm-radius-sm);
	padding: 8px 14px;
	margin-bottom: 20px;
}

.rm-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ============================================================
   SHARED BUTTONS -- theme-aware everywhere, not just inside a
   specific overlay, so any component in the plugin can use them.
   ============================================================ */
.rm-btn {
	display: inline-block;
	padding: 10px 18px;
	border-radius: var(--rm-radius-sm);
	text-decoration: none;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
	border: none;
	font-family: var(--rm-font-body);
	transition: all var(--rm-transition);
}
/* !important below is deliberate, not sloppy: these are interactive
   component buttons, not prose text links -- they should never be
   subject to a theme's generic "links inside post/page content" rule
   (e.g. Velvet's `.single-post-content a { color: var(--gold); }`),
   which can out-specificity a plain single-class selector like
   .rm-btn-primary (0,1,0 vs the theme rule's 0,1,1) since our
   shortcodes render inside that same content wrapper. Confirmed via
   DevTools on a live page, not theoretical. */
.rm-btn-primary {
	background: linear-gradient(135deg, var(--rm-accent) 0%, var(--rm-accent-dim) 100%);
	color: var(--rm-on-accent) !important;
}
.rm-btn-primary:hover {
	box-shadow: var(--rm-shadow-accent);
	transform: translateY(-1px);
	color: var(--rm-on-accent) !important;
}
.rm-btn-secondary {
	background: transparent;
	color: var(--rm-text-secondary) !important;
	border: 1px solid var(--rm-border-light);
}
.rm-btn-secondary:hover {
	border-color: var(--rm-accent-dim);
	color: var(--rm-accent) !important;
}
.rm-btn-ghost {
	background: transparent;
	color: var(--rm-text-muted) !important;
	border: 1px solid var(--rm-border);
}
.rm-btn-ghost:hover {
	border-color: var(--rm-leave-border);
	color: var(--rm-leave-hover) !important;
}
.rm-btn[disabled] { opacity: .6; cursor: not-allowed; }

/* Loading state: a small spinner replaces the button's own text via
   ::after, keeping the button's width/shape stable instead of jumping
   around as its label changes. */
.rm-btn.rm-loading {
	color: transparent !important;
	pointer-events: none;
	position: relative;
}
.rm-btn.rm-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: rm-spin 0.7s linear infinite;
}
.rm-btn-secondary.rm-loading::after,
.rm-btn-ghost.rm-loading::after {
	border-color: var(--rm-border-light);
	border-top-color: var(--rm-text-primary);
}
@keyframes rm-spin { to { transform: rotate(360deg); } }

/* ============================================================
   PAID CONTENT BLOCKS
   Deliberately minimal -- no card/box chrome, just the button,
   centered. It sits directly in the flow of the post content rather
   than looking like a separate boxed-off element.
   ============================================================ */
.rm-locked-block {
	margin: 24px 0;
	padding: 8px 0;
	scroll-margin-top: 80px;
}
.rm-locked-block--center { text-align: center; }
.rm-locked-block--left { text-align: left; }
.rm-unlock-btn { min-width: 220px; }
.rm-unlock-result { margin-top: 10px; font-size: 13px; }
.rm-unlock-result.rm-error { color: var(--rm-error-text); }
.rm-unlocked-content { margin: 20px 0; scroll-margin-top: 80px; }

/* ============================================================
   INSUFFICIENT GEMS MODAL
   Same overlay/card pattern as the access-blocked popup.
   ============================================================ */
#rm-gems-topup-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(5, 5, 8, 0.88);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
[data-theme="light"] #rm-gems-topup-modal {
	background: rgba(237, 232, 224, 0.92);
}
.rm-gems-modal-icon { font-size: 34px; margin-bottom: 10px; }
.rm-gems-modal-field {
	margin: 18px 0;
	text-align: left;
}
.rm-gems-modal-field label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rm-text-muted);
	margin-bottom: 6px;
	font-family: var(--rm-font-body);
}
.rm-gems-modal-amount-wrap {
	display: flex;
	align-items: center;
	background: var(--rm-elevated-bg);
	border: 1px solid var(--rm-border-light);
	border-radius: var(--rm-radius-sm);
	padding: 4px 4px 4px 14px;
}
.rm-gems-modal-amount-prefix { color: var(--rm-text-muted); font-weight: 600; margin-right: 4px; }
.rm-gems-modal-amount-wrap input[type="number"] {
	flex: 1;
	width: 100%;
	box-sizing: border-box;
	border: none;
	outline: none;
	background: none;
	padding: 10px 6px;
	color: var(--rm-text-primary);
	font-family: var(--rm-font-body);
	font-size: 17px;
	font-weight: 600;
}
.rm-gems-modal-amount-wrap.rm-input-error,
.rm-gems-modal-field input[type="number"].rm-input-error {
	border-color: var(--rm-error);
	background: var(--rm-error-bg);
}
.rm-gems-modal-amount-wrap input.rm-input-error { color: var(--rm-error-text); }
.rm-gems-modal-preview {
	font-size: 12px;
	color: var(--rm-accent);
	font-weight: 600;
	margin: 8px 0 0;
	text-align: left;
}
.rm-field-error {
	font-size: 12px;
	color: var(--rm-error-text);
	margin: 6px 0 0;
	font-weight: 600;
	text-align: left;
}
/* The primary "action" button in these pop-ups is an <a>, not a real
   <button> (it navigates), so there's no native disabled state to rely
   on -- this is the visual half of that, paired with JS blocking the
   click itself while the amount is below the minimum. */
.rm-btn.rm-btn-disabled {
	opacity: .5;
	cursor: not-allowed;
	pointer-events: none;
}

/* ---- Rank progress ---- */
.rm-rank-progress { margin: 16px 0; }
.rm-rank-progress-labels { display: flex; justify-content: space-between; font-size: 13px; color: var(--rm-text-secondary); margin-bottom: 4px; }
.rm-progress-bar { background: var(--rm-elevated-bg); border-radius: 6px; height: 10px; overflow: hidden; }
.rm-progress-fill { background: linear-gradient(90deg, var(--rm-accent-light), var(--rm-accent)); height: 100%; }
.rm-progress-note { font-size: 12px; color: var(--rm-text-muted); margin-top: 6px; }

/* ---- Gem packages ---- */
.rm-gem-packages { display: flex; gap: 16px; flex-wrap: wrap; }
.rm-gem-package { border: 1px solid var(--rm-border); border-radius: var(--rm-radius-sm); padding: 18px; text-align: center; min-width: 160px; background: var(--rm-card-bg); }
.rm-gem-amount { font-size: 20px; font-weight: 700; color: var(--rm-accent); margin: 6px 0; }
.rm-gem-price { color: var(--rm-text-muted); margin-bottom: 12px; }

/* ---- Misc badges ---- */
.rm-user-rank { font-weight: 600; color: var(--rm-accent); }

/* ============================================================
   MY UNLOCKED CONTENT PAGE
   Built on Velvet's own page-favorites.php structure -- .posts-grid,
   .post-card, .index-hero-*, .index-filter-pills, and pagination are
   all inherited from the theme via matching class names. Only the
   custom card content (price/access/expiry) and the search+toggle+
   clear controls need their own styling here.
   ============================================================ */
/* Absolute-fills the thumbnail regardless of the <a> wrapper's own box
   model -- more robust than relying on width/height percentages
   resolving correctly through an inline parent, which is what the
   theme's own .post-card-thumb img rule depends on (and which behaves
   differently for the_post_thumbnail()'s output, which always carries
   explicit width/height HTML attributes WordPress adds automatically,
   versus this plugin's plain <img src="..."> with none). */
.rm-unlock-card .post-card-thumb a { display: block; width: 100%; height: 100%; }
.rm-unlock-card .post-card-thumb img {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	max-width: none !important;
}
.rm-unlock-card .post-card-body { gap: 6px; }
.rm-unlock-card .post-card-category-badge { align-self: flex-start; }
.rm-unlock-price {
	font-size: 0.85rem;
	color: var(--rm-text-secondary);
}
.rm-unlock-access { margin-top: 2px; }
.rm-unlock-access .rm-btn { width: 100%; text-align: center; box-sizing: border-box; }
.rm-unlock-result { margin-top: 8px; font-size: 12px; }
.rm-unlock-result.rm-error { color: var(--rm-error-text); }
.rm-unlock-expiry {
	font-size: 1rem;
	font-weight: 600;
	color: var(--rm-text-primary);
	margin-top: auto;
	padding-top: 2px;
}
.rm-unlock-countdown { font-variant-numeric: tabular-nums; }
.rm-unlock-expired-label { color: var(--rm-error-text); font-weight: 700; }
.rm-unlock-never { color: var(--rm-text-muted); font-weight: 500; font-size: 0.85rem; }
.rm-unlock-thumb-fallback { font-size: 28px; }
.rm-muc-rendered-content { font-size: 13px; }
.rm-muc-rendered-content p { margin: 0; }
.rm-muc-rendered-content p + p { margin-top: 8px; }

.rm-unlocks-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
}
.rm-unlocks-search-form { flex: 1 1 220px; max-width: 320px; }
.rm-unlocks-search-input {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 14px;
	border-radius: 24px; /* matches .index-pill's pill shape for visual consistency */
	border: 1px solid var(--rm-border-light);
	background: var(--rm-elevated-bg);
	color: var(--rm-text-primary);
	font-family: var(--rm-font-body);
	font-size: 0.85rem;
}
.rm-unlocks-search-input::placeholder { color: var(--rm-text-muted); }
#rm-muc-clear-expired { background: none; }
.rm-my-unlocks-clear-result {
	font-size: 12px;
	color: var(--rm-error-text);
	min-height: 1em;
	padding: 4px 0;
}
#rm-muc-results {
	transition: opacity 0.15s ease;
}
#rm-muc-results.rm-muc-results-loading {
	opacity: 0.5;
}

/* ============================================================
   UNLOCK / POINTS NOTIFICATION TOASTS
   ============================================================ */
#rm-toast-container {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 999998; /* below modal overlays (999999), above everything else */
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 340px;
	pointer-events: none;
}
.rm-unlock-toast {
	background: var(--rm-card-bg);
	border: 1px solid var(--rm-border-light);
	border-left: 4px solid var(--rm-accent);
	border-radius: var(--rm-radius-sm);
	padding: 14px 18px;
	box-shadow: var(--rm-shadow-card);
	color: var(--rm-text-primary);
	font-family: var(--rm-font-body);
	font-size: 14px;
	line-height: 1.5;
	opacity: 0;
	transform: translateX(24px);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Points toast is visually distinct (amber accent) so it doesn't read
   as a duplicate of the Gems toast when both are stacked together. */
.rm-points-toast { border-left-color: var(--rm-warning); }
/* Gems-credited (top-up) toast gets its own green accent -- distinct
   from both the default Gems-deducted color and the Points amber, so
   a stack of "Gems credited" + "Points earned" after a top-up reads
   as two different things at a glance rather than two of the same. */
.rm-gems-credited-toast { border-left-color: var(--rm-success); }
.rm-unlock-toast-visible {
	opacity: 1;
	transform: translateX(0);
}

@media (max-width: 480px) {
	#rm-toast-container {
		top: 12px;
		right: 12px;
		left: 12px;
		max-width: none;
	}
}