/* ============================================================
   Friluftskilden Hyttebooking v0.9 – Frontend CSS
   ============================================================ */

/* Reset */
.fkhb-wrap *, .fkhb-wrap *::before, .fkhb-wrap *::after { box-sizing: border-box; }
.fkhb-wrap { font-family: inherit; font-size: 15px; line-height: 1.5; color: #1d2327; }

/* ---- FANE-NAVIGATION ---- */
.fkhb-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #d0d7de;
    margin-bottom: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.fkhb-tabs::-webkit-scrollbar { display: none; }
.fkhb-tab {
    display: inline-block;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
}
.fkhb-tab:hover { color: #1d2327; border-bottom-color: #c3d3c7; }
.fkhb-tab--active { color: #235a3d; border-bottom-color: #235a3d; }

/* ---- CARD ---- */
.fkhb-card {
    background: #fff;
    border: 1px solid #d8e0da;
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 20px;
}
.fkhb-card-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.fkhb-card-header h3 { margin: 0; font-size: 17px; font-weight: 700; }
.fkhb-section-label { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #7a8a80; font-weight: 700; }
.fkhb-muted { color: #6a7a70; font-size: 0.9em; }
.fkhb-req { color: #888; font-size: 12px; font-weight: normal; }
.fkhb-empty { color: #7a8a80; font-style: italic; padding: 8px 0; }

/* ---- BUTTONS ---- */
.fkhb-btn {
    display: inline-block;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    line-height: 1.4;
    transition: background .15s, opacity .15s;
}
.fkhb-btn--primary   { background: #235a3d; color: #fff; }
.fkhb-btn--primary:hover { background: #1a4430; color: #fff; }
.fkhb-btn--secondary { background: #f0f4f2; color: #235a3d; border: 1px solid #c3d3c7; }
.fkhb-btn--secondary:hover { background: #e2ede6; color: #1a4430; }
.fkhb-btn--danger    { background: #fff0f0; color: #b32d2e; border: 1px solid #f2b8b5; }
.fkhb-btn--danger:hover { background: #fee2e2; }
.fkhb-btn--full      { width: 100%; display: block; padding: 12px; font-size: 15px; }
.fkhb-btn--large     { padding: 12px 24px; font-size: 15px; }
.fkhb-btn--sm        { padding: 5px 12px; font-size: 13px; }
.fkhb-link-subtle    { color: #888; font-size: 13px; text-decoration: none; }
.fkhb-link-subtle:hover { color: #235a3d; text-decoration: underline; }

/* ---- FORM ---- */
.fkhb-form { max-width: 100%; }
.fkhb-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.fkhb-field label { font-weight: 600; font-size: 14px; }
.fkhb-field input,
.fkhb-field textarea,
.fkhb-field select {
    width: 100%; padding: 9px 12px;
    border: 1px solid #c6ccd2; border-radius: 6px;
    font-size: 14px; background: #fafbfc;
    transition: border-color .15s, box-shadow .15s;
}
.fkhb-field input:focus,
.fkhb-field textarea:focus,
.fkhb-field select:focus {
    outline: none; border-color: #235a3d;
    box-shadow: 0 0 0 3px rgba(35,90,61,.12);
    background: #fff;
}
.fkhb-field textarea { min-height: 80px; resize: vertical; }
.fkhb-field-inline { flex-direction: row; align-items: center; gap: 8px; }
.fkhb-field-inline label { font-weight: normal; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.fkhb-actions { margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.fkhb-consent { display: block; font-size: 14px; margin-top: 10px; }
.fkhb-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Booking grid */
.fkhb-booking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 640px) { .fkhb-booking-grid { grid-template-columns: 1fr; } }

/* Password grid */
.fkhb-pw-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .fkhb-pw-grid { grid-template-columns: 1fr; } }

/* ---- LOGIN ---- */
.fkhb-login-card { max-width: 440px; margin: 0 auto; }
.fkhb-login-form .fkhb-btn--full { margin-top: 6px; }
.fkhb-reset-toggle { border: 1px solid #e0e4e8; border-radius: 6px; padding: 10px 14px; margin-top: 16px; background: #f9fafb; }
.fkhb-reset-toggle summary { cursor: pointer; font-size: 14px; color: #555; }
.fkhb-reset-toggle summary:hover { color: #235a3d; }
.fkhb-reset-toggle[open] summary { margin-bottom: 10px; }
.fkhb-login-required { text-align: center; color: #7a8a80; padding: 24px; }

/* ---- PROFIL ---- */
.fkhb-profile-table { width: 100%; border-collapse: collapse; }
.fkhb-profile-table th { width: 150px; text-align: left; padding: 8px 10px; color: #6a7a70; font-weight: 600; font-size: 13px; vertical-align: top; }
.fkhb-profile-table td { padding: 8px 10px; font-size: 14px; }
.fkhb-profile-table tr:nth-child(even) { background: #f9fbf9; }
.fkhb-password-form { max-width: 100%; }

/* ---- STATUS BADGES ---- */
.fkhb-status-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.fkhb-status-badge--green  { background: #d1fae5; color: #065f46; }
.fkhb-status-badge--yellow { background: #fef9c3; color: #713f12; }
.fkhb-status-badge--red    { background: #fee2e2; color: #7f1d1d; }
.fkhb-status-badge--gray   { background: #f1f5f9; color: #475569; }
.fkhb-count-badge { background: #e2ede6; color: #235a3d; padding: 2px 9px; border-radius: 999px; font-size: 13px; font-weight: 700; }

/* ---- MESSAGES ---- */
.fkhb-msg { padding: 11px 14px; border-radius: 6px; margin-bottom: 14px; font-size: 14px; line-height: 1.4; }
.fkhb-msg-success { background: #d1fae5; border: 1px solid #6ee7b7; color: #065f46; }
.fkhb-msg-error   { background: #fee2e2; border: 1px solid #fca5a5; color: #7f1d1d; }
.fkhb-msg-info    { background: #dbeafe; border: 1px solid #93c5fd; color: #1e3a8a; }

/* ---- KALENDER ---- */
.fkhb-calendar-card { padding-bottom: 14px; }
.fkhb-calendar { width: 100%; border-collapse: collapse; table-layout: fixed; }
.fkhb-calendar th { background: #f0f4f2; font-size: 12px; font-weight: 700; text-align: center; padding: 7px 4px; color: #4a5a50; border: 1px solid #dde7e0; }
.fkhb-calendar td { border: 1px solid #dde7e0; padding: 4px; vertical-align: top; transition: background .1s; }
.fkhb-day { min-height: 72px; }
.fkhb-day-num { font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.fkhb-day-state { font-size: 11px; color: #7a8a80; }
.fkhb-day-own { font-size: 11px; color: #235a3d; font-weight: 600; }
.fkhb-free    { background: #f4fff6; }
.fkhb-partial { background: #fffbeb; }
.fkhb-busy    { background: #fff1f1; }
.fkhb-other-month { opacity: .45; background: #fafafa; }
.fkhb-past    { opacity: .55; }
.fkhb-today   { outline: 2px solid #2271b1; outline-offset: -2px; }
.fkhb-own-booking { box-shadow: inset 0 0 0 2px #235a3d; }
.fkhb-date-pickable { cursor: pointer; }
.fkhb-date-pickable:hover { background: #e2ede6 !important; outline: 2px dashed #235a3d; outline-offset: -2px; }
.fkhb-nav { display: flex; align-items: center; gap: 8px; }
.fkhb-nav-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    color: #235a3d;
    background: #e8f5ee;
    border: 1.5px solid #b5d4c1;
    border-radius: 6px;
    width: 36px;
    height: 36px;
    transition: background .15s, border-color .15s, transform .1s;
    flex-shrink: 0;
}
.fkhb-nav-arrow:hover {
    background: #235a3d;
    color: #fff;
    border-color: #235a3d;
    transform: scale(1.08);
}
.fkhb-nav-month { font-size: 15px; min-width: 150px; text-align: center; font-weight: 700; }
.fkhb-nav-today {
    font-size: 12px;
    color: #fff;
    background: #7a9a86;
    border-radius: 4px;
    padding: 3px 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background .15s;
}
.fkhb-nav-today:hover { background: #235a3d; }
.fkhb-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: 12px; color: #7a8a80; }
.fkhb-legend-item { display: flex; align-items: center; gap: 5px; }
.fkhb-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.fkhb-dot-free    { background: #4caf50; }
.fkhb-dot-partial { background: #f0ad4e; }
.fkhb-dot-busy    { background: #d9534f; }
.fkhb-legend-own  { display: inline-block; width: 12px; height: 12px; border: 2px solid #235a3d; border-radius: 2px; background: #fff; flex-shrink: 0; }
@media (max-width: 480px) {
    .fkhb-calendar th, .fkhb-calendar td { font-size: 11px; padding: 2px; }
    .fkhb-day { min-height: 48px; }
    .fkhb-day-state, .fkhb-day-own { display: none; }
    .fkhb-nav-month { min-width: 110px; font-size: 13px; }
    .fkhb-nav-arrow { width: 32px; height: 32px; font-size: 16px; }
}

/* ---- BOOKING-LISTE ---- */
.fkhb-booking-list { display: flex; flex-direction: column; gap: 12px; }
.fkhb-booking-item {
    border: 1px solid #d8e0da;
    border-radius: 8px;
    padding: 14px 16px;
    background: #fff;
}
.fkhb-booking-item--cancelled { opacity: .8; border-color: #fca5a5; background: #fff9f9; }
.fkhb-booking-item__header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.fkhb-booking-no { font-weight: 700; font-size: 15px; }
.fkhb-booking-item__dates { display: flex; gap: 20px; flex-wrap: wrap; font-size: 14px; margin-bottom: 6px; }
.fkhb-booking-date { color: #334; }
.fkhb-booking-item__meta { font-size: 13px; color: #7a8a80; margin-bottom: 10px; }
.fkhb-booking-item__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fkhb-inline-form { display: inline-block; }

/* ---- BEKRÆFTELSESSIDE ---- */
.fkhb-confirm-card { border-color: #235a3d; }
.fkhb-confirm-intro { font-size: 15px; color: #334; margin-bottom: 18px; }
.fkhb-confirm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 18px; }
@media (max-width: 600px) { .fkhb-confirm-grid { grid-template-columns: 1fr; } }
.fkhb-confirm-section h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #7a8a80; font-weight: 700; margin: 0 0 8px; }
.fkhb-confirm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fkhb-confirm-table th { width: 100px; text-align: left; padding: 5px 8px; color: #7a8a80; font-weight: 600; vertical-align: top; }
.fkhb-confirm-table td { padding: 5px 8px; }
.fkhb-confirm-table tr:nth-child(even) { background: #f9fbf9; }
.fkhb-confirm-payment { background: #f0f8f4; border: 1px solid #c3d3c7; border-radius: 6px; padding: 12px 16px; margin-bottom: 18px; font-size: 14px; }
.fkhb-confirm-payment h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; color: #7a8a80; }
.fkhb-confirm-payment p { margin: 4px 0; }
.fkhb-confirm-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding-top: 8px; border-top: 1px solid #e2e6ea; }

/* ---- RESPONSIV ---- */
@media (max-width: 600px) {
    .fkhb-card { padding: 14px 16px; }
    .fkhb-login-card { max-width: 100%; }
    .fkhb-confirm-actions { flex-direction: column; }
    .fkhb-confirm-actions .fkhb-btn { width: 100%; text-align: center; }
    .fkhb-profile-table th, .fkhb-profile-table td { display: block; width: 100%; padding: 3px 8px; }
    .fkhb-profile-table th { padding-bottom: 0; color: #aaa; font-size: 11px; text-transform: uppercase; }
    .fkhb-profile-table tr { display: block; border-bottom: 1px solid #eee; padding: 5px 0; }
}

/* ---- LÅSTE LEJER-OPLYSNINGER (booking formular) ---- */
.fkhb-readonly-fields {
    background: #f9fbf9;
    border: 1px solid #d8e0da;
    border-radius: 8px;
    padding: 12px 16px;
}
.fkhb-readonly-row {
    display: flex;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #eef2ef;
    font-size: 14px;
    align-items: baseline;
}
.fkhb-readonly-row:last-of-type { border-bottom: none; }
.fkhb-readonly-label {
    width: 110px;
    flex-shrink: 0;
    color: #7a8a80;
    font-weight: 600;
    font-size: 13px;
}
.fkhb-readonly-value { color: #1d2327; }
.fkhb-readonly-note {
    margin: 10px 0 0;
    font-size: 12px;
    color: #9aaa9a;
    font-style: italic;
}

/* ---- DATOFILTER ---- */
.fkhb-date-filter {
    background: #f9fbf9;
    border: 1px solid #dde8e0;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.fkhb-date-filter__fields {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.fkhb-date-filter__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fkhb-date-filter__field label {
    font-size: 12px;
    font-weight: 600;
    color: #7a8a80;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.fkhb-date-filter__field input[type="date"] {
    padding: 7px 10px;
    border: 1px solid #c6ccd2;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
}
.fkhb-date-filter__field input[type="date"]:focus {
    outline: none;
    border-color: #235a3d;
    box-shadow: 0 0 0 2px rgba(35,90,61,.1);
}
.fkhb-date-filter__actions {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-bottom: 2px;
}
.fkhb-btn--ghost {
    background: transparent;
    color: #888;
    border: 1px solid #d0d7de;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
}
.fkhb-btn--ghost:hover { background: #f0f4f2; color: #235a3d; border-color: #b0c4b8; }
@media (max-width: 560px) {
    .fkhb-date-filter__fields { flex-direction: column; align-items: stretch; }
    .fkhb-date-filter__field input[type="date"] { width: 100%; }
    .fkhb-date-filter__actions { margin-top: 4px; }
}

/* Sektion-divider inde i card */
.fkhb-section-divider {
    border: none;
    border-top: 2px dashed #e2ede6;
    margin: 20px 0 16px;
}

/* Card header title + badge inline */
.fkhb-card-header__title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.fkhb-count-badge--red {
    background: #fee2e2;
    color: #7f1d1d;
}

/* ---- HARMONIKA (accordion) ---- */
.fkhb-accordion {
    border: 1px solid #fca5a5;
    border-radius: 8px;
    margin-top: 16px;
    background: #fff9f9;
    overflow: hidden;
}
.fkhb-accordion__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    flex-wrap: wrap;
}
/* Skjul standard pil i alle browsere */
.fkhb-accordion__header::-webkit-details-marker { display: none; }
.fkhb-accordion__header::marker { display: none; }
.fkhb-accordion__header:hover { background: #fef2f2; }

.fkhb-accordion__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}
.fkhb-accordion__sub {
    flex: 1 1 100%;
    font-size: 13px;
    color: #9a7a7a;
    margin-top: 2px;
}
.fkhb-accordion__arrow {
    margin-left: auto;
    font-size: 12px;
    color: #b32d2e;
    transition: transform .2s;
    flex-shrink: 0;
}
details.fkhb-accordion[open] .fkhb-accordion__arrow {
    transform: rotate(180deg);
}
.fkhb-accordion__body {
    padding: 4px 16px 16px;
    border-top: 1px solid #fca5a5;
}

/* ---- DAG-DETALJE-PANEL ---- */
.fkhb-day-selected {
    outline: 3px solid #235a3d !important;
    outline-offset: -3px;
    background: #e8f5ee !important;
}
.fkhb-day-clickable { cursor: pointer; }
.fkhb-day-clickable:hover { background: #f0f8f4 !important; }
.fkhb-legend-muted { color: #aab6a8; font-style: italic; }

.fkhb-day-detail {
    margin-top: 16px;
    border: 1px solid #235a3d;
    border-radius: 8px;
    background: #f8fcfa;
    overflow: hidden;
}
.fkhb-day-detail__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #235a3d;
    color: #fff;
}
.fkhb-day-detail__date {
    font-weight: 700;
    font-size: 15px;
}
.fkhb-day-detail__close {
    color: rgba(255,255,255,.8);
    text-decoration: none;
    font-size: 20px;
    line-height: 1;
    padding: 0 4px;
    font-weight: 400;
}
.fkhb-day-detail__close:hover { color: #fff; }

.fkhb-day-detail__free {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.fkhb-day-detail__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fkhb-day-detail__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    border-bottom: 1px solid #e2ede6;
    font-size: 14px;
}
.fkhb-day-detail__item:last-child { border-bottom: none; }

.fkhb-day-detail__item--own     { background: #f0faf4; }
.fkhb-day-detail__item--block   { background: #fafafa; }
.fkhb-day-detail__item--busy    { background: #fff8f8; }

.fkhb-day-detail__label {
    font-weight: 700;
    min-width: 110px;
    font-size: 14px;
}
.fkhb-day-detail__item--own   .fkhb-day-detail__label { color: #235a3d; }
.fkhb-day-detail__item--block .fkhb-day-detail__label { color: #7a8a80; }
.fkhb-day-detail__item--busy  .fkhb-day-detail__label { color: #b32d2e; }

.fkhb-day-detail__time {
    font-size: 15px;
    font-weight: 600;
    color: #1d2327;
    letter-spacing: .01em;
}

.fkhb-day-detail__book {
    padding: 12px 16px;
    border-top: 1px solid #d8e8de;
    background: #f8fcfa;
}

/* ---- KONFLIKT: FELT-MARKERING ---- */
.fkhb-field input.fkhb-field-conflict,
.fkhb-field textarea.fkhb-field-conflict {
    border-color: #d63638 !important;
    background: #fff8f8 !important;
    box-shadow: 0 0 0 3px rgba(214,54,56,.12) !important;
}
.fkhb-field input.fkhb-field-ok,
.fkhb-field textarea.fkhb-field-ok {
    border-color: #00a32a !important;
    background: #f8fff9 !important;
    box-shadow: 0 0 0 2px rgba(0,163,42,.1) !important;
}

/* Inline konfliktbesked under slut-feltet */
.fkhb-conflict-inline {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fff0f0;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 13px;
    color: #7f1d1d;
    font-weight: 600;
    margin-top: 8px;
    line-height: 1.4;
}
.fkhb-conflict-inline::before {
    content: "⚠";
    font-size: 15px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Deaktiveret submit-knap */
.fkhb-btn--disabled {
    opacity: .45 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}
.fkhb-btn--checking {
    opacity: .7;
    cursor: wait !important;
}
.fkhb-btn--checking::after {
    content: " …";
}

/* ---- KONFLIKT-SIDE ---- */
.fkhb-conflict-card {
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
    padding: 32px 28px;
    border-color: #fca5a5;
    background: #fff;
}
.fkhb-conflict-icon {
    font-size: 52px;
    line-height: 1;
    margin-bottom: 12px;
}
.fkhb-conflict-title {
    font-size: 22px;
    font-weight: 800;
    color: #7f1d1d;
    margin: 0 0 8px;
}
.fkhb-conflict-lead {
    font-size: 15px;
    color: #555;
    margin: 0 0 24px;
}
.fkhb-conflict-chosen,
.fkhb-conflict-existing {
    text-align: left;
    background: #f9fbf9;
    border: 1px solid #d8e8de;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 14px;
}
.fkhb-conflict-existing {
    background: #fff8f8;
    border-color: #fca5a5;
}
.fkhb-conflict-chosen h4,
.fkhb-conflict-existing h4 {
    margin: 0 0 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #7a8a80;
    font-weight: 700;
}
.fkhb-conflict-existing h4 { color: #b32d2e; }
.fkhb-conflict-time {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
}
.fkhb-conflict-time--conflict { color: #7f1d1d; font-weight: 600; }
.fkhb-conflict-actions {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}
@media (max-width: 500px) {
    .fkhb-conflict-card { padding: 20px 16px; }
    .fkhb-conflict-actions .fkhb-btn { width: 100%; }
}

/* ---- DAGPANEL: Din booking link + hint ---- */
.fkhb-day-detail__label--link {
    text-decoration: none;
    font-weight: 700;
    color: #235a3d;
    border-bottom: 1.5px dotted #235a3d;
    padding-bottom: 1px;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.fkhb-day-detail__label--link:hover {
    color: #1a4430;
    border-bottom-color: #1a4430;
}
.fkhb-day-detail__hint {
    font-size: 13px;
    color: #7a8a80;
    font-style: italic;
}

/* Fjern gammel book-knap styling (erstattet) */
.fkhb-day-detail__book { display: none; }

/* ================================================================
   DATO + TIDSHJUL (iPhone-stil)
   ================================================================ */

/* Wrapper */
.fkhb-dt-picker { width: 100%; }

/* Dato + tid på samme linje */
.fkhb-dt-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fkhb-dt-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #7a8a80;
    margin-bottom: 5px;
}
.fkhb-dt-date-wrap {
    width: 100%;
}
.fkhb-dt-date-wrap input[type="date"] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #c6ccd2;
    border-radius: 6px;
    font-size: 15px;
    background: #fafbfc;
    cursor: pointer;
}
.fkhb-dt-date-wrap input[type="date"]:focus {
    outline: none;
    border-color: #235a3d;
    box-shadow: 0 0 0 3px rgba(35,90,61,.12);
}

/* Tidshjul wrapper */
.fkhb-dt-time-wrap { width: 100%; }

/* Tidshjul */
.fkhb-timepicker {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    background: #fff;
    border: 1px solid #c6ccd2;
    border-radius: 10px;
    overflow: hidden;
    height: 160px; /* 4 visible items */
    width: 100%;
    max-width: 220px;
    user-select: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
}

/* Kolonne */
.fkhb-tp-col {
    flex: 1;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* Scroll-container */
.fkhb-tp-scroll {
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Padding top+bottom = 1.5 × ITEM_H zoomed to center */
    padding: 60px 0;
}
.fkhb-tp-scroll::-webkit-scrollbar { display: none; }

/* Item */
.fkhb-tp-item {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 500;
    color: #9aa8a0;
    cursor: pointer;
    scroll-snap-align: center;
    transition: color .1s, font-weight .1s;
    font-variant-numeric: tabular-nums;
}
.fkhb-tp-item:hover { color: #235a3d; }
.fkhb-tp-item--selected {
    color: #1d2327;
    font-size: 22px;
    font-weight: 700;
}

/* Kolon-separator */
.fkhb-tp-sep {
    font-size: 22px;
    font-weight: 700;
    color: #334;
    padding: 0 2px;
    pointer-events: none;
    flex-shrink: 0;
    z-index: 2;
    position: relative;
}

/* Highlight-overlay (midterlinjen) */
.fkhb-tp-highlight {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 40px;
    transform: translateY(-50%);
    background: rgba(35,90,61,.07);
    border-top: 1.5px solid rgba(35,90,61,.25);
    border-bottom: 1.5px solid rgba(35,90,61,.25);
    pointer-events: none;
    z-index: 1;
    border-radius: 0;
}

/* Top/bund fade */
.fkhb-tp-col::before,
.fkhb-tp-col::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 60px;
    z-index: 2;
    pointer-events: none;
}
.fkhb-tp-col::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 100%);
}
.fkhb-tp-col::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 100%);
}

/* Konflikt-state på tidshjulet */
.fkhb-tp-conflict .fkhb-timepicker {
    border-color: #d63638 !important;
    box-shadow: 0 0 0 3px rgba(214,54,56,.12) !important;
    background: #fff8f8;
}
.fkhb-tp-ok .fkhb-timepicker {
    border-color: #00a32a !important;
    box-shadow: 0 0 0 2px rgba(0,163,42,.1) !important;
}

/* Dato-felt konflikt/ok */
.fkhb-dt-date-wrap input.fkhb-field-conflict {
    border-color: #d63638 !important;
    background: #fff8f8 !important;
    box-shadow: 0 0 0 3px rgba(214,54,56,.12) !important;
}
.fkhb-dt-date-wrap input.fkhb-field-ok {
    border-color: #00a32a !important;
    background: #f8fff9 !important;
}

/* Responsiv */
@media (max-width: 500px) {
    .fkhb-dt-date-wrap { width: 100%; }
    .fkhb-timepicker { max-width: 100%; }
}

/* Bruger-kalender: egne fremtidige bookinger */
.fkhb-own-future {
    background: #e8f5ee !important;
    box-shadow: inset 0 0 0 2px #235a3d;
}
/* Bruger-kalender: egne fortidige bookinger */
.fkhb-own-past-day {
    background: #f0f4f2 !important;
    box-shadow: inset 0 0 0 2px #7a9a86;
    opacity: .85;
}

/* Log ud — højrejusteret i menubjælken */
.fkhb-tab--logout {
    margin-left: auto;
    color: #888;
    border-bottom-color: transparent !important;
    font-weight: 500;
}
.fkhb-tab--logout:hover {
    color: #d63638;
    border-bottom-color: transparent !important;
}

/* ---- FLERE-DAGE ADVARSEL (inline i formular) ---- */
.fkhb-multiday-inline {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fffbeb;
    border: 1px solid #f59e0b;
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 13px;
    color: #78350f;
    font-weight: 600;
    margin-top: 8px;
    line-height: 1.4;
}

/* ---- BEKRÆFTELSESSIDE: ADVARSEL OVER FLERE DAGE ---- */
.fkhb-multiday-warning {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fffbeb;
    border: 2px solid #f59e0b;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 20px;
}
.fkhb-multiday-warning__icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}
.fkhb-multiday-warning strong {
    display: block;
    font-size: 16px;
    color: #78350f;
    margin-bottom: 4px;
}
.fkhb-multiday-warning p {
    margin: 0;
    font-size: 14px;
    color: #92400e;
}

/* ================================================================
   LEJEFORM VÆLGER
   ================================================================ */
.fkhb-rental-type {
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e2ede6;
}
.fkhb-rental-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1.5px solid #d0d7d4;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
    background: #fafbfc;
}
.fkhb-rental-option:hover {
    border-color: #235a3d;
    background: #f0f8f4;
}
.fkhb-rental-option--active,
.fkhb-rental-option:has(input:checked) {
    border-color: #235a3d;
    background: #e8f5ee;
    box-shadow: 0 0 0 2px rgba(35,90,61,.1);
}
.fkhb-rental-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #235a3d;
    flex-shrink: 0;
    margin: 0;
}
.fkhb-rental-option__content {
    flex: 1;
}
.fkhb-rental-option__title {
    display: block;
    font-weight: 700;
    font-size: 15px;
    color: #1d2327;
}
.fkhb-rental-option__desc {
    display: block;
    font-size: 12px;
    color: #7a8a80;
    margin-top: 2px;
}
.fkhb-rental-option__price {
    font-size: 15px;
    font-weight: 700;
    color: #235a3d;
    white-space: nowrap;
    text-align: right;
}
.fkhb-rental-option__unit {
    font-size: 12px;
    font-weight: 400;
    color: #7a8a80;
    display: block;
    text-align: right;
}

/* ================================================================
   PRISPANEL
   ================================================================ */
.fkhb-price-panel {
    background: #f9fbf9;
    border: 1px solid #d8e8de;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 4px;
}
.fkhb-price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid #eef2ef;
    font-size: 14px;
}
.fkhb-price-row:last-child { border-bottom: none; }
.fkhb-price-label { color: #7a8a80; flex-shrink: 0; }
.fkhb-price-value { font-weight: 600; text-align: right; }
.fkhb-price-row--total {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 2px solid #d8e8de !important;
    border-bottom: none !important;
}
.fkhb-price-row--total .fkhb-price-label { color: #1d2327; font-weight: 700; font-size: 15px; }
.fkhb-price-row--total .fkhb-price-value { color: #235a3d; font-size: 18px; font-weight: 800; }

/* Bekræftelsesside: pris-sektion */
.fkhb-confirm-section--price {
    border: 2px solid #235a3d;
    border-radius: 8px;
    padding: 12px 14px;
    background: #f0f8f4;
}
.fkhb-confirm-section--price h4 { color: #235a3d; }
.fkhb-confirm-total th,
.fkhb-confirm-total td { font-size: 16px; font-weight: 800; }

/* Besked-container i højre kolonne */
#fkhb-messages-col > div { margin-top: 10px; }

/* E-mail bekræftelses-note under acceptknap */
.fkhb-confirm-email-note {
    font-size: 13px;
    color: #555;
    margin: 8px 0 0;
    display: block;
}

/* Bekræftelsesside: knapper og e-mail note */
.fkhb-confirm-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}
.fkhb-confirm-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.fkhb-confirm-email-note {
    margin: 8px 0 0;
    font-size: 13px;
    color: #555;
    text-align: left;
}

/* ================================================================
   IMPERSONATION BJÆLKE — inde i fkhb-wrap mellem menu og kalender
   ================================================================ */
.fkhb-impersonation-banner {
    background: #b91c1c;
    color: #fff;
    padding: 10px 18px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.fkhb-impersonation-banner__text { flex: 1; }
.fkhb-impersonation-banner__text strong { font-weight: 800; }
.fkhb-impersonation-banner__stop {
    background: rgba(255,255,255,.15);
    border: 1.5px solid rgba(255,255,255,.5);
    color: #fff;
    padding: 5px 14px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s;
}
.fkhb-impersonation-banner__stop:hover {
    background: rgba(255,255,255,.28);
    color: #fff;
    text-decoration: none;
}

/* ================================================================
   HARMONIKA (accordion) — Skift adgangskode
   ================================================================ */
.fkhb-accordion-card { padding: 0; }
.fkhb-accordion { margin: 0; }
.fkhb-accordion__header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    gap: 8px;
}
.fkhb-accordion__header::-webkit-details-marker { display: none; }
.fkhb-accordion__header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1d2327;
}
.fkhb-accordion__header::after {
    content: '▸';
    margin-left: auto;
    font-size: 13px;
    color: #7a8a80;
    transition: transform .2s;
}
details[open] > .fkhb-accordion__header::after { transform: rotate(90deg); }
.fkhb-accordion__body {
    padding: 0 20px 20px;
    border-top: 1px solid #e2ede6;
}

/* ================================================================
   BOOKER-LEJER LISTE (profil)
   ================================================================ */
.fkhb-booker-tenant-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fkhb-booker-tenant-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #e2ede6;
    flex-wrap: wrap;
}
.fkhb-booker-tenant-item:last-child { border-bottom: none; }
.fkhb-booker-tenant-item__info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ================================================================
   BOOKING ITEM — Lejer + Booket af
   ================================================================ */
.fkhb-booking-item__who {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #555;
    margin: 4px 0 6px;
}
.fkhb-booking-item__who strong { color: #1d2327; }