/* ---- Design tokens shared with the site's own "Celestial Premium" dark
   cosmic + gold theme (see the live Customizer's Additional CSS) -- this
   file used to be a plain light-mode widget dropped onto that dark
   background, which combined with the site's own aggressive global
   `[type=button], [type=submit], button { padding: .1rem .4rem; ... }`
   Additional CSS rule (equal CSS specificity to a single class selector,
   and loaded later in the page, so it was winning ties) to squash every
   button on this page down to a sliver of padding with its 3 lines of
   text forced onto one row -- which is what made the tier buttons overlap
   and clip. Every rule below that competes with that global button reset
   uses !important so this widget's own layout always wins regardless of
   what other site-wide button styling gets added later. */
:root {
	--zgw-gold: #d4a853;
	--zgw-gold-bright: #f5cf6b;
	--zgw-violet: #9d4edd;
	--zgw-ink: #f1f5f9;
	--zgw-muted: #a9a3c2;
	--zgw-card-bg: #150f2e;
	--zgw-card-border: rgba(212, 168, 83, 0.28);
}

.zgw-balance-badge {
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	padding: 4px 10px !important;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--zgw-gold-bright), var(--zgw-gold));
	color: #241a04;
	font-weight: 600;
}

.zgw-topup {
	max-width: 680px;
	color: var(--zgw-ink);
}

.zgw-topup-balance {
	margin-bottom: 18px;
}

.zgw-tier-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
}

.zgw-tier-btn {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center;
	gap: 6px !important;
	width: 100% !important;
	min-height: 108px;
	padding: 18px 12px !important;
	border: 1px solid var(--zgw-card-border) !important;
	border-radius: 14px !important;
	background: var(--zgw-card-bg) !important;
	color: var(--zgw-ink) !important;
	cursor: pointer;
	font: inherit;
	white-space: normal !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.zgw-tier-btn:hover:not(:disabled) {
	border-color: var(--zgw-gold) !important;
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(157, 78, 221, 0.25), 0 4px 12px rgba(0, 0, 0, 0.35);
}

.zgw-tier-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.zgw-tier-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--zgw-muted) !important;
}

.zgw-tier-amount {
	font-size: 22px;
	font-weight: 700;
	color: var(--zgw-gold-bright) !important;
}

.zgw-tier-gems {
	font-size: 12px;
	color: var(--zgw-muted) !important;
}

/* ---- Currency switch (part 24, PayPal for international/$ users) --
   a manual "which currency" toggle above the tier grid, since this host
   has no reliable geo-IP header for guess_is_india() to key off (see
   ZGW_Shortcodes::topup()'s own comment on this) -- without a manual
   switch, a visitor abroad would never actually reach the $/PayPal tier
   panel. Same pill-toggle visual language as the EN/हिं language switch
   below, so it reads as an established site pattern rather than a
   one-off control. ---- */
.zgw-currency-switch {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 18px;
	padding: 3px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 999px;
}

.zgw-currency-btn {
	padding: 8px 16px !important;
	border: none !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--zgw-muted) !important;
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
	font: inherit;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}

.zgw-currency-btn.is-active {
	background: linear-gradient(135deg, var(--zgw-gold-bright), var(--zgw-gold)) !important;
	color: #241a04 !important;
}

.zgw-tier-panel[hidden] {
	display: none !important;
}

/* PayPal's own Smart Payment Buttons render into this container once a
   $ tier is picked -- kept empty/hidden the rest of the time so it never
   shows a stale button set from a previous currency switch or a
   different tier's order id. */
.zgw-paypal-buttons {
	max-width: 320px;
	margin-top: 16px;
}

.zgw-paypal-buttons[hidden] {
	display: none !important;
}

.zgw-topup-status,
.zgw-daily-gem-status {
	margin-top: 12px;
	font-size: 13px;
	color: var(--zgw-ink);
}

