/* randevu-simple.css */
/*--------------------------------------------------
  Randevu Plugin — Kompakt Saat Listesi Stilleri
---------------------------------------------------*/

/* Zaman listesi (<ul id="time-list">) için grid düzeni */
#time-list {
    list-style: none;
    margin: 0.5em 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 4px;            /* Hücreler arası boşluğu küçülttük */
  }
  
  /* Her bir saat kutusu */
  #time-list li {
    padding: 0.25em;          /* Daha az iç boşluk */
    border: 1px solid #ccc;   /* İnce kenarlık */
    text-align: center;
    cursor: pointer;
    background: #fff;
    font-size: 0.875rem;      /* %87.5 yazı tipi (yaklaşık 14px) */
    line-height: 1.2;         /* Satır yüksekliğini sıkıştırdık */
    transition: background 0.15s;
    user-select: none;
  }
  
  /* Hover efekti (sadece tıklanabilir olanlara) */
  #time-list li:hover:not(.selected) {
    background: #f0f4ff;
  }
  
  /* Seçili saat kutusu */
  #time-list li.selected {
    background: #d0e2ff;
    border-color: #77a1ff;
  }
  
  /* Bloke edilmiş saatleri gri ve tıklanamaz yap */
  #time-list li.blocked {
    color: #aaa;
    cursor: default;
    background: #f9f9f9;
    border-color: #e0e0e0;
  }
  
  /* Booking date input’un hemen altındaki listeye ekstra ince kenarlık */
  .randevu-booking-date + #time-list {
    border-top: 1px solid #ddd;
    padding-top: 0.5em;
  }