/* ============================================
   PROFILE IMAGE - MEDIA LIBRARY UPLOADER
   Parent: .doctor-register-tabs #edit-tab-personal > .details-wrapper #edit-row-profile-image
   ============================================ */

.doctor-register-tabs #edit-tab-personal > .details-wrapper #edit-row-profile-image fieldset.media-library-form-element {
  border: 2px dashed var(--primary_border);
  border-radius: 12px;
  background: #fafafa63;
  padding: 1rem 1.5rem 2rem;
  max-width: 480px;
  /* margin: 0 auto; */
  text-align: center;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
}
/* 
.doctor-register-tabs #edit-tab-personal > .details-wrapper #edit-row-profile-image fieldset.media-library-form-element:hover {
  border-color: var(--primary_color);
  background: #e6f1fb;
} */

/* Legend - "Profile Image" label */
.doctor-register-tabs #edit-tab-personal > .details-wrapper #edit-row-profile-image fieldset.media-library-form-element legend {
  background: transparent;
  padding: 0 8px;
  margin-bottom: 0;
}

.doctor-register-tabs #edit-tab-personal > .details-wrapper #edit-row-profile-image fieldset.media-library-form-element legend .fieldset-legend {
  /* font-size: 11px;
  font-weight: 500;
  color: var(--primary_color);
  text-transform: uppercase; */
  letter-spacing: 0.05em;
}

/* Fieldset wrapper inner */
.doctor-register-tabs #edit-tab-personal > .details-wrapper #edit-row-profile-image fieldset.media-library-form-element .fieldset-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Cloud upload icon - inject via ::before on fieldset-wrapper */
/* .doctor-register-tabs #edit-tab-personal > .details-wrapper #edit-row-profile-image fieldset.media-library-form-element .fieldset-wrapper::before {
  content: "\f1df"; 
  font-family: 'tabler-icons'; 
  font-size: 40px;
  color: var(--primary_color);
  display: block;
  line-height: 1;
} */

/* Fallback if tabler not available — use emoji or background-image */
/* .doctor-register-tabs #edit-tab-personal > .details-wrapper #edit-row-profile-image fieldset.media-library-form-element .fieldset-wrapper::before {
  content: "☁️";
  font-size: 40px;
  display: block;
}  */

/* "No media item selected" empty text */
.doctor-register-tabs #edit-tab-personal > .details-wrapper #edit-row-profile-image fieldset.media-library-form-element .media-library-form-element-empty-text {
  font-size: 15px;
  font-weight: 500;
  color: #1a1a1a;
  margin: 0;
}

/* After empty text — sub hint via ::after */
.doctor-register-tabs #edit-tab-personal > .details-wrapper #edit-row-profile-image fieldset.media-library-form-element .media-library-form-element-empty-text::after {
  content: "or click to browse from your device";
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: #666;
  margin-top: 4px;
}

/* Media library selection container (empty div — hides when no item) */
.doctor-register-tabs #edit-tab-personal > .details-wrapper #edit-row-profile-image fieldset.media-library-form-element .media-library-selection:empty {
  display: none;
}

/* When image IS selected — selection container shows thumbnail */
.doctor-register-tabs #edit-tab-personal > .details-wrapper #edit-row-profile-image fieldset.media-library-form-element .media-library-selection {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.doctor-register-tabs #edit-tab-personal > .details-wrapper #edit-row-profile-image fieldset.media-library-form-element .media-library-selection img {
  /* width: 100px;
  height: 100px; */
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--primary_border);
  box-shadow: 0 0 0 5px #eeeeee;
}

/* "Add media" button */
.doctor-register-tabs #edit-tab-personal > .details-wrapper #edit-row-profile-image fieldset.media-library-form-element input.media-library-open-button {
  background: var(--primary_color);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 22px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  display: inline-block;
}

.doctor-register-tabs #edit-tab-personal > .details-wrapper #edit-row-profile-image fieldset.media-library-form-element input.media-library-open-button:hover {
  background: var(--primary_color);
}

/* "Update widget" button — hidden by default (js-hide), style just in case */
.doctor-register-tabs #edit-tab-personal > .details-wrapper #edit-row-profile-image fieldset.media-library-form-element input[data-media-library-form-element-update] {
  display: none !important;
}