.zgw-daily-gem-btn {
	display: inline-block !important;
	padding: 10px 20px !important;
	border-radius: 999px !important;
	border: none !important;
	background: linear-gradient(135deg, var(--zgw-gold-bright), var(--zgw-gold)) !important;
	color: #241a04 !important;
	font-weight: 700;
	cursor: pointer;
	font: inherit;
	white-space: normal !important;
	box-shadow: 0 4px 14px rgba(212, 168, 83, 0.3);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.zgw-daily-gem-btn:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(212, 168, 83, 0.45);
}

.zgw-daily-gem-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ---- Shared "please log in to continue" prompt (see
   ZodastroBridge.renderAuthPrompt() and the wallet page's own logged-out
   notice) -- the same box either replaces a tool's error output, or
   stands in for the top-up widget when a signed-out visitor lands on the
   Wallet page directly. ---- */
.zgw-auth-prompt {
	max-width: 420px;
	margin: 0 auto;
	padding: 28px 24px;
	text-align: center;
	background: var(--zgw-card-bg);
	border: 1px solid var(--zgw-card-border);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	color: var(--zgw-ink);
}

.zgw-auth-icon {
	font-size: 28px;
	margin-bottom: 8px;
	filter: drop-shadow(0 0 10px rgba(212, 168, 83, 0.5));
}

.zgw-auth-heading {
	margin: 0 0 8px;
	font-size: 1.1rem;
	color: var(--zgw-gold-bright);
}

.zgw-auth-body {
	margin: 0 0 18px;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--zgw-muted);
}

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

.zgw-auth-btn {
	display: inline-block !important;
	padding: 10px 20px !important;
	border-radius: 999px !important;
	font-weight: 700;
	font-size: 0.85rem;
	text-decoration: none !important;
	cursor: pointer;
	white-space: nowrap;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.zgw-auth-btn-primary {
	background: linear-gradient(135deg, var(--zgw-gold-bright), var(--zgw-gold)) !important;
	color: #241a04 !important;
	box-shadow: 0 4px 14px rgba(212, 168, 83, 0.35);
}

.zgw-auth-btn-secondary {
	background: transparent !important;
	color: var(--zgw-gold-bright) !important;
	border: 1px solid var(--zgw-card-border) !important;
}

.zgw-auth-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(212, 168, 83, 0.4);
}

.zgw-login-notice {
	max-width: 420px;
	margin: 0 auto;
	color: var(--zgw-muted);
}

/* ---- Gem badge (part 10) -- a proper "💎 0 Gems" pill instead of a bare
   emoji + number sitting in plain nav text, which read as barely-there
   against the dark header (reported as "can we show gems 0"). Through
   part 20 this was auto-injected by header-widget.js into the theme's
   nav menu; as of part 21 it's rendered by the [zodastro_gem_badge]
   shortcode instead (class-zgw-shortcodes.php), placed by hand in
   Elementor -- see that shortcode's docblock for why. ---- */
.zgw-header-gem-badge {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	padding: 5px 12px !important;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--zgw-gold-bright), var(--zgw-gold)) !important;
	color: #241a04 !important;
	font-weight: 700;
	font-size: 13px;
	white-space: nowrap;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.zgw-header-gem-badge:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(212, 168, 83, 0.35);
}

.zgw-header-gem-icon {
	font-size: 13px;
	line-height: 1;
}

