/* ===========================================================
   Premium UI Kit — Date Picker / Time Picker / Text Input
   MazyTools — matches site's rounded, gradient, shadow language
   =========================================================== */

.pui-wrap{position:relative;width:100%;font-family:inherit;}

/* ---------- Trigger button (shared by date & time) ---------- */
.pui-trigger{
  width:100%;display:flex;align-items:center;gap:9px;
  padding:10px 13px;border:1.5px solid #e2e8f0;border-radius:10px;
  background:#fafafa;cursor:pointer;box-sizing:border-box;
  font-size:.95rem;font-weight:700;color:#1e293b;
  transition:border-color .2s,box-shadow .2s,background .2s;
  text-align:left;
}
.pui-trigger:hover{background:#fff;}
.pui-trigger.pui-open,
.pui-trigger:focus-visible{
  border-color:var(--pui-accent,#7c3aed);
  box-shadow:0 0 0 3px var(--pui-accent-soft,rgba(124,58,237,.12));
  outline:none;background:#fff;
}
.pui-trigger .pui-ic{
  width:17px;height:17px;flex-shrink:0;color:var(--pui-accent,#7c3aed);
}
.pui-trigger .pui-val{flex:1;min-width:0;}
.pui-trigger .pui-val.pui-placeholder{color:#94a3b8;font-weight:600;}
.pui-trigger .pui-chev{
  width:15px;height:15px;flex-shrink:0;color:#94a3b8;transition:transform .2s;
}
.pui-trigger.pui-open .pui-chev{transform:rotate(180deg);}

/* ---------- Floating panel shell ---------- */
.pui-panel{
  position:absolute;top:calc(100% + 8px);left:0;z-index:60;
  width:290px;max-width:92vw;
  background:#fff;border-radius:16px;
  box-shadow:0 20px 45px rgba(15,23,42,.16),0 2px 8px rgba(15,23,42,.06);
  border:1px solid #eef1f6;overflow:hidden;
  opacity:0;transform:translateY(-6px) scale(.98);
  pointer-events:none;transition:opacity .15s ease,transform .15s ease;
}
.pui-panel.pui-show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;z-index:100000;}

/* ---------- Calendar header ---------- */
.pui-cal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 10px;color:#fff;
  background:linear-gradient(135deg,var(--pui-accent,#7c3aed),var(--pui-accent2,#a855f7));
}
.pui-cal-nav{
  width:28px;height:28px;border-radius:8px;border:none;
  background:rgba(255,255,255,.18);color:#fff;display:flex;
  align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
  transition:background .15s;
}
.pui-cal-nav:hover{background:rgba(255,255,255,.32);}
.pui-cal-title{
  font-size:.88rem;font-weight:800;letter-spacing:.02em;cursor:pointer;
  padding:4px 10px;border-radius:8px;transition:background .15s;
}
.pui-cal-title:hover{background:rgba(255,255,255,.16);}

/* ---------- Calendar body ---------- */
.pui-cal-body{padding:10px 12px 14px;}
.pui-cal-dow{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px;}
.pui-cal-dow span{
  text-align:center;font-size:.65rem;font-weight:800;color:#94a3b8;
  text-transform:uppercase;letter-spacing:.03em;padding:4px 0;
}
.pui-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.pui-day{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:700;color:#334155;border-radius:9px;
  cursor:pointer;border:none;background:transparent;transition:background .12s,color .12s;
}
.pui-day:hover:not(:disabled){background:var(--pui-accent-soft,rgba(124,58,237,.1));}
.pui-day.pui-muted{color:#cbd5e1;}
.pui-day.pui-today{color:var(--pui-accent,#7c3aed);}
.pui-day.pui-selected{
  background:linear-gradient(135deg,var(--pui-accent,#7c3aed),var(--pui-accent2,#a855f7));
  color:#fff;
  animation:pui-pop .22s cubic-bezier(.34,1.56,.64,1);
}
.pui-day:disabled{opacity:.3;cursor:not-allowed;}
@keyframes pui-pop{0%{transform:scale(.82);}60%{transform:scale(1.08);}100%{transform:scale(1);}}
.pui-col-item.pui-active{animation:pui-pop .22s cubic-bezier(.34,1.56,.64,1);}

/* month / year grid views */
.pui-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6px 2px 2px;}
.pui-cell{
  padding:12px 4px;text-align:center;font-size:.82rem;font-weight:700;
  color:#334155;border-radius:10px;cursor:pointer;border:1.5px solid transparent;
  background:#f8fafc;transition:all .12s;
}
.pui-cell:hover{background:var(--pui-accent-soft,rgba(124,58,237,.1));}
.pui-cell.pui-selected{
  border-color:var(--pui-accent,#7c3aed);color:var(--pui-accent,#7c3aed);background:#fff;
}

/* ---------- Time picker ---------- */
.pui-time-tabs{display:flex;gap:8px;padding:12px 12px 0;}
.pui-tab{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 6px;border-radius:10px;border:none;cursor:pointer;
  font-size:.8rem;font-weight:800;color:#64748b;background:#f1f5f9;transition:all .15s;
}
.pui-tab.pui-active{
  background:linear-gradient(135deg,var(--pui-accent,#7c3aed),var(--pui-accent2,#a855f7));
  color:#fff;
}
.pui-time-cols{display:flex;align-items:center;justify-content:center;gap:2px;padding:14px 16px 4px;}
.pui-col{
  height:132px;overflow-y:auto;scroll-snap-type:y mandatory;width:52px;
  -ms-overflow-style:none;scrollbar-width:none;
}
.pui-col::-webkit-scrollbar{display:none;}
.pui-col-item{
  height:44px;display:flex;align-items:center;justify-content:center;
  scroll-snap-align:center;font-size:1.05rem;font-weight:700;color:#cbd5e1;
  cursor:pointer;transition:color .12s,font-size .12s;
}
.pui-col-item.pui-active{
  color:var(--pui-accent,#7c3aed);font-size:1.3rem;font-weight:900;
}
.pui-col-sep{font-size:1.2rem;font-weight:900;color:#cbd5e1;padding:0 2px;}
.pui-ampm-col{display:flex;flex-direction:column;gap:6px;margin-left:8px;}
.pui-ampm-btn{
  padding:8px 12px;border-radius:9px;border:1.5px solid #e2e8f0;background:#fff;
  font-size:.72rem;font-weight:800;color:#64748b;cursor:pointer;transition:all .15s;
}
.pui-ampm-btn.pui-active{
  border-color:transparent;color:#fff;
  background:linear-gradient(135deg,var(--pui-accent,#7c3aed),var(--pui-accent2,#a855f7));
}
.pui-time-actions{display:flex;gap:6px;padding:12px;border-top:1px solid #f1f5f9;}
.pui-btn{
  flex:1;padding:9px 4px;border-radius:10px;border:none;font-size:.74rem;font-weight:800;cursor:pointer;white-space:nowrap;
}
.pui-btn-ghost{background:#f1f5f9;color:#475569;}
.pui-btn-ghost:hover{background:#e2e8f0;}
.pui-btn-solid{
  color:#fff;background:linear-gradient(135deg,var(--pui-accent,#7c3aed),var(--pui-accent2,#a855f7));
}

/* ---------- Premium floating-label text input ---------- */
.pui-field{position:relative;margin-top:6px;}
.pui-field input.pui-input{
  width:100%;box-sizing:border-box;padding:16px 14px 8px;
  border:1.5px solid #e2e8f0;border-radius:12px;background:#fff;
  font-size:.95rem;font-weight:600;color:#1e293b;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.pui-field input.pui-input::placeholder{color:transparent;}
.pui-field .pui-flabel{
  position:absolute;left:14px;top:14px;font-size:.92rem;font-weight:600;
  color:#94a3b8;pointer-events:none;transition:all .18s ease;background:transparent;
}
.pui-field input.pui-input:focus{
  border-color:var(--pui-accent,#4f46e5);
  box-shadow:0 0 0 3px var(--pui-accent-soft,rgba(79,70,229,.1));
}
.pui-field input.pui-input:focus ~ .pui-flabel,
.pui-field input.pui-input.pui-filled ~ .pui-flabel{
  top:-8px;left:11px;font-size:.68rem;font-weight:800;padding:0 5px;
  background:#fff;color:var(--pui-accent,#4f46e5);
  letter-spacing:.02em;
}
.pui-counter{
  position:absolute;right:12px;bottom:-18px;font-size:.68rem;font-weight:700;color:#94a3b8;
}

@media (max-width:420px){
  .pui-panel{width:270px;}
}