/*
 * Medlemsdelen och de publika delarna ([aag_lektioner], [aag_boka_lektion], [aag_medlemskap]).
 * Färger och typsnitt följer Adams tema (Fildisi: Poppins, Hind, orange accent).
 * Allt ligger under #aag så att temats egna regler för rubriker och formulär inte tar över.
 *
 * Två hörnradier: 8px för ytor och 999px för piller. En grå för ytor (--aag-soft) och en för linjer (--aag-line).
 */

#aag {
	--aag-ink: #171a1d;
	--aag-accent: #eb9100;
	--aag-accent-soft: #fff6e8;
	--aag-muted: #5f656b;
	--aag-line: #e1e3e5;
	--aag-soft: #f4f4f2;
	--aag-success: #2e7d32;
	--aag-success-soft: #edf7ee;
	--aag-error: #b3261e;
	--aag-error-soft: #fbeeed;
	--aag-display: Poppins, system-ui, sans-serif;
	max-width: 720px;
	margin: 24px auto 0;
	color: var(--aag-ink);
	font-size: 16px;
	line-height: 1.5;
}

#aag *,
#aag *::before,
#aag *::after {
	box-sizing: border-box;
}

#aag p {
	margin: 0;
}

#aag a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--aag-accent);
	text-underline-offset: 3px;
}

#aag :focus-visible {
	outline: 2px solid var(--aag-accent);
	outline-offset: 2px;
}

/* ---------- Rubriker och text ---------- */

#aag .aag-heading {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 14px;
	font-family: var(--aag-display);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.2px;
}

#aag .aag-day {
	margin: 24px 0 10px;
	padding-left: 10px;
	border-left: 3px solid var(--aag-accent);
	font-family: var(--aag-display);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
}

#aag .aag-heading + .aag-day {
	margin-top: 0;
}

#aag .aag-section + .aag-section {
	margin-top: 40px;
}

#aag .aag-muted {
	color: var(--aag-muted);
}

#aag .aag-small,
#aag .aag-hint {
	font-size: 15px;
	color: var(--aag-muted);
}

#aag .aag-hint {
	max-width: 240px;
	line-height: 1.35;
	text-align: right;
}

#aag .aag-count {
	display: inline-flex;
	align-items: center;
	min-width: 26px;
	padding: 1px 9px;
	border-radius: 999px;
	background: var(--aag-soft);
	color: var(--aag-muted);
	font-family: Hind, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
}

#aag .aag-code {
	font-family: ui-monospace, Consolas, monospace;
	font-size: 1.1em;
	letter-spacing: 0.08em;
}

/* ---------- Meddelanden och tomma lägen ---------- */

#aag .aag-flash {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-left: 4px solid;
	border-radius: 8px;
	font-size: 16px;
}

#aag .aag-flash--success {
	border-color: var(--aag-success);
	background: var(--aag-success-soft);
}

#aag .aag-flash--error {
	border-color: var(--aag-error);
	background: var(--aag-error-soft);
}

#aag .aag-flash--warning {
	border-color: var(--aag-accent);
	background: var(--aag-accent-soft);
}

#aag .aag-note {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: 8px;
	background: var(--aag-soft);
	font-size: 16px;
}

/* Ett gemensamt mönster för alla tomma lägen. */
#aag .aag-empty {
	margin: 0;
	padding: 24px 16px;
	border: 1px dashed var(--aag-line);
	border-radius: 8px;
	color: var(--aag-muted);
	font-size: 16px;
	text-align: center;
}

/* ---------- Knappar ---------- */

#aag .aag-form {
	flex-shrink: 0;
	margin: 0;
}

#aag .aag-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 88px;
	min-height: 44px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid var(--aag-ink);
	border-radius: 8px;
	font-family: var(--aag-display);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

#aag .aag-btn--primary {
	background: var(--aag-ink);
	color: #fff;
}

#aag .aag-btn--primary:hover {
	border-color: var(--aag-accent);
	background: var(--aag-accent);
	color: var(--aag-ink);
}