/* Description text at bottom */
.doctor-register-tabs #edit-tab-personal > .details-wrapper #edit-row-profile-image fieldset.media-library-form-element .description {
  font-size: 12px;
  color: #888;
  margin-top: 4px;
  line-height: 1.5;
}

/* ============================================================
   MEDIA & GALLERY — Scoped CSS
   Parent: #edit-tab-media
   ============================================================ */

/* ── Fieldset reset ── */
body #edit-tab-media fieldset#field_images-media-library-wrapper {
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
}

body #edit-tab-media fieldset#field_images-media-library-wrapper legend {
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 14px;
  padding: 0;
  float: none;
  width: 100%;
  background: transparent;
}

body #edit-tab-media fieldset#field_images-media-library-wrapper .fieldset-wrapper {
  padding: 0;
}

/* ── Image grid ── */
body #edit-tab-media .js-media-library-selection.media-library-selection {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
  padding: 0;
}

/* ── Image card ── */
body #edit-tab-media .media-library-item.media-library-item--grid {
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  width: 100%;
  overflow: hidden;
  position: relative;
  transition: box-shadow .15s, border-color .15s;
  margin: 0;
}

body #edit-tab-media .media-library-item.media-library-item--grid:hover {
  border-color: #000;
  /* box-shadow: 0 2px 10px rgba(127,119,221,.12); */
}

/* ── Thumbnail container ── */
body #edit-tab-media .media-library-item__preview.js-media-library-item-preview {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f4f5f7;
  display: flex;
  align-items: center;
  justify-content: center;
}

body #edit-tab-media .media-library-item__preview.js-media-library-item-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Filename label ── */
body #edit-tab-media article .media-library-item__attributes {
  /* padding: 8px 10px; */
  width: 100%;
  /* border-top: 1px solid #f0f0f0; */
  /* background: #fafafa; */
}
#doctor-register-or-edit-form #edit-row-profile-image .media-library-item__remove{
  position: absolute;
  /* display: none; */
}
 #doctor-register-or-edit-form #edit-row-profile-image .media-library-item{
  position: relative;
  border: none;
      width: 180px;
}
  #doctor-register-or-edit-form #edit-row-profile-image .media-library-item__preview img{
  height: 180px;  width: 180px; 
  border-radius: 0px;
}
#doctor-register-or-edit-form #edit-row-profile-image .media-library-item__attributes{
  display: none;
}

body #edit-tab-media article .media-library-item__name {
  font-size: 11px;
  /* color: #6b7280; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

/* ── Remove × button (top-right overlay) ── */
#doctor-register-or-edit-form #edit-row-profile-image .media-library-item__remove,
body #edit-tab-media input.media-library-item__remove.button.form-submit {
  font-size: 0;
	width: 32px;
	height: 32px;
	border: none;
	cursor: pointer;

	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");

	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px;

  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: unset;
  padding: 0;
  border-radius: 50%;
  border: none;
  background-color: rgba(255,255,255,.92);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
  z-index: 2;
  transition: background .15s;
}

/* show × symbol via pseudo */
/* body #edit-tab-media input.media-library-item__remove.button.form-submit::after {
  content: '×';
  font-size: 16px;
  font-weight: 700;
  color: #A32D2D;
  line-height: 1;
} */
#doctor-register-or-edit-form #edit-row-profile-image .media-library-item__remove:hover,
body #edit-tab-media input.media-library-item__remove.button.form-submit:hover {
  /* background-color: #FCEBEB; */
}

/* ── Add Media button ── */
body #edit-tab-media input.media-library-open-button.button.form-submit {
  appearance: none;
  -webkit-appearance: none;
  height: 38px;
  padding: 0 18px;
  border: 1.5px dashed #b8b3e8;
  border-radius: 8px;
  background: #EEEDFE;
  color: #3C3489;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s, border-color .15s;
}
body #edit-tab-media .doctor-form-section{
  grid-template-columns: repeat(1 , 1fr);
}
body #edit-tab-media input.media-library-open-button.button.form-submit:hover {
  background: #CECBF6;
  border-color: #7F77DD;
}

