/* HFK Flybooking */
.hfk-fb {
	--hfk-ink: #1b1f24;
	--hfk-muted: #5f6b76;
	--hfk-line: #e3e7eb;
	--hfk-line-strong: #cfd6dc;
	--hfk-bg: #ffffff;
	--hfk-soft: #f5f7f9;
	--hfk-past: #f0f2f4;
	--hfk-accent: #1f6feb;
	--hfk-danger: #c8102e;
	color: var(--hfk-ink);
	max-width: 1200px;
	margin: 1.5rem auto;
	font-size: 15px;
	line-height: 1.4;
	box-sizing: border-box;
}
.hfk-fb *, .hfk-fb *::before, .hfk-fb *::after { box-sizing: border-box; }
.hfk-fb.is-loading { opacity: .6; pointer-events: none; transition: opacity .15s; }
.hfk-fb-loading { color: var(--hfk-muted); }

/* Login */
.hfk-fb--login { max-width: 420px; padding: 1.5rem; border: 1px solid var(--hfk-line); border-radius: 10px; background: var(--hfk-bg); }
.hfk-fb--login h3 { margin-top: 0; }
.hfk-fb--login input[type=text], .hfk-fb--login input[type=password] { width: 100%; padding: .5rem .6rem; border: 1px solid var(--hfk-line-strong); border-radius: 6px; font: inherit; }
.hfk-fb--login input[type=submit] { background: var(--hfk-accent); color: #fff; border: 0; border-radius: 6px; padding: .55rem 1.2rem; font: inherit; font-weight: 600; cursor: pointer; }

/* Hoved */
.hfk-fb-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.hfk-fb-week { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.hfk-fb-week strong { font-size: 1.35rem; }
.hfk-fb-week span { color: var(--hfk-muted); }
.hfk-fb-nav { display: flex; gap: .35rem; }

/* Knapper */
.hfk-fb-btn { appearance: none; font: inherit; font-weight: 600; background: var(--hfk-bg); color: var(--hfk-ink); border: 1px solid var(--hfk-line-strong); border-radius: 7px; padding: .45rem .85rem; cursor: pointer; line-height: 1.2; }
.hfk-fb-btn:hover { background: var(--hfk-soft); }
.hfk-fb-btn:disabled { opacity: .6; cursor: default; }
.hfk-fb-btn--primary { background: var(--hfk-accent); border-color: var(--hfk-accent); color: #fff; }
.hfk-fb-btn--primary:hover { background: var(--hfk-accent); filter: brightness(1.08); }
.hfk-fb-btn--danger { color: var(--hfk-danger); border-color: color-mix(in srgb, var(--hfk-danger) 45%, white); }
.hfk-fb-btn--danger:hover { background: #fff3f4; }
.hfk-fb-btn--small { padding: .2rem .55rem; font-size: .85em; }
.hfk-fb-nav .hfk-fb-btn[data-nav="-7"], .hfk-fb-nav .hfk-fb-btn[data-nav="7"] { font-size: 1.2rem; padding: .3rem .8rem; }

/* Faner */
.hfk-fb-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.hfk-fb-tab { appearance: none; font: inherit; display: inline-flex; align-items: center; gap: .45rem; background: var(--hfk-bg); border: 1px solid var(--hfk-line-strong); border-radius: 999px; padding: .4rem .9rem; cursor: pointer; color: var(--hfk-ink); }
.hfk-fb-tab small { color: var(--hfk-muted); font-weight: 400; }
.hfk-fb-tab .hfk-fb-ro { font-size: .75em; background: var(--hfk-soft); border-radius: 4px; padding: 0 .35rem; }
.hfk-fb-tab.is-active { border-color: var(--fly); box-shadow: inset 0 0 0 1px var(--fly); background: color-mix(in srgb, var(--fly) 8%, white); font-weight: 600; }
.hfk-fb-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--fly); flex: none; }

/* Beskeder */
.hfk-fb-msg { background: var(--hfk-soft); border: 1px solid var(--hfk-line); border-radius: 8px; padding: .7rem 1rem; margin-bottom: .75rem; }
.hfk-fb-msg--err { background: #fff3f4; border-color: #f2c2c9; color: #8a0a1f; }

/* Kalender */
.hfk-fb-gridwrap { overflow-x: auto; border: 1px solid var(--hfk-line); border-radius: 10px; background: var(--hfk-bg); -webkit-overflow-scrolling: touch; }
.hfk-fb-grid { display: grid; grid-template-columns: 46px repeat(7, minmax(74px, 1fr)); min-width: 564px; }
.hfk-fb-corner, .hfk-fb-dayhead { position: sticky; top: 0; z-index: 3; background: var(--hfk-bg); border-bottom: 1px solid var(--hfk-line-strong); }
.hfk-fb-dayhead { text-align: center; padding: .5rem .25rem; font-size: .9em; color: var(--hfk-muted); border-left: 1px solid var(--hfk-line); }
.hfk-fb-dayhead b { color: var(--hfk-ink); }
.hfk-fb-dayhead.is-today { color: var(--hfk-accent); }
.hfk-fb-dayhead.is-today b { background: var(--hfk-accent); color: #fff; border-radius: 5px; padding: 0 .3rem; }
.hfk-fb-times { position: relative; }
.hfk-fb-times span { position: absolute; right: 6px; transform: translateY(-50%); font-size: 11px; color: var(--hfk-muted); font-variant-numeric: tabular-nums; }
.hfk-fb-times span:first-child { transform: none; }
.hfk-fb-day { position: relative; border-left: 1px solid var(--hfk-line); }
.hfk-fb-day.is-today { background: color-mix(in srgb, var(--hfk-accent) 4%, white); }
.hfk-fb-slot { height: var(--rowh); border-top: 1px dotted var(--hfk-line); }
.hfk-fb-slot.is-hour { border-top: 1px solid var(--hfk-line); }
.hfk-fb-slot.is-past { background: var(--hfk-past); }
.hfk-fb-slot.is-free { cursor: pointer; }
.hfk-fb-slot.is-free:hover, .hfk-fb-slot.is-free:focus-visible { background: color-mix(in srgb, var(--fly) 14%, white); outline: none; }
.hfk-fb-booking {
	position: absolute; left: 3px; right: 3px; z-index: 2; overflow: hidden; cursor: pointer;
	border-radius: 6px; padding: 2px 6px; font-size: 12px; line-height: 1.25;
	background: color-mix(in srgb, var(--fly) 18%, white); border-left: 4px solid var(--fly); color: var(--hfk-ink);
	display: flex; flex-direction: column;
}
.hfk-fb-booking.is-own { background: var(--fly); color: #fff; border-left-color: color-mix(in srgb, var(--fly) 70%, black); }
.hfk-fb-booking:hover, .hfk-fb-booking:focus-visible { filter: brightness(.96); outline: 2px solid color-mix(in srgb, var(--fly) 60%, black); outline-offset: 0; }
.hfk-fb-booking .t { font-weight: 700; font-variant-numeric: tabular-nums; }
.hfk-fb-booking .n, .hfk-fb-booking .x { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hfk-fb-booking .x { opacity: .85; font-style: italic; }
.hfk-fb-hint { color: var(--hfk-muted); font-size: .9em; margin: .5rem 0 0; }

/* Mine bookinger */
.hfk-fb-mine { margin-top: 1.75rem; }
.hfk-fb-mine h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.hfk-fb-mine ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--hfk-line); border-radius: 10px; overflow: hidden; }
.hfk-fb-mine li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .9rem; border-top: 1px solid var(--hfk-line); background: var(--hfk-bg); }
.hfk-fb-mine li:first-child { border-top: 0; }
.hfk-fb-link { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.hfk-fb-link:hover b { text-decoration: underline; }
.hfk-fb-empty { color: var(--hfk-muted); }

/* Modal */
.hfk-fb-modal { position: fixed; inset: 0; z-index: 100000; background: rgba(15, 20, 25, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.hfk-fb-modal[hidden] { display: none; }
.hfk-fb-dialog { position: relative; background: var(--hfk-bg); color: var(--hfk-ink); border-radius: 12px; padding: 1.4rem 1.4rem 1.2rem; width: 100%; max-width: 420px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.hfk-fb-dialog h3 { margin: 0 2rem .15rem 0; font-size: 1.2rem; }
.hfk-fb-dialog h3 small { color: var(--hfk-muted); font-weight: 400; }
.hfk-fb-sub { margin: 0 0 1rem; color: var(--hfk-muted); }
.hfk-fb-close { position: absolute; top: .6rem; right: .7rem; appearance: none; background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--hfk-muted); padding: .2rem .4rem; }
.hfk-fb-form label { display: block; font-weight: 600; font-size: .9em; margin-bottom: .8rem; }
.hfk-fb-form .opt { font-weight: 400; color: var(--hfk-muted); }
.hfk-fb-form select, .hfk-fb-form input[type=text] { display: block; width: 100%; margin-top: .25rem; font: inherit; font-weight: 400; padding: .5rem .55rem; border: 1px solid var(--hfk-line-strong); border-radius: 7px; background: var(--hfk-bg); color: var(--hfk-ink); }
.hfk-fb-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.hfk-fb-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.hfk-fb-err { background: #fff3f4; border: 1px solid #f2c2c9; color: #8a0a1f; border-radius: 7px; padding: .55rem .75rem; font-size: .9em; }
.hfk-fb-dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 0; }
.hfk-fb-dl dt { color: var(--hfk-muted); }
.hfk-fb-dl dd { margin: 0; }

@media (max-width: 600px) {
	.hfk-fb-week strong { font-size: 1.15rem; }
	.hfk-fb-mine li { flex-direction: column; align-items: flex-start; }
}

/* Egen side-skabelon */
.hfk-fb-main { max-width: 1200px; margin: 2rem auto 3rem; padding: 0 16px; box-sizing: border-box; }
.hfk-fb-title { margin: 0 0 1rem; }
.hfk-fb-main .hfk-fb { margin-top: 0; }
.hfk-fb-intro, .hfk-fb-outro { max-width: 760px; margin-bottom: 1rem; }