#aag .aag-btn--secondary {
	background: #fff;
	color: var(--aag-ink);
}

#aag .aag-btn--secondary:hover {
	background: var(--aag-ink);
	color: #fff;
}

#aag .aag-btn:disabled {
	border-color: var(--aag-line);
	background: var(--aag-soft);
	color: var(--aag-muted);
	cursor: not-allowed;
}

#aag .aag-btn--link {
	min-width: 0;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--aag-muted);
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	text-decoration: underline;
}

#aag .aag-btn--link:hover {
	background: none;
	color: var(--aag-error);
}

#aag .is-busy .aag-btn,
#aag .is-busy .aag-time {
	opacity: 0.6;
	cursor: progress;
}

/* ---------- Inloggad-raden och medlemskortet ---------- */

#aag .aag-account {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin: 0 0 12px;
	font-size: 15px;
	color: var(--aag-muted);
}

#aag .aag-account strong {
	color: var(--aag-ink);
	font-weight: 600;
}

#aag .aag-account__links {
	display: flex;
	gap: 16px;
}

#aag .aag-member {
	margin: 0 0 16px;
	padding: 20px;
	border-radius: 8px;
	background: var(--aag-ink);
	color: #fff;
}

#aag .aag-member__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0 12px;
}

#aag .aag-member__label {
	font-family: var(--aag-display);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
}

#aag .aag-member__type {
	margin: 2px 0 4px;
	font-family: var(--aag-display);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--aag-accent);
}

#aag .aag-member__hours {
	font-size: 15px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.85);
}

/* Läget som en rad med tre fält: etikett ovanför och värdet under. */
#aag .aag-member__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
	gap: 8px 12px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	font-size: 14px;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.7);
}

#aag .aag-member__stats span {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

#aag .aag-member__stats strong {
	color: #fff;
	font-family: var(--aag-display);
	font-size: 17px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

#aag .aag-member__stats .is-alert strong {
	color: var(--aag-accent);
}

#aag .aag-member__paused {
	margin-top: 14px;
	padding: 10px 14px;
	border-radius: 8px;
	background: var(--aag-error);
	color: #fff;
	font-size: 15px;
}

#aag .aag-member a {
	color: #fff;
}

/* "i" uppe till höger på kortet. Reglerna fälls ut under korttypen. */
#aag .aag-member {
	position: relative;
}

#aag .aag-member__head {
	flex-wrap: wrap;
	padding-right: 36px;
}

#aag .aag-member__head > div {
	flex: 1;
}

#aag .aag-info {
	flex-basis: 100%;
}

#aag .aag-info summary {
	position: absolute;
	top: 10px;
	right: 10px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	list-style: none;
	cursor: pointer;
}

#aag .aag-info summary::-webkit-details-marker {
	display: none;
}

#aag .aag-info summary span {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 1.5px solid rgba(255, 255, 255, 0.6);
	border-radius: 999px;
	font-family: Georgia, serif;
	font-size: 15px;
	font-style: italic;
	font-weight: 700;
}

#aag .aag-info[open] summary span {
	border-color: var(--aag-accent);
	background: var(--aag-accent);
	color: var(--aag-ink);
}

#aag .aag-info__panel {
	display: grid;
	gap: 8px;
	margin: 4px -36px 0 0;
	padding: 12px 14px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.08);
	font-size: 15px;
	color: rgba(255, 255, 255, 0.9);
}

/* ---------- Meny: segmenterad på datorn, fast bottenmeny på mobil ---------- */

#aag .aag-tabs {
	display: flex;
	gap: 4px;
	margin: 0 0 28px;
	padding: 4px;
	border-radius: 999px;
	background: var(--aag-soft);
}

#aag .aag-tab {
	display: inline-flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	border-radius: 999px;
	color: var(--aag-muted);
	font-family: var(--aag-display);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

#aag .aag-tab .aag-icon {
	width: 18px;
	height: 18px;
}

#aag .aag-tab:hover {
	color: var(--aag-ink);
}

