/* =============================================================================
   Pet Milestones — Siege Night Design
   ============================================================================= */

/* ── CSS variables (local, match global theme) ── */
.inv-pet-milestones-page {
	--mil-bg:          #080d1a;
	--mil-card:        #111827;
	--mil-card-alt:    #0f172a;
	--mil-border:      #1e293b;
	--mil-border-glow: rgba(245, 158, 11, 0.2);
	--mil-amber:       #f59e0b;
	--mil-amber-dim:   rgba(245, 158, 11, 0.12);
	--mil-blue:        #3b82f6;
	--mil-purple:      #a78bfa;
	--mil-green:       #4ade80;
	--mil-red:         #f87171;
	--mil-text:        #e2e8f0;
	--mil-muted:       #94a3b8;
	--mil-faint:       #64748b;
	--mil-bar-track:   #1e293b;
}

/* ── Page wrapper ────────────────────────────────────────────────────────── */
.inv-pet-milestones-page {
	max-width: 960px;
	margin: 0 auto;
	/* top = push content below fixed header + fixed pet nav (~header-h + pet-nav ~46px + gap) */
	padding: calc(var(--inv-header-h, 64px) + 20px) 1rem 5rem;
	color: var(--mil-text);
	font-family: Inter, sans-serif;
	position: relative;
}

/* ── Login prompt ────────────────────────────────────────────────────────── */
.inv-pet-mil-login-prompt {
	background: var(--mil-card);
	border: 1px solid var(--mil-border);
	border-radius: .75rem;
	padding: 3rem 2rem;
	text-align: center;
	max-width: 480px;
	margin: 4rem auto;
}
.inv-pet-mil-login-prompt__icon {
	font-size: 3rem;
	margin-bottom: 1rem;
	line-height: 1;
}
.inv-pet-mil-login-prompt__title {
	font-family: Rajdhani, sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--mil-amber);
	margin-bottom: .5rem;
}
.inv-pet-mil-login-prompt__desc {
	font-size: .9rem;
	color: var(--mil-muted);
	margin-bottom: 1.5rem;
	line-height: 1.6;
}
.inv-pet-mil-login-prompt__btn {
	display: inline-block;
	background: var(--mil-amber);
	color: var(--mil-bg);
	font-family: Rajdhani, sans-serif;
	font-weight: 700;
	font-size: 1rem;
	padding: .6rem 2rem;
	border-radius: .375rem;
	text-decoration: none;
	transition: opacity .15s;
}
.inv-pet-mil-login-prompt__btn:hover { opacity: .85; }

/* ── Page header ─────────────────────────────────────────────────────────── */
.inv-pet-mil-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
}
.inv-pet-mil-header__title {
	font-family: Rajdhani, sans-serif;
	font-weight: 700;
	font-size: 1.875rem;
	color: var(--mil-amber);
	letter-spacing: .02em;
	margin: 0 0 .2rem;
}
.inv-pet-mil-header__subtitle {
	font-size: .875rem;
	color: var(--mil-muted);
	margin: 0;
}

/* Soul Coin badge */
.inv-pet-mil-sc-badge {
	display: flex;
	align-items: center;
	gap: .45rem;
	background: var(--mil-amber-dim);
	border: 1px solid rgba(245, 158, 11, 0.3);
	border-radius: 2rem;
	padding: .4rem 1rem;
	font-size: .85rem;
	font-weight: 700;
	color: var(--mil-amber);
	flex-shrink: 0;
	white-space: nowrap;
}
.inv-pet-mil-sc-badge__icon {
	font-size: 1rem;
	opacity: .8;
}
.inv-pet-mil-sc-badge__label {
	font-weight: 400;
	color: var(--mil-muted);
	font-size: .78rem;
}

/* ── AXP card ────────────────────────────────────────────────────────────── */
.inv-pet-mil-axp-card {
	background: linear-gradient(135deg, #0d1528 0%, var(--mil-card) 100%);
	border: 1px solid var(--mil-border);
	border-top: 2px solid var(--mil-amber);
	border-radius: .75rem;
	padding: 1.5rem;
	margin-bottom: 2rem;
	position: relative;
	overflow: hidden;
}
.inv-pet-mil-axp-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at top left, rgba(245,158,11,.06), transparent 60%);
	pointer-events: none;
}