/* ── Description ── */
body #edit-tab-media #field_images-media-library-wrapper--description.description {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 8px;
}

/* ── Hidden update widget — keep hidden ── */
body #edit-tab-media input.js-hide.button {
  display: none;
}
/* ============================================================
   SLOT MANAGEMENT — No !important, Specificity-based Override
   Saare selectors parent IDs chain se scoped hain
   ============================================================ */

/* ── Booking card ── */

/* #edit-row-booking .form-type-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
} */

#edit-row-booking .form-checkbox {
  width: 18px;
  height: 18px;
  accent-color: #7F77DD;
  flex-shrink: 0;
  cursor: pointer;
}

#edit-row-booking label.option {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a2e;
}

#edit-row-booking .description {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
  line-height: 1.4;
}

/* Timezone */
/* #edit-row-booking .form-item-field-slot-plan-timezone label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
} */

/* #edit-row-booking .form-item-field-slot-plan-timezone input.form-text {
  height: 38px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 14px;
  color: #1a1a2e;
  width: 260px;
  outline: none;
  box-shadow: none;
} */

#edit-row-booking .form-item-field-slot-plan-timezone input.form-text:focus {
  border-color: #7F77DD;
  box-shadow: 0 0 0 3px rgba(127,119,221,.15);
}

/* ── Day tabs ── */
#edit-field-slot-plan-day-tabs--96SvLK8dySg.slot-plan-day-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  background: #ebebf0;
  padding: 5px;
  border-radius: 10px;
  margin-bottom: 16px;
}

.slot-plan-day-tabs input.slot-plan-day-tab.button {
  appearance: none;
  -webkit-appearance: none;
  padding: 7px 14px;
  border: none;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  background: transparent;
  cursor: pointer;
  box-shadow: none;
  transition: all .15s;
}

#doctor-register-or-edit-form .slot-plan-day-panel > summary {
  display: none!important;
}
.slot-plan-day-tabs input.slot-plan-day-tab.button:hover {
  background: #fff;
  color: #3C3489;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.slot-plan-day-tabs input.slot-plan-day-tab.button.is-active,
.slot-plan-day-tabs input.slot-plan-day-tab.button[data-slot-plan-active="1"] {
  background: #fff;
  color: #3C3489;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

/* ── Day panels ── */
.slot-plan-day-panels details.slot-plan-day-panel {
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}

.slot-plan-day-panels details.slot-plan-day-panel > summary {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a2e;
  cursor: pointer;
  list-style: none;
}

.slot-plan-day-panels details.slot-plan-day-panel > summary::-webkit-details-marker {
  display: none;
}

.slot-plan-day-panels details.slot-plan-day-panel > summary .summary {
  display: none;
}

/* ── Slots table ── */
.slot-plan-day-panels table.slot-plan-slots-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.slot-plan-day-panels table.slot-plan-slots-table thead tr {
  background: #f8f9fb;
}
#edit-row-booking .slot-plan-day-panel .slot-plan-add-row .form-item{
  width: fit-content;
}
.slot-plan-day-panels table.slot-plan-slots-table thead th {
  padding: 10px 20px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid #f0f0f0;
}

.slot-plan-day-panels table.slot-plan-slots-table thead th:last-child {
  text-align: right;
}

.slot-plan-day-panels table.slot-plan-slots-table ttd {
  padding: 11px 20px;
  border-bottom: 1px solid #f5f5f5;
  color: #374151;
  font-size: 13px;
}

.slot-plan-day-panels table.slot-plan-slots-table ttd:first-child,
.slot-plan-day-panels table.slot-plan-slots-table ttd:nth-child(2) {
  font-weight: 600;
  color: #4B3FAA;
  font-family: monospace;
}

.slot-plan-day-panels table.slot-plan-slots-table ttd:last-child {
  text-align: right;
}

.slot-plan-day-panels table.slot-plan-slots-table td.empty.message {
  text-align: center;
  color: #c4c9d4;
  padding: 20px;
  font-style: italic;
}

.slot-plan-day-panels .tableresponsive-toggle-columns {
  display: none;
}

/* Remove button */
.slot-plan-day-panels input.slot-plan-remove-btn.button {
  appearance: none;
  -webkit-appearance: none;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #A32D2D;
  background: #FCEBEB;
  border: 1px solid #F7C1C1;
  cursor: pointer;  
  box-shadow: none;
  transition: background .15s;
}

.slot-plan-day-panels input.slot-plan-remove-btn.button:hover {
  background: #F7C1C1;
}

/* ── Add slot row ── */
#doctor-register-or-edit-form  .slot-plan-day-panels .slot-plan-add-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: #f9fafb;
  border-top: 1px solid #f0f0f0;
}
.slot-plan-day-panels .slot-plan-add-row label.visually-hidden{
  width: fit-content;
}
#doctor-register-or-edit-form #edit-row-booking .form-text{
  font-family: var(--primary_font);
}
/* visually-hidden labels — visible banana */
.slot-plan-day-panels .slot-plan-add-row label.visually-hidden {
  position: static!important;
  clip: unset;
  clip-path: unset;
  width: auto;
  height: auto;
  overflow: visible;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  display: inline-block;
}

