/* MOKU MOKU laikų kalendorius. Naudoja index.html spalvų kintamuosius. */

.cal{border:var(--line);border-radius:28px;background:var(--white);padding:28px;overflow:hidden}
.cal__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.cal__month{white-space:nowrap;
  font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(19px,2vw,24px);
  margin:0;text-transform:capitalize;letter-spacing:-.01em;
}
.cal__nav{
  width:44px;height:44px;flex:0 0 auto;cursor:pointer;
  border:var(--line);border-radius:999px;background:var(--offwhite);
  font-size:20px;line-height:1;font-family:'Syne',sans-serif;font-weight:700;color:var(--ink);
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.cal__nav:hover:not(:disabled){background:var(--lime);transform:translateY(-2px)}
.cal__nav:disabled{opacity:.3;cursor:not-allowed}

.cal__week{
  display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:8px;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-soft);text-align:center;
}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}

.cal__d{
  min-height:72px;padding:10px;border:var(--line);border-radius:14px;background:var(--offwhite);
  font-family:'Syne',sans-serif;font-weight:700;font-size:15px;color:var(--ink);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  transition:background .2s var(--ease),transform .2s var(--ease),color .2s var(--ease);
}
.cal__d:hover:not(:disabled){background:var(--lime);transform:translateY(-2px)}
.cal__d[aria-pressed="true"]{background:var(--ink);color:var(--lime)}
.cal__d:disabled{opacity:.28;cursor:not-allowed;background:transparent;border-style:dashed}
.cal__d--empty{border:none;background:none;cursor:default;pointer-events:none}
.cal__dot{width:6px;height:6px;border-radius:50%;background:var(--lime-deep)}
.cal__d[aria-pressed="true"] .cal__dot{background:var(--lime)}
.cal__d--full .cal__dot{background:var(--orange)}

.cal__day{margin-top:26px;border-top:var(--line);padding-top:24px}
.cal__day-title{
  font-family:'Syne',sans-serif;font-weight:800;font-size:18px;margin:0 0 4px;
}
.cal__day-sub{font-size:14px;color:var(--muted-soft);margin:0 0 18px;font-weight:600}

.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.slot{
  border:var(--line);border-radius:16px;background:var(--white);padding:14px 16px;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:10px;font:inherit;color:inherit;
  transition:transform .2s var(--ease),background .2s var(--ease),opacity .2s var(--ease);
}
.slot__t{font-family:'Syne',sans-serif;font-weight:700;font-size:15px;white-space:nowrap}
.slot__p{font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap}
.slot--eve{background:rgba(181,230,29,.25)}
.slot--night{background:var(--ink);color:var(--offwhite)}
.slot--night .slot__p{color:var(--lime)}
.slot--taken{opacity:.45;background:repeating-linear-gradient(135deg,rgba(22,21,15,.07) 0 8px,transparent 8px 16px)}
.slot--taken .slot__t{text-decoration:line-through}
.slot--taken .slot__p{color:var(--muted-soft)}
.slot--btn{cursor:pointer}
.slot--btn:hover{transform:translateY(-3px)}
.slot--past{opacity:.3}

.legend{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px;font-size:14px;font-weight:600;color:var(--muted)}
.legend__i{display:inline-flex;align-items:center;gap:9px}
.legend__d{width:14px;height:14px;border:var(--line);border-radius:5px;background:var(--white);flex:0 0 auto}
.legend__d--eve{background:rgba(181,230,29,.25)}
.legend__d--night{background:var(--ink)}

@media (max-width:860px){
  .cal{padding:20px 16px;border-radius:22px}
  .slots{grid-template-columns:repeat(2,1fr)}
  .cal__grid,.cal__week{gap:6px}
  .cal__d{border-radius:11px;font-size:14px}
}
@media (max-width:560px){
  .slots{grid-template-columns:1fr}
}

@media (max-width:860px){
  .cal__d{min-height:46px;padding:6px;font-size:14px}
  .cal__month{font-size:17px}
  .cal__nav{width:38px;height:38px;font-size:17px}
}

/* pasirinktas laikas */
.slot--pick{background:var(--lime);box-shadow:4px 5px 0 var(--ink)}
.slot--pick .slot__p{color:var(--ink)}
.slot--btn{cursor:pointer}