.zgw-header-gem-label {
	opacity: 0.75;
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Low-balance state: the whole pill turns red instead of just a faint text
   tint, so it's an actual color-change cue rather than something you have
   to look closely to notice. The actionable message lives in the top bar
   (below) -- this is a passive ambient cue only, no popup/hover required. */
.zgw-header-gem-item.zgw-low-balance .zgw-header-gem-badge {
	background: linear-gradient(135deg, #ff8b8b, #e0483f) !important;
	color: #fff !important;
}

/* ---- Profile avatar + dropdown (part 10) -- the "profile icon top
   right": an avatar + small menu (Wallet / Log Out) rendered into the
   site's own nav, replacing what the default WordPress "Howdy" admin
   toolbar used to show a regular visitor (now hidden for non-staff
   accounts -- see ZGW_Header_Widget::maybe_hide_admin_bar()). ---- */
.zgw-profile-item {
	position: relative;
	display: flex;
	align-items: center;
}

.zgw-profile-toggle {
	display: flex !important;
	align-items: center;
	gap: 4px;
	padding: 2px !important;
	border: none !important;
	background: transparent !important;
	cursor: pointer;
	font: inherit;
}

/* `!important` + `overflow: hidden` on top of `border-radius: 50%` (part
   20, "change profile pic round") -- belt-and-braces so the circular
   shape can't be overridden by a theme's own image/box styling (a common
   real-world cause of an avatar looking square despite this rule being
   present), regardless of where the [zodastro_profile_icon] shortcode
   ends up being placed in Elementor. */
.zgw-profile-avatar,
.zgw-profile-avatar-fallback {
	width: 30px;
	height: 30px;
	border-radius: 50% !important;
	overflow: hidden;
	border: 2px solid var(--zgw-gold);
	box-sizing: border-box;
}

.zgw-profile-avatar {
	object-fit: cover;
	display: block;
}

/* Default/fallback avatar color -- yellow-orange (part 20, "change
   default pic to yellow orangish"), was a violet/purple gradient. Shows
   whenever there's no custom-uploaded photo and the real avatar image
   fails to load (see profile-shortcode.js's img error handler). */
.zgw-profile-avatar-fallback {
	background: linear-gradient(135deg, #ffd166, #f2994a);
	color: #241a04;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 13px;
}

.zgw-profile-caret {
	color: var(--zgw-muted);
	font-size: 10px;
}

.zgw-profile-menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 190px;
	max-width: calc(100vw - 24px);
	padding: 10px;
	background: var(--zgw-card-bg);
	border: 1px solid var(--zgw-card-border);
	border-radius: 14px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
	z-index: 99998;
}

.zgw-profile-name {
	padding: 6px 10px 10px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--zgw-card-border);
	color: var(--zgw-gold-bright);
	font-weight: 700;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.zgw-profile-menu-link {
	display: block;
	padding: 8px 10px;
	border-radius: 8px;
	color: var(--zgw-ink) !important;
	font-size: 13px;
	text-decoration: none !important;
	white-space: nowrap;
}

.zgw-profile-menu-link:hover {
	background: rgba(255, 255, 255, 0.06);
	color: var(--zgw-gold-bright) !important;
}

.zgw-profile-logout {
	color: #ff9c9c !important;
}

/* ---- Pull the gem badge to the FRONT of the nav list, visually, instead
   of leaving it trailing at the very end (part 18) -- on the mobile
   hamburger panel that end-of-list position put it below every real nav
   link, requiring a scroll to see. `ul.elementor-nav-menu` is Elementor
   Pro's own flex container (true in both its horizontal desktop-bar
   layout and its stacked mobile-dropdown layout -- `order` works the
   same regardless of flex-direction), so giving it a very low `order`
   reliably pulls it to the start of the list.
   (Through part 19 this rule also covered `.zgw-profile-item`, and a
   media query hid the old auto-injected copy below ~1024px so it
   wouldn't duplicate a manually-placed [zodastro_profile_icon] shortcode
   on mobile. As of part 20 the profile-icon auto-injection is gone
   entirely -- see header-widget.js and class-zgw-header-widget.php's
   docblocks -- so both of those profile-item-specific rules were
   removed; an `order` left over from the old auto-injected placement
   could otherwise unexpectedly reorder the shortcode wherever the user
   places it by hand in an unrelated Elementor flex layout.) ---- */
.zgw-header-gem-item {
	order: -1;
}

/* ---- Site-wide "out of gems" top bar (redesigned in part 10 -- was a
   flat maroon strip with a clashing coral-red button that looked bolted
   on next to the site's dark gold theme, reported as "this shows bad
   bar"). Now a gradient that reads as part of the "Celestial Premium"
   theme, with the same gold pill button used for every other
   call-to-action on the site instead of a mismatched red one. ---- */
.zgw-out-of-gems-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	padding: 11px 16px;
	background: linear-gradient(90deg, #3a0f1e, #5c1f35, #3a0f1e);
	border-bottom: 1px solid rgba(212, 168, 83, 0.35);
	color: #fff;
	font-size: 14px;
	text-align: center;
	box-sizing: border-box;
	position: relative;
	z-index: 100000;
}

.zgw-out-of-gems-bar .zgw-bar-icon {
	font-size: 15px;
	line-height: 1;
}

.zgw-out-of-gems-bar .zgw-bar-cta {
	display: inline-block;
	padding: 7px 18px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--zgw-gold-bright), var(--zgw-gold));
	color: #241a04 !important;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none !important;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(212, 168, 83, 0.35);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.zgw-out-of-gems-bar .zgw-bar-cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(212, 168, 83, 0.5);
}