/* .slot-plan-day-panels .slot-plan-add-row input.slot-plan-add-start.form-text:focus,
.slot-plan-day-panels .slot-plan-add-row input.slot-plan-add-end.form-text:focus {
  border-color: #7F77DD;
  box-shadow: 0 0 0 3px rgba(127,119,221,.12);
} */

/* Select2 hide, native select show */
/* .slot-plan-day-panels .slot-plan-add-row span.select2-container {
  display: none;
} */

.slot-plan-day-panels .slot-plan-add-row select.slot-plan-add-duration.form-select {
  display: inline-block;
  height: 36px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 13px;
  background: #fff;
  color: #1a1a2e;
  cursor: pointer;
  outline: none;
  min-width: 95px;
  box-shadow: none;
  -webkit-appearance: auto;
  appearance: auto;
  visibility: visible;
  clip: unset;
  clip-path: unset;
}


/* -------------------- COMPLETE RESET UNDER FORM ID -------------------- */
/* #doctor-register-or-edit-form,
#doctor-register-or-edit-form * {
        all: revert;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
} */

/* Base styles for the form container */
/* #doctor-register-or-edit-form {
    display: block;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    background: #f5f7fb;
    min-height: 100vh;
    padding: 2rem;
    color: #1e293b;
    line-height: 1.5;
} */
#add-doctor-content-personal .text-card-foreground>div{
  padding-bottom: 0px!important;
}
/* -------------------- TABS CONTAINER -------------------- */
#doctor-register-or-edit-form .vertical-tabs__menu-item a:hover,
#doctor-register-or-edit-form .vertical-tabs__menu-item{
  outline: 0px;
  border: none;
  background: transparent;
  text-decoration: none;
}
#doctor-register-or-edit-form .vertical-tabs {
    /* max-width: 1440px; */
    margin: 0 auto;
    background: #ffffff;
    /* border-radius: 24px; */
    /* box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.02); */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: none;
}

/* -------------------- TAB MENU (Horizontal) -------------------- */
#doctor-register-or-edit-form .vertical-tabs__menu {
    margin: 0;
    list-style: none;
  border: 0px solid #e8edf3;
  display: grid;
  width: fit-content;
  gap: 5px;
  grid-template-columns: repeat(6,auto);
  padding: 4px;
  border-radius: 10px;
}

#doctor-register-or-edit-form .vertical-tabs__menu-item {
    margin: 0;
    padding: 0;
        border: 1px solid #e0e0e0;
    /* border-top: 0; */
    /* background: #eee; */
    border-radius: 7px;
}