.inv-pet-mil-axp-inner { position: relative; }

.inv-pet-mil-axp-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .75rem;
	margin-bottom: 1rem;
}
.inv-pet-mil-axp-identity {
	display: flex;
	align-items: center;
	gap: .75rem;
}
.inv-pet-mil-axp-pet-icon {
	font-size: 2.25rem;
	line-height: 1;
}
.inv-pet-mil-axp-pet-img {
	width: 56px;
	height: 56px;
	object-fit: contain;
	filter: drop-shadow(0 2px 6px rgba(245,158,11,.35));
}
.inv-pet-mil-axp-pet-name {
	font-family: Rajdhani, sans-serif;
	font-size: 1.2rem;
	font-weight: 700;
	color: #f1f5f9;
}
.inv-pet-mil-axp-stage {
	font-size: .78rem;
	color: var(--mil-purple);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.inv-pet-mil-axp-numbers {
	font-size: .9rem;
	font-weight: 700;
	color: var(--mil-amber);
	font-variant-numeric: tabular-nums;
}

/* AXP bar track */
.inv-pet-mil-axp-bar-wrap {
	background: var(--mil-bar-track);
	border-radius: 999px;
	height: 12px;
	overflow: hidden;
	margin-bottom: .6rem;
}
.inv-pet-mil-axp-bar {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #d97706, var(--mil-amber), #fcd34d);
	transition: width .6s ease;
	position: relative;
}
.inv-pet-mil-axp-bar::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
	border-radius: 999px;
	animation: mil-bar-shimmer 2s linear infinite;
}
@keyframes mil-bar-shimmer {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(200%); }
}