/* ---- Universal EN / हिं nav switcher (lang-sync.js) ---- */
.zgw-lang-switch-wrap {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 999px;
	padding: 2px;
}

.zgw-lang-switch-btn {
	border: none;
	background: transparent;
	color: inherit;
	opacity: 0.6;
	font: inherit;
	font-size: 12px;
	line-height: 1;
	padding: 5px 10px;
	border-radius: 999px;
	cursor: pointer;
}

.zgw-lang-switch-btn.zgw-lang-active {
	opacity: 1;
	background: #b5790e;
	color: #fff;
}

/* ---- Modern login/register modal (0.9.0) -- ZodastroBridge.openAuthModal(),
   triggered by clicking a [data-zgw-auth] link (the "Log In" / "Create Free
   Account" buttons inside .zgw-auth-prompt above, and on the Wallet page's
   own server-rendered logged-out box). Replaces sending visitors away to the
   plain default WordPress login screen: this pops up right over whatever
   tool/page they were on, they sign in or register without ever leaving the
   page, then close it and click the tool's own "Generate" button again --
   one continuous flow instead of a detour through wp-login.php and back. ---- */
.zgw-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 999999;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(8, 5, 20, 0.72);
	backdrop-filter: blur(4px);
	box-sizing: border-box;
}

.zgw-modal-overlay.zgw-modal-open {
	display: flex;
}

body.zgw-modal-noscroll {
	overflow: hidden;
}

.zgw-modal-card {
	position: relative;
	width: 100%;
	max-width: 380px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 30px 26px 26px;
	background: var(--zgw-card-bg);
	border: 1px solid var(--zgw-card-border);
	border-radius: 18px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(212, 168, 83, 0.08);
	color: var(--zgw-ink);
	box-sizing: border-box;
	animation: zgw-modal-pop 0.22s ease;
}

@keyframes zgw-modal-pop {
	from { opacity: 0; transform: translateY(10px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.zgw-modal-close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--zgw-muted);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.zgw-modal-close:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--zgw-ink);
}

.zgw-modal-tabs {
	display: flex;
	gap: 4px;
	margin: 0 0 20px;
	padding: 3px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 999px;
}

.zgw-modal-tab {
	flex: 1;
	padding: 9px 10px;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: var(--zgw-muted);
	font-weight: 600;
	font-size: 0.82rem;
	cursor: pointer;
	font: inherit;
	transition: background 0.15s ease, color 0.15s ease;
}

.zgw-modal-tab-active {
	background: linear-gradient(135deg, var(--zgw-gold-bright), var(--zgw-gold));
	color: #241a04;
}

