/* Pinetree Booking — tema-uafhængigt grid. Alt er scopet under .pt-booking.
   Grøn = ledig · Lys grøn = Fuldtid · Rød = optaget · Blå = din tid · Grå = lukket */

.pt-booking {
  --pt-ink: #1B1D1C;
  --pt-soft: #6B675C;
  --pt-line: #E1E6E1;
  --pt-surface: #FFFFFF;
  --pt-green: #1E8E3E;
  --pt-red: #C5221F;
  --pt-blue: #1A56DB; /* blå: "Din tid" (slots, legende, prikker) */
  --pt-light-bg: #BFE3C8;
  --pt-light-ink: #1B5E2E;
  color: var(--pt-ink);
  font-size: 16px;
  line-height: 1.5;
  box-sizing: border-box;
}
.pt-booking *, .pt-booking *::before, .pt-booking *::after { box-sizing: border-box; }

.pt-booking .pt-login-notice { background: var(--pt-surface); border: 1px solid var(--pt-line); border-radius: 14px; padding: 28px; display: grid; gap: 14px; justify-items: start; }
.pt-booking .pt-login-notice p { margin: 0; }
.pt-booking .pt-btn { display: inline-block; padding: 12px 22px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.pt-booking .pt-btn-dark { background: var(--pt-ink); color: #fff; }

/* Tæller for aktive bookinger — topbjælke inde i rammen, over SIM-rækken */
.pt-booking .pt-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--pt-line); background: #F7F8F5; }
.pt-booking .pt-mine-btn { flex: 0 0 auto; font: inherit; font-weight: 700; font-size: 14px; color: #fff; background: var(--pt-ink); border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer; line-height: 1.2; }
.pt-booking #pt-confirm .pt-list-action.pt-cancel { background: var(--pt-red); }
.pt-booking #pt-confirm .pt-list-item.pt-static { cursor: default; }

/* Touch: ingen grå tap-flash, ingen dobbelttap-zoom-forsinkelse, og hover-effekter KUN på mus
   (på touch "hænger" :hover fast efter et tryk, hvilket føles klistret) */
.pt-booking button, .pt-booking .slot, .pt-booking .day, .pt-booking .pt-btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
@media (hover: hover) and (pointer: fine) {
  .pt-booking .pt-mine-btn:hover { background: var(--pt-blue); }
  .pt-booking #pt-confirm .pt-list-item:hover { border-color: #1B1D1C; }
  .pt-booking #pt-confirm .pt-list-item.pt-static:hover { border-color: #E1E6E1; }
  .pt-booking .day:hover { border-color: var(--pt-ink); }
  .pt-booking .slot:hover { filter: brightness(1.12); }
  .pt-booking .slot.busy:hover, .pt-booking .slot.closed:hover { filter: none; }
  .pt-booking .slot.upgrade:hover { filter: none; background: #A9DAB6; }
  .pt-booking #pt-confirm button.pt-step:hover { background: #1E8E3E; }
}
.pt-booking .quota { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; color: var(--pt-soft); }

/* Divi-sidetitlen ("Book tid") tættere på datoerne */
body.pt-booking-page h1.main_title { margin-bottom: 8px; padding-bottom: 0; }
body.pt-booking-page .entry-content { padding-top: 0; }
.pt-booking .quota b { color: var(--pt-ink); font-variant-numeric: tabular-nums; }
.pt-booking .quota .dots { display: inline-flex; gap: 5px; }
.pt-booking .quota .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pt-line); }
.pt-booking .quota .dot.used { background: var(--pt-blue); }

.pt-booking .days { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 14px; scrollbar-width: thin; }
.pt-booking .day { flex: 0 0 auto; min-width: 56px; text-align: center; padding: 7px 8px; border: 2px solid var(--pt-line); border-radius: 10px; background: var(--pt-surface); cursor: pointer; user-select: none; font: inherit; color: var(--pt-ink); line-height: 1.25; }
.pt-booking .day:active { transform: scale(.97); }
.pt-booking .day .wd { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--pt-soft); font-weight: 600; }
.pt-booking .day .dt { display: block; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.pt-booking .day.active { background: var(--pt-ink); border-color: var(--pt-ink); }
.pt-booking .day.active .wd, .pt-booking .day.active .dt { color: #fff; }

.pt-booking .board { background: var(--pt-surface); border: 1px solid var(--pt-line); border-radius: 14px; overflow: hidden; }
.pt-booking .legend { display: flex; gap: 16px; flex-wrap: nowrap; white-space: nowrap; padding: 0 2px; margin: 0 0 6px; font-size: 13.5px; font-weight: 500; color: var(--pt-ink); overflow-x: auto; }
.pt-booking .legend span { display: inline-flex; align-items: center; gap: 8px; }
.pt-booking .chip { width: 13px; height: 13px; border-radius: 4px; display: inline-block; flex: 0 0 auto; }
.pt-booking .chip-free { background: var(--pt-green); }
.pt-booking .chip-busy { background: var(--pt-red); }
.pt-booking .chip-mine { background: var(--pt-blue); }
.pt-booking .chip-light { background: var(--pt-light-bg); }
.pt-booking .book-rules { color: var(--pt-soft); font-size: 12.5px; margin: 0 0 14px; padding: 0 2px; line-height: 1.45; }
.pt-booking .book-rules strong { color: var(--pt-ink); font-weight: 600; }

.pt-booking .grid-scroll { overflow-x: auto; }
.pt-booking table.bgrid { border-collapse: separate; border-spacing: 4px; width: 100%; min-width: 660px; padding: 6px; margin: 0; }
.pt-booking .bgrid thead th { font-weight: 800; text-transform: uppercase; font-size: 14px; padding: 10px 6px; color: var(--pt-ink); background: var(--pt-surface); border: 0; text-align: center; }
.pt-booking .bgrid thead th:first-child { width: 78px; }
.pt-booking .bgrid td { border: 0; padding: 0; }
.pt-booking .bgrid td.time { font-size: 15px; font-weight: 600; color: var(--pt-ink); text-align: right; padding: 0 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.pt-booking .slot { height: 52px; padding: 0; text-align: center; cursor: pointer; border-radius: 8px; font-weight: 700; font-size: 15px; color: #fff; background: var(--pt-green); transition: filter .1s, transform .05s; }
.pt-booking .slot::before { content: "Ledig"; }
.pt-booking .slot:active { transform: scale(.97); }
.pt-booking .slot:focus-visible { outline: 3px solid var(--pt-ink); outline-offset: 2px; }

.pt-booking .slot.busy { background: var(--pt-red); cursor: default; }
.pt-booking .slot.busy::before { content: "Optaget"; }
.pt-booking .slot.busy:active { transform: none; }

.pt-booking .slot.mine { background: var(--pt-blue); }
.pt-booking .slot.mine::before { content: "Din tid"; }

.pt-booking .slot.upgrade { background: var(--pt-light-bg); color: var(--pt-light-ink); }
.pt-booking .slot.upgrade::before { content: "Fuldtid"; }

.pt-booking .slot.closed { background: #EAEAE6; color: #9A9A94; cursor: default; }
.pt-booking .slot.closed::before { content: "–"; }
.pt-booking .slot.closed:active { transform: none; }

/* Dialog */
.pt-booking #pt-confirm { position: fixed; inset: 0; z-index: 99999; display: none; }
.pt-booking #pt-confirm.show { display: block; }
.pt-booking #pt-confirm .pt-backdrop { position: absolute; inset: 0; background: rgba(27,29,28,.6); }
.pt-booking #pt-confirm .pt-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(92vw, 460px); background: #fff; border-radius: 16px; padding: 26px 24px 22px; box-shadow: 0 24px 70px rgba(0,0,0,.35); font-size: 18px; line-height: 1.5; color: #1B1D1C; text-align: center; }
.pt-booking #pt-confirm .pt-msg { margin: 0 0 20px; font-size: 19px; }
.pt-booking #pt-confirm .pt-msg b { font-size: 21px; }
.pt-booking #pt-confirm .pt-sub { display: block; margin-top: 8px; font-size: 15px; color: #555; }
.pt-booking #pt-confirm .pt-guests { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 16px 0 4px; padding: 14px 12px; background: #F4F6F2; border-radius: 12px; }
.pt-booking #pt-confirm .pt-guests-label { font-size: 17px; font-weight: 700; color: #1B1D1C; }
.pt-booking #pt-confirm .pt-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 300px; }
.pt-booking #pt-confirm button.pt-gchoice { width: 100%; padding: 13px 10px; font-size: 17px; border-radius: 12px; background: #fff; color: #1B1D1C; border: 2px solid #C9CEC6; }
.pt-booking #pt-confirm button.pt-gchoice.on { background: #1B1D1C; color: #fff; border-color: #1B1D1C; }
.pt-booking #pt-confirm .pt-stepper { display: inline-flex; align-items: center; gap: 14px; }
.pt-booking #pt-confirm .pt-stepper-label { font-size: 15px; font-weight: 600; margin-right: 4px; }
.pt-booking #pt-confirm .pt-stepper b { min-width: 28px; text-align: center; font-size: 24px; font-variant-numeric: tabular-nums; }
.pt-booking #pt-confirm button.pt-step { width: 48px; height: 48px; padding: 0; border-radius: 50%; background: #1B1D1C; color: #fff; font-size: 26px; line-height: 1; font-weight: 600; }
.pt-booking #pt-confirm button.pt-step:active { background: #1E8E3E; }
.pt-booking #pt-confirm .pt-guests-note { font-size: 13px; color: #555; text-align: center; }
.pt-booking #pt-confirm .pt-yes:disabled { opacity: .45; cursor: not-allowed; }
.pt-booking #pt-confirm .pt-sub.pt-warn { background: #FBE6E5; color: #8A1C18; border-radius: 10px; padding: 10px 12px; margin-top: 12px; }
.pt-booking #pt-confirm .pt-sub.pt-warn b { color: #8A1C18; font-size: inherit; }
.pt-booking #pt-confirm .pt-actions { display: grid; gap: 10px; }
.pt-booking #pt-confirm button { font: inherit; font-weight: 700; font-size: 18px; border: 0; border-radius: 12px; padding: 16px 20px; cursor: pointer; width: 100%; line-height: 1.2; }
.pt-booking #pt-confirm .pt-yes { background: var(--pt-green); color: #fff; }
.pt-booking #pt-confirm .pt-yes.pt-danger { background: var(--pt-red); }
.pt-booking #pt-confirm .pt-yes.pt-upgrade { background: var(--pt-ink); }
.pt-booking #pt-confirm .pt-yes.pt-ok { background: var(--pt-ink); }
.pt-booking #pt-confirm .pt-yes:disabled { opacity: .6; cursor: wait; }
.pt-booking #pt-confirm .pt-no { background: #ECEEEA; color: #1B1D1C; }
.pt-booking #pt-confirm .pt-check { display: block; width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; background: var(--pt-green); color: #fff; font-size: 32px; line-height: 56px; font-weight: 700; }
.pt-booking #pt-confirm .pt-yes.pt-upgrade { background: var(--pt-green); }

.pt-booking #pt-confirm .pt-list { display: grid; gap: 8px; margin: 14px 0 18px; text-align: left; }
.pt-booking #pt-confirm .pt-list-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; background: #F4F6F2; color: #1B1D1C; border: 2px solid #E1E6E1; border-radius: 12px; padding: 12px 14px; font-size: 15px; font-weight: 500; cursor: pointer; text-align: left; }
.pt-booking #pt-confirm button:active { filter: brightness(.92); }
.pt-booking #pt-confirm .pt-list-item:disabled { opacity: .6; cursor: wait; }
.pt-booking #pt-confirm .pt-list-action { flex: 0 0 auto; width: auto; background: #1E8E3E; color: #fff; font-weight: 700; padding: 8px 14px; border-radius: 999px; font-size: 14px; white-space: nowrap; }
.pt-booking #pt-confirm .pt-list-item > span:first-child { flex: 1 1 auto; min-width: 0; line-height: 1.35; }

/* Mobile first (≤600px) */
@media (max-width: 600px) {
  .pt-booking { width: 100vw; margin-left: calc(50% - 50vw); padding: 0 8px; }
  .pt-booking .pt-top { padding: 8px 10px; }
  body.pt-booking-page h1.main_title { margin-bottom: 6px; }
  .pt-booking .days { gap: 5px; padding-bottom: 6px; margin-bottom: 12px; }
  .pt-booking .day { min-width: 46px; padding: 6px 4px; border-radius: 8px; }
  .pt-booking .day .wd { font-size: 10px; }
  .pt-booking .day .dt { font-size: 14px; }
  .pt-booking .board { border-radius: 12px; }
  .pt-booking .legend { gap: 12px; padding: 0 2px; font-size: 13px; }
  .pt-booking .chip { width: 12px; height: 12px; }
  .pt-booking .book-rules { font-size: 12px; margin-bottom: 12px; }
  .pt-booking .quota { font-size: 13px; }
  .pt-booking .pt-mine-btn { font-size: 13px; padding: 7px 11px; }
  .pt-booking .grid-scroll { overflow-x: hidden; }
  .pt-booking table.bgrid { min-width: 0; table-layout: fixed; border-spacing: 2px; padding: 2px; }
  .pt-booking .bgrid thead th { font-size: 11px; padding: 8px 1px; letter-spacing: 0; position: sticky; top: 0; z-index: 2; }
  .pt-booking .bgrid thead th:first-child { width: 40px; }
  .pt-booking .bgrid td.time { font-size: 11.5px; padding: 0 1px; text-align: center; }
  .pt-booking .slot { height: 50px; font-size: 11px; border-radius: 6px; letter-spacing: -.02em; overflow: hidden; }
  .pt-booking .slot.busy { font-size: 10.5px; }
  .pt-booking .slot.upgrade { font-size: 10.5px; }
  .pt-booking .slot.closed::before { content: ""; }
}
@media (max-width: 380px) {
  .pt-booking .slot { font-size: 10px; }
  .pt-booking .slot.busy { font-size: 9.5px; }
  .pt-booking .bgrid thead th:first-child { width: 38px; }
}

/* Same-day move: compact per-hour actions and accessible slot picker. */
.pt-booking #pt-confirm .pt-time-actions { display:flex; flex-wrap:wrap; gap:8px; flex:0 0 auto; }
.pt-booking #pt-confirm .pt-move-label { display:block; margin:18px 0 8px; font-size:16px; text-align:left; }
.pt-booking #pt-confirm #pt-move-target { width:100%; padding:14px; font:inherit; font-size:16px; background:white; color:#1B1D1C; border:1px solid #c9d1ca; border-radius:8px; }
@media(max-width:560px) { .pt-booking #pt-confirm .pt-list-item.pt-static { flex-wrap:wrap; } .pt-booking #pt-confirm .pt-time-actions { width:100%; justify-content:flex-end; } }

.pt-booking #pt-confirm .pt-card { max-height:90vh; max-height:90dvh; overflow-y:auto; }

.pt-booking #pt-move-banner { background:#e7f1ea; border:2px solid #1e8e3e; border-radius:12px; padding:16px; margin:12px 4px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:15px; line-height:1.4; }
.pt-booking #pt-move-banner[hidden] { display:none; }
.pt-booking #pt-move-banner p { margin:8px 0; }
.pt-booking #pt-move-banner button { padding:10px 14px; border:1px solid #0c3c46; border-radius:8px; white-space:nowrap; color:#0c3c46; background:white; cursor:pointer; }
.pt-booking .slot.move-unavailable { opacity:.3; cursor:default; }
.pt-booking .slot.move-target { opacity:1; background:#1e8e3e; color:white; outline:2px solid #12672a; outline-offset:-2px; }
.pt-booking .slot.move-target::before { content:"Flyt hertil"; }
.pt-booking .slot.move-preview { opacity:1; background:#0c3c46; outline:2px solid #ff5a00; outline-offset:-2px; }
.pt-booking .day:disabled { opacity:.5; cursor:default; }
@media(max-width:560px) { .pt-booking #pt-move-banner { flex-direction:column; align-items:stretch; } }

/* Current hour: occupancy only, never an actionable booking slot. */
.pt-booking .slot.current {
  cursor: default; height:64px; color:#4B5358;
  background:repeating-linear-gradient(135deg,#E4E7E8 0,#E4E7E8 7px,#EDF0F0 7px,#EDF0F0 14px);
  box-shadow:inset 0 0 0 1px #CED4D6;
}
.pt-booking .slot.current::before { display:block; }
.pt-booking .slot.current::after { content:"Kan ikke bookes"; display:block; font-size:10px; line-height:1.3; font-weight:400; margin-top:4px; color:#596269; }
@media(max-width:560px) { .pt-booking .slot.current::after { content:"Kan ikke\A bookes"; white-space:pre-line; font-size:9px; } }
.pt-booking .slot.current:hover, .pt-booking .slot.current:active { filter:none; transform:none; }
.pt-booking .pt-current-label { display:block; font-size:11px; font-weight:400; color:#6B675C; line-height:1.4; }