/* =============================================================================
   aroma-wheel.css
   Styles for the Aroma Wheel game page template.
   Loaded only on page-templates/page-aroma-wheel.php via functions-aroma-wheel.php.
   ============================================================================= */


/* ── Page Layout ───────────────────────────────────────────────────────────── */

.main {
	background-color: var(--beige-background);
}

.aroma-wheel-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 80vh;
	padding: 1rem;
	background-color: var(--beige-background);
}

.aroma-wheel-page-inner {
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
}


/* ── Wrapper ───────────────────────────────────────────────────────────────── */

.aroma-wheel-wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	gap: 2rem;
}

/* Mobile-only desktop recommendation note */
.aw-mobile-note {
	display: none;
	position: relative;
	width: 100%;
	padding: 0.9rem 1rem;
	padding-right: 3.4rem;
	border-left: 4px solid #7a1a2e;
	background-color: #ffffff;
	color: #3b3124;
	border-radius: 6px;
	font-family: 'Open Sans', sans-serif;
	font-size: 0.95rem;
	line-height: 1.45;
}

.aw-mobile-note strong {
	display: block;
	margin-bottom: 0.15rem;
	font-size: 1rem;
	font-weight: 700;
}

.aw-mobile-note span {
	display: block;
}

.aw-mobile-note-dismiss {
	position: absolute;
	top: 0.55rem;
	right: 0.55rem;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 1px solid rgba(122, 26, 46, 0.35);
	border-radius: 999px;
	background: transparent;
	font-size: 1.35rem;
	line-height: 1;
	color: #7a1a2e;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.aw-mobile-note-dismiss:hover {
	color: #9b2240;
	border-color: #9b2240;
	background-color: rgba(122, 26, 46, 0.07);
}

.aw-mobile-note-dismiss:focus-visible {
	outline: 2px solid #7a1a2e;
	outline-offset: 2px;
}

.aw-mobile-note.is-dismissed {
	display: none !important;
}


/* ── SVG Stage ─────────────────────────────────────────────────────────────── */

.aroma-wheel-stage {
	position: relative;
	flex: 1 1 900px;
	max-width: 1120px;
}

.aroma-wheel-svg {
	width: 100%;
	height: auto;
	display: block;
}


/* ── Spinning Group ────────────────────────────────────────────────────────── */
/* transform-origin is set via GSAP's svgOrigin prop in aroma-wheel.js —
   do NOT set transform-box or transform-origin here or they will conflict
   with GSAP and cause the wheel to wobble off-center.                       */

#wheel-spin {
	/* intentionally empty — GSAP owns this element's transform */
}


/* ── Category Slices ───────────────────────────────────────────────────────── */

.wheel-category-slice {
	cursor: default;
}


/* ── Aroma Slices ──────────────────────────────────────────────────────────── */

/* Each slice + label live inside a .wheel-aroma-pair <g> group.
   Hover on either element triggers effects for the whole pair. */
.wheel-aroma-pair {
	cursor: default;
}

.wheel-aroma-pair:hover .wheel-aroma-slice {
	filter: brightness(1.2);
}

.wheel-aroma-pair.is-revealed {
	cursor: pointer;
}

.wheel-aroma-slice {
	transition: filter 0.15s ease;
}

/* Winner slice highlighted after spin, cleared at start of next spin */
.wheel-aroma-slice.is-winner {
	stroke-width: 2.5;
	stroke-opacity: 1;
	filter: brightness(1.6) drop-shadow(0 0 5px rgba(255, 255, 255, 0.9));
}

/* Revealed slices are clickable — name has been correctly identified */
.wheel-aroma-pair.is-revealed .wheel-aroma-slice {
	/* slice-specific revealed state handled here if needed */
}


/* ── Text Labels ───────────────────────────────────────────────────────────── */

.wheel-category-label {
	font-family: 'the-seasons', sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.02em;
	pointer-events: none;
	user-select: none;
}

