.did-floating-label-content {
       position: relative;
       margin-bottom: 0;
   }

   .did-floating-input,
   .did-floating-select {
       font-size: 14px;
       display: block;
       width: 100%;
       height: 40px;
       padding: 10px 14px;
       background: #fff;
       border: 1px solid #cc55995c;
       border-radius: 6px;
       box-sizing: border-box;
   }

   /* focus state for inputs, selects and textareas */
   .did-floating-input:focus,
   .did-floating-select:focus,
   .did-floating-label-content textarea:focus {
       outline: 0 !important;
       box-shadow: none !important;
       -webkit-box-shadow: none !important;
       border-color: #cc5599 !important;
   }

   /* highlight the wrapper when any inner control has focus */
   .did-floating-label-content:focus-within {
       border-color: #cc5599;
       box-shadow: none;
   }

   /* Select2 visible selection element (if you're using Select2) */
   .select2-container--default .select2-selection--single:focus,
   .select2-container--default .select2-selection--single.select2-selection--open {
       outline: 0 !important;
       box-shadow: none !important;
       border-color: #cc5599 !important;
   }


   .did-floating-input::placeholder {
       color: transparent;
       opacity: 0;
   }

   /* hide placeholder text visually */
   .did-floating-input:focus,
   .did-floating-select:focus {
       outline: none;
       border-color: #0b61b3;
   }

   .did-floating-label {
       font-size: 13px;
       position: absolute;
       pointer-events: none;
       left: 14px;
       top: 12px;
       padding: 0 6px;
       background: transparent;
       transition: 0.18s ease all;
   }

   /* float when input focused or has content */
   .did-floating-input:focus~.did-floating-label,
   .did-floating-input:not(:placeholder-shown)~.did-floating-label,
   .did-floating-select:not([value=""])~.did-floating-label,
   .did-floating-select:focus~.did-floating-label {
       top: -10px;
       font-size: 12px;
       background: #fff;
       padding: 0 6px;
   }

   /* Calendar popup styles (copied from your CSS) */
   .calendar-popup {
       width: 90%;
       background: #fff;
       border-radius: 8px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
       position: absolute;
       top: calc(100% + -15px);
       left: 15px;
       z-index: 9999;
       display: none;
       border: 1px solid #cc5599;
   }

   .cal-header {
       display: flex;
       align-items: center;
       justify-content: flex-start;
       padding: 10px 12px;
       gap: 8px;
   }

   .left-controls {
       display: flex;
       gap: 8px;
       align-items: center;
       width: 100%;
   }

   .select-wrap {
       flex: 1;
   }

   .select-wrap select {
       width: 100%;
       padding: 6px 8px;
       border-radius: 6px;
       border: 1px solid #e6e6e6;
       background: #fff;
       font-size: 0.95rem;
   }

   .calendar-popup .calendar {
       padding: 6px 12px 14px;
   }

   .calendar-popup .weeks {
       display: flex;
       list-style: none;
       padding: 0 6px;
       margin: 0;
   }

   .calendar-popup .weeks li {
       flex: 1;
       text-align: center;
       font-size: 0.82rem;
       color: #444;
       font-weight: 500;
   }

   .calendar-popup .days {
       display: flex;
       flex-wrap: wrap;
       list-style: none;
       padding: 0;
       margin: 10px 6px 0 6px;
   }

   .calendar-popup .days li {
       width: calc(100% / 7);
       text-align: center;
       margin-top: 12px;
       position: relative;
       z-index: 1;
       cursor: pointer;
       padding: 6px 0;
       font-size: 0.95rem;
   }

   .calendar-popup .days li.inactive {
       color: #bdbdbd;
       cursor: default;
   }

   .calendar-popup .days li.selected {
       color: #fff;
   }

   .calendar-popup .days li::before {
       content: "";
       position: absolute;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
       width: 36px;
       height: 36px;
       border-radius: 50%;
       z-index: -1;
   }

   .calendar-popup .days li.selected::before {
       background: #9B59B6;
   }

   .calendar-popup .days li:not(.selected):hover::before {
       background: #f2f2f2;
   }

   /* responsive */
   @media (max-width:480px) {
       .calendar-popup {
           width: 91%;
           left: 17px;
           right: 0;
       }

       .left-controls {
           flex-direction: column;
           gap: 6px;
           align-items: stretch;
       }
   }

   .select2-container {
       width: 100% !important;
       z-index: 1;
   }

   .select2-container--default .select2-selection--single {
       height: 40px;
       line-height: 40px;
       border-radius: 6px;
       border: 1px solid #cc55995c;
       box-sizing: border-box;
       padding: 0 12px;
       background: transparent;
       min-height: 40px;
   }

   /* ensure Select2's rendered element does not cover the floating label */
   .did-floating-label-content {
       position: relative;
       z-index: 0;
   }

   /* label sits above when floated */
   .did-floating-label-content.has-value .did-floating-label,
   .did-floating-label-content .did-floating-input:focus~.did-floating-label,
   .did-floating-label-content .did-floating-input:not(:placeholder-shown)~.did-floating-label {
       z-index: 3;
       top: -10px;
       font-size: 12px;
       background: #fff;
       padding: 0 6px;
   }

   /* keep the select2 clickable but let label float above */
   .select2-container--default .select2-selection--single {
       z-index: 1;
   }

   .did-floating-label {
       z-index: 2;
       pointer-events: none;
   }

   /* tidy up the hidden original select so it doesn't cause layout issues */
   .did-floating-label-content select.did-floating-select {
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       height: 40px;
       opacity: 0;
       /* keep native select accessible but invisible */
       pointer-events: none;
       /* clicks go to select2's widget */
   }

   .did-floating-label-content textarea {
       min-height: 90px;
       padding: 10px 14px;
   }

   /* --- Ensure label isn't hidden by Select2 by default when placeholder is shown --- */
   .did-floating-label-content.placeholder-visible .did-floating-label {
       top: -10px;
       font-size: 12px;
       background: #fff;
       padding: 0 6px;
       z-index: 3;
   }

   /* When focused/open, make label float */
   .did-floating-label-content.select-focused .did-floating-label {
       top: -10px;
       font-size: 12px;
       background: #fff;
       padding: 0 6px;
       z-index: 4;
   }

   /* A slightly subtler float when placeholder is visible (so it doesn't look like a filled field) */
   .did-floating-label-content.placeholder-visible .did-floating-label {
       color: #cc5599;
       opacity: 0.95;
   }

   /* Keep the select2 render area vertically centered so text doesn't overlap label */
   .select2-container--default .select2-selection--single .select2-selection__rendered {
       line-height: 40px;
       padding-top: 0;
       padding-bottom: 0;
   }

   .wellness-form .did-floating-label-content {
       margin-bottom: 16px;
       /* gap between stacked inputs */
   }

   /* ---------- Textarea floating label styles ---------- */
   .did-floating-label-content {
       position: relative;
   }

   .did-floating-label-content textarea {
       width: 100%;
       min-height: 90px;
       padding: 22px 14px 10px 14px;
       /* top padding leaves space for label */
       border-radius: 6px;
       border: 1px solid #cc55995c;
       box-sizing: border-box;
       font-size: 14px;
       background: #fff;
       resize: vertical;
   }

   /* label base position for textarea */
   .did-floating-label {
       position: absolute;
       left: 14px;
       top: 10px;
       font-size: 13px;
       color: #cc5599;
       pointer-events: none;
       transition: 0.18s ease all;
       background: transparent;
       padding: 0 6px;
       z-index: 2;
   }

   /* subtle colour change when floating but empty (placeholder-visible handling reused) */
   .did-floating-label-content.placeholder-visible .did-floating-label {
       color: #cc5599;
       opacity: 0.95;
   }

   /* ensure textarea text doesn't overlap the visible label on small heights */
   @media (max-width:480px) {
       .did-floating-label-content textarea {
           padding-top: 20px;
       }
   }