/* Shared styles for customer dashboard, provider dashboard, messages, favorites */

/* ---------- Global dashboard page shell ----------
   Giver dashboard-sider max-width på store skærme og mindre padding
   på laptops så indholdet har mere luft. */
body.stowly-is-dashboard-page .site-content,
body.stowly-is-dashboard-page .ast-container {
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 48px;
	padding-right: 48px;
	box-sizing: border-box;
	width: 100%;
}

@media (max-width: 1400px) {
	body.stowly-is-dashboard-page .site-content,
	body.stowly-is-dashboard-page .ast-container {
		padding-left: 24px;
		padding-right: 24px;
	}
}

body.stowly-is-dashboard-page .entry-content,
body.stowly-is-dashboard-page main .entry-content {
	max-width: 100%;
}

body.stowly-is-dashboard-page .entry-header {
	margin-bottom: 24px;
	padding-top: 16px;
}

body.stowly-is-dashboard-page .entry-title {
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
}

@media (max-width: 768px) {
	body.stowly-is-dashboard-page .site-content,
	body.stowly-is-dashboard-page .ast-container {
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media (max-width: 480px) {
	body.stowly-is-dashboard-page .site-content,
	body.stowly-is-dashboard-page .ast-container {
		padding-left: 16px;
		padding-right: 16px;
	}
}

.stowly-actions-stack {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/*
 * Øvrige booking-lignende tabeller (fx udbyder-liste) — action-kolonne
 * med flere knapper: lodret stak med ens bredde. Kundetabellen
 * `.stowly-bookings-table--customer` er undtaget — den har egen regel
 * længere nede med knapper på én række.
 *
 * Provider-side bookings bruger `.stowly-bookings-table--bookings` og
 * rammes ikke her.
 */
.stowly-bookings-table:not(.stowly-bookings-table--bookings):not(.stowly-bookings-table--customer) .stowly-actions-stack {
	flex-direction: column;
	align-items: stretch;
	min-width: 150px;
}

.stowly-bookings-table:not(.stowly-bookings-table--bookings):not(.stowly-bookings-table--customer) .stowly-actions-stack > .stowly-btn,
.stowly-bookings-table:not(.stowly-bookings-table--bookings):not(.stowly-bookings-table--customer) .stowly-actions-stack .stowly-inline-form > .stowly-btn,
.stowly-bookings-table:not(.stowly-bookings-table--bookings):not(.stowly-bookings-table--customer) .stowly-actions-stack details > summary.stowly-btn {
	width: 100%;
	justify-content: center;
	text-align: center;
	white-space: nowrap;
}

.stowly-bookings-table:not(.stowly-bookings-table--bookings):not(.stowly-bookings-table--customer) .stowly-actions-stack .stowly-inline-form {
	display: block;
	margin: 0;
}

.stowly-inline-form {
	margin: 0;
}

.stowly-btn.stowly-btn--sm {
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 500;
	gap: 6px;
}
.stowly-btn.stowly-btn--sm svg {
	display: block;
}

.stowly-form-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

/* Reservation status pills */
.stowly-status {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	background: var(--stowly-color-surface-soft);
	color: var(--stowly-color-ink);
	border: 1px solid var(--stowly-color-line);
	white-space: nowrap;
	line-height: 1.4;
}
.stowly-status--pending_approval,
.stowly-status--awaiting_payment {
	background: #fff5e5;
	border-color: #f7d8a3;
	color: #8a5a00;
}
.stowly-status--approved {
	background: #e7f6ee;
	border-color: #a9dcbf;
	color: #1f7a45;
}
.stowly-status--declined,
.stowly-status--cancelled {
	background: #fce8ea;
	border-color: #f2b5bb;
	color: #9b1e2c;
}
.stowly-status--completed {
	background: #eef2ff;
	border-color: #c4cefc;
	color: #3d4cb8;
}

/* Favorite heart button.
   Astra (parent theme) har en generel `button:hover { background: blå }` regel
   der ellers ville farve hjerteknappen blå på hover. Vi låser baggrund, kant og
   skygge på tværs af alle interaktive states så knappen altid ser ud som en
   hvid cirkel — kun transform og hjerte-fyldet må ændre sig. */
.stowly-favorite-btn,
.stowly-favorite-btn:hover,
.stowly-favorite-btn:focus,
.stowly-favorite-btn:focus-visible,
.stowly-favorite-btn:active {
	background: rgba(255, 255, 255, 0.92);
	color: inherit;
	border: 0;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	outline: none;
}

.stowly-favorite-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 150ms ease, box-shadow 150ms ease;
	z-index: 2;
}
.stowly-favorite-btn:hover,
.stowly-favorite-btn:focus-visible {
	transform: scale(1.08);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
}
.stowly-favorite-btn svg { width: 18px; height: 18px; fill: none; stroke: #222; stroke-width: 2; }
.stowly-favorite-btn:hover svg,
.stowly-favorite-btn:focus-visible svg { stroke: var(--stowly-color-primary); }
.stowly-favorite-btn.is-favorited svg,
.stowly-favorite-btn.is-favorited:hover svg,
.stowly-favorite-btn.is-favorited:focus-visible svg { fill: var(--stowly-color-primary); stroke: var(--stowly-color-primary); }

.stowly-listing-card__image { position: relative; }

/* Favorites grid */
.stowly-favorites-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}
.stowly-favorite-card {
	position: relative;
	background: var(--stowly-color-surface);
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-md);
	overflow: hidden;
	transition: border-color 180ms ease, box-shadow 180ms ease;
}
.stowly-favorite-card:hover { border-color: var(--stowly-color-line-strong); box-shadow: var(--stowly-shadow-sm); }
.stowly-favorite-card__link { display: block; color: inherit; text-decoration: none; }
.stowly-favorite-card__image {
	aspect-ratio: 4 / 3;
	background-color: var(--stowly-color-surface-muted);
	background-size: cover;
	background-position: center;
}
.stowly-favorite-card__body { padding: 12px; }
.stowly-favorite-card__body h3 { font-size: 15px; margin: 0 0 4px; }
.stowly-favorite-card__body p { font-size: 13px; margin: 0 0 4px; color: var(--stowly-color-ink-soft); }
.stowly-favorite-card__body .stowly-price { font-weight: 600; color: var(--stowly-color-ink); margin-top: 4px; }

/* Favorites tab — favoritter øverst, gemte søgninger nedenunder som
   egen sektion adskilt af en divider. */
.stowly-favorites-tab {
	display: grid;
	gap: 28px;
}
.stowly-favorites-tab__main {
	min-width: 0;
}

/* Saved searches — customer dashboard Favorites tab (must live in core CSS;
   min-konto does not load dashboards-extended.css). */
.stowly-saved-searches {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--stowly-color-line);
}
.stowly-favorites-tab .stowly-saved-searches {
	margin-top: 0;
}
/* I fuld bredde lægges søgningerne i et responsivt kort-grid i stedet
   for én lang enkelt kolonne. */
.stowly-favorites-tab .stowly-saved-searches__list {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.stowly-saved-searches > .stowly-section-header--stacked {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 6px;
	margin-bottom: 16px;
}
.stowly-saved-searches > .stowly-section-header--stacked h3 {
	font-size: 18px;
	font-weight: 700;
}
.stowly-saved-searches__intro {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	max-width: none;
	font-size: 13px;
	line-height: 1.45;
	color: var(--stowly-color-ink-soft);
}
.stowly-saved-searches__intro-icon {
	flex: 0 0 auto;
	margin-top: 1px;
	color: var(--stowly-color-primary);
	opacity: 0.85;
}
.stowly-saved-searches__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.stowly-saved-search {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	gap: 2px 12px;
	align-items: start;
	padding: 14px;
	background: var(--stowly-color-surface-soft, #faf9f6);
	border: 1px solid var(--stowly-color-line);
	border-radius: 12px;
	transition: border-color 180ms ease, box-shadow 180ms ease, opacity 200ms ease, transform 200ms ease;
}
.stowly-favorites-tab .stowly-saved-search {
	background: var(--stowly-color-surface);
}
.stowly-saved-search:hover {
	border-color: var(--stowly-color-line-strong, #d1d5db);
	box-shadow: var(--stowly-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
}
.stowly-saved-search.is-removing {
	opacity: 0;
	transform: translateY(-6px);
}
.stowly-saved-search__icon {
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--stowly-color-primary) 12%, transparent);
	color: var(--stowly-color-primary);
}
.stowly-saved-search__body {
	grid-column: 2;
	min-width: 0;
}
.stowly-saved-search__title {
	margin: 0 0 2px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--stowly-color-ink);
}
.stowly-saved-search__meta {
	margin: 0;
	font-size: 12px;
	color: var(--stowly-color-ink-soft);
}
.stowly-saved-search__actions {
	grid-column: 1 / -1;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 8px;
	padding-top: 10px;
	border-top: 1px solid var(--stowly-color-line);
}
.stowly-saved-search__delete {
	color: var(--stowly-color-ink-soft) !important;
	border-color: transparent !important;
}
.stowly-saved-search__delete:hover,
.stowly-saved-search__delete:focus-visible {
	color: #b91c1c !important;
	background: color-mix(in srgb, #b91c1c 8%, transparent) !important;
}
.stowly-empty-state--slim {
	padding: 24px;
	background: var(--stowly-color-surface-soft);
	border: 1px dashed var(--stowly-color-line);
	border-radius: 12px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
/* Reviews */
.stowly-reviews-section { margin-top: 32px; }
.stowly-reviews-list { display: grid; gap: 16px; }
.stowly-review {
	padding: 16px;
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-md);
	background: var(--stowly-color-surface);
}
.stowly-review header { display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--stowly-color-ink-soft); margin-bottom: 6px; }
.stowly-review__stars { color: #e8a12c; letter-spacing: 1px; }
.stowly-review__name { font-weight: 600; color: var(--stowly-color-ink); }
.stowly-review h4 { margin: 0 0 4px; font-size: 15px; }
.stowly-review p { margin: 0; line-height: 1.5; }

/* Review form */
.stowly-review-drawer {
	background: var(--stowly-color-surface-soft);
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-md);
	padding: 20px;
	margin-bottom: 24px;
}
.stowly-review-form { display: grid; gap: 12px; max-width: 560px; }
.stowly-rating-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.stowly-rating-input input { position: absolute; opacity: 0; pointer-events: none; }
.stowly-rating-input label {
	font-size: 32px;
	color: #d5d5d7;
	cursor: pointer;
	line-height: 1;
	transition: color 120ms ease;
}
.stowly-rating-input input:checked ~ label,
.stowly-rating-input label:hover,
.stowly-rating-input label:hover ~ label {
	color: #e8a12c;
}

/* Messages layout */
.stowly-messages {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 24px;
	min-height: 540px;
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-md);
	overflow: hidden;
	background: var(--stowly-color-surface);
}
.stowly-messages__list { border-right: 1px solid var(--stowly-color-line); padding: 14px 12px; overflow-y: auto; background: var(--stowly-color-surface-soft); }
/* Dobbelt-klasse selektor for at vinde over den globale
   `.stowly-tab-panel h2 { font-size: 22px !important }`-regel. */