#doctor-register-or-edit-form .vertical-tabs__menu-item a strong{
  font-weight: 500;
}
#doctor-register-or-edit-form .vertical-tabs__menu-item a>.vertical-tabs__menu-item-summary{
  display: none;
}
#doctor-register-or-edit-form .vertical-tabs__menu-item a {
   display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border: none;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: #777777;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.vertical-tabs__menu-item a:focus .vertical-tabs__menu-item-title, .vertical-tabs__menu-item a:active .vertical-tabs__menu-item-title, .vertical-tabs__menu-item a:hover .vertical-tabs__menu-item-title{
  text-decoration: none;
}
#doctor-register-or-edit-form .vertical-tabs__menu-item a{
     background: #fff;
  color: var(--primary_color);
   box-shadow: 0 1px 8px rgba(26, 45, 80, 0.06);
  font-weight: 600;
}
#doctor-register-or-edit-form .vertical-tabs__menu-item a:hover,
#doctor-register-or-edit-form .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-item-title,
#doctor-register-or-edit-form .vertical-tabs__menu-item.is-selected a {
     background: var(--primary_color);
  color: var(--addit_white);
   box-shadow: 0 1px 8px rgba(26, 45, 80, 0.06);
   width: 100%;
   text-align: center;
}

/* -------------------- TAB PANES -------------------- */
/* #doctor-register-or-edit-form .vertical-tabs__panes {
    padding: 2rem;
    background: #ffffff;
} */

/* #doctor-register-or-edit-form .doctor-form-tab {
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
} */

#doctor-register-or-edit-form .doctor-form-tab summary {
    font-size: 1.25rem;
    font-weight: 600;
    color: #0f172a;
    padding: 1rem 0 1rem 0;
    border-bottom: 2px solid var(--primary_color);
    margin-bottom: 1.5rem;
    cursor: pointer;
    list-style: none;
    background: transparent;
}

/* #doctor-register-or-edit-form .doctor-form-tab summary::-webkit-details-marker {
    display: none;
} */
.doctor-register-or-edit-form #edit-settings{
      display: grid;
    gap: 0px 20px;
    grid-template-columns: repeat(2, 1fr);
}
/* -------------------- FORM SECTIONS -------------------- */
#doctor-register-or-edit-form .doctor-form-section {
    /* margin-bottom: 1.75rem; */
    padding: 0;
    gap: 20px;
}

/* Flex layouts */
/* #doctor-register-or-edit-form .flex {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.25rem !important;
    margin-bottom: 0px;
    justify-content: space-between;
} */
.doctor-register-tabs #edit-tab-personal>.details-wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 20px;
}

/* Full width second row */
.doctor-register-tabs #edit-tab-personal>.details-wrapper #edit-row-profile-image {
  grid-column: 1 / span 3;
}

/* Responsive */
@media (max-width: 768px) {
  .doctor-register-tabs #edit-tab-personal>.details-wrapper {
    grid-template-columns: 1fr;
  }

  .doctor-register-tabs #edit-tab-personal>.details-wrapper #edit-row-profile-image {
    grid-column: auto;
  }
}
/* #doctor-register-or-edit-form .flex-col {
    flex-direction: column !important;
}

#doctor-register-or-edit-form .md\:flex-row {
    flex-direction: column !important;
} */

#doctor-register-or-edit-form #edit-tab-professional #edit-row-qualification-experience{
  float: right;
  padding-left: 20px;
}
#doctor-register-or-edit-form #edit-tab-professional .gap-4 {
    gap: 1rem !important;
    width: 50%;
}
#doctor-register-or-edit-form .gap-4 {
    gap: 1rem !important;
}

#doctor-register-or-edit-form .space-y-2 > * {
    margin-bottom: 1rem !important;
}

#doctor-register-or-edit-form .space-y-4 > * {
    margin-bottom: 0px !important;
}

/* -------------------- FORM FIELDS -------------------- */
#doctor-register-or-edit-form .js-form-item {
    margin-bottom: 1rem;
    width: 100%;
    justify-content: space-between;
}

/* Labels */
#doctor-register-or-edit-form label {
  /* display: none; */
}
#doctor-register-or-edit-form #edit-row-booking::before{
  content: "Booking Settings";
      font-size: 19px;
    font-weight: 600;
}
#doctor-register-or-edit-form #edit-row-booking .form-type-checkbox label.option::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 44px;
	height: 24px;
	background: #d1d5db;
	border-radius: 50px;
	transition: all 0.3s ease;
}

/* Toggle Circle */
#doctor-register-or-edit-form #edit-row-booking .form-type-checkbox label.option::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 6px;
	width: 16px;
	height: 16px;
	background: var(--addit_white);
	border-radius: 50%;
	transition: all 0.3s ease;
}

