/**
 * Consultant Appointment Calendar – booknow-style design
 * Scoped under .tm-consultant-calendar-page
 * Uses same layout/styling as [booknow] form.
 */

.tm-consultant-calendar-page {
  --tm-consultant-gradient: linear-gradient(135deg, #1d2372 0%, #44327d 35%, #dc4026 70%, #ff9280 100%);
  --tm-consultant-btn-gradient: linear-gradient(104deg, #003973 0%, #ff1919 100%);
  --tm-consultant-accent: #dc4026;
  --tm-consultant-border-radius: 12px;
}

/* "Select date and time" label – matches .tm-booking-label */
.tm-consultant-calendar-page .abc_selectdate.fields {
  font-family: "Wix Madefor Display", Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #000;
  margin: 0 0 8px;
  display: block;
}

/* Calendar selector (when multiple calendars) – matches .tm-booking-select */
.tm-consultant-calendar-page select#consultant_item,
.tm-consultant-calendar-page select#cpabc_item,
.tm-consultant-calendar-page select#STUDENT_item {
  display: block;
  width: 100%;
  max-width: 280px;
  padding: 12px 40px 12px 16px;
  border-radius: 11px;
  border: 1px solid #94a3b8;
  background: var(--Opacity-Neutral-Darkest-5, rgba(0, 0, 0, 0.05));
  font-family: "Wix Madefor Display", Arial, sans-serif;
  font-size: 15px;
  color: var(--foreground);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231D2372' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  margin-bottom: 16px;
}

/* Calendar block – solid border (same as booknow fields) */
.tm-consultant-calendar-page .appContainer {
  border-radius: var(--tm-consultant-border-radius);
  border: 1px solid #94a3b8;
  overflow: hidden;
  margin-bottom: 8px;
}

.tm-consultant-calendar-page .appContainer2 {
  border-radius: inherit;
  overflow: hidden;
}

/* Calendar YUI – navy header, gradient selected (consultant + CPABC + staff plugins) */
.tm-consultant-calendar-page #cp_abcform_pform .yui-calcontainer,
.tm-consultant-calendar-page #STD_ABCform_pform .yui-calcontainer {
  border-radius: inherit;
}

.tm-consultant-calendar-page #cp_abcform_pform .yui-calendar .calhead,
.tm-consultant-calendar-page #STD_ABCform_pform .yui-calendar .calhead {
  background: linear-gradient(135deg, #1d2372, #44327d) !important;
  color: #fff !important;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: linear-gradient(135deg, #1d2372, #44327d, #dc4026, #ff9280) !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)!important;
}

.tm-consultant-calendar-page #cp_abcform_pform .yui-calendar td.calcell.selected,
.tm-consultant-calendar-page #cp_abcform_pform .yui-calendar td.calcell.reserveddate,
.tm-consultant-calendar-page #STD_ABCform_pform .yui-calendar td.calcell.selected,
.tm-consultant-calendar-page #STD_ABCform_pform .yui-calendar td.calcell.reserveddate {
  background: var(--tm-consultant-btn-gradient) !important;
  color: #fff !important;
}

.tm-consultant-calendar-page #cp_abcform_pform .yui-calendar td.calcell a,
.tm-consultant-calendar-page #STD_ABCform_pform .yui-calendar td.calcell a {
  color: #1d2372;
}

.tm-consultant-calendar-page #cp_abcform_pform .yui-calendar td.calcell.selected a,
.tm-consultant-calendar-page #cp_abcform_pform .yui-calendar td.calcell.reserveddate a,
.tm-consultant-calendar-page #STD_ABCform_pform .yui-calendar td.calcell.selected a,
.tm-consultant-calendar-page #STD_ABCform_pform .yui-calendar td.calcell.reserveddate a {
  color: #fff !important;
}

.tm-consultant-calendar-page #cp_abcform_pform .listcal > div,
.tm-consultant-calendar-page #STD_ABCform_pform .listcal > div {
  background: var(--tm-consultant-btn-gradient) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Form fields container – matches .tm-booking-fields layout */
.tm-consultant-calendar-page .form_fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}

/* Fieldset base */
.tm-consultant-calendar-page .form_fields fieldset {
  border: none;
  border-radius: var(--tm-consultant-border-radius);
  margin: 0;
  padding: 0;
}

/* Legend – matches .tm-booking-label */
.tm-consultant-calendar-page .form_fields fieldset legend {
  font-family: "Wix Madefor Display", Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #000;
  padding: 0;
  margin: 0 0 12px 0;
  display: block;
}

/* Your booking details – header row with Edit link, content box below */
.tm-consultant-calendar-page .form_fields fieldset:first-of-type {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 12px 24px;
  align-items: baseline;
}

.tm-consultant-calendar-page .form_fields fieldset:first-of-type legend {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.tm-consultant-calendar-page .form_fields fieldset:first-of-type .alignright {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.tm-consultant-calendar-page .form_fields fieldset:first-of-type #serviceinfo {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* Your booking details – content box (screenshot style) */
.tm-consultant-calendar-page .form_fields fieldset #serviceinfo {
  background: #f3f4f6;
  border: 1px solid #94a3b8;
  border-radius: var(--tm-consultant-border-radius);
  padding: 24px;
  font-family: "Wix Madefor Display", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #334155;
}

.tm-consultant-calendar-page .form_fields fieldset #serviceinfo strong {
  font-weight: 700;
  display: inline;
  color: #000;
}