.stowly-messages .stowly-messages__list h2 {
	margin: 0 0 10px !important;
	padding: 0 10px;
	font-size: 12px !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--stowly-color-ink-soft);
}
.stowly-messages__list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.stowly-messages__list .stowly-empty { padding: 0 10px; font-size: 14px; color: var(--stowly-color-ink-soft); }
.stowly-messages__item a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	border-radius: var(--stowly-radius-sm);
	color: inherit;
	text-decoration: none;
	transition: background 150ms ease;
}
.stowly-messages__item a strong { font-size: 14px; font-weight: 600; }
.stowly-messages__item a:hover { background: var(--stowly-color-surface); }
.stowly-messages__item.is-active a {
	background: var(--stowly-color-surface);
	box-shadow: inset 2px 0 0 var(--stowly-color-primary), var(--stowly-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.04));
}
.stowly-messages__sub { font-size: 12px; color: var(--stowly-color-ink-soft); }
.stowly-messages__preview {
	font-size: 12px;
	color: var(--stowly-color-ink-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.stowly-messages__thread { display: flex; flex-direction: column; }

/* Tom tilstand ("Vælg en samtale fra listen.") centreres i panelet i
   stedet for at hænge i øverste venstre hjørne. */
.stowly-messages__thread > .stowly-empty {
	margin: auto;
	padding: 24px;
	font-size: 14px;
	color: var(--stowly-color-ink-soft);
	text-align: center;
}
.stowly-messages__header {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--stowly-color-line);
}
.stowly-messages__header-main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.stowly-messages__back {
	display: none;
	font-size: 13px;
	color: var(--stowly-color-ink-soft);
	text-decoration: none;
}
.stowly-messages__back:hover {
	color: var(--stowly-color-primary);
	text-decoration: none;
}
.stowly-messages__header h2 { font-size: 16px; margin: 0; flex: 1; min-width: 0; }
.stowly-messages__thread-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
/* Transcript: padding, max-højde og scroll ligger i .stowly-chat-scroll (global.css). */
.stowly-messages__body {
	flex: 1;
	min-height: 0;
}
.stowly-msg { display: flex; animation: stowly-msg-in 0.2s ease; }
.stowly-msg.is-me { justify-content: flex-end; }
.stowly-msg__time { display: block; font-size: 11px; opacity: 0.75; margin-top: 4px; }
.stowly-msg p { margin: 0; line-height: 1.5; }

@keyframes stowly-msg-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Typing indicator bubble */
.stowly-msg--typing[hidden] { display: none !important; }
.stowly-msg__bubble--typing {
	padding: 12px 14px;
	display: inline-flex;
	align-items: center;
	min-height: 0;
}
.stowly-typing-dots {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.stowly-typing-dots span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.45;
	display: inline-block;
	animation: stowly-typing-bounce 1.2s infinite ease-in-out;
}
.stowly-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.stowly-typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes stowly-typing-bounce {
	0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
	40% { transform: translateY(-4px); opacity: 0.9; }
}

.stowly-messages__form {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	padding: 16px 20px;
	border-top: 1px solid var(--stowly-color-line);
}
.stowly-messages__form textarea {
	flex: 1;
	resize: none;
	padding: 10px 12px;
	border: 1px solid var(--stowly-color-line-strong);
	border-radius: var(--stowly-radius-sm);
	font-family: inherit;
	font-size: 14px;
	min-height: auto;
}
.stowly-messages__form .stowly-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	align-self: stretch;
	padding: 10px 18px;
	border-radius: var(--stowly-radius-sm);
}
.stowly-messages__form .stowly-btn svg {
	display: block;
}

/* --- Form actions (vedhæft + send) --- */
.stowly-messages__form-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	align-self: stretch;
}

.stowly-messages__attach-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid var(--stowly-color-line);
	color: var(--stowly-color-ink-soft, #717171);
	cursor: pointer;
	transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
	align-self: center;
}

.stowly-messages__attach-btn:hover {
	background: rgba(0, 0, 0, 0.04);
	color: var(--stowly-color-ink);
	border-color: var(--stowly-color-line-strong);
}

.stowly-messages__attach-preview {
	position: relative;
	flex-shrink: 0;
	align-self: center;
	margin-right: -4px;
}

.stowly-messages__attach-preview img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 10px;
	display: block;
	border: 1px solid var(--stowly-color-line);
}

.stowly-messages__attach-remove {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--stowly-color-ink);
	color: #fff;
	border: 2px solid #fff;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --- Vedhæftede billeder i bubbler --- */
.stowly-msg__attachment {
	display: block;
	margin-bottom: 6px;
	border-radius: 10px;
	overflow: hidden;
	line-height: 0;
	max-width: 240px;
}

.stowly-msg__attachment img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 180ms ease;
}

.stowly-msg__attachment:hover img { transform: scale(1.02); }

/* --- Read-receipts (send/læst) --- */
.stowly-msg__receipt {
	display: inline-flex;
	vertical-align: middle;
	margin-left: 4px;
	color: currentColor;
	opacity: 0.6;
	transition: color 150ms ease, opacity 150ms ease;
}

.stowly-msg__receipt.is-seen {
	color: #3b8cff;
	opacity: 1;
}

@media (max-width: 780px) {
	.stowly-messages { grid-template-columns: 1fr; }
	.stowly-messages[data-stowly-messages-has-thread="0"] .stowly-messages__thread {
		display: none;
	}
	.stowly-messages[data-stowly-messages-has-thread="0"] .stowly-messages__list {
		border-right: 0;
		border-bottom: 0;
		max-height: none;
		min-height: 320px;
	}
	.stowly-messages[data-stowly-messages-has-thread="1"] .stowly-messages__list {
		display: none;
	}
	.stowly-messages[data-stowly-messages-has-thread="1"] {
		grid-template-rows: minmax(0, 1fr);
		min-height: min(70vh, 640px);
	}
	.stowly-messages[data-stowly-messages-has-thread="1"] .stowly-messages__thread {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}
	.stowly-messages[data-stowly-messages-has-thread="1"] .stowly-messages__back {
		display: block;
	}
	/* Fallback when data attr mangler (ældre cache): stadig liste + tråd under hinanden */
	.stowly-messages:not([data-stowly-messages-has-thread]) .stowly-messages__list {
		border-right: 0;
		border-bottom: 1px solid var(--stowly-color-line);
		max-height: 260px;
	}
}

/* Map + marker + popup */
.stowly-map-aside {
	position: sticky;
	top: calc(var(--stowly-header-height) + 16px);
	height: calc(100vh - var(--stowly-header-height) - 32px);
	min-height: 480px;
}
.stowly-map {
	width: 100%;
	height: 100%;
	border-radius: var(--stowly-radius-lg);
	overflow: hidden;
	border: 1px solid var(--stowly-color-line);
}
.stowly-map-marker {
	background: #fff;
	border: 1px solid var(--stowly-color-line-strong);
	border-radius: 999px;
	padding: 4px 10px;
	font-weight: 600;
	font-size: 12px;
	box-shadow: var(--stowly-shadow-sm);
	white-space: nowrap;
	color: #222;
}

/* Map marker popups live in archive-listings.css (listing archive + platform). */

/* Price range slider display */
.stowly-price-range__labels {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: var(--stowly-color-ink-soft);
	margin-bottom: 8px;
}

/* Reserve gate (booking login/register prompt) */
.stowly-reserve-gate {
	padding: 20px;
	background: var(--stowly-color-surface-muted);
	border: 1px solid var(--stowly-color-line);
	border-radius: 14px;
	text-align: center;
}

.stowly-reserve-gate p {
	margin: 0 0 14px;
	color: var(--stowly-color-ink);
}

.stowly-reserve-gate__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: stretch;
	margin-top: 8px;
}

.stowly-reserve-gate__actions .stowly-btn {
	flex: 1 1 140px;
	justify-content: center;
	/* Keep the short CTA labels ("Opret konto" / "Log ind") on a
	   single line even when the booking aside narrows down — the
	   labels are already trimmed on the PHP side so nowrap is a
	   safe guarantee rather than a hack that would clip text. */
	white-space: nowrap;
}

.stowly-reserve-gate__hint {
	margin: 10px 0 0;
	font-size: 12px;
	color: var(--stowly-color-ink-soft);
	text-align: center;
}

/* Strip Astra's page title + breadcrumb + container padding on auth pages so
   the custom centered card is the only visual element in the content area. */
body.stowly-is-auth-page .entry-header,
body.stowly-is-auth-page .entry-title,
body.stowly-is-auth-page .ast-breadcrumbs,
body.stowly-is-auth-page .ast-archive-description,
body.stowly-is-auth-page header.page-header {
	display: none !important;
}

body.stowly-is-auth-page #primary,
body.stowly-is-auth-page .site-content,
body.stowly-is-auth-page .ast-container,
body.stowly-is-auth-page .site-content > .ast-container {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin: 0 !important;
}