#doctor-register-or-edit-form #edit-row-booking .form-checkbox:checked+label.option::before {
	background: var(--primary_color);
}

#doctor-register-or-edit-form #edit-row-booking .form-checkbox:checked+label.option::after {
	transform: translateX(20px);
}

/* #doctor-register-or-edit-form label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #334155;
    margin-bottom: 0.5rem;
    background: transparent;
}

#doctor-register-or-edit-form .form-required:after {
    content: "*";
    color: #ef4444;
    margin-left: 4px;
} */

/* Inputs, selects, textareas */
/* #doctor-register-or-edit-form input[type="text"],
#doctor-register-or-edit-form input[type="email"],
#doctor-register-or-edit-form input[type="password"],
#doctor-register-or-edit-form input[type="tel"],
#doctor-register-or-edit-form input[type="number"],
#doctor-register-or-edit-form select,
#doctor-register-or-edit-form textarea {
    width: 100%;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-family: inherit;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    color: #1e293b;
    transition: all 0.2s ease;
    outline: none;
} */

/* #doctor-register-or-edit-form input:focus,
#doctor-register-or-edit-form select:focus,
#doctor-register-or-edit-form textarea:focus {
    border-color: var(--primary_color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

#doctor-register-or-edit-form input:hover:not(:focus),
#doctor-register-or-edit-form select:hover:not(:focus),
#doctor-register-or-edit-form textarea:hover:not(:focus) {
    border-color: #cbd5e1;
} */

/* Readonly inputs */
/* #doctor-register-or-edit-form input[readonly] {
    background: #f8fafc;
    cursor: default;
}

/* Checkbox styling */
#doctor-register-or-edit-form input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    margin-right: 0.5rem;
    vertical-align: middle;
    accent-color: var(--primary_color);
} 

/* -------------------- GRID LAYOUTS -------------------- */
@media (min-width: 768px) {
    /* #doctor-register-or-edit-form #edit-row-full-name, */
    #doctor-register-or-edit-form #edit-row-specialization,
    #doctor-register-or-edit-form #edit-row-specialization-types,
    #doctor-register-or-edit-form #edit-row-qualification-experience,
    #doctor-register-or-edit-form #edit-row-registration-clinic,
    #doctor-register-or-edit-form #edit-row-consultation-fee {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
    
    #doctor-register-or-edit-form .md\:flex-row {
        flex-direction: row !important;
    }
}

/* -------------------- IMAGE UPLOAD & MEDIA LIBRARY -------------------- */
#doctor-register-or-edit-form .media-library-form-element {
    border: 1px dashed var(--primary_border);
    margin-top: 0px;
    border-radius: 16px;
    padding: 1.25rem;
    background: #fff;
    transition: all 0.2s;
}
.focus-visible\:ring-ring:focus-visible{
  --tw-ring-color: transparent;
  --tw-ring-offset-width: 0px;
}
/* #doctor-register-or-edit-form .media-library-form-element:hover {
    border-color: var(--primary_color);
    background: #ffffff;
} */

#doctor-register-or-edit-form .media-library-selection {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

#doctor-register-or-edit-form .media-library-item {
    background: #ffffff;
    border: 1px solid var(--primary_color);
    border-radius: 16px;
    /* padding: 0.75rem; */
    width: 140px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

#doctor-register-or-edit-form .media-library-item__preview img {
    max-width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
}

#doctor-register-or-edit-form .media-library-item__name {
    font-size: 0.75rem;
    /* color: #475569; */
    padding: 5px;
    /* margin-top: 0.5rem; */
    word-break: break-all;
}

/* Buttons */
#doctor-register-or-edit-form .media-library-open-button,
#doctor-register-or-edit-form button.button {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    width: auto;
    font-size: 0.813rem;
    font-weight: 500;
    color: var(--primary_color);
    cursor: pointer;
    transition: all 0.2s;
}

#doctor-register-or-edit-form .media-library-open-button:hover,
#doctor-register-or-edit-form button.button:hover {
    background: var(--primary_color);
    border-color: var(--primary_color);
    color: var(--addit_white);
}

