/*
 * The floating Support button and its panel.
 *
 * @package  Meridian Donate
 * @license  GNU General Public License version 2 or later
 *
 * ⚠ IT LOOKS LIKE THE THING IT REPLACES, ON PURPOSE. Greg asked for the Ko-fi
 * widget's behaviour and appearance with our own donation behind it: a pill in
 * the bottom corner, the same blue unless a site changes it, a card that opens
 * above it. Readers already know where it is; moving it would be a second
 * change nobody asked for.
 *
 * ⚠ AND IT BRINGS ITS OWN COLOURS. This renders on four sites with four
 * templates; inheriting would make the card white-on-white on one of them.
 */

.mdon {
	position: fixed;
	bottom: 18px;
	z-index: 9998;              /* under a modal, over the page */
	font-size: 15px;
	line-height: 1.4;
	font-family: inherit;
}

.mdon--right { right: 18px; }
.mdon--left  { left: 18px; }

/* ── the button ───────────────────────────────────────────────────────── */

.mdon__btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	appearance: none;
	border: 0;
	border-radius: 999px;
	padding: .7rem 1.15rem;
	background: var(--mdon-bg, #00b9fe);
	color: var(--mdon-fg, #fff);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

.mdon__btn:hover { filter: brightness(1.07); }
.mdon__btn:focus-visible { outline: 3px solid var(--mdon-bg, #00b9fe); outline-offset: 3px; }

.mdon__heart { display: inline-flex; }

/* ── the panel ────────────────────────────────────────────────────────── */

.mdon__panel {
	position: absolute;
	bottom: calc(100% + 10px);
	width: 18rem;
	max-width: calc(100vw - 36px);
	box-sizing: border-box;
	background: #fff;
	color: #1d2433;
	border-radius: .75rem;
	box-shadow: 0 10px 34px rgba(0, 0, 0, .28);
	padding: .9rem 1rem 1rem;
}

.mdon--right .mdon__panel { right: 0; }
.mdon--left  .mdon__panel { left: 0; }

/* ⚠ `[hidden]` LOSES TO AN AUTHOR `display` - and the panel is positioned, so
   something in a template's reset easily gives it one. Say it here. */
.mdon__panel[hidden] { display: none !important; }

.mdon__head {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	margin-bottom: .35rem;
}

.mdon__title {
	margin: 0;
	font-weight: 700;
	font-size: 1rem;
	flex: 1 1 auto;
}

.mdon__close {
	appearance: none;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 1.4rem;
	line-height: 1;
	padding: 0 .1rem;
	cursor: pointer;
	opacity: .6;
}

.mdon__close:hover { opacity: 1; }

.mdon__blurb {
	margin: 0 0 .6rem;
	font-size: .875rem;
	opacity: .8;
}

.mdon__amounts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .4rem;
	border: 0;
	padding: 0;
	margin: 0 0 .6rem;
}

.mdon__legend {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .65;
	padding: 0;
	margin-bottom: .35rem;
	grid-column: 1 / -1;
}

.mdon__choice { position: relative; }

/*
 * ⚠ THE RADIO IS HIDDEN FROM SIGHT, NOT FROM THE BROWSER. `display:none` would
 * take it out of the tab order and out of the radio group's arrow-key
 * behaviour; clipping it keeps both and still lets the label do the drawing.
 */
.mdon__choice input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.mdon__choice span {
	display: block;
	text-align: center;
	padding: .5rem .25rem;
	border: 1px solid #d8dee9;
	border-radius: .45rem;
	font-weight: 600;
	cursor: pointer;
}

.mdon__choice input:checked + span {
	background: var(--mdon-bg, #00b9fe);
	border-color: var(--mdon-bg, #00b9fe);
	color: var(--mdon-fg, #fff);
}

.mdon__choice input:focus-visible + span {
	outline: 2px solid var(--mdon-bg, #00b9fe);
	outline-offset: 2px;
}

.mdon__other { display: block; margin-bottom: .6rem; }

.mdon__otherlabel {
	display: block;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .65;
	margin-bottom: .25rem;
}

.mdon__other input {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	padding: .45rem .6rem;
	border: 1px solid #d8dee9;
	border-radius: .45rem;
	color: inherit;
	background: #fff;
}

.mdon__err {
	margin: 0 0 .5rem;
	font-size: .8125rem;
	color: #a1132b;
}

.mdon__err[hidden] { display: none !important; }

.mdon__go {
	display: block;
	text-align: center;
	text-decoration: none;
	border-radius: .5rem;
	padding: .6rem .8rem;
	font-weight: 700;
	background: var(--mdon-bg, #00b9fe);
	color: var(--mdon-fg, #fff);
}

.mdon__go:hover { filter: brightness(1.07); color: var(--mdon-fg, #fff); }

.mdon__note {
	margin: .5rem 0 0;
	font-size: .75rem;
	opacity: .65;
	text-align: center;
}

/* On a phone the card is nearly the width of the screen; keep it off the edge. */
@media (max-width: 24rem) {
	.mdon { bottom: 12px; }
	.mdon--right { right: 12px; }
	.mdon--left { left: 12px; }
}