body.stowly-is-auth-page .entry-content,
body.stowly-is-auth-page .entry-content > *:not(.stowly-auth-page) {
	margin: 0 !important;
	padding: 0 !important;
}

/* Auth shell: full-height centered wrapper used by login + register pages. */
.stowly-auth-shell {
	min-height: calc(100vh - 180px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 16px;
	/* Samme cremede canvas som resten af sitet (ingen særlig gradient). */
	background: var(--stowly-color-page);
}

.stowly-auth-shell__stack {
	width: 100%;
	max-width: 460px;
	margin: 0 auto;
}

.stowly-auth-shell__breadcrumbs {
	margin-bottom: 12px;
}

.stowly-auth-shell__breadcrumbs .stowly-breadcrumbs {
	margin-bottom: 0;
}

.stowly-auth-page {
	width: 100%;
	max-width: 460px;
	margin: 0 auto;
}

/* When embedded elsewhere (shortcode inside regular page) keep a simple centered layout. */
:not(.stowly-auth-shell) > .stowly-auth-page {
	margin: 40px auto;
	padding: 0 16px;
}

.stowly-auth-card--login h1 {
	text-align: center;
}

.stowly-auth-card--login .stowly-auth-card__intro {
	text-align: center;
}

/* Logo lockup at top of auth card */
.stowly-auth-card__brand {
	display: flex;
	justify-content: center;
	margin-bottom: 18px;
}

.stowly-auth-card__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	text-decoration: none;
	transition: opacity 150ms ease;
}

.stowly-auth-card__logo:hover,
.stowly-auth-card__logo:focus {
	opacity: 0.85;
	text-decoration: none;
}

.stowly-auth-card__logo img {
	display: block;
	height: 40px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
	filter: none;
}

.stowly-auth-card__heading {
	margin-bottom: 22px;
}

/* Role picker (large cards, shown before form is revealed). */
.stowly-role-picker {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 8px;
	transition: all 0.25s ease;
}

.stowly-auth-page .stowly-role-picker__card,
button.stowly-role-picker__card {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 8px !important;
	padding: 18px 16px !important;
	border-radius: 14px !important;
	border: 1.5px solid var(--stowly-color-line) !important;
	background: var(--stowly-color-surface) !important;
	cursor: pointer !important;
	text-align: left !important;
	transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
	font: inherit !important;
	color: inherit !important;
	width: 100% !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
}

.stowly-auth-page .stowly-role-picker__card:hover,
button.stowly-role-picker__card:hover {
	border-color: var(--stowly-color-ink, #111) !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06) !important;
	background: var(--stowly-color-surface) !important;
}

.stowly-auth-page .stowly-role-picker__card.is-active,
button.stowly-role-picker__card.is-active {
	border-color: var(--stowly-color-ink, #111) !important;
	box-shadow: inset 0 0 0 1px var(--stowly-color-ink, #111) !important;
}

.stowly-role-picker__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--stowly-color-surface-muted);
	color: var(--stowly-color-ink);
}

.stowly-role-picker__label {
	font-weight: 600;
	font-size: 15px;
	color: var(--stowly-color-ink);
}

.stowly-role-picker__hint {
	font-size: 13px;
	color: var(--stowly-color-ink-soft);
	line-height: 1.35;
}

.stowly-role-picker.is-attention .stowly-role-picker__card {
	animation: stowly-shake 0.4s ease;
	border-color: var(--stowly-color-primary);
}

@keyframes stowly-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

/* After role is picked, shrink the picker into a compact row. */
.stowly-role-picker.is-compact {
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 18px;
}

.stowly-role-picker.is-compact .stowly-role-picker__card {
	flex-direction: row;
	align-items: center;
	padding: 10px 12px;
	gap: 10px;
}

.stowly-role-picker.is-compact .stowly-role-picker__icon {
	width: 30px;
	height: 30px;
	border-radius: 9px;
}

.stowly-role-picker.is-compact .stowly-role-picker__icon svg {
	width: 18px;
	height: 18px;
}

.stowly-role-picker.is-compact .stowly-role-picker__label {
	font-size: 13px;
}

.stowly-role-picker.is-compact .stowly-role-picker__hint {
	display: none;
}

/* Body section that appears after role selection. */
.stowly-auth-body {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}

.stowly-auth-body.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.stowly-auth-body[hidden] {
	display: none;
}

/* Social login buttons */
.stowly-auth-social {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 18px;
}

.stowly-auth-page .stowly-social-btn,
button.stowly-social-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	padding: 12px 16px !important;
	border-radius: 12px !important;
	border: 1px solid var(--stowly-color-line) !important;
	background: var(--stowly-color-surface) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--stowly-color-ink, #111) !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease !important;
	width: 100% !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	line-height: 1.2 !important;
	box-shadow: none !important;
}

.stowly-auth-page .stowly-social-btn:hover,
button.stowly-social-btn:hover {
	background: var(--stowly-color-surface-muted) !important;
	border-color: var(--stowly-color-ink, #111) !important;
	color: var(--stowly-color-ink, #111) !important;
}

.stowly-auth-page .stowly-social-btn:active,
button.stowly-social-btn:active {
	transform: translateY(1px) !important;
}

.stowly-social-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.stowly-auth-page .stowly-social-btn--apple,
button.stowly-social-btn--apple,
a.stowly-social-btn--apple {
	background: #111 !important;
	border-color: #111 !important;
	color: #fff !important;
}

.stowly-auth-page .stowly-social-btn--apple:hover,
button.stowly-social-btn--apple:hover,
a.stowly-social-btn--apple:hover {
	background: #000 !important;
	border-color: #000 !important;
	color: #fff !important;
}

.stowly-auth-page .stowly-social-btn--facebook,
button.stowly-social-btn--facebook,
a.stowly-social-btn--facebook {
	background: #1877f2 !important;
	border-color: #1877f2 !important;
	color: #fff !important;
}

.stowly-auth-page .stowly-social-btn--facebook:hover,
button.stowly-social-btn--facebook:hover,
a.stowly-social-btn--facebook:hover {
	background: #0c63d4 !important;
	border-color: #0c63d4 !important;
	color: #fff !important;
}

/* Use anchor-tag as social button variant (remove underline, keep styling). */
a.stowly-social-btn {
	text-decoration: none !important;
}

/* Divider: "eller med e-mail" */
.stowly-auth-divider {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 4px 0 14px;
	color: var(--stowly-color-ink-soft);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.stowly-auth-divider::before,
.stowly-auth-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--stowly-color-line);
}

.stowly-auth-form__remember {
	flex-direction: row !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 14px;
	color: var(--stowly-color-ink-soft);
	cursor: pointer;
}

.stowly-auth-form__remember input {
	width: auto !important;
	padding: 0 !important;
	margin: 0 !important;
}

.stowly-auth-card__signup {
	margin-top: 20px;
	text-align: center;
	font-size: 14px;
	color: var(--stowly-color-ink-soft);
}

.stowly-auth-card__signup p {
	margin: 0;
}

.stowly-auth-card__signup a {
	color: var(--stowly-color-ink);
	text-decoration: underline;
}

.stowly-auth-card {
	background: var(--stowly-color-surface);
	border: 1px solid var(--stowly-color-line);
	border-radius: 22px;
	padding: 36px 32px;
	box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.03);
}

@media (max-width: 520px) {
	.stowly-auth-card {
		padding: 28px 22px;
		border-radius: 18px;
	}
}

.stowly-auth-card h1 {
	margin: 0 0 6px;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.stowly-auth-card__intro {
	color: var(--stowly-color-ink-soft);
	margin: 0 0 4px;
	font-size: 14px;
}

.stowly-auth-form__submit {
	width: 100%;
	justify-content: center;
	margin-top: 6px;
}

.stowly-auth-form__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 4px auto 0;
	padding: 8px 10px;
	background: transparent;
	border: 0;
	color: var(--stowly-color-ink-soft);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	border-radius: 8px;
}

.stowly-auth-form__back:hover {
	color: var(--stowly-color-ink);
	background: var(--stowly-color-surface-muted);
}

.stowly-auth-form__label-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.stowly-auth-form__forgot {
	font-size: 13px;
	font-weight: 500;
	color: var(--stowly-color-ink-soft);
	text-decoration: none;
	white-space: nowrap;
}

.stowly-auth-form__forgot:hover,
.stowly-auth-form__forgot:focus-visible {
	color: var(--stowly-color-ink);
	text-decoration: underline;
}

.stowly-auth-card__footnote {
	margin-top: 20px;
	text-align: center;
	font-size: 14px;
	color: var(--stowly-color-ink-soft);
}

.stowly-auth-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.stowly-auth-form label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	color: var(--stowly-color-ink);
}

.stowly-auth-form label span {
	font-weight: 500;
}

.stowly-auth-form input[type="text"],
.stowly-auth-form input[type="email"],
.stowly-auth-form input[type="password"] {
	padding: 12px 14px;
	border: 1px solid var(--stowly-color-line);
	border-radius: 10px;
	font-size: 15px;
	width: 100%;
	box-sizing: border-box;
}

.stowly-auth-form input:focus {
	outline: none;
	border-color: var(--stowly-color-ink);
}

.stowly-auth-form__row {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.stowly-auth-form__row--two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

@media (max-width: 520px) {
	.stowly-auth-form__row--two {
		grid-template-columns: 1fr;
	}
}

.stowly-auth-form button[type="submit"] {
	margin-top: 4px;
}

/* ---------- Provider overview / KPI cards ---------- */
.stowly-provider-overview__intro {
	color: var(--stowly-color-ink-soft);
	margin: 0 0 20px;
	font-size: 15px;
}

/* ---------- Customer overview (Min konto) ---------- */
.stowly-customer-overview__recent {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--stowly-color-line);
}

.stowly-customer-overview__recent h3 {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 700;
	color: var(--stowly-color-ink);
	letter-spacing: -0.01em;
}

/* Én samlet liste-flade med skillelinjer i stedet for tre løse grå
   bokse — strammere og mindre "kort i kort". */