#aag .aag-tab.is-active {
	background: #fff;
	color: var(--aag-ink);
	box-shadow: 0 1px 3px rgba(23, 26, 29, 0.12);
}

#aag .aag-tab.is-active .aag-icon {
	color: var(--aag-accent);
}

#aag .aag-tab__short {
	display: none;
}

/* ---------- Mina tider (hopfällbar rad) ---------- */

#aag .aag-mine {
	margin: 0 0 24px;
	border: 1px solid var(--aag-line);
	border-radius: 8px;
	background: #fff;
}

#aag .aag-mine summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 12px;
	min-height: 56px;
	padding: 10px 44px 10px 16px;
	position: relative;
	list-style: none;
	cursor: pointer;
}

#aag .aag-mine summary::-webkit-details-marker {
	display: none;
}

#aag .aag-mine summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 9px;
	height: 9px;
	margin-top: -6px;
	border-right: 2px solid var(--aag-muted);
	border-bottom: 2px solid var(--aag-muted);
	transform: rotate(45deg);
	transition: transform 0.15s;
}

#aag .aag-mine[open] summary::after {
	margin-top: -2px;
	transform: rotate(-135deg);
}

#aag .aag-mine__title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--aag-display);
	font-size: 17px;
	font-weight: 600;
}

#aag .aag-mine__next {
	font-size: 15px;
	color: var(--aag-muted);
}

#aag .aag-mine__body {
	display: grid;
	gap: 12px;
	padding: 0 16px 16px;
}

#aag .aag-mine__body .aag-note {
	margin: 0;
}

/* ---------- Dagväljaren ---------- */

#aag .aag-days {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
}

#aag .aag-days__track {
	position: relative;
	display: flex;
	flex: 1;
	gap: 8px;
	min-width: 0;
	padding: 2px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}

#aag .aag-days__track::-webkit-scrollbar {
	display: none;
}

/* Tonad kant där det finns fler dagar. Utan JavaScript tonas bara högerkanten. */
#aag .aag-days.is-ready:not(.at-start):not(.at-end) .aag-days__track {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
	mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

#aag .aag-days.at-end .aag-days__track {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 40px);
	mask-image: linear-gradient(to right, transparent, #000 40px);
}

#aag .aag-days.at-start.at-end .aag-days__track {
	-webkit-mask-image: none;
	mask-image: none;
}

#aag .aag-days__nav {
	display: none;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--aag-line);
	border-radius: 999px;
	background: #fff;
	color: var(--aag-ink);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

#aag .aag-days.at-start .aag-days__nav[data-dir="-1"],
#aag .aag-days.at-end .aag-days__nav[data-dir="1"] {
	opacity: 0.35;
	pointer-events: none;
}

#aag .aag-day-chip {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 62px;
	min-height: 56px;
	padding: 6px 10px;
	border: 1px solid var(--aag-line);
	border-radius: 8px;
	background: #fff;
	color: var(--aag-ink);
	text-decoration: none;
}

#aag .aag-day-chip span {
	font-size: 14px;
	color: var(--aag-muted);
}

#aag .aag-day-chip strong {
	font-family: var(--aag-display);
	font-size: 16px;
	font-variant-numeric: tabular-nums;
}

#aag .aag-day-chip.is-active {
	border-color: var(--aag-ink);
	background: var(--aag-ink);
	color: #fff;
}

#aag .aag-day-chip.is-active span {
	color: rgba(255, 255, 255, 0.75);
}

/* ---------- Längd: tvådelad knapp ---------- */

#aag .aag-segment {
	display: inline-grid;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	gap: 4px;
	margin: 0 0 16px;
	padding: 4px;
	border-radius: 999px;
	background: var(--aag-soft);
}

#aag .aag-segment a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 22px;
	border-radius: 999px;
	color: var(--aag-muted);
	font-family: var(--aag-display);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

#aag .aag-segment a.is-active {
	background: #fff;
	color: var(--aag-ink);
	box-shadow: 0 1px 3px rgba(23, 26, 29, 0.12);
}