/* -------------------- SLOT PLAN STYLES -------------------- */
#doctor-register-or-edit-form .slot-plan-day-tabs {
    /* display: flex;
    flex-wrap: wrap;
    gap: 0.5rem; */
        /* padding-bottom: 0.75rem; */
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(10, 1fr);
}

#doctor-register-or-edit-form .slot-plan-day-tab {
      background: #fff;
    color: var(--primary_color);
    box-shadow: 0 1px 8px rgba(26, 45, 80, 0.06);
    border: 1px solid var(--primary_border);
    padding: 0.5rem 1.25rem;
    border-radius: 40px;
    font-size: 0.813rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
}

#doctor-register-or-edit-form .slot-plan-day-tab.is-active,
#doctor-register-or-edit-form .slot-plan-day-tab:hover {
    background: var(--primary_color);
    color: white;
}

#doctor-register-or-edit-form .slot-plan-slots-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

/* #doctor-register-or-edit-form .slot-plan-slots-table th,
#doctor-register-or-edit-form .slot-plan-slots-table td {
    padding: 0.75rem;
    text-align: left;
    font-size: 0.813rem;
} */

/* #doctor-register-or-edit-form .slot-plan-slots-table th {
    font-weight: 600;
    color: #fff;
} */

/* #doctor-register-or-edit-form .slot-plan-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--primary_color);
} */

#doctor-register-or-edit-form .slot-plan-add-start,
#doctor-register-or-edit-form .slot-plan-add-end {
    width: 100px !important;
}

#doctor-register-or-edit-form .slot-plan-add-duration {
    width: 100px !important;
}

/* #doctor-register-or-edit-form .slot-plan-add-btn {
    background: var(--primary_color);
    color: white;
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: 10px;
    font-size: 0.813rem;
    font-weight: 500;
    cursor: pointer;
} */

#doctor-register-or-edit-form .address-container-inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* -------------------- SUBMIT BUTTON -------------------- */
#doctor-register-or-edit-form #edit-actions {
    /* margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--primary_color);
    text-align: right; */
}

/* -------------------- RESPONSIVE DESIGN -------------------- */
@media (max-width: 1023px) {

    #doctor-register-or-edit-form .vertical-tabs__menu {
       grid-template-columns: repeat(4,auto);
      }
}
@media (max-width: 767px) {
  #doctor-register-or-edit-form .vertical-tabs__menu {
       grid-template-columns: repeat(3,auto);
      }
    }
@media (max-width: 768px) {
  #doctor-register-or-edit-form .vertical-tabs__menu {
       grid-template-columns: repeat(2,auto);
      }
    #doctor-register-or-edit-form {
        padding: 1rem;
    }
    
    #doctor-register-or-edit-form .vertical-tabs__panes {
        padding: 1rem;
    }
  
    
    #doctor-register-or-edit-form .slot-plan-add-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    #doctor-register-or-edit-form .slot-plan-add-start,
    #doctor-register-or-edit-form .slot-plan-add-end,
    #doctor-register-or-edit-form .slot-plan-add-duration {
        width: 100% !important;
    }
    
    #doctor-register-or-edit-form .address-container-inline {
        grid-template-columns: 1fr;
    }
    
    #doctor-register-or-edit-form #edit-row-full-name,
    #doctor-register-or-edit-form #edit-row-specialization,
    #doctor-register-or-edit-form #edit-row-specialization-types,
    #doctor-register-or-edit-form #edit-row-qualification-experience,
    #doctor-register-or-edit-form #edit-row-registration-clinic,
    #doctor-register-or-edit-form #edit-row-consultation-fee {
        display: block;
    }
}

/* -------------------- UTILITY OVERRIDES -------------------- */
/* Remove conflicting class styles */
#doctor-register-or-edit-form [class*="bg-background"],
#doctor-register-or-edit-form [class*="border-input"],
#doctor-register-or-edit-form [class*="ring-offset-background"] {
    background: transparent !important;
}

/* Hide select2 if present */
/* #doctor-register-or-edit-form .select2-container {
    display: none !important;
} */

/* Description text */
#doctor-register-or-edit-form .description {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.25rem;
}

/* Full width utility */
#doctor-register-or-edit-form .w-full {
    width: 100%;
}