.wheel-aroma-label {
	font-family: 'the-seasons', sans-serif;
	font-size: 10px;
	font-weight: 400;
	fill: #ffffff;
	pointer-events: none;
	user-select: none;
}

.wheel-aroma-label.is-revealed {
	pointer-events: all;
}


/* ── Center Hub ────────────────────────────────────────────────────────────── */

.wheel-hub {
	filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.12));
}


/* ── Stationary Marker ─────────────────────────────────────────────────────── */

.wheel-marker-arrow {
	fill: #1a1a1a;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}


/* ── Spin Button ───────────────────────────────────────────────────────────── */

.aroma-wheel-controls {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2rem;
}

/* Hover tooltip, driven by the data-tooltip attribute — sized like a button, docked just below the panel */
[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 2.5rem);
	padding: 0.85rem 1.25rem;
	background-color: rgba(45, 45, 45, 0.92);
	color: #ffffff;
	font-family: 'Open Sans', sans-serif;
	font-size: 0.85rem;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease;
	z-index: 20;
}

[data-tooltip]:hover::after {
	opacity: 1;
	visibility: visible;
}

.aroma-wheel-controls-left {
	order: -1; /* always left of the wheel */
	width: 17em;
	padding: 3rem 1.25rem;
	border: 1px solid rgba(121, 121, 121, 0.18);
	border-radius: 8px;
	background-color: #ffffff;
	box-shadow: 0 6px 22px rgba(59, 49, 36, 0.1);
	transition: border-color 0.15s ease;
}

.aroma-wheel-controls-left:hover {
	border-color: rgba(121, 121, 121, 0.6);
}

.aroma-wheel-controls-right {
	order: 1; /* always right of the wheel */
	align-items: stretch;
	width: 17em;
}

.wheel-spin-btn {
	width: 130px;
	height: 130px;
	padding: 8px;
	border-radius: 50%;
	background-color: #7a1a2e;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease, transform 0.15s ease;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.wheel-spin-btn:hover {
	background-color: #9b2240;
	transform: scale(1.05);
}

.wheel-spin-btn:active {
	transform: scale(0.97);
}

.spin-btn-svg {
	width: 100%;
	height: 100%;
	display: block;
}

.spin-btn-label {
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.wheel-spin-btn[aria-disabled="true"],
.wheel-spin-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

/* Start Over button — round, matches spin button */
.wheel-reset-btn {
	width: 88px;
	height: 88px;
	padding: 8px;
	border-radius: 50%;
	background-color: #7a1a2e;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease, transform 0.15s ease;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.wheel-reset-btn:hover {
	background-color: #9b2240;
	transform: scale(1.05);
}

.wheel-reset-btn:active {
	transform: scale(0.97);
}

.reset-btn-svg {
	width: 100%;
	height: 100%;
	display: block;
}

.wheel-reset-btn[aria-disabled="true"],
.wheel-reset-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

/* Mute button — round and smaller than Start Over */
.wheel-mute-btn {
	width: 72px;
	height: 72px;
	padding: 0.3rem;
	border-radius: 50%;
	background-color: var(--red-highlight);
	border: none;
	color: #ffffff;
	font-family: 'Open Sans', sans-serif;
	font-size: 0.5rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.05;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.wheel-mute-btn-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15rem;
}

.wheel-mute-icon {
	width: 22px;
	height: 22px;
	display: block;
}

.wheel-mute-icon-off {
	display: none;
}

.wheel-mute-label {
	display: block;
	font-size: 0.47rem;
	line-height: 1;
}

.wheel-mute-btn:hover {
	transform: scale(1.04);
	background-color: var(--red-highlight-hover);
}

.wheel-mute-btn:active {
	transform: scale(0.97);
}

.wheel-mute-btn[aria-pressed="true"] {
	background-color: #ffffff;
	color: #7a1a2e;
	border: 1.5px solid #7a1a2e;
}

.wheel-mute-btn[aria-pressed="true"] .wheel-mute-icon-on {
	display: none;
}

.wheel-mute-btn[aria-pressed="true"] .wheel-mute-icon-off {
	display: block;
}

/* ── Session Stats ───────────────────────────────────────────────────────── */

.wheel-stats {
	width: 100%;
	padding: 1rem 1.25rem;
	border: 1px solid rgba(121, 121, 121, 0.18);
	border-radius: 8px;
	background-color: #ffffff;
	box-shadow: 0 6px 22px rgba(59, 49, 36, 0.1);
	box-sizing: border-box;
}

.wheel-stats-list {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 1rem 0 0;
	padding: 0;
}

.wheel-stats-item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
}