/* ---------- Tidsrutnätet ---------- */

#aag .aag-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#aag .aag-grid li {
	margin: 0;
}

#aag .aag-time {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 62px;
	margin: 0;
	padding: 8px 4px;
	border: 1px solid var(--aag-line);
	border-radius: 8px;
	background: #fff;
	color: var(--aag-ink);
	font: inherit;
	text-align: center;
}

#aag .aag-time strong {
	font-family: var(--aag-display);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

#aag .aag-time small {
	font-size: 14px;
	line-height: 1.3;
	color: var(--aag-muted);
}

#aag button.aag-time.is-free {
	border-color: var(--aag-ink);
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

#aag button.aag-time.is-free:hover {
	background: var(--aag-ink);
	color: #fff;
}

#aag button.aag-time.is-free:hover small {
	color: rgba(255, 255, 255, 0.75);
}

#aag .aag-time.is-taken {
	border-color: var(--aag-soft);
	background: var(--aag-soft);
	color: var(--aag-muted);
}

#aag .aag-time.is-mine {
	border-color: var(--aag-accent);
	background: var(--aag-accent);
}

#aag .aag-time.is-mine small {
	color: var(--aag-ink);
	font-weight: 600;
}

/* Ledig men inte bokningsbar för just den här medlemmen (t.ex. max bokningar), eller för Adam. */
#aag .aag-time.is-locked {
	border-style: dashed;
	color: var(--aag-muted);
}

#aag .aag-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-top: 14px;
	font-size: 14px;
	color: var(--aag-muted);
}

#aag .aag-legend span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

#aag .aag-legend span::before {
	content: "";
	width: 14px;
	height: 14px;
	border: 1px solid var(--aag-ink);
	border-radius: 999px;
	background: #fff;
}

#aag .aag-legend .is-taken::before {
	border-color: var(--aag-soft);
	background: var(--aag-line);
}

#aag .aag-legend .is-mine::before {
	border-color: var(--aag-accent);
	background: var(--aag-accent);
}

/* ---------- Listor (lektioner och Mina tider) ---------- */

#aag .aag-slots {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--aag-line);
	border-radius: 8px;
	overflow: hidden;
}

#aag .aag-slot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	margin: 0;
	padding: 12px 16px;
	background: #fff;
}

#aag .aag-slot + .aag-slot {
	border-top: 1px solid var(--aag-line);
}

#aag .aag-slot--mine {
	background: var(--aag-accent-soft);
}

#aag .aag-slot__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

#aag .aag-slot__day {
	font-size: 15px;
	color: var(--aag-muted);
}

#aag .aag-slot__time {
	font-size: 17px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

#aag .aag-slot__place {
	font-size: 15px;
	color: var(--aag-muted);
}

#aag .aag-price {
	margin-left: auto;
	font-size: 15px;
	color: var(--aag-muted);
	text-align: right;
}

/* ---------- Bekräftelsepanelen ---------- */

#aag .aag-sheet {
	width: min(420px, calc(100vw - 32px));
	max-width: none;
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: #fff;
	color: var(--aag-ink);
	box-shadow: 0 24px 60px rgba(23, 26, 29, 0.35);
}

#aag .aag-sheet::backdrop {
	background: rgba(23, 26, 29, 0.5);
}

#aag .aag-sheet__inner {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 24px;
}

#aag .aag-sheet__title {
	margin: 0;
	font-family: var(--aag-display);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

#aag .aag-sheet__text {
	font-size: 16px;
	color: var(--aag-muted);
}

#aag .aag-sheet__buttons {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 10px;
}

/* ---------- Villkoren och spärren ---------- */

#aag .aag-terms {
	width: min(720px, calc(100vw - 32px));
	max-width: none;
	max-height: min(85vh, 900px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: #fff;
	color: var(--aag-ink);
	box-shadow: 0 24px 60px rgba(23, 26, 29, 0.35);
	overflow: hidden;
}

#aag .aag-terms[open] {
	display: flex;
	flex-direction: column;
}

