/**
 * Whisper — My Account "My Whisper Bundles" front-end styles.
 *
 * Intentionally lightweight and namespaced (.whisper-*) so a theme/child theme or
 * Elementor can restyle or fully override (copy the templates to
 * yourtheme/woocommerce/whisper/my-account/). Custom properties expose the key
 * colours for easy theming.
 */
.whisper-bundles,
.whisper-bundle-detail {
	--whisper-radius: 10px;
	--whisper-border: #e2e4e7;
	--whisper-muted: #6b7280;
	--whisper-accent: #1e72b7;
}

.whisper-bundles__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.whisper-bundle-card {
	border: 1px solid var(--whisper-border);
	border-radius: var(--whisper-radius);
	padding: 1.25rem;
	background: #fff;
}

.whisper-bundle-card__header,
.whisper-bundle-detail__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.whisper-bundle-card__region,
.whisper-bundle-detail__region {
	font-weight: 600;
	font-size: 1.05rem;
	margin: 0;
}

.whisper-bundle-card__plans {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.whisper-plan {
	display: grid;
	gap: 0.25rem;
}

.whisper-plan__name {
	font-weight: 500;
}

.whisper-plan__usage {
	color: var(--whisper-muted);
	font-size: 0.9rem;
}

.whisper-usage-bar {
	display: block;
	height: 8px;
	border-radius: 999px;
	background: #eef0f2;
	overflow: hidden;
}

.whisper-usage-bar__fill {
	display: block;
	height: 100%;
	background: var(--whisper-accent);
}

.whisper-bundle-card__actions,
.whisper-bundle-detail__activate,
.whisper-plan__activate {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.whisper-plan__activate {
	margin-top: 0.35rem;
}

/* Push "Buy more data" to the far end of the card's action row, away from the
   primary actions, so it reads as a separate offer rather than a next step. */
.whisper-bundle-card__topup {
	margin-inline-start: auto;
}

.whisper-badge {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.6;
	background: #eef0f2;
	color: #374151;
	white-space: nowrap;
}

.whisper-badge--active {
	background: #def7ec;
	color: #03543f;
}

.whisper-badge--scheduled,
.whisper-badge--reserved {
	background: #e1effe;
	color: #1e429f;
}

.whisper-badge--pending,
.whisper-badge--processing {
	background: #fdf6b2;
	color: #723b13;
}

.whisper-badge--expired,
.whisper-badge--canceled,
.whisper-badge--rejected,
.whisper-badge--failed {
	background: #fde8e8;
	color: #9b1c1c;
}

.whisper-bundles__empty {
	border: 1px dashed var(--whisper-border);
	border-radius: var(--whisper-radius);
	padding: 2rem;
	text-align: center;
	color: var(--whisper-muted);
}

.whisper-bundle-detail__back {
	margin-bottom: 1rem;
}

.whisper-qr {
	margin: 0 0 1rem;
	max-width: 240px;
}

.whisper-qr svg {
	width: 100%;
	height: auto;
	display: block;
}

.whisper-qr figcaption {
	margin-top: 0.5rem;
	font-size: 0.85rem;
	color: var(--whisper-muted);
	text-align: center;
}

.whisper-qr--pending {
	color: var(--whisper-muted);
	font-style: italic;
}

.whisper-activate-hint {
	font-size: 0.85rem;
	color: var(--whisper-muted);
	margin: 0.35rem 0 0;
	flex-basis: 100%;
}

/* One-tap eSIM install buttons — a sibling of .whisper-qr, not a child, so the
   buttons are not constrained by the QR figure's 240px max-width. */
.whisper-esim-install {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	/* Top margin separates the block from the QR figure above it; the figure's own
	   bottom margin is shared with the "pending" variant, so the space is added here. */
	margin: 1rem 0;
}

/* Platform detection (progressive enhancement) hides what is clearly wrong for the
   current device. When nothing is left to show, drop the block out of the flow so it
   does not leave a gap under the QR code. */
.whisper-esim-install[hidden] {
	display: none;
}

.whisper-esim-install__hint {
	font-size: 0.85rem;
	color: var(--whisper-muted);
	margin: 0 0 0.35rem;
	flex-basis: 100%;
}

.whisper-bundle-detail__plans {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.whisper-plan--detail {
	border: 1px solid var(--whisper-border);
	border-radius: var(--whisper-radius);
	padding: 0.85rem 1rem;
}

.whisper-plan__row,
.whisper-plan__usage-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.whisper-plan__meta {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.15rem 1rem;
	margin: 0.6rem 0 0;
	font-size: 0.88rem;
}

.whisper-plan__meta dt {
	color: var(--whisper-muted);
}

.whisper-plan__meta dd {
	margin: 0;
}

.whisper-activate-btn--done {
	opacity: 0.7;
	cursor: default;
}

/* "Refresh usage" is a view-level action, right-aligned in its own row
   above the cards (list) / plans (detail), never inside a plan row. */
.whisper-refresh-row {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 0.75rem;
}

/* Inline notice under the refresh row — info (default) for results and the
   rate-limit message, --error for failures. Palette mirrors the status badges
   so both read as one system. */
.whisper-refresh-notice {
	display: block;
	margin: 0 0 0.75rem;
	padding: 0.6rem 0.9rem;
	border: 1px solid #b3d7f2;
	border-radius: var(--whisper-radius);
	background: #e1effe;
	color: #1e429f;
	font-size: 0.9rem;
}

.whisper-refresh-notice--error {
	border-color: #f0b9b8;
	background: #fde8e8;
	color: #9b1c1c;
}

.whisper-refresh-notice[hidden] {
	display: none;
}

/* "Preparing your eSIM" — shown while a bundle is moved to a replacement eSIM
   (ADR-0016), and its calm "we are looking into this" variant. Deliberately quiet:
   no error colours, just progress. */
.whisper-preparing {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	margin: 0.75rem 0 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--whisper-border);
	border-radius: var(--whisper-radius);
	background: #f8fafc;
	flex-basis: 100%;
}

.whisper-preparing__body p {
	margin: 0;
}

.whisper-preparing__title {
	font-weight: 600;
}

.whisper-preparing__step {
	margin-top: 0.25rem !important;
	font-size: 0.9rem;
	color: var(--whisper-muted);
}

.whisper-preparing__spinner {
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
	margin-top: 0.15rem;
	border: 2px solid var(--whisper-border);
	border-top-color: var(--whisper-accent);
	border-radius: 50%;
	animation: whisper-spin 0.9s linear infinite;
}

@keyframes whisper-spin {

	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {

	.whisper-preparing__spinner {
		animation: none;
		border-top-color: var(--whisper-border);
	}
}

/* Narrow viewports: the top-up button stops sharing a row with the primary
   actions (where auto-margin would leave it cramped) and takes a full row. */
@media (max-width: 480px) {

	.whisper-bundle-card__topup {
		margin-inline-start: 0;
		flex-basis: 100%;
		text-align: center;
	}
}