.ctg-date-trigger,
.ctg-date-range-trigger{
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 13px;
  border:1px solid #d9e3d6;
  border-radius:9px;
  background:#fff;
  color:#1f2937;
  font:inherit;
  text-align:left;
  cursor:pointer;
  box-sizing:border-box;
}

.ctg-date-trigger:hover,
.ctg-date-range-trigger:hover{ border-color:#75b84b; }
.ctg-date-trigger:focus-visible,
.ctg-date-range-trigger:focus-visible{ outline:3px solid rgba(117,184,75,.22); }
.ctg-date-trigger-icon{ color:#4caf50; font-size:1rem; }
.ctg-date-range-trigger{ justify-content:space-between; }
.ctg-date-range-trigger::after{ content:"▾"; color:#4caf50; font-size:1rem; }

.ctg-date-picker{
  position:fixed;
  z-index:20000;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 210px;
  overflow:hidden;
  background:#fff;
  border:1px solid #d8e0d6;
  border-radius:12px;
  box-shadow:0 20px 50px rgba(20,40,26,.22);
  color:#1d2931;
}

.ctg-date-picker[hidden]{ display:none; }
.ctg-date-picker-main{ padding:16px; }
.ctg-date-picker-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.ctg-date-picker-head strong{ text-transform:capitalize; font-size:1rem; }
.ctg-date-nav{ width:34px; height:34px; border:0; border-radius:8px; background:transparent; color:#5c6a62; font-size:1.75rem; line-height:1; cursor:pointer; }
.ctg-date-nav:hover{ background:#edf7e9; color:#3d9b42; }
.ctg-date-weekdays,
.ctg-date-grid{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); }
.ctg-date-weekdays{ margin-bottom:5px; }
.ctg-date-weekdays span{ padding:7px 0; color:#4d5b52; text-align:center; font-size:.78rem; font-weight:800; }
.ctg-date-day{ position:relative; z-index:0; height:38px; border:0; background:transparent; color:#17241a; font:inherit; font-weight:700; cursor:pointer; }
.ctg-date-day::before{ content:""; position:absolute; inset:2px; z-index:-1; border-radius:50%; }
.ctg-date-day:hover::before{ background:#e8f5dd; }
.ctg-date-day.is-outside{ color:#b6c0b6; }
.ctg-date-day.is-between{ background:#dcefc9; }
.ctg-date-day.is-start{ border-radius:20px 0 0 20px; background:#dcefc9; }
.ctg-date-day.is-end{ border-radius:0 20px 20px 0; background:#dcefc9; }
.ctg-date-day.is-start.is-end{ border-radius:20px; }
.ctg-date-day.is-selected{ color:#fff; }
.ctg-date-day.is-selected::before{ background:#8bc34a; }
.ctg-date-summary{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; padding-top:12px; border-top:1px solid #e5ebe3; color:#6a756d; font-size:.78rem; }
.ctg-date-summary button{ border:0; background:transparent; color:#4c9d3d; font:inherit; font-weight:900; text-transform:uppercase; cursor:pointer; }
.ctg-date-presets{ display:grid; align-content:start; gap:2px; padding:12px; border-left:1px solid #e1e8df; background:#fbfdfb; }
.ctg-date-presets button{ min-height:34px; padding:0 10px; border:0; border-radius:7px; background:transparent; color:#36433a; text-align:left; font:inherit; font-size:.84rem; cursor:pointer; }
.ctg-date-presets button:hover{ background:#e8f5dd; color:#3d9639; }

@media (max-width:680px){
  .ctg-date-picker{ grid-template-columns:1fr; max-height:calc(100vh - 20px); overflow:auto; }
  .ctg-date-presets{ grid-template-columns:1fr 1fr; border-top:1px solid #e1e8df; border-left:0; }
  .ctg-date-presets button{ min-height:30px; }
}