/**
 * bookingpress-form-v3-recurring.css — styles for the Recurring Appointments
 * add-on inside the Vue 3 booking form: the sessions drawer row, the custom
 * Date & Time fields, the occurrence cards and the summary list.
 */

/* --- Drawer: "No. of Sessions" row ------------------------------------- */
.bpa-recurring-sessions-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
}
.bpa-recurring-sessions-row .bpa-recurring-select-wrapper {
  flex: 0 0 auto;
  width: 200px;
  min-width: 200px;
}
.bpa-recurring-sessions-row .bpa-front-sec--sub-heading {
  font-size: 15px;
  font-weight: 600;
  color: #1a2b4a;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.bpa-recurring-sessions-row .bpa-recurring-select {
  width: 100%;
}

/* --- Custom Date & Time fields (bp-ui-row/col, one line on lg) ---------- */
.bpa-recurring-datetime { width: 100%; }
.bpa-recurring-form .bpa-form-label { font-weight: 600; }
.bpa-recurring-form .bpa-recurring-fields { row-gap: 12px; }

/* bp-ui controls fill their column (target the component class + the
   Element-style inner wrappers defensively). */
.bpa-recurring-datetime .bpa-recurring-select,
.bpa-recurring-datetime .bpa-recurring-date,
.bpa-recurring-datetime .bpa-recurring-select .el-input,
.bpa-recurring-datetime .bpa-recurring-date .el-input,
.bpa-recurring-datetime .bpa-recurring-date .bp-input,
.bpa-recurring-datetime .bpa-recurring-date .bp-input__wrapper,
.bpa-recurring-datetime .bpa-recurring-select .bp-select__wrapper,
.bpa-recurring-datetime .el-date-editor.el-input,
.bpa-recurring-datetime .el-date-editor--date,
.bpa-recurring-datetime .el-select { width: 100%; }

/* The form-item bottom margin is removed so the row aligns cleanly. */
.bpa-recurring-form .bpa-recurring-fields .el-form-item,
.bpa-recurring-form .bpa-recurring-fields .bpa-form-item { margin-bottom: 0; }

/* control heights and vertical alignment. */
.bpa-recurring-fields .el-form-item__content,
.bpa-recurring-fields .bpa-form-item__content {
  display: flex !important;
  align-items: center !important;
}
.bpa-recurring-fields .el-input__wrapper,
.bpa-recurring-fields .bp-input__wrapper,
.bpa-recurring-fields .bp-select__wrapper,
.bpa-recurring-fields .el-select__wrapper {
  height: 40px !important;
  box-sizing: border-box !important;
}
.bpa-recurring-fields .bpa-front-form-control--date-picker,
.bpa-recurring-fields .el-date-editor.el-input,
.bpa-recurring-fields .el-date-editor--date {
  height: 40px !important;
}

/* Apply button aligns to the bottom of the row + fills its column. */
.bpa-recurring-col--apply { display: flex; align-items: flex-end; }
.bpa-recurring-apply-item { width: 100%; }
.bpa-recurring-apply-btn {
  width: 100%;
  justify-content: center;
  height: 43px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 16px !important;
}
.bpa-recurring-apply-btn.__bpa-is-disabled { opacity: 0.5; pointer-events: none; }

/* --- Loader ------------------------------------------------------------- */
.bpa-recurring-loader {
  display: flex;
  justify-content: center;
  padding: 28px 0;
}

/* --- Error -------------------------------------------------------------- */
.bpa-recurring-error {
  margin: 12px 0 0;
}

/* --- Occurrence cards (legacy parity: .bpa-upcomming-appointments) ------- */
/* Admin-customizable palette (injected by RecurringFeature as CSS vars on the
   module root); the hex fallbacks mirror the legacy front CSS. */
.bpa-recurring-datetime {
  --bpa-rec-suggested: #F5AE41;
  --bpa-rec-blocked: #ff0000;
}
.bpa-recurring-appointment-body {
  position: relative !important;
  margin-top: 22px !important;
}
.bpa-recurring-upcoming-label,
.bpa-upcoming-appointments-label {
  display: block;
  margin-bottom: 12px;
  font-weight: 600;
}
/* Two cards per row on desktop (legacy :lg=12), stacking down on small screens. */
.bpa-recurring-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
}
@media (max-width: 600px) {
  .bpa-recurring-cards { grid-template-columns: 1fr; }
}
.bpa-recurring-cards .bpa-upcomming-appointments { min-width: 0; }