.stowly-customer-overview__recent-list {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--stowly-color-surface);
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-md, 12px);
	overflow: hidden;
}

.stowly-customer-overview__recent-list > li + li {
	border-top: 1px solid var(--stowly-color-line);
}

.stowly-customer-overview__recent-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	padding: 14px 18px;
}

.stowly-customer-overview__recent-title {
	font-weight: 600;
	color: var(--stowly-color-ink);
	text-decoration: none;
}

.stowly-customer-overview__recent-title:hover,
.stowly-customer-overview__recent-title:focus-visible {
	text-decoration: underline;
}

.stowly-customer-overview__recent-meta {
	margin: 3px 0 0;
	font-size: 13px;
	color: var(--stowly-color-ink-soft);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	font-variant-numeric: tabular-nums;
}

.stowly-customer-overview__recent-status {
	font-size: 12px;
	flex-shrink: 0;
}

.stowly-customer-overview__recent-foot {
	margin: 16px 0 0;
}

/* ==========================================================================
   KPI cards (provider dashboard overview)

   Each card carries a per-metric accent colour exposed as `--stowly-kpi-accent`.
   The accent is reused for the icon tile, the subtle top gradient, and the
   hover border/glow so the whole card feels colour-coded without shouting.
   ========================================================================== */
.stowly-kpi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-bottom: 32px;
}

.stowly-kpi-card {
	--stowly-kpi-accent: #0f172a;
	--stowly-kpi-accent-soft: rgba(15, 23, 42, 0.08);
	position: relative;
	background: var(--stowly-color-surface);
	border: 1px solid var(--stowly-color-line);
	border-radius: 16px;
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	overflow: hidden;
	isolation: isolate;
	transition: border-color 200ms ease, box-shadow 220ms ease, transform 220ms ease;
}

/* Accent-farven bæres alene af ikon-flisen — gradient-vasken i hjørnet
   fik kortene til at se plettede ud, så den er droppet. */
.stowly-kpi-card:hover {
	border-color: var(--stowly-color-line-strong, var(--stowly-color-line));
	box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

.stowly-kpi-card__top {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.stowly-kpi-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--stowly-kpi-accent-soft);
	color: var(--stowly-kpi-accent);
}

.stowly-kpi-card__icon .stowly-icon {
	display: block;
}

.stowly-kpi-card__label {
	font-size: 12px;
	color: var(--stowly-color-ink-soft);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1.2;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.stowly-kpi-card__value {
	font-size: 34px;
	font-weight: 700;
	color: var(--stowly-color-ink);
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}

.stowly-kpi-card__sub {
	font-size: 13px;
	font-weight: 500;
	color: var(--stowly-color-ink-soft);
	letter-spacing: 0;
}

.stowly-kpi-card__hint {
	font-size: 13px;
	line-height: 1.4;
	color: var(--stowly-color-ink-soft);
	margin-top: auto;
	/* Tekst-hints ("Ingen ulæste.") flugter med pill-knapperne i nabokortene. */
	display: flex;
	align-items: center;
	min-height: 35px;
}

.stowly-kpi-card__hint a {
	color: var(--stowly-color-ink);
	font-weight: 600;
	text-decoration: none;
}

.stowly-kpi-card__hint a:not(.stowly-kpi-card__cta):hover {
	text-decoration: none;
	color: var(--stowly-kpi-accent);
}

.stowly-kpi-card__cta.stowly-btn--ghost:hover,
.stowly-kpi-card__cta.stowly-btn--ghost:focus-visible {
	background: var(--stowly-color-surface-soft);
	color: var(--stowly-color-ink);
	border-color: var(--stowly-color-ink);
}

.stowly-kpi-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.stowly-kpi-card__link svg {
	transition: transform 160ms ease;
}

.stowly-kpi-card__link:hover svg {
	transform: translateX(3px);
}

/* Per-metric accent tokens. Colours chosen to be vivid enough to read
   against the soft background tint but still sit inside the same warm
   design palette. */
.stowly-kpi-card--income {
	--stowly-kpi-accent: #0f7a3d;
	--stowly-kpi-accent-soft: rgba(15, 122, 61, 0.1);
}

.stowly-kpi-card--available {
	--stowly-kpi-accent: #3b4cc2;
	--stowly-kpi-accent-soft: rgba(59, 76, 194, 0.1);
}

.stowly-kpi-card--pending {
	--stowly-kpi-accent: #c28400;
	--stowly-kpi-accent-soft: rgba(194, 132, 0, 0.12);
}

.stowly-kpi-card--messages {
	--stowly-kpi-accent: #b8356b;
	--stowly-kpi-accent-soft: rgba(184, 53, 107, 0.1);
}

@media (max-width: 640px) {
	.stowly-kpi-card {
		padding: 18px;
	}
	.stowly-kpi-card__value {
		font-size: 28px;
	}
}

/* Tap-target CTA used inside KPI cards (e.g. "Gennemgå nu / Læs nu").
 * Pill button is far easier to hit on mobile than a tiny text link. */
.stowly-kpi-card__cta {
	align-self: flex-start;
	gap: 6px;
}
.stowly-kpi-card__cta svg {
	transition: transform 160ms ease;
}
.stowly-kpi-card__cta:hover svg {
	transform: translateX(3px);
}

/* On very narrow screens we drop the explanatory `__hint` text so four
 * KPI cards can sit two-up with the value still visible. The CTA pill
 * survives because it's an actual interaction; the descriptive line is
 * the cheapest thing to hide. */
@media (max-width: 420px) {
	.stowly-kpi-grid {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	.stowly-kpi-card {
		padding: 14px;
		gap: 8px;
	}
	.stowly-kpi-card__hint:not(:has(.stowly-kpi-card__cta)) {
		display: none;
	}
	.stowly-kpi-card__hint:has(.stowly-kpi-card__cta) {
		font-size: 0;
	}
	.stowly-kpi-card__value {
		font-size: 24px;
	}
	.stowly-kpi-card__sub {
		font-size: 11px;
	}
	.stowly-kpi-card__icon {
		width: 30px;
		height: 30px;
	}
	.stowly-kpi-card__label {
		font-size: 10px;
	}
}

/* Activity feed */
.stowly-activity {
	background: var(--stowly-color-surface);
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-md);
	padding: 20px;
}
.stowly-activity h3 {
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 600;
}
.stowly-activity__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.stowly-activity__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid var(--stowly-color-line);
}
.stowly-activity__item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.stowly-activity__item:first-child {
	padding-top: 0;
}
.stowly-activity__icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--stowly-color-surface-soft);
	color: var(--stowly-color-ink);
}
.stowly-activity__icon svg {
	display: block;
	width: 18px;
	height: 18px;
}
.stowly-activity__icon--booking {
	background: #fff5e5;
	color: #8a5a00;
}
.stowly-activity__icon--message {
	background: #eef2ff;
	color: #3d4cb8;
}
.stowly-activity__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.stowly-activity__body strong {
	font-size: 14px;
	font-weight: 600;
}
.stowly-activity__body span {
	font-size: 13px;
	color: var(--stowly-color-ink-soft);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- Profile edit form ---------- */
.stowly-profile-tab__intro {
	color: var(--stowly-color-ink-soft);
	margin: 0 0 20px;
	font-size: 15px;
}

.stowly-profile-form {
	display: flex;
	flex-direction: column;
	gap: 22px;
	background: var(--stowly-color-surface);
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-md);
	padding: 24px;
	max-width: 720px;
}

/* Shared "card" wrapper used both by the avatar editor and the form
 * itself so the profile tab reads as a stack of distinct sections
 * instead of one long page. */
.stowly-profile-card {
	max-width: 720px;
}
.stowly-profile-card + .stowly-profile-card {
	margin-top: 18px;
}
/* The avatar editor already lives in `.stowly-profile-card` —
 * give it the same surface/border so the two cards match. */
.stowly-profile-card > .stowly-avatar-editor {
	background: var(--stowly-color-surface);
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-md);
	padding: 20px 24px;
}

/* Collapsible "Skift adgangskode" disclosure. Native <details> gives us
 * the open/close behaviour for free; we only style it. The disclosure
 * is auto-opened when the server flashes a password validation error
 * so the user lands directly on the relevant fields. */
.stowly-profile-form__disclosure {
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-sm);
	background: var(--stowly-color-surface-soft);
	transition: background 150ms ease;
}
.stowly-profile-form__disclosure[open] {
	background: var(--stowly-color-surface);
}
.stowly-profile-form__disclosure-summary {
	list-style: none;
	cursor: pointer;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--stowly-color-ink);
	user-select: none;
}
.stowly-profile-form__disclosure-summary::-webkit-details-marker {
	display: none;
}
.stowly-profile-form__disclosure-summary:focus-visible {
	outline: 2px solid var(--stowly-color-primary);
	outline-offset: 2px;
	border-radius: var(--stowly-radius-sm);
}
.stowly-profile-form__disclosure-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--stowly-color-ink-soft);
}
.stowly-profile-form__disclosure-chevron {
	margin-left: auto;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 160ms ease;
	color: var(--stowly-color-ink-soft);
}
.stowly-profile-form__disclosure[open] .stowly-profile-form__disclosure-chevron {
	transform: rotate(225deg);
}
.stowly-profile-form__disclosure-body {
	padding: 0 16px 16px;
}
.stowly-profile-form__disclosure-body .stowly-profile-form__hint {
	margin-top: -4px;
}