.zgw-modal-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.zgw-modal-form label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 0.78rem;
	color: var(--zgw-muted);
}

.zgw-modal-form input {
	padding: 11px 13px;
	border: 1px solid var(--zgw-card-border);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--zgw-ink);
	font-size: 0.92rem;
	font: inherit;
	box-sizing: border-box;
}

.zgw-modal-form input:focus {
	outline: none;
	border-color: var(--zgw-gold);
	box-shadow: 0 0 0 3px rgba(212, 168, 83, 0.18);
}

.zgw-modal-forgot {
	align-self: flex-end;
	margin-top: -6px;
	font-size: 0.76rem;
	color: var(--zgw-muted) !important;
	text-decoration: none !important;
}

.zgw-modal-forgot:hover {
	color: var(--zgw-gold-bright) !important;
}

.zgw-modal-msg {
	margin: 0;
	min-height: 1em;
	font-size: 0.8rem;
	line-height: 1.4;
}

.zgw-modal-msg-error {
	color: #ff9c9c;
}

.zgw-modal-msg-ok {
	color: #8be0ab;
}

.zgw-modal-submit {
	padding: 12px !important;
	border: none !important;
	border-radius: 999px !important;
	background: linear-gradient(135deg, var(--zgw-gold-bright), var(--zgw-gold)) !important;
	color: #241a04 !important;
	font-weight: 700;
	font-size: 0.92rem;
	cursor: pointer;
	font: inherit;
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
	box-shadow: 0 6px 18px rgba(212, 168, 83, 0.3);
}

.zgw-modal-submit:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(212, 168, 83, 0.4);
}

.zgw-modal-submit:disabled {
	opacity: 0.65;
	cursor: not-allowed;
	transform: none;
}

.zgw-auth-prompt-done .zgw-auth-icon {
	filter: drop-shadow(0 0 10px rgba(139, 224, 171, 0.55));
}

/* ---- Edit Profile modal (part 11) -- reuses the same .zgw-modal-*
   overlay/card/form/input/submit chrome the login modal already defined
   above; only what's specific to this modal (a heading instead of tabs,
   and the avatar upload row) is added here. ---- */
.zgw-modal-title {
	margin: 0 0 18px;
	font-size: 1.05rem;
	color: var(--zgw-gold-bright);
	text-align: center;
}

.zgw-avatar-upload-row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 4px;
}

.zgw-avatar-preview {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--zgw-gold);
	flex-shrink: 0;
	box-sizing: border-box;
}

.zgw-avatar-upload-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.zgw-avatar-upload-btn {
	display: inline-block;
	padding: 7px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--zgw-card-border);
	color: var(--zgw-ink);
	font-size: 0.78rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.zgw-avatar-upload-btn:hover {
	border-color: var(--zgw-gold);
	color: var(--zgw-gold-bright);
}

.zgw-avatar-reset-btn {
	padding: 2px 0 !important;
	border: none !important;
	background: transparent !important;
	color: var(--zgw-muted);
	font-size: 0.74rem;
	cursor: pointer;
	text-decoration: underline;
	font: inherit;
}

.zgw-avatar-reset-btn:hover {
	color: var(--zgw-gold-bright);
}

/* ---- Logged-out profile icon (part 11) -- opens a Log In / Sign Up
   dropdown instead of the logged-in account menu, so there's always an
   obvious way into an account from the nav itself, not just from a
   tool's own "please log in" prompt. ---- */
.zgw-profile-toggle-guest {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid var(--zgw-card-border) !important;
	background: rgba(255, 255, 255, 0.05) !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	cursor: pointer;
}

.zgw-profile-toggle-guest:hover {
	border-color: var(--zgw-gold) !important;
}

@media (prefers-reduced-motion: reduce) {
	.zgw-modal-card {
		animation: none;
	}
}