.wheel-stats-item.is-hidden {
	display: none;
}

.wheel-stats-item dt {
	font-family: 'Open Sans', sans-serif;
	font-size: .8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--mid-gray);
}

.wheel-stats-item dd {
	font-family: 'the-seasons', serif;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--mid-gray);
	margin: 0;
	min-width: 2ch;
	text-align: right;
}

/* ── Teams Panel ───────────────────────────────────────────────────────── */

.wheel-teams {
	position: relative;
	width: 100%;
	padding: 1rem 1.25rem;
	border: 1px solid rgba(121, 121, 121, 0.18);
	border-radius: 8px;
	background-color: #ffffff;
	box-shadow: 0 6px 22px rgba(59, 49, 36, 0.1);
	box-sizing: border-box;
	transition: border-color 0.15s ease;
}

.wheel-teams:hover {
	border-color: rgba(121, 121, 121, 0.6);
}

.wheel-teams-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.65rem;
}

.wheel-teams-title {
	margin: 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--mid-gray);
}

.teams-add-wrap {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.teams-add-plus {
	font-family: 'Open Sans', sans-serif;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1;
	color: var(--mid-gray);
}

.teams-add-btn {
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border-radius: 999px;
	border: 1px solid var(--mid-gray);
	background-color: #ffffff;
	color: var(--mid-gray);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.teams-add-btn:hover {
	background-color: var(--mid-gray);
	border-color: var(--mid-gray);
	color: #ffffff;
}

.aw-team-add-icon {
	width: 1.5rem;
	height: 1.5rem;
	display: block;
	flex: 0 0 auto;
	overflow: visible;
}

.teams-list {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.aw-team-row {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.6rem 0.5rem;
	border: 1px solid rgba(121, 121, 121, 0.7);
	border-radius: 8px;
	background-color: #ffffff;
}

.aw-team-name {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	padding: 0.32rem 0.45rem;
	border: 1px solid #d5d5d5;
	border-radius: 6px;
	background-color: #fbf9f6;
	font-family: 'Open Sans', sans-serif;
	font-size: .8rem;
	font-weight: 600;
	color: #3b3124;
}

.aw-team-name:focus-visible {
	outline: 2px solid var(--mid-gray);
	outline-offset: 1px;
}

.aw-team-score-group {
	box-sizing: border-box;
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	border: 1px solid rgba(121, 121, 121, 0.18);
	border-radius: 6px;
	overflow: hidden;
	background-color: #ececec;
}

.aw-team-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.aw-team-timer {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.aw-team-timer-btn {
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border-radius: 999px;
	border: 1px solid var(--mid-gray);
	background-color: #ffffff;
	color: var(--mid-gray);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.aw-team-timer-btn:hover {
	background-color: var(--mid-gray);
	border-color: var(--mid-gray);
	color: #ffffff;
}

.aw-team-timer-btn.is-running {
	border-color: #2f9e44;
}

.aw-team-timer-icon {
	width: 1.65rem;
	height: 1.65rem;
	display: block;
	flex: 0 0 auto;
	overflow: visible;
}

.aw-timer-icon-knob {
	fill: var(--mid-gray);
}

.aw-team-timer-btn.is-running .aw-timer-icon-knob {
	fill: #2f9e44;
}

.aw-timer-icon-case {
	fill: none;
	stroke: currentColor;
}

.aw-timer-icon-hand {
	stroke: currentColor;
}

.aw-team-timer-btn.is-running .aw-timer-icon-case {
	fill: #2f9e44;
	stroke: #2f9e44;
}

.aw-team-timer-btn.is-running .aw-timer-icon-hand {
	stroke: #ffffff;
}

.aw-team-timer-display {
	min-width: 3ch;
	font-family: 'the-seasons', serif;
	font-size: .9rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: #3b3124;
	line-height: 1;
}

.aw-team-score-btn {
	border: none;
	white-space: nowrap;
	padding: 0.3rem 0.45rem;
	background: transparent;
	color: #3b3124;
	font-family: 'Open Sans', sans-serif;
	font-size: .8rem;
	font-weight: 400;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.aw-team-score-btn:hover {
	background-color: #7a1a2e;
	color: #ffffff;
}

.aw-team-score-btn[data-team-action="add"]:hover {
	background-color: #2f9e44;
}

.aw-team-score-btn[data-team-action="subtract"]:hover {
	background-color: #c0392b;
}

.aw-team-points {
	min-width: 3ch;
	padding: 0 0.45rem;
	text-align: center;
	font-family: 'the-seasons', serif;
	font-size: 1rem;
	font-weight: 700;
	color: #7a1a2e;
	line-height: 1;
}

.aw-team-points.is-positive {
	color: #2f9e44;
}

.aw-team-points.is-negative {
	color: #c0392b;
}

.aw-team-points.is-neutral {
	color: var(--mid-gray);
}

.aw-team-remove-btn {
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid rgba(155, 154, 148, 0.4);
	border-radius: 999px;
	background-color: #ffffff;
	color: #9b9a94;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.aw-team-remove-btn:hover {
	background-color: #9b9a94;
	border-color: #9b9a94;
	color: #ffffff;
}

.aw-team-remove-icon {
	width: 1.4rem;
	height: 1.4rem;
	display: block;
	flex: 0 0 auto;
	color: var(--mid-gray);
}

.aw-team-remove-btn:disabled:hover {
	background-color: #ffffff;
	border-color: rgba(155, 154, 148, 0.4);
	color: #9b9a94;
}

.aw-team-remove-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Spin-in-progress state added by animateSpin() */
.aroma-wheel-wrapper.is-spinning .spin-btn-svg {
	animation: aw-spin-icon 1s linear infinite;
}

@keyframes aw-spin-icon {
	to { transform: rotate( 360deg ); }
}


/* ── Quiz Panel ────────────────────────────────────────────────────────────── */

/* Full-screen fixed backdrop — sits over everything, doesn't affect layout */
.wheel-quiz-panel {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.25);
	padding: 1.5rem;
}

/* Phase 8 will animate this panel; for now use the HTML hidden attribute */
.wheel-quiz-panel[hidden] {
	display: none;
}

/* The white card centered inside the backdrop */
.quiz-panel-inner {
	width: 100%;
	max-width: 480px;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3);
	padding: 2.5rem 2.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.quiz-aroma-name {
	font-family: 'the-seasons', serif;
	font-size: 2rem;
	font-weight: 500;
	margin: 0;
	text-align: center;
	color: var(--family-color, #1a1a1a);
}

.detail-family-name {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
}

.quiz-instructions {
	font-family: 'the-seasons', sans-serif;
	font-size: 1.2rem;
	color: #777;
	text-align: center;
	margin: 0;
}

.quiz-panel-inner hr {
	border: none;
	height: 1px;
	background-color: #999;
	width: 40%;
	margin: 3px auto;
}

.quiz-choices {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

/* Individual choice buttons are injected by Phase 6 (quiz engine) */
.quiz-choice-btn {
	width: 100%;
	padding: 0.7rem 1.25rem;
	font-family: 'the-seasons', sans-serif;
	font-size: 0.9rem;
	font-weight: 500;
	text-align: left;
	color: #1a1a1a;
	background: #f4f0eb;
	border: 1.5px solid #d8d0c7;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.quiz-choice-btn:hover {
	background-color: #ede7de;
	border-color: #b8a99a;
}

/* Feedback states — applied by Phase 8 */
.quiz-choice-btn.is-correct {
	background-color: #e6f4ea;
	border-color: #4caf50;
	color: #1b5e20;
}

.quiz-choice-btn.is-incorrect {
	background-color: #fdecea;
	border-color: #ef5350;
	color: #7f0000;
}


/* ── Detail Panel ─────────────────────────────────────────────────────────── */

.wheel-detail-panel {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.25);
	padding: 1.5rem;
}

.wheel-detail-panel[hidden] {
	display: none;
}

.detail-panel-inner {
	position: relative;
	width: 100%;
	max-width: 480px;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3);
	padding: 2.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.detail-panel-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: none;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	color: #999;
	cursor: pointer;
	padding: 0.25rem 0.5rem;
	transition: color 0.15s ease;
}

.detail-panel-close:hover {
	color: #1a1a1a;
}

.detail-family-name {
	font-family: 'the-seasons', serif;
	font-size: 2rem;
	font-weight: 500;
	margin: 0 0 .5em;
	text-align: center;
	color: var(--family-color, #1a1a1a);
}

.detail-aroma-name {
	font-family: 'the-seasons', sans-serif;
	font-size: 1.8rem;
	font-weight: 600;
	color: var(--aroma-color, #999999);
	text-align: center;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.detail-panel-inner hr {
	border: none;
	height: 1px;
	background-color: #999;
	width: 40%;
	margin: 3px auto;
}

.detail-aroma-description {
	font-family: 'the-seasons', sans-serif;
	font-size: 0.95rem;
	color: #444;
	line-height: 1.65;
	margin: 1em 0;
	text-align: center;
}

.detail-aroma-description p,
.detail-aroma-description ul,
.detail-aroma-description ol {
	margin: 0 0 0.75rem;
}

.detail-aroma-description p:last-child,
.detail-aroma-description ul:last-child,
.detail-aroma-description ol:last-child {
	margin-bottom: 0;
}


/* ── Empty State ───────────────────────────────────────────────────────────── */

.aroma-wheel-empty {
	font-family: 'the-seasons', sans-serif;
	font-size: 0.95rem;
	color: #999;
	text-align: center;
	padding: 4rem 2rem;
}


/* ── Responsive ────────────────────────────────────────────────────────────── */

@media ( max-width: 860px ) {
	.aw-mobile-note {
		display: block;
	}

	.aroma-wheel-wrapper {
		flex-direction: column;
	}

	.aw-mobile-note {
		order: 0;
	}

	.aroma-wheel-stage {
		order: 1;
	}

	.aroma-wheel-controls-left,
	.aroma-wheel-controls-right {
		order: 2;
		width: 100%;
	}

	.aroma-wheel-stage {
		flex-basis: auto;
		width: 100%;
		max-width: 100%;
	}
}

@media ( max-width: 520px ) {
	.wheel-category-label {
		font-size: 10px;
	}

	.wheel-aroma-label {
		font-size: 8px;
	}

	.quiz-aroma-name {
		font-size: 1.5rem;
	}

	.wheel-quiz-panel {
		padding: 1rem;
	}

	.quiz-panel-inner {
		padding: 1.5rem;
	}

	.detail-family-name {
		font-size: 1.5rem;
	}

	.wheel-detail-panel {
		padding: 1rem;
	}

	.detail-panel-inner {
		padding: 1.5rem;
	}

}