.inv-pet-mil-axp-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	font-size: .78rem;
}
.inv-pet-mil-axp-label {
	color: var(--mil-faint);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 600;
}
.inv-pet-mil-axp-pct {
	color: var(--mil-muted);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* "Ready to Evolve!" badge */
.inv-pet-mil-ready-badge {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	background: linear-gradient(135deg, #92400e, #b45309);
	border: 1px solid var(--mil-amber);
	border-radius: 2rem;
	color: var(--mil-amber);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .04em;
	padding: .25rem .75rem;
	animation: mil-ready-pulse 1.8s ease-in-out infinite;
}
@keyframes mil-ready-pulse {
	0%, 100% { box-shadow: 0 0 6px rgba(245,158,11,.3); }
	50%       { box-shadow: 0 0 14px rgba(245,158,11,.7); }
}

/* ── Section title row ───────────────────────────────────────────────────── */
.inv-pet-mil-section-title {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}
.inv-pet-mil-section-title h2 {
	font-family: Rajdhani, sans-serif;
	font-size: 1.2rem;
	font-weight: 700;
	color: #f1f5f9;
	margin: 0;
	flex: 1;
}
.inv-pet-mil-section-title__icon {
	font-size: 1.1rem;
}

/* ── Reset note ──────────────────────────────────────────────────────────── */
.inv-pet-mil-reset-note {
	font-size: .75rem;
	color: var(--mil-faint);
}
.inv-pet-mil-reset-note strong {
	color: var(--mil-muted);
}

/* ── Weekly section ──────────────────────────────────────────────────────── */
.inv-pet-mil-weekly {
	margin-bottom: 2.5rem;
}
.inv-pet-mil-weekly__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 640px) {
	.inv-pet-mil-weekly__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	.inv-pet-mil-weekly__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Quest card ──────────────────────────────────────────────────────────── */
.inv-pet-mil-quest-card {
	background: var(--mil-card);
	border: 1px solid var(--mil-border);
	border-radius: .625rem;
	padding: 1.1rem;
	display: flex;
	flex-direction: column;
	gap: .55rem;
	position: relative;
	overflow: hidden;
	transition: border-color .2s, transform .2s;
}
.inv-pet-mil-quest-card:hover {
	border-color: rgba(245, 158, 11, 0.35);
	transform: translateY(-2px);
}

/* Completed state */
.inv-pet-mil-quest-card--completed {
	opacity: .55;
	filter: grayscale(30%);
}
.inv-pet-mil-quest-card--completed:hover { transform: none; }

/* Stamp overlay */
.inv-pet-mil-quest-card__stamp {
	position: absolute;
	top: .6rem;
	right: .6rem;
	background: rgba(74, 222, 128, 0.12);
	border: 1px solid var(--mil-green);
	border-radius: .25rem;
	color: var(--mil-green);
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: .15rem .45rem;
	display: flex;
	align-items: center;
	gap: .25rem;
}
.inv-pet-mil-quest-card__stamp-check {
	font-size: .85rem;
	line-height: 1;
}

/* Card top row */
.inv-pet-mil-quest-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
}
.inv-pet-mil-quest-card__icon {
	font-size: 1.3rem;
	line-height: 1;
}

/* Rewards container */
.inv-pet-mil-quest-card__rewards {
	display: flex;
	align-items: center;
	gap: .375rem;
	flex-wrap: wrap;
	justify-content: flex-end;
}

/* AXP reward badge */
.inv-pet-mil-quest-card__axp {
	background: linear-gradient(135deg, #2d1b69, #3730a3);
	border: 1px solid var(--mil-purple);
	border-radius: 2rem;
	color: #c4b5fd;
	font-size: .72rem;
	font-weight: 700;
	padding: .15rem .55rem;
	white-space: nowrap;
}
.inv-pet-mil-quest-card__axp abbr {
	text-decoration: none;
}

/* SC reward badge */
.inv-pet-mil-quest-card__sc {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	background: linear-gradient(135deg, #1a2a1a, #14532d);
	border: 1px solid #22c55e;
	border-radius: 2rem;
	color: #86efac;
	font-size: .72rem;
	font-weight: 700;
	padding: .15rem .55rem;
	white-space: nowrap;
}
.inv-pet-mil-sc-icon {
	width: 14px;
	height: 14px;
	object-fit: contain;
}

/* Quest name */
.inv-pet-mil-quest-card__name {
	font-family: Rajdhani, sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: #f1f5f9;
	line-height: 1.3;
}

/* Description */
.inv-pet-mil-quest-card__desc {
	font-size: .8rem;
	color: var(--mil-muted);
	line-height: 1.5;
	flex: 1;
}

/* Progress row */
.inv-pet-mil-quest-card__progress-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: .72rem;
}
.inv-pet-mil-quest-card__progress-text {
	color: var(--mil-muted);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}
.inv-pet-mil-quest-card__pct {
	color: var(--mil-faint);
	font-variant-numeric: tabular-nums;
}

/* Progress bar */
.inv-pet-mil-quest-card__progress {
	background: var(--mil-bar-track);
	border-radius: 999px;
	height: 6px;
	overflow: hidden;
}
.inv-pet-mil-quest-card__bar {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #b45309, var(--mil-amber));
	transition: width .5s ease;
}
.inv-pet-mil-quest-card--completed .inv-pet-mil-quest-card__bar {
	background: var(--mil-green);
}

/* Reset note inside card */
.inv-pet-mil-quest-card .inv-pet-mil-reset-note {
	margin-top: .1rem;
	text-align: right;
}

/* ── Milestone categories ─────────────────────────────────────────────────── */
.inv-pet-mil-categories {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.inv-pet-mil-category {
	background: var(--mil-card);
	border: 1px solid var(--mil-border);
	border-radius: .625rem;
	overflow: hidden;
}

/* Category collapsible header */
.inv-pet-mil-category__header {
	width: 100%;
	background: none;
	border: none;
	border-bottom: 1px solid transparent;
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .9rem 1.1rem;
	cursor: pointer;
	text-align: left;
	color: var(--mil-text);
	transition: background .15s;
}
.inv-pet-mil-category__header:hover {
	background: rgba(255, 255, 255, 0.03);
}
.inv-pet-mil-category__header[aria-expanded="true"] {
	border-bottom-color: var(--mil-border);
}

.inv-pet-mil-category__icon {
	font-size: 1.3rem;
	flex-shrink: 0;
}
.inv-pet-mil-category__name {
	font-family: Rajdhani, sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	color: #f1f5f9;
	flex: 1;
}
.inv-pet-mil-category__count {
	background: var(--mil-card-alt);
	border: 1px solid var(--mil-border);
	border-radius: 2rem;
	font-size: .72rem;
	font-weight: 700;
	color: var(--mil-muted);
	padding: .15rem .55rem;
	font-variant-numeric: tabular-nums;
}
.inv-pet-mil-category__count--all-done {
	background: rgba(74, 222, 128, 0.1);
	border-color: var(--mil-green);
	color: var(--mil-green);
}
.inv-pet-mil-category__chevron {
	font-size: .9rem;
	color: var(--mil-faint);
	transition: transform .2s;
	flex-shrink: 0;
}

/* Category quest grid */
.inv-pet-mil-category__grid {
	padding: 1rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: .875rem;
}
@media (min-width: 540px) {
	.inv-pet-mil-category__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 800px) {
	.inv-pet-mil-category__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Loading state ───────────────────────────────────────────────────────── */
.inv-pet-mil-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	padding: 2.5rem 1rem;
	font-size: .875rem;
	color: var(--mil-faint);
}
.inv-pet-mil-loading__spinner {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2px solid var(--mil-border);
	border-top-color: var(--mil-amber);
	border-radius: 50%;
	animation: mil-spin .7s linear infinite;
	flex-shrink: 0;
}
@keyframes mil-spin {
	to { transform: rotate(360deg); }
}

/* ── Error state ─────────────────────────────────────────────────────────── */
.inv-pet-mil-error {
	color: var(--mil-red);
	font-size: .85rem;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.inv-pet-mil-empty {
	color: var(--mil-faint);
	font-size: .85rem;
	padding: .5rem 0;
	text-align: center;
	grid-column: 1 / -1;
	margin: 0;
}

/* ── Claimable quest card ────────────────────────────────────────────────── */
.inv-pet-mil-quest-card--claimable {
	border-color: var(--mil-amber);
	box-shadow: 0 0 0 1px rgba(245,158,11,.25);
}

.inv-pet-mil-claim-wrap {
	display: flex;
	gap: .5rem;
	margin-top: .75rem;
	align-items: center;
	flex-wrap: wrap;
}

.inv-pet-mil-claim-select {
	flex: 1;
	min-width: 0;
	background: #0f172a;
	border: 1px solid #334155;
	border-radius: .375rem;
	color: #e2e8f0;
	font-size: .8rem;
	padding: .35rem .5rem;
	cursor: pointer;
}

.inv-pet-mil-claim-btn {
	background: var(--mil-amber);
	color: #080d1a;
	border: none;
	border-radius: .375rem;
	font-family: Rajdhani, sans-serif;
	font-weight: 700;
	font-size: .8rem;
	padding: .35rem .75rem;
	cursor: pointer;
	white-space: nowrap;
	transition: opacity .15s;
}
.inv-pet-mil-claim-btn:hover  { opacity: .85; }
.inv-pet-mil-claim-btn:disabled { opacity: .5; cursor: not-allowed; }

.inv-pet-mil-claim-note {
	font-size: .75rem;
	color: var(--mil-faint);
}

/* ── Toast ───────────────────────────────────────────────────────────────── */
.inv-pet-mil-toast {
	position: fixed;
	bottom: 5rem;
	left: 50%;
	transform: translateX(-50%) translateY(1rem);
	background: var(--mil-amber);
	color: #080d1a;
	font-family: Rajdhani, sans-serif;
	font-weight: 700;
	font-size: .95rem;
	padding: .5rem 1.25rem;
	border-radius: 2rem;
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s, transform .2s;
	z-index: 9999;
	white-space: nowrap;
}
.inv-pet-mil-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ── Responsive tweaks ───────────────────────────────────────────────────── */
@media (max-width: 500px) {
	.inv-pet-milestones-page {
		padding-left: .75rem;
		padding-right: .75rem;
	}
	.inv-pet-mil-header__title { font-size: 1.5rem; }
	.inv-pet-mil-axp-card { padding: 1.1rem; }
	.inv-pet-mil-quest-card { padding: .9rem; }
}

/* ── Dungeon Mastery category ────────────────────────────────────────────── */
.inv-pet-mil-quest-card__bar--mastery { background: linear-gradient(90deg, #f59e0b, #d97706); }
.inv-pet-mil-quest-card__title-badge {
	display: inline-block;
	background: rgba(245,158,11,0.15);
	color: #f59e0b;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 1px 6px;
	border-radius: 10px;
	border: 1px solid rgba(245,158,11,0.4);
	margin-left: 4px;
	vertical-align: middle;
}