/* Edit your booking link – red, underlined */
.tm-consultant-calendar-page .form_fields .alignright {
  color: var(--tm-consultant-accent);
  font-weight: 600;
  text-decoration: underline;
}

.tm-consultant-calendar-page .form_fields .alignright:hover {
  opacity: 0.9;
}

.tm-consultant-calendar-page .form_fields .alignright u {
  text-decoration: underline;
}

/* Upload files fieldset – same box style as booking details */
.tm-consultant-calendar-page .form_fields fieldset:not(:first-of-type) {
  /* background: #f3f4f6; */
  /* border: 1px solid #94a3b8; */
  /* border-radius: var(--tm-consultant-border-radius); */
  /* padding: 24px; */
}

.tm-consultant-calendar-page .form_fields fieldset:not(:first-of-type) legend {
  margin-bottom: 12px;
}

/* Message label & other section labels – matches .tm-booking-label */
.tm-consultant-calendar-page .form_fields > strong {
  font-family: "Wix Madefor Display", Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #000;
  margin: 0 0 8px;
  display: block;
}

/* Message textarea */
.tm-consultant-calendar-page .form_fields textarea[name="question"] {
  width: 100%;
  min-height: 80px;
  padding: 12px 16px;
  border: 1px solid #94a3b8;
  border-radius: var(--tm-consultant-border-radius);
  font-family: "Wix Madefor Display", Arial, sans-serif;
  font-size: 15px;
  color: var(--foreground);
  background: #f3f4f6;
  resize: vertical;
  box-sizing: border-box;
  display: block;
}

.tm-consultant-calendar-page .form_fields textarea[name="question"]::placeholder {
  color: var(--muted);
}

.tm-consultant-calendar-page .form_fields textarea[name="question"]:focus {
  outline: none;
  opacity: 0.95;
}

/* Upload files fieldset – file inputs */
.tm-consultant-calendar-page .form_fields fieldset input[type="file"] {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  padding: 12px 16px;
  border-radius: 11px;
  border: 1px solid #94a3b8;
  font-family: "Wix Madefor Display", Arial, sans-serif;
  font-size: 15px;
  color: var(--foreground);
  box-sizing: border-box;
  background: #f3f4f6;
}

.tm-consultant-calendar-page .form_fields fieldset input[type="file"]:last-of-type {
  margin-bottom: 0;
}

/* Captcha – single color border */
.tm-consultant-calendar-page .form_fields .dfield.security {
  /* display: flex; */
  /* flex-wrap: wrap; */
  /* align-items: center; */
  /* gap: 12px; */
  /* padding: 16px; */
  /* border-radius: var(--tm-consultant-border-radius); */
  /* border: 1px solid #94a3b8; */
  /* background: #f3f4f6; */
  /* box-sizing: border-box; */
}

.tm-consultant-calendar-page .form_fields .dfield.security img {
  display: block;
  margin-bottom: 10px;
}

.tm-consultant-calendar-page .form_fields .dfield.security input[type="text"] {
  padding: 12px 16px;
  border: 1px solid #94a3b8;
  border-radius: 11px;
  font-family: "Wix Madefor Display", Arial, sans-serif;
  font-size: 15px;
  /* min-width: 140px; */
  background: var(--Opacity-Neutral-Darkest-5, rgba(0, 0, 0, 0.05));
  width: 100%;
}

/* Submit button – matches .tm-booking-submit exactly */
.tm-consultant-calendar-page .form_fields input.cp_subbtn {
  margin-top: 16px;
  padding: 14px 28px;
  max-width: 320px;
  width: fit-content;
  align-self: flex-start;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0);
  background: linear-gradient(104deg, #003973 0%, #ff1919 100%);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.07), 4px 4px 4px 0 rgba(255, 255, 255, 0.25) inset;
  color: #ffffff;
  font-family: "Wix Madefor Display", Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.tm-consultant-calendar-page .form_fields input.cp_subbtn:hover {
  opacity: 0.92;
}

/* Form layout – consultant (.consultant), staff (.staff), CPABC (plain .cpp_form) */
.tm-consultant-calendar-page .tm-consultant-calendar-fields form.cpp_form {
  display: flex;
  flex-direction: column;
}

/* Error message (exist=1) */
.tm-consultant-calendar-page form font[color="red"] {
  display: block;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: #fef2f2;
  border-radius: 8px;
  font-family: "Wix Madefor Display", Arial, sans-serif;
  font-size: 14px;
}
.tm-booking-fields.tm-consultant-calendar-fields p {
  display: none;
}

.tm-consultant-calendar-page .form_fields .alignright {
  position: absolute;
  top: 0;
  right: 0;
}
.tm-booking-fields.tm-consultant-calendar-fields br {
  display: none;
}

.tm-booking-fields.tm-consultant-calendar-fields #serviceinfo br {
  display: block;
}

.yui-calendar .calhead {
  background: linear-gradient(135deg, #1d2372, #44327d, #dc4026, #ff9280);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
}