#aag .aag-terms::backdrop {
	background: rgba(23, 26, 29, 0.55);
}

#aag .aag-terms__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 24px;
	border-bottom: 1px solid var(--aag-line);
}

#aag .aag-terms__head .aag-heading {
	margin: 0;
}

#aag .aag-terms__close {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
}

#aag .aag-terms__body {
	padding: 4px 24px 24px;
	font-size: 15px;
	line-height: 1.6;
	overflow-y: auto;
}

#aag .aag-terms__body h3 {
	margin: 22px 0 6px;
	font-family: var(--aag-display);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
}

#aag .aag-terms__body p,
#aag .aag-terms__body ul {
	margin: 0 0 10px;
}

#aag .aag-terms__body ul {
	padding-left: 20px;
	list-style: disc;
}

#aag .aag-gate__text {
	max-height: 360px;
	margin: 16px 0 20px;
	border: 1px solid var(--aag-line);
	border-radius: 8px;
	background: #fff;
}

#aag .aag-gate__form {
	display: grid;
	justify-items: start;
	gap: 14px;
}

#aag .aag-gate__form label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 600;
}

#aag .aag-gate__form input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin-top: 2px;
	accent-color: var(--aag-ink);
}

/* ---------- Sidfot ---------- */

#aag .aag-footer {
	margin: 40px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--aag-line);
	color: var(--aag-muted);
	font-size: 15px;
}

/* ---------- Formulär: inloggning, gästbokning, anslagstavla ---------- */

#aag .aag-card {
	max-width: 420px;
	margin: 0 auto;
	padding: 28px;
	border: 1px solid var(--aag-line);
	border-radius: 8px;
	background: #fff;
}

#aag .aag-card .aag-heading {
	margin-bottom: 6px;
}

#aag .aag-card > p {
	margin: 0 0 20px;
}

#aag .aag-card > p:last-child {
	margin: 16px 0 0;
}

#aag #aag-login-form p {
	margin: 0 0 14px;
}

#aag #aag-login-form label,
#aag .aag-guest label,
#aag .aag-post-form label {
	display: block;
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 600;
}

#aag #aag-login-form input[type="text"],
#aag #aag-login-form input[type="email"],
#aag #aag-login-form input[type="password"],
#aag .aag-guest input,
#aag .aag-post-form textarea {
	width: 100%;
	min-height: 46px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--aag-line);
	border-radius: 8px;
	background: var(--aag-soft);
	color: var(--aag-ink);
	font: inherit;
	font-size: 16px; /* 16px hindrar iOS från att zooma in vid fokus. */
	line-height: normal;
}

#aag #aag-login-form input:focus,
#aag .aag-guest input:focus,
#aag .aag-post-form textarea:focus {
	border-color: var(--aag-accent);
	outline: 2px solid var(--aag-accent);
	outline-offset: 0;
	background: #fff;
}

#aag #aag-login-form .login-remember label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
}

#aag #aag-login-form input[type="submit"] {
	width: 100%;
	min-height: 46px;
	margin: 6px 0 0;
	border: 0;
	border-radius: 8px;
	background: var(--aag-ink);
	color: #fff;
	font-family: var(--aag-display);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

#aag #aag-login-form input[type="submit"]:hover {
	background: var(--aag-accent);
	color: var(--aag-ink);
}

#aag .aag-guest {
	display: grid;
	flex-basis: 100%;
	gap: 12px;
	padding: 16px 0 4px;
	border-top: 1px dashed var(--aag-line);
}

#aag .aag-guest .aag-btn {
	justify-self: start;
}

#aag .aag-trap {
	position: absolute;
	left: -9999px;
}

#aag a.aag-btn {
	text-decoration: none;
}

#aag .aag-post-form {
	display: grid;
	gap: 8px;
	margin: 0 0 24px;
}

#aag .aag-post-form .aag-btn {
	justify-self: end;
}

/* ---------- Medlemskap ---------- */

#aag .aag-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
	margin: 16px 0 12px;
}