/* ---- [zodastro_gems_log] (part 22) -- a visitor's own gems usage
   history, same "Celestial Premium" dark/gold card look as the rest of
   this file. The admin-side Usage Log page (wp-admin -> Zodastro Wallet
   -> Usage Log) intentionally uses plain WP-admin table styling instead
   (includes/views/usage-log-page.php) so it fits in with the rest of
   wp-admin -- this stylesheet isn't loaded there. ---- */
.zgw-usage-log {
	background: var(--zgw-card-bg);
	border: 1px solid var(--zgw-card-border);
	border-radius: 14px;
	padding: 22px;
	margin: 20px 0;
	color: var(--zgw-ink);
}

.zgw-usage-log-title {
	margin: 0 0 14px;
	color: var(--zgw-gold-bright);
	font-size: 1.15rem;
}

.zgw-usage-log-empty {
	color: var(--zgw-muted);
	margin: 0;
}

.zgw-usage-log-table-wrap {
	overflow-x: auto;
}

.zgw-usage-log-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}

.zgw-usage-log-table th {
	text-align: left;
	color: var(--zgw-gold-bright);
	font-weight: 600;
	padding: 8px 12px;
	border-bottom: 1px solid var(--zgw-card-border);
	white-space: nowrap;
}

.zgw-usage-log-table td {
	padding: 10px 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	color: var(--zgw-ink);
	vertical-align: top;
}

.zgw-usage-log-table tbody tr:last-child td {
	border-bottom: none;
}

.zgw-usage-log-negative {
	color: #f87171;
	font-weight: 600;
}

.zgw-usage-log-positive {
	color: #4ade80;
	font-weight: 600;
}

.zgw-usage-log-refund-tag {
	display: inline-block;
	margin-left: 6px;
	font-size: 0.72rem;
	color: var(--zgw-muted);
	border: 1px solid var(--zgw-card-border);
	border-radius: 20px;
	padding: 1px 8px;
}

/* Small screens: fall back to a stacked "label: value" card per row
   instead of a horizontally-scrolling table -- data-label attributes are
   written by class-zgw-usage-log.php's user_log_shortcode(). */
@media (max-width: 640px) {
	.zgw-usage-log-table thead {
		display: none;
	}
	.zgw-usage-log-table, .zgw-usage-log-table tbody, .zgw-usage-log-table tr, .zgw-usage-log-table td {
		display: block;
		width: 100%;
	}
	.zgw-usage-log-table tr {
		border-bottom: 1px solid var(--zgw-card-border);
		padding: 8px 0;
	}
	.zgw-usage-log-table td {
		border-bottom: none;
		padding: 4px 0;
		display: flex;
		justify-content: space-between;
		gap: 12px;
	}
	.zgw-usage-log-table td::before {
		content: attr(data-label);
		color: var(--zgw-muted);
		font-weight: 600;
	}
}

/* ---- [zodastro_gem_rates] (part 26) -- a client-facing "how many gems
   does each tool cost" rate card, same "Celestial Premium" dark/gold card
   look as [zodastro_gems_log] above, so the two front-end shortcodes read
   as one visual family. ---- */
.zgw-gem-rates {
	background: var(--zgw-card-bg);
	border: 1px solid var(--zgw-card-border);
	border-radius: 14px;
	padding: 22px;
	margin: 20px 0;
	color: var(--zgw-ink);
}

.zgw-gem-rates-title {
	margin: 0 0 14px;
	color: var(--zgw-gold-bright);
	font-size: 1.15rem;
}

.zgw-gem-rates-balance {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 18px;
	color: var(--zgw-ink);
}

.zgw-gem-rates-guest-note {
	color: var(--zgw-muted);
	margin: 0 0 18px;
	font-size: 0.92rem;
}

.zgw-gem-rates-empty {
	color: var(--zgw-muted);
	margin: 0;
}

.zgw-gem-rates-table-wrap {
	overflow-x: auto;
}

.zgw-gem-rates-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}