.bpa-recurring-cards .bpa-lspd__item {
  border: 1px solid var(--bpa-rec-border, var(--bpa-front-border-color, #e0e0e0));
  border-radius: var(--bpa-radius-6px, 6px);
  padding: 12px 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  background: #fff;
}
.bpa-recurring-cards .bpa-lspd__item-val {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.bpa-recurring-cards .bpa-hh-item__date-col {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--bpa-rec-subtitle, inherit);
}
.bpa-recurring-cards .bpa-hh-item__date-col span { font-size: 14px; }
.bpa-recurring-cards .bpa-front-tm--item-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: var(--bpa-rec-icon, var(--bpa-dt-black-200, #6b7280));
}
.bpa-recurring-cards .bpa-hh-item-info-col p {
  margin: 0;
  font-size: 14px;
  color: var(--bpa-rec-subtitle, inherit);
}

/* Edit pencil — revealed on hover / keyboard focus (legacy icon-without-box). */
.bpa-recurring-cards .bpa-card__item {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.bpa-recurring-cards .bpa-lspd__item:hover .bpa-card__item,
.bpa-recurring-cards .bpa-card__item:focus-within {
  opacity: 1;
}
.bpa-recurring-cards .bpa-edit-appointment-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  line-height: 0;
  cursor: pointer;
  border-radius: var(--bpa-radius-6px, 6px);
}
.bpa-recurring-cards .bpa-edit-appointment-btn span { line-height: 0; }
.bpa-recurring-cards .bpa-edit-appointment-btn svg {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  fill: var(--bpa-rec-icon, var(--bpa-dt-black-200, #6b7280));
}
.bpa-recurring-cards .bpa-edit-appointment-btn:hover {
  background-color: var(--bpa-pt-main-green, #1a8d5f) !important;
  border-color: var(--bpa-pt-main-green, #1a8d5f) !important;
}
.bpa-recurring-cards .bpa-edit-appointment-btn:hover svg { fill: #fff !important; }

/* Suggested (amber) / Blocked (red) cards + message rows. */
.bpa-recurring-cards .bpa-upcomming-suggested .bpa-lspd__item {
  border-color: var(--bpa-rec-suggested, #F5AE41);
  background-color: #f5eee5;
}
.bpa-recurring-cards .bpa-upcomming-notavaliable .bpa-lspd__item {
  border-color: var(--bpa-rec-blocked, #ff0000);
  background-color: #ffe8e7;
}
.bpa-recurring-cards .bpa-recurring-msg {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 3px;
}
.bpa-recurring-cards .bpa-recurring-msg svg {
  height: 18px;
  width: 18px;
  flex: 0 0 18px;
  margin-top: 1px;
}
.bpa-recurring-cards .bpa-recurring-msg span:last-child {
  font-size: 13px;
  font-weight: 500;
  line-height: 3.10;
}
.bpa-recurring-cards .bpa-recurring-msg-suggested span { color: var(--bpa-rec-suggested, #F5AE41); }
.bpa-recurring-cards .bpa-recurring-msg-suggested svg { fill: var(--bpa-rec-suggested, #F5AE41); }
.bpa-recurring-cards .bpa-recurring-msg-notavaliable span { color: var(--bpa-rec-blocked, #ff0000); }
.bpa-recurring-cards .bpa-recurring-msg-notavaliable svg { fill: var(--bpa-rec-blocked, #ff0000); }

/* --- Per-occurrence Edit dialog (overlay modal) ------------------------- */
.bpa-recurring-edit-overlay {
  position: fixed;
  inset: 0;
  /* z-index: 99998; */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(17, 24, 39, 0.45);
}
.bpa-recurring-edit-dialog {
  width: 100%;
  max-width: 290px;
  background: #fff;
  border-radius: var(--bpa-radius-8px, 8px);
  box-shadow: 0 10px 40px rgba(17, 24, 39, 0.25);
  overflow: visible;
}
.bpa-recurring-edit-dialog .bpa-dialog-heading {
  padding: 16px 20px;
  border-bottom: 1px solid var(--bpa-rec-border, var(--bpa-front-border-color, #e0e0e0));
}
.bpa-recurring-edit-dialog .bpa-dialog-heading h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.bpa-recurring-edit-dialog .bpa-dialog-body { padding: 20px; }
.bpa-recurring-edit-dialog .bpa-dialog-body .bpa-form-label { font-weight: 600; }
.bpa-recurring-edit-dialog .bpa-recurring-date,
.bpa-recurring-edit-dialog .bp-date-editor { margin-bottom: 12px; }
.bpa-recurring-edit-dialog .bpa-recurring-select,
.bpa-recurring-edit-dialog .el-date-editor.el-input,
.bpa-recurring-edit-dialog .el-select { width: 100%; }
.bpa-recurring-edit-dialog .bpa-dialog-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--bpa-rec-border, var(--bpa-front-border-color, #e0e0e0));
}
.bpa-recurring-edit-dialog .bpa-hw-right-btn-group {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.bpa-recurring-edit-dialog .bpa-recurring-error { margin: 12px 0 0; }
.bpa-recurring-edit-dialog .__bpa-is-disabled { opacity: 0.5; pointer-events: none; }

/* --- Summary (legacy Service | Date&Time + "N More" popover parity) ------ */
/* The block reuses the Lite summary markup classes (bpa-front-module--bs-summary-content
   / bpa-front-bs-sm__item-val / bpa-front-module--bs-amount-details) so it aligns
   pixel-for-pixel with the single-service summary; only the popover trigger + the
   popover body need add-on styling. */

/* The Lite summary items use the `bpaFadeInUp` entrance animation (starts at
   opacity:0). Mounted dynamically into the summary slot AFTER the step is shown,
   that animation can stay/re-trigger at its 0% frame and the rows never paint —
   so disable it here and pin opacity (legacy did the same on its recurring
   summary items: `.bpa_summary_rec_datetime_body_inner { animation:none !important }`). */
.bpa-recurring-summary .bpa-front-module--bs-summary-content-item,
.bpa-recurring-summary .bpa-front-bs-sm__item-val,
.bpa-recurring-summary .bpa-front-bs-sm__item-vals,
.bpa-recurring-summary .bpa-front-module--bs-amount-details,
.bpa-recurring-summary .bpa-fm--bs-amount-item {
  animation: none !important;
  -webkit-animation: none !important;
  opacity: 1 !important;
}

/* "N More" trigger — dashed underline (legacy .bpa-thank-you-datetime-count). */
.bpa--summary_service_datetime_count_name {
  display: inline-block;
  margin-top: 4px;
  border-bottom: 1px dashed;
  font-size: 14px;
  cursor: pointer;
  line-height: 1.3;
}
/* Popover body — one date/time per line (legacy .bpa_rec_popover_datetime_item). */
.bpa--summary-recurring_front_popover .bpa_rec_popover_datetime_item {
  font-weight: 500;
  margin-bottom: 6px;
}
.bpa--summary-recurring_front_popover .bpa_rec_popover_datetime_item:last-child {
  margin-bottom: 0;
}

/* Ensure the datepicker and time select dropdowns render on top of the edit appointment modal overlay */
/* .bpa-custom-recurring-datepicker,
.bpa-recurring-select-popper {
  z-index: 100001 !important;
} */


.bpa-recurring-appointment-body .bp-date-editor.bp-input, .bp-date-editor.bp-input__inner{
      width: 350px;
}

.bpa-recurring-fields .el-date-editor,
.bpa-recurring-fields .bp-date-editor {
    margin-top: 0 !important;
    display: flex;
    align-items: center;
    flex-direction: column-reverse;
}

/* Targets the actual rendered HTML: .bpa-sao__module-row inside advance-options */
.bpa-fm--service__advance-options .bpa-sao__module-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 16px 20px !important;
}

/* Label: "Repeat appointment" — bold, dark navy, left side */
.bpa-fm--service__advance-options .bpa-sao__module-row .bpa-front-sec--sub-heading {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1a2b4a !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

/* Dropdown: fixed width on the right side */
.bpa-fm--service__advance-options .bpa-sao__module-row .el-select,
.bpa-fm--service__advance-options .bpa-sao__module-row .bpa-recurring-select-wrapper {
  flex: 0 0 auto !important;
  width: 200px !important;
  min-width: 200px !important;
}

.bpa-fm--service__advance-options .bpa-sao__module-row .el-select .el-input,
.bpa-fm--service__advance-options .bpa-sao__module-row .el-select .el-input__inner {
  width: 100% !important;
}