#aag .aag-plan {
	display: grid;
	gap: 4px;
	padding: 20px;
	border: 1px solid var(--aag-line);
	border-top: 3px solid var(--aag-accent);
	border-radius: 8px;
	background: #fff;
}

#aag .aag-plan__name {
	margin: 0 0 2px;
	font-family: var(--aag-display);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0;
}

#aag .aag-plan__price {
	font-family: var(--aag-display);
	font-size: 26px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

#aag .aag-plan__price span {
	font-family: Hind, system-ui, sans-serif;
	font-size: 15px;
	font-weight: 400;
	color: var(--aag-muted);
}

#aag .aag-plan__hours {
	font-size: 15px;
	color: var(--aag-muted);
}

#aag .aag-plan__seats {
	margin-top: 8px;
	font-size: 15px;
	font-weight: 600;
}

#aag .aag-plan__seats.is-full {
	color: var(--aag-error);
}

/* ---------- Erbjudanden ---------- */

#aag .aag-offers {
	display: grid;
	gap: 16px;
}

#aag .aag-offer {
	border: 1px solid var(--aag-line);
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
}

#aag .aag-offer__image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 280px;
	object-fit: cover;
}

#aag .aag-offer__body {
	padding: 18px 20px;
}

#aag .aag-offer__title {
	margin: 0 0 8px;
	font-family: var(--aag-display);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0;
}

#aag .aag-offer__text > :last-child {
	margin-bottom: 0;
}

/* ---------- Anslagstavlan ---------- */

#aag .aag-posts {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#aag .aag-post {
	margin: 0;
	padding: 14px 16px 6px;
	border: 1px solid var(--aag-line);
	border-radius: 8px;
	background: #fff;
}

#aag .aag-post--adam {
	border-left: 4px solid var(--aag-accent);
}

#aag .aag-post__meta {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 15px;
}

#aag .aag-post__meta span {
	color: var(--aag-muted);
	font-variant-numeric: tabular-nums;
}

#aag .aag-post__text {
	margin: 6px 0 4px;
	overflow-wrap: anywhere;
}

/* ---------- Dator ---------- */

@media (min-width: 641px) {
	#aag.has-js .aag-days__nav {
		display: grid;
	}

	/* Ungefär sex tider per rad. */
	#aag .aag-grid {
		grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	}
}

/* ---------- Mobil ---------- */

@media (max-width: 640px) {
	/* Plats för bottenmenyn. */
	#aag {
		padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
	}

	#aag .aag-tabs {
		position: fixed;
		z-index: 60;
		right: 0;
		bottom: 0;
		left: 0;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 0;
		margin: 0;
		padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
		border-top: 1px solid var(--aag-line);
		border-radius: 0;
		background: #fff;
		box-shadow: 0 -4px 16px rgba(23, 26, 29, 0.06);
	}

	#aag .aag-tab {
		flex-direction: column;
		gap: 3px;
		min-height: 56px;
		padding: 4px 2px;
		border-radius: 8px;
		font-size: 13px;
	}

	#aag .aag-tab .aag-icon {
		width: 22px;
		height: 22px;
	}

	#aag .aag-tab.is-active {
		background: none;
		box-shadow: none;
	}

	#aag .aag-tab__label {
		display: none;
	}

	#aag .aag-tab__short {
		display: inline;
	}

	#aag .aag-member {
		padding: 18px 16px;
	}

	#aag .aag-member__type {
		font-size: 26px;
	}

	#aag .aag-segment {
		display: grid;
		width: 100%;
	}

	#aag .aag-sheet {
		width: 100%;
		margin: auto 0 0;
		border-radius: 8px 8px 0 0;
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	#aag .aag-sheet__buttons {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	#aag .aag-terms {
		width: 100%;
		max-height: 90vh;
		margin: auto 0 0;
		border-radius: 8px 8px 0 0;
	}

	#aag .aag-gate__text {
		max-height: 45vh;
	}

	#aag .aag-slot {
		padding: 12px;
	}

	#aag .aag-card {
		padding: 20px;
	}
}