/* ===== GRUZ compact theme for jQuery UI Datepicker ===== */

#ui-datepicker-div.gruz-ui-datepicker{
  font-family: inherit;
  background: #fff;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  overflow: hidden;
  padding: 0;
  margin-top: 4px;
  min-width: 200px; /* трохи вужчий */
}

/* Header */
#ui-datepicker-div.gruz-ui-datepicker .ui-datepicker-header{
  background: #f05a4f;
  color: #fff;
  border: 0;
  padding: 6px 8px;                /* компактніше */
  position: relative;
}

/* ====== МІСЯЦЬ/РІК — СТАЮТЬ ВИДИМИМИ ====== */
#ui-datepicker-div.gruz-ui-datepicker .ui-datepicker-title{
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 13px;                 /* трохи менше */
  line-height: 1;
}

/* стилізація native <select> від jQuery UI */
#ui-datepicker-div.gruz-ui-datepicker .ui-datepicker-title select{
  background: rgba(255,255,255,.15);
  color: #fff;                     /* текст видно на червоному */
  border: 0;
  border-radius: 4px;
  padding: 4px 18px 4px 8px;
  font-weight: 600;
  font-size: 13px;
  appearance: none;                /* ховаємо системну стрілку */
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
}

#ui-datepicker-div.gruz-ui-datepicker .ui-datepicker-title select option{
 color: #000;
}

/* невеличкі власні стрілки для селектів */
#ui-datepicker-div.gruz-ui-datepicker .ui-datepicker-title select{
  position: relative;
}
#ui-datepicker-div.gruz-ui-datepicker .ui-datepicker-title select:after{
  content: '';
}

/* контейнер заголовка — дозволяємо переноситись як треба на вузьких */
@media (max-width: 360px){
  #ui-datepicker-div.gruz-ui-datepicker .ui-datepicker-title{
    flex-wrap: wrap;
    row-gap: 4px;
  }
}

/* Prev/Next */
#ui-datepicker-div.gruz-ui-datepicker .ui-icon{ display:none; }
#ui-datepicker-div.gruz-ui-datepicker .ui-datepicker-prev,
#ui-datepicker-div.gruz-ui-datepicker .ui-datepicker-next{
  top: 50%;
  transform: translateY(-50%);
  border: 0; background: transparent;
  width: 26px; height: 26px;       /* компактніше */
  border-radius: 50%;
  cursor: pointer; transition: background .15s ease;
}
#ui-datepicker-div.gruz-ui-datepicker .ui-datepicker-prev:hover,
#ui-datepicker-div.gruz-ui-datepicker .ui-datepicker-next:hover{
  background: rgba(255,255,255,.18);
}
#ui-datepicker-div.gruz-ui-datepicker .ui-datepicker-prev:before,
#ui-datepicker-div.gruz-ui-datepicker .ui-datepicker-next:before{
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 7px; height: 7px;
  border-top: 2px solid #fff; border-left: 2px solid #fff;
}
#ui-datepicker-div.gruz-ui-datepicker .ui-datepicker-prev:before{
  transform: translate(-40%, -50%) rotate(-45deg);
}
#ui-datepicker-div.gruz-ui-datepicker .ui-datepicker-next:before{
  transform: translate(-60%, -50%) rotate(135deg);
}

/* Таблиця */
#ui-datepicker-div.gruz-ui-datepicker .ui-datepicker-calendar{
  margin: 6px 8px 8px;
  width: calc(100% - 16px);
  border-collapse: separate; border-spacing: 0 3px; /* компактний міжрядковий */
}

/* Дні тижня */
#ui-datepicker-div.gruz-ui-datepicker th{
  color: #f05a4f;
  font-weight: 600;
  font-size: 11px;
  padding: 4px 0 2px;
}

/* Комірки */
#ui-datepicker-div.gruz-ui-datepicker td{ text-align:center; padding:0; }

/* Кнопки-дні */
#ui-datepicker-div.gruz-ui-datepicker .ui-state-default{
  display:inline-flex; align-items:center; justify-content:center;
  width: 26px; height: 26px;       /* було 30px -> компактніше */
  border-radius:50%;
  border:0; background:transparent; color:#2c2c2c;
  text-decoration:none; font-size:12px;
  transition: background .12s ease, color .12s ease;
}

/* Hover */
#ui-datepicker-div.gruz-ui-datepicker .ui-state-hover{
  background:#ffe7e5; color:#e54a40;
}

/* Today */
#ui-datepicker-div.gruz-ui-datepicker .ui-datepicker-today .ui-state-default{
  box-shadow: inset 0 0 0 2px #f05a4f; color:#f05a4f;
}

/* Selected */
#ui-datepicker-div.gruz-ui-datepicker .ui-state-active{
  background:#f05a4f !important; color:#fff !important;
}

/* Інші місяці — приглушити */
#ui-datepicker-div.gruz-ui-datepicker .ui-datepicker-other-month .ui-state-default{
  color:#bdbdbd;
}

/* Disabled */
#ui-datepicker-div.gruz-ui-datepicker .ui-state-disabled .ui-state-default{
  opacity:.35; pointer-events:none;
}