/*
  Claydates - Soft UI Pass ✨
  Paste ABOVE your existing rules (leave the rest below as-is).
*/

/* 1) Global type smoothing + calmer default font */
body, #events, #eventForm, .ui-widget, input, select, textarea, button {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: 0.1px;
}

/* 2) Make headings feel less shouty */
#events h3, #eventForm h3, #eventForm h2 {
  font-weight: 650 !important;
  letter-spacing: -0.2px;
  line-height: 1.15;
}

/* 3) Rounded “card” style for each event block */
#events .event, 
#events .eventItem, 
#events .selectedEvent,
#events div.event, 
#events li, 
#events .service, 
#events .serviceContainer {
  border-radius: 18px !important;
  overflow: hidden;
}

/* 4) Subtle card borders + spacing (works even if selectors vary) */
#events .event, 
#events .eventItem, 
#events div.event, 
#events .service, 
#events .serviceContainer, 
#events .selectedEvent {
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important;
  background: rgba(255,255,255,0.85) !important;
  margin-bottom: 14px !important;
}

/* 5) Make descriptions easier to read */
#events p.description, 
#events div.description {
  color: rgba(0,0,0,0.72) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

/* 6) Make duration text smaller and softer */
#events p.duration, 
#events div.duration {
  color: rgba(0,0,0,0.55) !important;
  font-size: 13px !important;
}

/* 7) Buttons: round, pill-ish, less aggressive */
#events input.reserve_time_btn,
#events input.select_another_btn,
#eventForm #save_button,
button, input[type="submit"], input[type="button"] {
  border-radius: 999px !important;
  padding: 12px 16px !important;
  font-weight: 650 !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
  cursor: pointer;
}

/* 8) Button hover/active states (gentle) */
#events input.reserve_time_btn:hover,
#events input.select_another_btn:hover,
#eventForm #save_button:hover,
button:hover, input[type="submit"]:hover, input[type="button"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.10) !important;
}

#events input.reserve_time_btn:active,
#events input.select_another_btn:active,
#eventForm #save_button:active,
button:active, input[type="submit"]:active, input[type="button"]:active {
  transform: translateY(0px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.10) !important;
}

/* 9) Timeline table: round the container a bit */
#timeline-container table.timeline,
div.ui-widget-content {
  border-radius: 16px !important;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08) !important;
}

/* 10) Timeline cells: soften hard blocks */
.timeline td {
  border-radius: 10px !important;
}

/* 11) Selected time: make it feel “chosen” */
.timeline td.selected_time {
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.15) !important;
}

/* 12) Reserved/unavailable: lower contrast (less harsh) */
.timeline td.not_worked_time,
.timeline td.reserved_time {
  opacity: 0.65;
}

/* 13) Loading overlay: soften */
div#loading {
  border-radius: 16px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.12) !important;
}

/* 14) Form section headings spacing */
#eventForm #start_date-block-container h3,
#eventForm #timeline-container h3 {
  margin-top: 18px !important;
  margin-bottom: 10px !important;
}

/* 15) Inputs: round + soft border */
#eventForm input[type="text"],
#eventForm input[type="email"],
#eventForm input[type="tel"],
#eventForm textarea,
#eventForm select {
  border-radius: 14px !important;
  padding: 12px 12px !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page styles
*/
 #events h3   {
	/* add your css rule here */
}


 #events p.duration, #events div.duration   {
	/* add your css rule here */
}


 #events p.description, #events div.description   {
	/* add your css rule here */
}


 #events .selectedEvent   {
	/* add your css rule here */
}


 #events input.reserve_time_btn   {
	/* add your css rule here */
}


 #events input.select_another_btn   {
	/* add your css rule here */
}


 #eventForm #start_date-block-container h3, #eventForm #timeline-container h3   {
	/* add your css rule here */
}


 #eventForm #save_button   {
	/* add your css rule here */
}


 div.ui-widget-content   {
	/* add your css rule here */
}


 div.ui-widget-header   {
	/* add your css rule here */
}


 #timeline-container table.timeline   {
	/* add your css rule here */
}


 .timeline td.not_worked_time   {
	/* add your css rule here */
}


 .timeline td.free_time   {
	/* add your css rule here */
}


 .timeline td.selected_time   {
	/* add your css rule here */
}


 .timeline td.reserved_time   {
	/* add your css rule here */
}


 div#loading   {
	/* add your css rule here */
}


 #start_date-block-container .zend_form dt, start_date-block-container .zend_form dt b, start_date-block-container .zend_form dd label   {
	/* add your css rule here */
}