.zgw-gem-rates-table th {
	text-align: left;
	color: var(--zgw-gold-bright);
	font-weight: 600;
	padding: 8px 12px;
	border-bottom: 1px solid var(--zgw-card-border);
	white-space: nowrap;
}

.zgw-gem-rates-table td {
	padding: 10px 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	color: var(--zgw-ink);
	vertical-align: top;
}

.zgw-gem-rates-table tbody tr:last-child td {
	border-bottom: none;
}

.zgw-gem-rates-cost {
	font-weight: 600;
	color: var(--zgw-gold-bright);
}

.zgw-gem-rates-free {
	color: #4ade80;
}

/* Small screens: same stacked "label: value" card fallback as the usage
   log table above -- data-label attributes are written by
   ZGW_Shortcodes::gem_rates(). */
@media (max-width: 640px) {
	.zgw-gem-rates-table thead {
		display: none;
	}
	.zgw-gem-rates-table, .zgw-gem-rates-table tbody, .zgw-gem-rates-table tr, .zgw-gem-rates-table td {
		display: block;
		width: 100%;
	}
	.zgw-gem-rates-table tr {
		border-bottom: 1px solid var(--zgw-card-border);
		padding: 8px 0;
	}
	.zgw-gem-rates-table td {
		border-bottom: none;
		padding: 4px 0;
		display: flex;
		justify-content: space-between;
		gap: 12px;
	}
	.zgw-gem-rates-table td::before {
		content: attr(data-label);
		color: var(--zgw-muted);
		font-weight: 600;
	}
}


/* ---- [zodastro_install_app] (part 27) -- reuses .zgw-auth-btn/
   .zgw-auth-btn-primary's existing gold-pill look (defined above) for the
   button itself; this block is just the wrapper spacing and the iOS
   manual-instructions hint that appears under the button on iPhone/iPad,
   where there is no programmatic install prompt to trigger. ---- */
.zgw-pwa-install {
	margin: 16px 0;
}

.zgw-pwa-ios-hint {
	margin-top: 10px;
	padding: 10px 14px;
	background: var(--zgw-card-bg);
	border: 1px solid var(--zgw-card-border);
	border-radius: 10px;
	color: var(--zgw-ink);
	font-size: 0.88rem;
	max-width: 380px;
}


/* ---- First-visit "choose your language" popup (0.19.0) -- reuses the
   same .zgw-modal-overlay/.zgw-modal-card chrome as the login/register
   modal above (class-zgw-bridge.php enqueues this stylesheet alongside
   the script that builds this popup -- see zodastro-bridge.js's
   ensureLangPopup()), so it looks like it belongs to the same site
   instead of a bolted-on browser confirm() dialog. ---- */
.zgw-lang-popup-card {
	max-width: 360px;
	text-align: center;
	padding-top: 34px;
}

.zgw-lang-popup-icon {
	font-size: 34px;
	line-height: 1;
	margin-bottom: 10px;
}

.zgw-lang-popup-heading {
	margin: 0 0 8px;
	font-size: 1.15rem;
	color: var(--zgw-ink);
}

.zgw-lang-popup-body {
	margin: 0 0 22px;
	font-size: 0.86rem;
	line-height: 1.5;
	color: var(--zgw-muted);
}

.zgw-lang-popup-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.zgw-lang-popup-btn {
	padding: 13px 16px !important;
	border: 1px solid var(--zgw-card-border) !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, 0.04) !important;
	color: var(--zgw-ink) !important;
	font-weight: 700;
	font-size: 0.95rem;
	font: inherit;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.zgw-lang-popup-btn:hover {
	transform: translateY(-1px);
	background: linear-gradient(135deg, var(--zgw-gold-bright), var(--zgw-gold)) !important;
	color: #241a04 !important;
	box-shadow: 0 10px 24px rgba(212, 168, 83, 0.35);
	border-color: transparent !important;
}