/* =========================
 * CSS-Datei anlegen unter: /wp-content/plugins/buchungskalender/css/buchungskalender.css
 * Inhalt siehe unten (als Referenz – bitte in eigene Datei kopieren):
 * ========================= */

/* Datei: css/buchungskalender.css */

:root{
  --bk-green: #39b54a;        /* verfügbar */
  --bk-red:   #cc3333;        /* gebucht + Dreiecke */
  --bk-free:  #f6fff7;        /* Hintergrund verfügbar */
  --bk-text:  #222;
  --bk-border:#e6e6e6;
}

.bk-wrap{font-family:system-ui,-apple-system,Verdana, Segoe UI,Roboto,Ubuntu,Arial,sans-serif;color:var(--bk-text)}
.bk-legend{display:flex;gap:1rem;align-items:center;margin:0 0 .75rem 0;font-size:.9rem}
.bk-legend .lg{display:inline-flex;align-items:center;gap:.45rem}
.bk-legend .lg i{display:inline-block;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent}
.bk-legend .lg-arrival i{border-bottom:10px solid var(--bk-red)}     /* ▲ */
.bk-legend .lg-departure i{border-top:10px solid var(--bk-red)}       /* ▼ */
.bk-legend .lg-available i{width:14px;height:14px;border-radius:3px;background:var(--bk-green);border:1px solid #1f7f2b}
.bk-legend .lg-booked i{width:14px;height:14px;border-radius:3px;background:var(--bk-red);border:1px solid #8f2323}

/* Multi-month grid for quarterly/yearly */
.bk-wrap.bk-view-quarterly .bk-multi,
.bk-wrap.bk-view-yearly .bk-multi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 1100px){
  .bk-wrap.bk-view-quarterly .bk-multi,
  .bk-wrap.bk-view-yearly .bk-multi { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
  .bk-wrap.bk-view-quarterly .bk-multi,
  .bk-wrap.bk-view-yearly .bk-multi { grid-template-columns: 1fr; }
}

.bk-month{display:block;width:100%;margin:0 0 1.25rem 0;border:1px solid var(--bk-border);border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.03);overflow:hidden;background:#fff}
.bk-month-header{padding:.5rem .75rem;background:#fff;font-weight:600;border-bottom:1px solid #eee}

.bk-nav{display:flex;justify-content:space-between;gap:.5rem;padding:.35rem .5rem;border:1px solid #eee;border-top:none;background:#fafafa}
.bk-btn{padding:.25rem .6rem;text-decoration:none;border:1px solid #ddd;border-radius:6px;background:#fff}

.bk-grid{display:block}
.bk-weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#fafafa;border-bottom:1px solid #eee}
.bk-weeks{display:block}
.bk-week{display:grid;grid-template-columns:repeat(7,1fr)}  

.bk-cell{position:relative;padding:.5rem .4rem;min-height:46px;border-right:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0;display:flex;align-items:flex-start;justify-content:flex-end}
.bk-cell:nth-child(7){border-right:none}
.bk-cell.head{background:#fafafa;font-weight:600;justify-content:center;align-items:center}
.bk-cell.empty{background:#fff}
.bk-cell .num{font-size:.95rem;z-index:2}

/* Zustände */
.bk-cell.available{background:var(--bk-free)}
.bk-cell.booked{background:var(--bk-red);color:#fff}

/* Dreiecke (An-/Abreise) als Pseudoelemente in der Ecke */
.bk-cell.arrival::after, .bk-cell.departure::after, .bk-cell.arrival-departure::before, .bk-cell.arrival-departure::after{
  content:""; position:absolute; width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent;
}
/* ▲ oben rechts */
.bk-cell.arrival::after, .bk-cell.arrival-departure::before{
  border-bottom:10px solid var(--bk-red); right:2px; top:2px;
}
/* ▼ unten rechts */
.bk-cell.departure::after, .bk-cell.arrival-departure::after{
  border-top:10px solid var(--bk-red); right:2px; bottom:2px;
}

/* Heutiger Tag – zarter Ring */
.bk-cell.today{box-shadow:inset 0 0 0 3px rgba(0,0,0,.06)}

/* Responsive Tweaks for single month */
@media (max-width: 720px){
  .bk-month{width:100%}
}