.stowly-profile-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.stowly-profile-form__grid label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--stowly-color-ink);
}
.stowly-profile-form__grid label span {
	font-size: 13px;
	color: var(--stowly-color-ink-soft);
}
.stowly-profile-form__grid input {
	padding: 11px 14px;
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-sm);
	font-size: 15px;
	font-family: inherit;
	background: #fff;
	color: var(--stowly-color-ink);
	transition: border-color 150ms ease, box-shadow 150ms ease;
}
.stowly-profile-form__grid input:focus {
	outline: none;
	border-color: var(--stowly-color-ink);
	box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

.stowly-profile-form__section {
	border: 0;
	border-top: 1px solid var(--stowly-color-line);
	padding: 18px 0 0;
	margin: 0;
}
.stowly-profile-form__section legend {
	font-size: 15px;
	font-weight: 600;
	padding: 0 0 4px;
	color: var(--stowly-color-ink);
}
.stowly-profile-form__hint {
	color: var(--stowly-color-ink-soft);
	font-size: 13px;
	margin: 0 0 12px;
}

.stowly-profile-form__actions {
	display: flex;
	justify-content: flex-start;
	padding-top: 4px;
}

@media (max-width: 600px) {
	.stowly-profile-form__grid {
		grid-template-columns: 1fr;
	}
	.stowly-profile-form {
		padding: 18px;
	}
}

/* ==============================================================
   GDPR / Privacy panel inside the profile tab
   ============================================================== */

.stowly-privacy-panel {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--stowly-color-line);
}

.stowly-privacy-panel > h2 {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--stowly-color-ink);
}

.stowly-privacy-panel__intro {
	margin: 0 0 16px;
	color: var(--stowly-color-ink-soft);
	font-size: 14.5px;
	line-height: 1.55;
}

.stowly-privacy-panel__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.stowly-privacy-panel__card {
	padding: 22px 22px;
	background: var(--stowly-color-surface);
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-lg);
	box-shadow: var(--stowly-shadow-xs);
}

.stowly-privacy-panel__card h3 {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	color: var(--stowly-color-ink);
}

.stowly-privacy-panel__card p {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--stowly-color-ink-soft);
}

.stowly-privacy-panel__card--danger {
	border-color: rgba(220, 38, 38, 0.25);
	background: rgba(220, 38, 38, 0.03);
}

.stowly-privacy-panel__hint {
	font-size: 13px !important;
	color: var(--stowly-color-ink-soft);
}

.stowly-privacy-panel__delete-form {
	display: grid;
	gap: 10px;
}

.stowly-privacy-panel__confirm-input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--stowly-color-line-strong);
	border-radius: var(--stowly-radius-md);
	font-size: 14px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.stowly-privacy-panel__confirm-input:focus {
	outline: none;
	border-color: var(--stowly-color-primary);
	box-shadow: 0 0 0 3px rgba(var(--stowly-color-primary-rgb), 0.15);
}

@media (max-width: 720px) {
	.stowly-privacy-panel__grid {
		grid-template-columns: 1fr;
	}
}

/* ==============================================================
   Oplysninger-fanen i udbyder-dashboardet: alle sektioner fylder
   hele bredden, så der ikke står tomt whitespace til højre (fx
   profilkortet og skatte-/entity-boksene var tidligere capped til
   640–720px). Scopes til provider-dashboardet, så kundernes
   "Min konto" beholder sin smallere, læsevenlige formbredde.
   ============================================================== */
[data-tabs="provider-dashboard"] [data-tab-panel="tab-profile"] .stowly-profile-form,
[data-tabs="provider-dashboard"] [data-tab-panel="tab-profile"] .stowly-profile-card,
[data-tabs="provider-dashboard"] [data-tab-panel="tab-profile"] .stowly-entity-type__options,
[data-tabs="provider-dashboard"] [data-tab-panel="tab-profile"] .stowly-tax__missing-type,
[data-tabs="provider-dashboard"] [data-tab-panel="tab-profile"] .stowly-tax__bundfradrag-box {
	max-width: none;
}

/* ==============================================================
   Pending customer reviews (tovejs reviews)
   — Lives on the provider dashboard's bookings tab: a compact
     accordion list of completed reservations that still owe the
     provider's "review of the customer".
   ============================================================== */
.stowly-pending-customer-reviews {
	margin: 0 0 24px;
	padding: 18px 20px;
	background: linear-gradient(135deg, #fff6e1 0%, #ffeace 100%);
	border: 1px solid rgba(194, 119, 15, 0.25);
	border-radius: var(--stowly-radius-md, 14px);
}

.stowly-pending-customer-reviews h3 {
	margin: 0 0 4px;
	font-size: 16px;
	color: #7a4500;
}

.stowly-pending-customer-reviews__hint {
	margin: 0 0 14px;
	font-size: 13px;
	color: #7a4500;
	line-height: 1.5;
}

.stowly-pending-customer-reviews__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 8px;
}

.stowly-pending-customer-reviews__item {
	background: #fff;
	border: 1px solid rgba(194, 119, 15, 0.18);
	border-radius: var(--stowly-radius-sm, 10px);
	overflow: hidden;
}

.stowly-pending-customer-reviews__item details summary {
	cursor: pointer;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	list-style: none;
	color: var(--stowly-color-ink);
	font-size: 14px;
}

.stowly-pending-customer-reviews__item details summary::-webkit-details-marker {
	display: none;
}

.stowly-pending-customer-reviews__item details summary::after {
	content: "Anmeld →";
	font-size: 13px;
	color: var(--stowly-color-primary);
	font-weight: 500;
	white-space: nowrap;
}

.stowly-pending-customer-reviews__item details[open] summary::after {
	content: "Skjul";
	color: var(--stowly-color-ink-soft, #717171);
}

.stowly-pending-customer-reviews__meta {
	font-size: 12px;
	color: var(--stowly-color-ink-soft, #717171);
	display: block;
	margin-top: 2px;
}

.stowly-customer-review-form {
	padding: 12px 16px 16px;
	border-top: 1px solid var(--stowly-color-line);
	display: grid;
	gap: 10px;
}

/* ==============================================================
   Dispute / "Rapportér problem" widget
   ============================================================== */
.stowly-dispute-widget {
	padding: 0;
	overflow: hidden;
	background: linear-gradient(
		165deg,
		var(--stowly-color-surface-soft, #f7f7f7) 0%,
		#fff 48%
	);
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-lg, 16px);
	margin: 6px 0 18px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.stowly-dispute-widget__head {
	padding: 16px 18px 4px;
}

.stowly-dispute-widget__head h3 {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.02em;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--stowly-color-ink);
	line-height: 1.25;
}

.stowly-dispute-widget__head h3 .stowly-icon {
	flex-shrink: 0;
	margin-top: 1px;
	color: var(--stowly-color-primary);
}

.stowly-dispute-widget__head p {
	margin: 0 0 10px;
	font-size: 13px;
	color: var(--stowly-color-ink-soft, #717171);
	line-height: 1.55;
	max-width: 52rem;
}

.stowly-dispute-widget__toggle {
	margin: 4px 18px 16px;
}

.stowly-dispute-widget__toggle summary {
	cursor: pointer;
	padding: 10px 16px;
	border-radius: 999px;
	border: 1px solid var(--stowly-color-line);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--stowly-color-ink);
	list-style: none;
	background: #fff;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.stowly-dispute-widget__toggle summary::-webkit-details-marker { display: none; }

.stowly-dispute-widget__toggle[open] summary {
	background: rgba(var(--stowly-color-primary-rgb), 0.08);
	border-color: rgba(var(--stowly-color-primary-rgb), 0.28);
	color: var(--stowly-color-primary);
}

.stowly-dispute-widget__form {
	display: grid;
	gap: 10px;
	margin-top: 12px;
}

.stowly-dispute-widget__form .stowly-field input[type="text"],
.stowly-dispute-widget__form .stowly-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-sm, 10px);
	font-size: 14px;
	font-family: inherit;
}

.stowly-dispute-widget__hint {
	font-size: 12px;
	color: var(--stowly-color-ink-soft, #717171);
	margin: 0;
}

.stowly-dispute-widget__case {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px 18px;
	flex-wrap: wrap;
	padding: 14px 18px 16px;
	margin-top: 2px;
	border-top: 1px solid var(--stowly-color-line);
	background: rgba(255, 255, 255, 0.65);
}

.stowly-dispute-widget__case-main {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	min-width: 0;
	flex: 1 1 200px;
}

.stowly-dispute-widget__case-kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--stowly-color-ink-soft, #717171);
}

.stowly-dispute-widget__case-subject {
	font-size: 15px;
	font-weight: 600;
	color: var(--stowly-color-ink);
	line-height: 1.3;
	word-break: break-word;
}

.stowly-dispute-widget__case-cta {
	flex-shrink: 0;
	align-self: center;
}

@media (max-width: 480px) {
	.stowly-dispute-widget__case {
		flex-direction: column;
		align-items: stretch;
	}
	.stowly-dispute-widget__case-cta {
		align-self: stretch;
		justify-content: center;
	}
}

.stowly-dispute-status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	background: #f3f3f3;
	color: #555;
}

.stowly-dispute-status--open,
.stowly-dispute-status--under_review {
	background: #fff6e1;
	color: #7a4500;
}

.stowly-dispute-status--resolved_refund,
.stowly-dispute-status--resolved_partial {
	background: #e3f8ec;
	color: #118043;
}

.stowly-dispute-status--resolved_denied,
.stowly-dispute-status--closed {
	background: #f3f3f3;
	color: #555;
}

.stowly-dispute-widget-row td {
	background: transparent;
	padding: 0 0 12px !important;
	vertical-align: top;
}

@media (min-width: 721px) {
	.stowly-dispute-widget-row td {
		padding: 0 12px 14px !important;
	}
}


/* ---------- Section header (table + form pages) ---------- */
.stowly-section-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 16px;
	margin-bottom: 16px;
}

/* Beskrivelsen lægger sig under overskriften (fuld bredde) i stedet for
   at blive skubbet ud i højre side af space-between. Knapper og andre
   actions bliver stående til højre for h2/h3. */
