/* ---------------------------------------------------------------------
   Hard reset scoped to the widget: some themes and page builders style
   bare elements (div, h3, button...) globally with float/position/columns
   that leak into any shortcode output and scramble the layout. `revert`
   strips the theme's authored rules back to the browser default for every
   element in here; everything below this block then re-applies our own
   design cleanly on top, independent of whatever the theme did.
   ------------------------------------------------------------------- */
.aa-widget,
.aa-widget * {
	all: revert;
}
.aa-widget *,
.aa-widget *::before,
.aa-widget *::after {
	box-sizing: border-box;
}
.aa-widget button,
.aa-widget input,
.aa-widget select,
.aa-widget textarea {
	/* `revert` gives form controls the browser's native chrome font; pull them
	   back in line with the widget's own type so buttons/inputs don't look foreign. */
	font-family: inherit;
}

/* The plain `hidden` HTML attribute relies on the browser's default
   `[hidden]{display:none}` rule, which any `!important` rule anywhere on
   the site (theme, page builder, another plugin) can silently defeat -
   which is exactly what was happening. This class is our own, scoped and
   `!important`, so show/hide always works regardless of what else runs on
   the page. JS toggles this class instead of the `hidden` property. */
.aa-widget .aa-hide {
	display: none !important;
}

.aa-widget {
	/* position + z-index together create a local stacking context, so every
	   z-index inside (confetti canvas, cards, toasts) is contained here and
	   can never fight with a theme's header/nav/modal z-index elsewhere on the page. */
	position: relative;
	z-index: 0;
	isolation: isolate;
	display: block !important;
	width: 100% !important;
	font-family: -apple-system, "Segoe UI", Roboto, Verdana, sans-serif;
	max-width: 1000px;
	margin: 0 auto;
	padding: 24px;
	border-radius: 24px;
	background: linear-gradient(160deg, #eef4ff 0%, #f7f9ff 100%);
	box-shadow: 0 10px 30px rgba(20, 30, 60, 0.08);
	overflow: hidden;
	box-sizing: border-box;
}

.aa-confetti-canvas-wrap {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 5;
}
.aa-confetti { width: 100%; height: 100%; }

.aa-banner {
	text-align: center;
	font-size: 1.4em;
	font-weight: 800;
	padding: 10px 16px;
	border-radius: 16px;
	margin-bottom: 14px;
	background: rgba(255,255,255,0.6);
	letter-spacing: 0.5px;
}
.aa-banner-emoji { display: inline-block; margin-right: 8px; animation: aa-bounce 1.6s ease-in-out infinite; }

.aa-countdown {
	text-align: center;
	margin-bottom: 20px;
	font-size: 1.05em;
	color: #445;
}
.aa-countdown-clock {
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	font-size: 1.3em;
	margin-left: 8px;
	color: #1f2a44;
	background: rgba(255,255,255,0.7);
	padding: 2px 10px;
	border-radius: 10px;
}

.aa-kids-grid {
	/* Flexbox, not CSS Grid: some themes wrap the page in nested flex
	   containers with an off-canvas-menu state (Mesmerize's `.has-offscreen`)
	   that can leave an ancestor's resolved width in a bad state, which
	   breaks `grid-template-columns: repeat(auto-fit, ...)` specifically -
	   its column math depends on the grid container's own width resolving
	   cleanly first. Flex-wrap degrades far more gracefully in that case. */
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 20px;
	width: 100% !important;
	min-width: 0;
}

.aa-kid-card {
	--aa-kid-color: #5b8def;
	flex: 1 1 320px !important;
	min-width: 280px;
	max-width: 100%;
	position: relative;
	background: #fff;
	border-radius: 20px;
	padding: 20px;
	box-shadow: 0 6px 18px rgba(20,30,60,0.10);
	border-top: 8px solid var(--aa-kid-color);
	animation: aa-card-in 0.5s ease both;
}

.aa-birthday-blast {
	background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcB77, #4d96ff, #c77dff);
	background-size: 400% 400%;
	animation: aa-rainbow 3s ease infinite, aa-pulse 1s ease-in-out infinite;
	color: #fff;
	font-weight: 800;
	text-align: center;
	padding: 12px;
	border-radius: 14px;
	margin-bottom: 14px;
	text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.aa-birthday-soon {
	background: #fff2cc;
	border: 2px dashed #e8b923;
	color: #7a5b00;
	font-weight: 700;
	text-align: center;
	padding: 8px 12px;
	border-radius: 12px;
	margin-bottom: 14px;
}

.aa-kid-header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.aa-kid-avatar {
	font-size: 2.6em;
	width: 68px; height: 68px;
	display: flex; align-items: center; justify-content: center;
	background: color-mix(in srgb, var(--aa-kid-color) 18%, white);
	border-radius: 50%;
	flex-shrink: 0;
}
.aa-kid-header h3 { margin: 0 0 2px; font-size: 1.4em; }
.aa-kid-age { color: #8892a6; font-weight: 500; font-size: 0.7em; }
.aa-kid-wallet { color: #445; font-size: 0.95em; }

.aa-status { padding: 10px 12px; border-radius: 12px; font-weight: 700; text-align: center; margin-bottom: 12px; }
.aa-status-clear { background: #e6faf0; color: #0a8a4b; }
.aa-status-oops { background: #fff0ea; color: #b5460a; }
.aa-status-pending { background: #f2f4f8; color: #667; font-weight: 600; }

.aa-progress-wrap {
	position: relative;
	background: #eef0f6;
	border-radius: 999px;
	height: 26px;
	margin-bottom: 6px;
	overflow: hidden;
}
.aa-progress-bar {
	height: 100%;
	background: linear-gradient(90deg, var(--aa-kid-color), color-mix(in srgb, var(--aa-kid-color) 60%, #ffd93d));
	border-radius: 999px;
	transition: width 0.8s cubic-bezier(.34,1.56,.64,1);
}
.aa-progress-label {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 0.82em; font-weight: 800; color: #1f2a44;
}

.aa-streak { display: flex; align-items: center; gap: 4px; margin: 14px 0; flex-wrap: wrap; }
.aa-flame { font-size: 1.3em; filter: grayscale(1) opacity(0.35); transition: transform 0.3s, filter 0.3s; }
.aa-flame.is-lit { filter: none; animation: aa-flicker 1.4s ease-in-out infinite; }
.aa-streak-text { font-size: 0.85em; color: #556; margin-left: 6px; }

.aa-items h4 { margin: 10px 0 6px; font-size: 0.95em; color: #556; }
.aa-item-list { list-style: none; margin: 0; padding: 0; }
.aa-item {
	display: flex; align-items: center; gap: 8px;
	padding: 8px 10px; border-radius: 12px; margin-bottom: 6px;
	background: #f7f8fb;
}
.aa-item-thrown_away { opacity: 0.55; }
.aa-item-emoji { font-size: 1.2em; }
.aa-item-name { flex: 1; font-weight: 600; color: #33394a; }
.aa-item-value { color: #c53030; font-weight: 700; font-size: 0.9em; }
.aa-item-badge { font-size: 0.85em; font-weight: 700; color: #556; }

.aa-buyback-btn {
	background: var(--aa-kid-color);
	color: #fff; border: none; border-radius: 999px;
	padding: 7px 14px; font-weight: 700; font-size: 0.85em; cursor: pointer;
	transition: transform 0.15s;
}
.aa-buyback-btn:hover { transform: scale(1.05); }
.aa-buyback-btn:active { transform: scale(0.96); }
.aa-buyback-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.aa-buyback-btn.aa-shake { animation: aa-shake 0.4s; }

.aa-toast {
	position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
	background: #1f2a44; color: #fff; padding: 12px 20px; border-radius: 999px;
	font-weight: 700; z-index: 9999; box-shadow: 0 8px 24px rgba(0,0,0,0.25);
	animation: aa-toast-in 0.3s ease;
}

@keyframes aa-card-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes aa-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes aa-flicker { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.15) rotate(-4deg); } }
@keyframes aa-rainbow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes aa-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
@keyframes aa-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes aa-toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------------- Front-end parent entry form ---------------- */

.aa-pe-lock {
	max-width: 360px;
	margin: 20px auto;
	text-align: center;
	background: rgba(255,255,255,0.7);
	border-radius: 16px;
	padding: 24px;
}
.aa-pin-input {
	font-size: 1.4em;
	letter-spacing: 6px;
	text-align: center;
	padding: 10px 14px;
	border-radius: 10px;
	border: 2px solid #d8ddea;
	width: 10em;
	max-width: 100%;
}
.aa-pin-submit {
	display: block;
	margin: 12px auto 0;
	background: var(--aa-kid-color, #5b8def);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 10px 24px;
	font-weight: 700;
	cursor: pointer;
}
.aa-pin-error { color: #c53030; font-weight: 700; margin-top: 10px; min-height: 1.2em; }

.aa-pe-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}
.aa-pe-toolbar input[type="date"] {
	padding: 6px 8px;
	border-radius: 8px;
	border: 1px solid #d8ddea;
}
.aa-pe-lock-btn {
	background: #eef0f6;
	border: none;
	border-radius: 999px;
	padding: 8px 16px;
	font-weight: 700;
	cursor: pointer;
}

.aa-pe-card {
	background: #fff;
	border-radius: 18px;
	border-top: 8px solid var(--aa-kid-color, #5b8def);
	padding: 18px;
	margin-bottom: 18px;
	box-shadow: 0 6px 18px rgba(20,30,60,0.08);
}
.aa-pe-card h3 { margin: 0 0 10px; }
.aa-pe-card h3 small { color: #8892a6; font-weight: 500; font-size: 0.6em; margin-left: 6px; }

.aa-pe-items-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.aa-pe-items-table th { text-align: left; font-size: 0.8em; color: #8892a6; padding: 4px 6px; }
.aa-pe-items-table td { padding: 4px 6px; }
.aa-pe-items-table input[type="text"],
.aa-pe-items-table input[type="number"],
.aa-pe-items-table select {
	width: 100%;
	padding: 6px 8px;
	border-radius: 8px;
	border: 1px solid #d8ddea;
}
.aa-pe-items-table input[type="number"] { width: 5.5em; }
.aa-pe-remove-item {
	background: none;
	border: none;
	color: #c53030;
	font-weight: 800;
	cursor: pointer;
	font-size: 1.1em;
}

.aa-pe-add-item {
	background: #eef0f6;
	border: none;
	border-radius: 999px;
	padding: 6px 14px;
	font-weight: 700;
	cursor: pointer;
	margin-bottom: 10px;
}

.aa-pe-card label { display: block; font-weight: 600; color: #556; margin-bottom: 4px; }
.aa-pe-card input[type="text"]:not(.aa-pe-item-name) {
	width: 100%;
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid #d8ddea;
}

.aa-pe-save {
	margin-top: 10px;
	width: 100%;
	text-align: center;
	display: block;
}

.aa-pe-result {
	border-radius: 10px;
	padding: 8px 12px;
	font-weight: 700;
	margin-bottom: 10px;
}
.aa-pe-result-ok { background: #e6faf0; color: #0a8a4b; }
.aa-pe-result-error { background: #fff0ea; color: #b5460a; }

/* Seasonal themes */
.aa-theme-halloween { background: linear-gradient(160deg, #2b1a3d 0%, #4a2c6d 100%); }
.aa-theme-halloween .aa-banner { background: rgba(255,255,255,0.12); color: #ffb347; }
.aa-theme-halloween .aa-countdown { color: #e9d8ff; }

.aa-theme-bonfire { background: linear-gradient(160deg, #1a1a2b 0%, #3d2b1a 100%); }
.aa-theme-bonfire .aa-banner { background: rgba(255,255,255,0.12); color: #ff9d47; }
.aa-theme-bonfire .aa-countdown { color: #ffd8b3; }

.aa-theme-christmas { background: linear-gradient(160deg, #eafff2 0%, #e6f7ff 100%); }
.aa-theme-christmas .aa-banner { background: rgba(255,255,255,0.7); color: #c0392b; }

.aa-theme-newyear { background: linear-gradient(160deg, #1f1147 0%, #3a1f6b 100%); }
.aa-theme-newyear .aa-banner { background: rgba(255,255,255,0.12); color: #ffd700; }
.aa-theme-newyear .aa-countdown { color: #e9d8ff; }

.aa-theme-valentine { background: linear-gradient(160deg, #fff0f5 0%, #ffe3ec 100%); }
.aa-theme-valentine .aa-banner { color: #d6336c; background: rgba(255,255,255,0.7); }

.aa-theme-easter { background: linear-gradient(160deg, #f4fff0 0%, #eaf7ff 100%); }
.aa-theme-easter .aa-banner { color: #2f9e44; background: rgba(255,255,255,0.7); }

.aa-theme-summer { background: linear-gradient(160deg, #fff9e6 0%, #e6f9ff 100%); }
.aa-theme-summer .aa-banner { color: #e8590c; background: rgba(255,255,255,0.7); }

@media (max-width: 480px) {
	.aa-widget { padding: 14px; border-radius: 16px; }
	.aa-banner { font-size: 1.1em; }
}