.stowly-section-header > p {
	flex: 1 1 100%;
	margin: 0;
	max-width: 64ch;
}
.stowly-section-header h2,
.stowly-section-header h3 {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

/* Standardize top-level headline across every dashboard tab
   (Oversigt, Annoncer, Opret, Bookinger, Beskeder, Oplysninger). */
.stowly-tab-panel h2,
.stowly-tab-panel .stowly-section-header h2,
.stowly-provider-overview > h2,
.stowly-customer-overview > h2,
.stowly-profile-tab > h2,
.stowly-provider-public-profile > h2 {
	font-size: 22px !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em !important;
	line-height: 1.25 !important;
	margin: 0 0 4px !important;
}

/* ---------- Provider public profile editor ---------- */
/* Sits inside the existing Profile tab as its own card so it visually
   separates the "personal" account info above from the "public-facing"
   business info below. */
.stowly-provider-public-profile {
	margin-top: 32px;
	padding-top: 28px;
	border-top: 1px solid var(--stowly-color-line);
}

.stowly-provider-profile-form {
	margin-top: 16px;
}

/* Logo block — round preview on the left, file input + remove on the right. */
.stowly-provider-profile-form__logo {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 16px;
	margin-bottom: 20px;
	background: var(--stowly-color-surface-soft);
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-md);
}

.stowly-provider-profile-form__logo-preview {
	flex: 0 0 auto;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--stowly-color-surface);
	border: 1px solid var(--stowly-color-line);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--stowly-color-ink-soft);
	font-size: 28px;
	font-weight: 700;
}

.stowly-provider-profile-form__logo-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.stowly-provider-profile-form__logo-controls {
	flex: 1 1 auto;
	min-width: 0;
}

.stowly-provider-profile-form__logo-controls input[type="file"] {
	display: block;
	margin-top: 4px;
	font-size: 13px;
}

.stowly-provider-profile-form__logo-remove {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	font-size: 13px;
	color: var(--stowly-color-ink-soft);
	cursor: pointer;
}

/* Reuse stowly-profile-form__grid layout, but allow textarea + tagline
   to span full width for breathing room. */
.stowly-provider-profile-form .stowly-profile-form__full {
	grid-column: 1 / -1;
}

.stowly-provider-profile-form select,
.stowly-provider-profile-form textarea {
	width: 100%;
	padding: 11px 13px;
	font-size: 14px;
	border: 1px solid var(--stowly-color-line);
	border-radius: 10px;
	background: var(--stowly-color-surface);
	color: var(--stowly-color-ink);
	font-family: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.stowly-provider-profile-form textarea {
	resize: vertical;
	min-height: 110px;
	line-height: 1.5;
}

.stowly-provider-profile-form select:focus,
.stowly-provider-profile-form textarea:focus {
	outline: none;
	border-color: var(--stowly-color-ink);
	box-shadow: 0 0 0 3px rgba(34, 34, 34, 0.08);
}

@media (max-width: 540px) {
	.stowly-provider-profile-form__logo {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Sub-headings inside sections (e.g. form sections, empty states) stay smaller. */
.stowly-tab-panel .stowly-listing-form__section h3,
.stowly-tab-panel .stowly-empty-state h3,
.stowly-tab-panel .stowly-activity h3 {
	font-size: 16px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
}
.stowly-section-header p {
	margin: 4px 0 0;
	color: var(--stowly-color-ink-soft);
	font-size: 14px;
}

/* ---------- Empty state ----------
 * Soft pink gradient card — much more inviting than a grey dashed
 * box, and it ties the empty-state CTA visually to the rest of the
 * brand (pink primary, hero gradient, etc.). Falls back gracefully
 * if the variables aren't defined yet. */
.stowly-empty-state {
	position: relative;
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-md);
	padding: 48px 24px;
	text-align: center;
	background: linear-gradient(160deg, var(--stowly-color-primary-soft) 0%, var(--stowly-color-surface) 80%);
	color: var(--stowly-color-ink-soft);
	overflow: hidden;
	isolation: isolate;
}
.stowly-empty-state::before {
	content: "";
	position: absolute;
	top: -40px;
	right: -40px;
	width: 180px;
	height: 180px;
	background: radial-gradient(circle, rgba(var(--stowly-color-primary-rgb), 0.08) 0%, transparent 70%);
	pointer-events: none;
	z-index: -1;
}
.stowly-empty-state__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 6px 18px rgba(var(--stowly-color-primary-rgb), 0.12), 0 1px 2px rgba(15, 23, 42, 0.06);
	margin-bottom: 12px;
	color: var(--stowly-color-primary);
}
.stowly-empty-state h3 {
	margin: 0 0 6px;
	color: var(--stowly-color-ink);
	font-size: 18px;
	font-weight: 600;
}
.stowly-empty-state p {
	margin: 0 0 20px;
	font-size: 14px;
}
.stowly-empty-state p:last-child {
	margin-bottom: 0;
}
.stowly-empty-state .stowly-btn {
	margin-top: 4px;
}

.stowly-muted {
	color: var(--stowly-color-ink-soft);
	font-size: 13px;
}
.stowly-bookings-table__actions {
	text-align: right;
	white-space: nowrap;
	width: 1%;
}

/* Booking-specific table row bits */
.stowly-bookings-table--bookings td {
	vertical-align: middle;
}

.stowly-booking-customer {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
.stowly-booking-customer__body {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.stowly-booking-customer__body strong {
	font-weight: 600;
	color: var(--stowly-color-ink);
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.stowly-booking-customer__body span {
	font-size: 12px;
	color: var(--stowly-color-ink-soft);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.stowly-avatar {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: linear-gradient(135deg, #e6f2f1 0%, #cfe7e3 100%);
	color: #b8356b;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.02em;
}

.stowly-booking-meta {
	font-size: 12px;
	color: var(--stowly-color-ink-soft);
	margin-top: 2px;
}

.stowly-bookings-table .stowly-booking-period {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	line-height: 1.35;
}
.stowly-bookings-table .stowly-booking-period__date {
	font-size: 13px;
	color: var(--stowly-color-ink);
	font-weight: 500;
	display: block;
}
.stowly-bookings-table .stowly-booking-period__date--end {
	color: var(--stowly-color-ink-soft);
	font-size: 12.5px;
	font-weight: 400;
}

/* Icon-only button */
.stowly-btn.stowly-btn--icon-only {
	padding: 8px;
	width: 34px;
	height: 34px;
	justify-content: center;
	gap: 0;
}

/* Make sure booking action stack is neat */
.stowly-bookings-table--bookings .stowly-actions-stack {
	display: inline-flex;
	flex-wrap: nowrap;
	gap: 6px;
	justify-content: flex-end;
}

@media (max-width: 900px) {
	.stowly-bookings-table--bookings .stowly-actions-stack {
		flex-wrap: wrap;
	}
	.stowly-booking-customer__body span {
		max-width: 160px;
	}
}

/* ---------- Listing status pills (extra variants) ---------- */
.stowly-status--publish {
	background: #e7f6ee;
	border-color: #a9dcbf;
	color: #1f7a45;
}
.stowly-status--pending {
	background: #fff5e5;
	border-color: #f7d8a3;
	color: #8a5a00;
}
.stowly-status--draft {
	background: var(--stowly-color-surface-soft);
	border-color: var(--stowly-color-line);
	color: var(--stowly-color-ink-soft);
}
.stowly-status--private,
.stowly-status--future {
	background: #eef2ff;
	border-color: #c4cefc;
	color: #3d4cb8;
}


.stowly-dialog {
	padding: 0;
	border: 0;
	border-radius: 20px;
	background: var(--stowly-color-surface);
	box-shadow: 0 24px 64px rgba(17, 17, 17, 0.22),
		0 4px 16px rgba(17, 17, 17, 0.10);
	max-width: min(520px, calc(100vw - 32px));
	width: 100%;
	color: var(--stowly-color-ink);
	/* Browsers default <dialog> to overflow:auto, hvilket ville
	   give en intern scrollbar når Flatpickr-kalenderen åbner
	   og når ned under bunden. Vi lader den i stedet poppe pænt
	   ud — dialogen er stor nok til at rumme kalenderen, men
	   overflow:visible sikrer også at mindre skærme ikke får en
	   intern scrollbar på selve modalen. */
	overflow: visible;
}

.stowly-dialog::backdrop {
	background: rgba(17, 17, 17, 0.38);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.stowly-dialog__form {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.stowly-dialog__head {
	padding: 22px 24px 8px;
}
.stowly-dialog__title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.stowly-dialog__sub {
	margin: 4px 0 0;
	color: var(--stowly-color-ink-soft);
	font-size: 13px;
	min-height: 1.4em; /* reserver plads så layout ikke hopper før JS fylder titlen ind */
}

.stowly-dialog__body {
	padding: 12px 24px 4px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.stowly-dialog__lede {
	margin: 0;
	font-size: 13px;
	color: var(--stowly-color-ink-soft);
	line-height: 1.55;
}

.stowly-dialog__field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.stowly-dialog__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.stowly-dialog__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--stowly-color-ink-soft);
	text-transform: uppercase;
}
.stowly-dialog__field input[type="date"],
.stowly-dialog__field input[type="text"] {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--stowly-color-line, #e9e6e4);
	border-radius: 12px;
	background: #fff;
	font-size: 14px;
	color: var(--stowly-color-ink);
	transition: border-color 120ms ease, box-shadow 120ms ease;
}
.stowly-dialog__field input:focus {
	outline: none;
	border-color: var(--stowly-color-ink, #111);
	box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}
.stowly-dialog__field input:disabled {
	background: var(--stowly-color-surface-soft, #f7f7f7);
	color: var(--stowly-color-ink-soft);
	cursor: not-allowed;
}

/* Flatpickr med `static: true` pakker input + alt-input + kalender
   i en ekstra .flatpickr-wrapper. Vi skal bare sørge for at wrapperen
   fylder bredden af feltet, og at popup-kalenderen får z-index nok
   til at lægge sig over både sig selv og andre dialog-felter. */
.stowly-dialog__field .flatpickr-wrapper {
	position: relative;
	display: block;
	width: 100%;
}

.stowly-dialog__field .flatpickr-calendar.static {
	top: calc(100% + 6px);
	left: 0;
	right: auto;
	z-index: 40;
}

/* Når brugeren klikker "Til"-feltet (som ligger i højre kolonne),
   skal popup'en stadig åbne ind mod midten — ellers risikerer den
   at flugte med dialogens højre kant og blive klippet af overflowing
   scrollbar på små skærme. */
.stowly-dialog__field-row > .stowly-dialog__field + .stowly-dialog__field .flatpickr-calendar.static {
	left: auto;
	right: 0;
}

.stowly-dialog__checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--stowly-color-line, #e9e6e4);
	border-radius: 12px;
	background: var(--stowly-color-surface-soft, #fafaf9);
	font-size: 13px;
	line-height: 1.45;
	color: var(--stowly-color-ink);
	cursor: pointer;
	transition: border-color 120ms ease, background 120ms ease;
}
.stowly-dialog__checkbox:hover {
	border-color: var(--stowly-color-line-strong, #d6d2ce);
}
.stowly-dialog__checkbox input {
	margin-top: 2px;
}

.stowly-dialog__foot {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 16px 24px 22px;
	border-top: 1px solid var(--stowly-color-line, #e9e6e4);
	margin-top: 12px;
	background: var(--stowly-color-surface-soft, #fafaf9);
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}

@media (max-width: 520px) {
	.stowly-dialog {
		border-radius: 16px;
	}
	.stowly-dialog__field-row {
		grid-template-columns: 1fr;
	}
	.stowly-dialog__foot {
		flex-direction: column-reverse;
	}
	.stowly-dialog__foot .stowly-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ============================================================ *
 * Kvitterings-popup (kunde-dashboard)
 *
 * Bruger native <dialog> — vi styler både det "rigtige" åbne
 * state (`[open]` i supporting browsers) og vores display-based
 * fallback (`.is-open-fallback`) ens.
 * ============================================================ */
.stowly-receipt-modal {
	padding: 0;
	border: 0;
	background: transparent;
	max-width: min(680px, calc(100vw - 32px));
	width: 100%;
	max-height: calc(100vh - 48px);
	color: var(--stowly-color-ink, #1f1d1a);
}
.stowly-receipt-modal::backdrop {
	background: rgba(20, 18, 15, 0.45);
	backdrop-filter: blur(2px);
}
.stowly-receipt-modal:not([open]) {
	display: none;
}
.stowly-receipt-modal.is-open-fallback {
	display: block;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 100000;
}
body.stowly-receipt-modal-open::before {
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(20, 18, 15, 0.45);
	z-index: 99999;
}

/* Lås baggrundsiden fra scroll mens kvitterings-modalen er åben.
   `overflow: hidden` på både html og body dækker alle browser-
   kvarks (Safari kan ellers stadig scrolle selv med kun body låst).
   Selve modal-indholdet har sit eget `overflow-y: auto` på
   .stowly-receipt-modal__body så kvitteringer der er højere end
   vinduet stadig kan scrolles internt. */
html:has(body.stowly-receipt-modal-open),
body.stowly-receipt-modal-open {
	overflow: hidden !important;
}

.stowly-receipt-modal__inner {
	position: relative;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
	max-height: calc(100vh - 48px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	/* Én kilde til mål for luk-knappen + den "sikre" zone i body så
	   kvitterings-header (Kvittering / STY-…) aldrig tegnes under knappen. */
	--stowly-receipt-close-size: 36px;
	--stowly-receipt-close-inset: 12px;
}

/* Kryds-knappen: højt oppe i hjørnet. Body-padding beregnes ud fra
   samme variabler som __inner, så der altid er luft svarende til
   knappens boks + luftrum (ingen overlap med indhold). */
.stowly-receipt-modal__close {
	position: absolute;
	top: var(--stowly-receipt-close-inset);
	right: var(--stowly-receipt-close-inset);
	width: var(--stowly-receipt-close-size);
	height: var(--stowly-receipt-close-size);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 1px solid var(--stowly-color-line, #ece8df);
	background: #fff;
	color: var(--stowly-color-ink, #1f1d1a);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Parent-theme (Astra) sætter en generel `button:hover { background:
   #... blå }` regel der ellers vil farve krydset blåt. Vi låser
   baggrund/kant/farve eksplicit på alle interaktive states —
   præcis samme pattern som favoritkanpens. Hover giver stadig
   et subtilt shift via bevidst CSS herunder. */
.stowly-receipt-modal__close,
.stowly-receipt-modal__close:hover,
.stowly-receipt-modal__close:focus,
.stowly-receipt-modal__close:focus-visible,
.stowly-receipt-modal__close:active {
	background: #fff;
	color: var(--stowly-color-ink, #1f1d1a);
	border: 1px solid var(--stowly-color-line, #ece8df);
	outline: none;
	box-shadow: none;
}

.stowly-receipt-modal__close:hover {
	background: var(--stowly-color-surface-soft, #faf9f6);
	border-color: var(--stowly-color-ink, #1f1d1a);
}
.stowly-receipt-modal__body {
	/* Luft over og til højre = luk-knappens boks + ekstra margin, så
	   .stowly-receipt__header (især højre kolonne) ikke overlapper. */
	padding-top: calc(
		var(--stowly-receipt-close-inset) + var(--stowly-receipt-close-size) + 20px
	);
	padding-right: calc(
		var(--stowly-receipt-close-inset) + var(--stowly-receipt-close-size) + 16px
	);
	padding-bottom: 16px;
	padding-left: 36px;
	overflow-y: auto;
	flex: 1 1 auto;
}
.stowly-receipt-modal__loading,
.stowly-receipt-modal__error {
	margin: 40px 0;
	text-align: center;
	color: var(--stowly-color-muted, #7a756d);
	font-size: 14px;
}
.stowly-receipt-modal__error {
	color: #a8392a;
}
.stowly-receipt-modal__actions {
	padding: 14px 20px;
	border-top: 1px solid var(--stowly-color-line, #ece8df);
	background: var(--stowly-color-surface-soft, #faf9f6);
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	flex-wrap: wrap;
}

/* Kvittering-body — genbruges både i modalen og på /kvittering/-siden
 * så de altid ser identisk ud. */
.stowly-receipt__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	border-bottom: 1px solid var(--stowly-color-line, #ece8df);
	padding-bottom: 20px;
	margin-bottom: 20px;
}
.stowly-receipt__brand {
	font-weight: 700;
	font-size: 20px;
}
.stowly-receipt__brand small {
	display: block;
	font-weight: 400;
	color: var(--stowly-color-muted, #7a756d);
	font-size: 12px;
	margin-top: 2px;
}
.stowly-receipt__no {
	font-size: 13px;
	color: var(--stowly-color-muted, #7a756d);
	text-align: right;
}
.stowly-receipt__no strong {
	display: block;
	color: var(--stowly-color-ink, #1f1d1a);
	font-size: 14px;
	margin-top: 2px;
}
.stowly-receipt__meta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 16px;
	font-size: 14px;
	margin: 0 0 16px;
}
.stowly-receipt__meta dt {
	color: var(--stowly-color-muted, #7a756d);
}
.stowly-receipt__meta dd {
	margin: 0;
}

@media (max-width: 560px) {
	.stowly-receipt-modal__inner {
		--stowly-receipt-close-inset: 10px;
		--stowly-receipt-close-size: 34px;
	}
	.stowly-receipt-modal__body {
		padding-top: calc(
			var(--stowly-receipt-close-inset) + var(--stowly-receipt-close-size) + 16px
		);
		padding-right: calc(
			var(--stowly-receipt-close-inset) + var(--stowly-receipt-close-size) + 12px
		);
		padding-bottom: 12px;
		padding-left: 20px;
	}
	.stowly-receipt-modal__actions {
		padding: 12px 16px;
	}
	.stowly-receipt-modal__actions .stowly-btn {
		flex: 1 1 auto;
		justify-content: center;
	}
	.stowly-receipt__header {
		flex-direction: column;
	}
	.stowly-receipt__no {
		text-align: left;
	}
}

/* ============================================================
   Bookings-table → card-layout under 720 px.
   Skifter row-baseret tabel til en stak af "kort" ved at:
     - skjule <thead>
     - lave hver <tr> til en bordered card
     - lave hvert <td> til en flex-row med data-label til venstre
   Gælder kunde-bookings, provider-bookings og provider-listings.
   Eksisterende --customer specialregler under 720 px (knap-stak)
   matcher stadig — vi rør kun row/cell-strukturen.
   ============================================================ */
@media (max-width: 720px) {
	.stowly-bookings-table-wrap:has(.stowly-bookings-table--customer),
	.stowly-bookings-table-wrap:has(.stowly-bookings-table--bookings),
	.stowly-bookings-table-wrap:has(.stowly-bookings-table--listings) {
		overflow-x: visible;
		border: 0;
	}
	.stowly-bookings-table--customer,
	.stowly-bookings-table--bookings,
	.stowly-bookings-table--listings {
		display: block;
		width: 100%;
		border-collapse: separate;
		background: transparent;
	}
	.stowly-bookings-table--customer thead,
	.stowly-bookings-table--bookings thead,
	.stowly-bookings-table--listings thead {
		display: none;
	}
	.stowly-bookings-table--customer tbody,
	.stowly-bookings-table--bookings tbody,
	.stowly-bookings-table--listings tbody {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.stowly-bookings-table--customer tbody tr,
	.stowly-bookings-table--bookings tbody tr,
	.stowly-bookings-table--listings tbody tr {
		display: block;
		background: var(--stowly-color-surface);
		border: 1px solid var(--stowly-color-line);
		border-radius: var(--stowly-radius-md);
		padding: 12px 14px;
	}
	.stowly-bookings-table--customer tbody tr:hover td,
	.stowly-bookings-table--bookings tbody tr:hover td,
	.stowly-bookings-table--listings tbody tr:hover td {
		background: transparent;
	}
	.stowly-bookings-table--customer tbody td,
	.stowly-bookings-table--bookings tbody td,
	.stowly-bookings-table--listings tbody td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 8px 0;
		border: 0;
		border-bottom: 1px solid var(--stowly-color-line);
		text-align: right;
		min-width: 0;
		white-space: normal;
	}
	.stowly-bookings-table--customer tbody td:last-child,
	.stowly-bookings-table--bookings tbody td:last-child,
	.stowly-bookings-table--listings tbody td:last-child {
		border-bottom: 0;
		padding-bottom: 0;
	}
	.stowly-bookings-table--customer tbody td:first-child,
	.stowly-bookings-table--bookings tbody td:first-child,
	.stowly-bookings-table--listings tbody td:first-child {
		padding-top: 0;
	}
	.stowly-bookings-table--customer tbody td[data-label]::before,
	.stowly-bookings-table--bookings tbody td[data-label]::before,
	.stowly-bookings-table--listings tbody td[data-label]::before {
		content: attr(data-label);
		flex: 0 0 auto;
		font-size: 12px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--stowly-color-ink-soft);
		text-align: left;
	}
	.stowly-bookings-table--customer tbody .stowly-bookings-table__actions,
	.stowly-bookings-table--customer tbody .stowly-bookings-table__actions-td,
	.stowly-bookings-table--bookings tbody .stowly-bookings-table__actions,
	.stowly-bookings-table--listings tbody .stowly-bookings-table__actions {
		flex-wrap: wrap;
		justify-content: flex-end;
		text-align: right;
		width: auto;
	}
	.stowly-bookings-table--customer tbody .stowly-bookings-table__actions::before,
	.stowly-bookings-table--customer tbody .stowly-bookings-table__actions-td::before,
	.stowly-bookings-table--bookings tbody .stowly-bookings-table__actions::before,
	.stowly-bookings-table--listings tbody .stowly-bookings-table__actions::before {
		display: none;
	}
	/* Customer: status-cell skal igen tillade brydning så pille +
	 * deadline står lige under hinanden — ikke side om side. */
	.stowly-bookings-table--customer tbody .stowly-bookings-table__status-cell {
		flex-wrap: wrap;
		justify-content: flex-end;
	}
	.stowly-bookings-table--customer tbody .stowly-bookings-table__status-cell .stowly-pay-deadline {
		flex-basis: 100%;
		text-align: right;
		margin-top: 0;
	}
	/* Period på kortet: vis start → slut side om side så det fylder
	 * mindre end den lodrette stak fra desktop-layoutet. */
	.stowly-bookings-table--customer tbody .stowly-bookings-table__period .stowly-booking-period__date,
	.stowly-bookings-table--bookings tbody .stowly-booking-period .stowly-booking-period__date,
	.stowly-bookings-table--listings tbody .stowly-booking-period .stowly-booking-period__date {
		display: inline-block;
	}
	/* Customer-specifikt: action-cell tager nu hele bunden af kortet. */
	.stowly-bookings-table--customer tbody .stowly-bookings-table__actions-td {
		display: block;
		text-align: left;
		padding-top: 12px;
	}
	.stowly-bookings-table--customer tbody .stowly-bookings-table__actions-td .stowly-actions-stack {
		justify-content: flex-start;
		gap: 8px;
	}

	/* Booking + tvist som ét kort (kunde) */
	.stowly-bookings-table--customer tbody tr:not(.stowly-dispute-widget-row):has(+ tr.stowly-dispute-widget-row) {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
	.stowly-bookings-table--customer tbody tr.stowly-dispute-widget-row {
		margin-top: -12px;
		border-top: 0;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		padding: 0 14px 12px;
	}
	.stowly-bookings-table--customer tbody tr.stowly-dispute-widget-row td {
		padding: 0 !important;
		border: 0;
	}
	.stowly-bookings-table--customer tbody tr.stowly-dispute-widget-row .stowly-dispute-widget {
		margin: 0;
		border-radius: 0 0 var(--stowly-radius-md) var(--stowly-radius-md);
		box-shadow: none;
		border-top: 0;
	}

	/* "Mere..." overflow inside booking rows. The native <details>
	 * element gives us click-to-expand for free; we style the summary
	 * to look like a ghost pill and float the body as an absolutely
	 * positioned popover so it doesn't push the booking card up.
	 */
	.stowly-actions-overflow {
		position: relative;
		margin: 0;
	}
	.stowly-actions-overflow > summary {
		list-style: none;
		cursor: pointer;
	}
	.stowly-actions-overflow > summary::-webkit-details-marker {
		display: none;
	}
	.stowly-actions-overflow__body {
		position: absolute;
		right: 0;
		top: calc(100% + 6px);
		min-width: 180px;
		padding: 8px;
		background: var(--stowly-color-surface);
		border: 1px solid var(--stowly-color-line);
		border-radius: var(--stowly-radius-sm);
		box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
		display: flex;
		flex-direction: column;
		gap: 6px;
		z-index: 20;
	}
	.stowly-actions-overflow__body > .stowly-btn,
	.stowly-actions-overflow__body .stowly-inline-form > .stowly-btn,
	.stowly-actions-overflow__body details > summary {
		width: 100%;
		justify-content: flex-start;
	}
	.stowly-actions-overflow__body .stowly-inline-form {
		display: block;
		margin: 0;
	}
}

/* Provider: integration (eksport/import) under booking-tabel */
.stowly-provider-integration {
	margin-top: 32px;
	padding: 22px 20px 20px;
	border-radius: var(--stowly-radius-md, 12px);
	border: 1px solid var(--stowly-color-line);
	background: linear-gradient(
		165deg,
		var(--stowly-color-surface) 0%,
		var(--stowly-color-surface-2, #f8fafc) 100%
	);
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
.stowly-provider-integration__card.stowly-profile-card {
	margin-bottom: 0;
	box-shadow: none;
	border: 0;
	background: transparent;
	padding: 0;
	max-width: none;
}
.stowly-bookings-table-wrap--paged {
	margin-bottom: 0;
}
.stowly-bookings-table--bookings tbody tr.stowly-booking-dashboard-row--collapsed {
	display: none !important;
}
.stowly-bookings-load-more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	padding: 14px 0 6px;
	margin-top: 4px;
	border-top: 1px solid var(--stowly-color-line);
}
.stowly-bookings-load-more__hint {
	font-size: 0.875rem;
	color: var(--stowly-color-muted, #64748b);
}

/* Provider: booking-feed (CSV/XML) under Bookinger */
.stowly-bookings-export {
	margin-bottom: 0;
}
.stowly-bookings-export__title {
	margin: 0 0 8px;
	font-size: 1.05rem;
}
.stowly-bookings-export__intro {
	margin: 0 0 16px;
	color: var(--stowly-color-muted, #64748b);
	font-size: 0.95rem;
	line-height: 1.45;
}
.stowly-bookings-export__urls {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 12px;
}
.stowly-bookings-export__label span {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	margin-bottom: 4px;
	color: var(--stowly-color-muted, #64748b);
}
.stowly-bookings-export__input {
	width: 100%;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.8rem;
	padding: 8px 10px;
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-sm, 6px);
	background: var(--stowly-color-surface-2, #f8fafc);
}
.stowly-bookings-export__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 0 0 12px;
}
.stowly-bookings-export__rotate {
	margin: 0 0 8px;
}
.stowly-bookings-export__dochint {
	margin: -4px 0 14px;
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--stowly-color-muted, #64748b);
}
.stowly-bookings-export__dochint code {
	font-size: 0.82em;
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--stowly-color-surface-2, #f1f5f9);
	border: 1px solid var(--stowly-color-line);
}

.stowly-provider-integration .stowly-bookings-export__details {
	margin-top: 12px;
	padding-top: 0;
	border-top: 0;
}
.stowly-provider-integration .stowly-bookings-export__details + .stowly-bookings-export__details {
	margin-top: 10px;
}
.stowly-provider-integration .stowly-bookings-export__details summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 14px;
	margin: 0;
	border-radius: var(--stowly-radius-sm, 8px);
	font-weight: 600;
	font-size: 0.94rem;
	color: var(--stowly-color-ink, #0f172a);
	background: var(--stowly-color-surface-2, #f8fafc);
	border: 1px solid var(--stowly-color-line);
	cursor: pointer;
	user-select: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.stowly-provider-integration .stowly-bookings-export__details summary::-webkit-details-marker {
	display: none;
}
.stowly-provider-integration .stowly-bookings-export__details summary::after {
	content: "";
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
	margin-top: -2px;
	border-right: 2px solid var(--stowly-color-muted, #64748b);
	border-bottom: 2px solid var(--stowly-color-muted, #64748b);
	transform: rotate(45deg);
	opacity: 0.75;
	transition: transform 0.18s ease, opacity 0.15s ease;
}
.stowly-provider-integration .stowly-bookings-export__details[open] summary::after {
	transform: rotate(-135deg);
	margin-top: 2px;
}
.stowly-provider-integration .stowly-bookings-export__details summary:hover {
	background: var(--stowly-color-surface);
	border-color: var(--stowly-color-ink-soft, #cbd5e1);
}
.stowly-provider-integration .stowly-bookings-export__details summary:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.12);
}
.stowly-provider-integration .stowly-bookings-export__details[open] summary {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-color: transparent;
	background: var(--stowly-color-surface);
}
.stowly-provider-integration .stowly-bookings-export__details-body {
	margin-top: 0;
	padding: 14px 16px 16px;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--stowly-color-muted, #64748b);
	border: 1px solid var(--stowly-color-line);
	border-top: 0;
	border-radius: 0 0 var(--stowly-radius-sm, 8px) var(--stowly-radius-sm, 8px);
	background: var(--stowly-color-surface);
}
.stowly-provider-integration .stowly-bookings-export__details-body p {
	margin: 0 0 10px;
}
.stowly-bookings-export__pre {
	margin: 0;
	padding: 10px 12px;
	background: var(--stowly-color-surface-2, #f1f5f9);
	border-radius: var(--stowly-radius-sm, 6px);
	overflow-x: auto;
	font-size: 0.78rem;
	line-height: 1.4;
}
.stowly-bookings-export__hr {
	margin: 24px 0 20px;
	border: 0;
	border-top: 1px solid var(--stowly-color-line);
}
.stowly-bookings-export__subtitle {
	margin: 0 0 8px;
	font-size: 1rem;
}
.stowly-bookings-export__list {
	margin: 0 0 12px 1.1rem;
	padding: 0;
	line-height: 1.45;
	color: var(--stowly-color-muted, #64748b);
}
.stowly-bookings-export__list li {
	margin-bottom: 6px;
}