/*!*************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[8].use[0]!./src/admin/components/form/ClientReservationForm.vue?vue&type=style&index=0&id=4063674a&scoped=true&lang=css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************/

/* Global styles applied via CSS variables from useAppearanceSettings */
/* These are default values, they will be overridden by inline styles from computed properties */
/* Ensure these are in sync with useAppearanceSettings.js */
[data-v-4063674a]:root {
  /* Use CSS variables from useAppearanceSettings.js for global theme */
  /* These are NOT default values, they are the actual values applied by the composable */
  font-family: var(--font-family-form, 'Inter', sans-serif);
  font-size: var(--base-font-size-form, 1rem);
  --primary-color: var(--primary-color);
  --background-color: var(--background-color);
  --text-color: var(--text-color);
  --header-background-color: var(--header-background-color);
  --header-text-color: var(--header-text-color);
  --border-radius-form: var(--border-radius-form);
  --shadow-form: var(--shadow-form);
}
.schedula {
&[data-v-4063674a] {
  /* Base container for the whole form */

  /* Main form container (the "card") */
  /* Apply rounded corners and shadows directly from CSS variables */

  /* Main Form Content Area - NO internal scrolling */

  /* Removed custom scrollbar styles as there's no internal scrollbar */
  /* .custom-scrollbar::-webkit-scrollbar { ... } */

  /* Form Group Styles (labels, inputs, selects, textareas) */

  /* Remove all focus outlines and rings */

  /* Styles for editable labels in preview mode */

  /* For WebKit browsers like Chrome and Safari */

  /* For Firefox */

  /* For IE10+ */

  /* For Edge */

  /* Checkbox/Radio Group */

  /* Color Picker Specifics */

  /* Buttons */

  /* This applies to all buttons globally, including nav buttons */

  /* Cards (e.g., info-card, detail-card, confirmation-summary) */

  /* Aspect Ratio for Service Preview Image */

  /* Time Slot Buttons & Calendar Dates */
  /* No scaling or strong shadows on hover/active for mobile */

  /* Responsive adjustments for smaller screens (Tailwind breakpoints) */
  }
.wp-reservation-form[data-v-4063674a] {
    background-color: var(--background-color);
    font-family: var(--font-family-form);
    /* Apply font family */
    font-size: var(--base-font-size-form);
    /* Apply base font size */
    color: var(--text-color);
    /* min-h-screen is already applied via Tailwind in template */
    /* transition-all duration-300 is already applied via Tailwind in template */
}
.relative.rounded-lg.overflow-hidden.shadow-lg.w-full.max-w-xl.mx-auto.flex.flex-col[data-v-4063674a] {
    border-radius: var(--border-radius-form);
    /* Apply rounded corners */
    box-shadow: var(--shadow-form);
    /* Apply shadows */
    height: auto;
    max-height: none;
}
.form-body[data-v-4063674a] {
    /* Styles are applied via inline styles from computed properties */
    flex-grow: 1;
    /* Allows it to take available space */
    overflow-y: visible;
    /* Prevents internal scrolling */
    -webkit-overflow-scrolling: auto;
    /* Revert to default scrolling behavior */
}
.form-group[data-v-4063674a] {
    margin-bottom: 0.75rem;
}
.form-label[data-v-4063674a] {
    /* Styles applied via inline styles from computed properties */
}
.form-input[data-v-4063674a],
  .form-select[data-v-4063674a],
  .form-textarea[data-v-4063674a] {
    border-radius: var(--border-radius-form);
    /* Apply rounded corners */
    font-size: var(--base-font-size-form);
    /* Apply base font size */
    /* Padding adjusted in JS computed property: inputStyles */
    background-color: var(--background-color);
    color: var(--text-color);
    border-color: var(--text-color);
}
.form-input[data-v-4063674a]:focus,
  .form-select[data-v-4063674a]:focus,
  .form-textarea[data-v-4063674a]:focus,
  button[data-v-4063674a]:focus,
  .form-checkbox[data-v-4063674a]:focus,
  .form-radio[data-v-4063674a]:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: inherit !important;
    --tw-ring-color: transparent !important;
}
.preview-editable-label[data-v-4063674a] {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease-in-out;
    font-size: 0.75rem;
    /* Smaller font size */
}
.preview-editable-label[data-v-4063674a]:hover {
    opacity: 1;
}
.form-textarea[data-v-4063674a]:focus,
  button[data-v-4063674a]:focus,
  input[data-v-4063674a]:focus,
  select[data-v-4063674a]:focus,
  textarea[data-v-4063674a]:focus,
  [tabindex][data-v-4063674a]:focus,
  a[data-v-4063674a]:focus {
    outline: none !important;
    box-shadow: none !important;
    --tw-ring-color: transparent !important;
    --tw-ring-offset-shadow: none !important;
    --tw-ring-shadow: none !important;
    border-color: inherit !important;
}
[data-v-4063674a]:focus {
    outline: none !important;
    box-shadow: none !important;
}
[data-v-4063674a]::-moz-focus-inner {
    border: 0 !important;
}
[data-v-4063674a]:-ms-input-placeholder {
    color: #9CA3AF !important;
}
[data-v-4063674a]::-ms-input-placeholder {
    color: #9CA3AF !important;
}
.form-help-text[data-v-4063674a] {
    /* Tailwind classes handle this */
}
.checkbox-group[data-v-4063674a] {
    /* Tailwind classes handle this */
}
.form-checkbox[data-v-4063674a],
  .form-radio[data-v-4063674a] {
    accent-color: var(--primary-color);
}
.color-picker-group[data-v-4063674a] {
    /* Tailwind classes handle this */
}
.color-input[data-v-4063674a] {
    /* Custom styles for color input */
    width: 2.5rem;
    /* w-10 */
    height: 2.5rem;
    /* h-10 */
    border: 1px solid #d1d5db;
    /* border-gray-300 */
    border-radius: 0.375rem;
    /* rounded-md */
    cursor: pointer;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
}
.color-input[data-v-4063674a]::-webkit-color-swatch-wrapper {
    padding: 0;
}
.color-input[data-v-4063674a]::-webkit-color-swatch {
    border: none;
    border-radius: 0.25rem;
    /* slightly less rounded than wrapper */
}
.inline-flex.items-center[data-v-4063674a] {
    /* Common styles for all buttons, specific styles via :style */
}
button[data-v-4063674a]:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-form);
    /* Apply shadows */
}
button[data-v-4063674a]:active:not(:disabled) {
    transform: translateY(0);
}
.info-card[data-v-4063674a],
  .detail-card[data-v-4063674a],
  .confirmation-summary[data-v-4063674a] {
    /* Styles applied via inline styles from computed properties */
    border-radius: var(--border-radius-form);
    /* Apply rounded corners */
    box-shadow: var(--shadow-form);
    /* Apply shadows */
}
.relative.rounded-lg.overflow-hidden.shadow-lg>div[style*="padding-bottom"][data-v-4063674a] {
    position: relative;
    width: 100%;
}
.relative.rounded-lg.overflow-hidden.shadow-lg img[data-v-4063674a] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 639px) {
&[data-v-4063674a] {

    /* sm breakpoint */

    /* Ensure selected state still looks good on mobile without scaling */
    }
.calendar-date[data-v-4063674a],
    .time-slot-btn[data-v-4063674a],
    .time-slot[data-v-4063674a] {
      transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out !important;
      /* Keep subtle color transition */
      transform: scale(1.0) !important;
      /* Prevent scaling on mobile */
      box-shadow: none !important;
      /* Remove shadows on mobile */
}
.calendar-date[data-v-4063674a]:hover,
    .time-slot-btn[data-v-4063674a]:hover,
    .time-slot[data-v-4063674a]:hover {
      background-color: var(--background-color) !important;
      /* Revert to normal background on hover */
      border-color: var(--text-color)33 !important;
      /* Revert to normal border on hover */
      color: var(--text-color) !important;
      /* Revert to normal text color on hover */
}
.calendar-date.selected[data-v-4063674a],
    .time-slot-btn.selected[data-v-4063674a],
    .time-slot.selected[data-v-4063674a] {
      transform: scale(1.0) !important;
      /* Override selected scaling for mobile */
      box-shadow: none !important;
      /* Override selected shadow for mobile */
}
}
@media (max-width: 639px) {
&[data-v-4063674a] {

    /* sm breakpoint */

    /* Calendar date height reduction on smaller screens */

    /* Adjust padding for the form body on mobile for compactness */

    /* Adjust padding for confirmation summary and its items on mobile */

    /* Adjust padding for navigation buttons container on mobile */
    }
.header-section h1[data-v-4063674a] {
      font-size: 1.125rem;
      /* text-lg */
}
.header-section p[data-v-4063674a] {
      font-size: 0.75rem;
      /* text-xs */
}
.calendar-date[data-v-4063674a] {
      height: 2.5rem;
      /* h-10 */
}
.form-body[data-v-4063674a] {
      padding-left: 1rem;
      /* Smaller px-4 */
      padding-right: 1rem;
      /* Smaller px-4 */
      padding-top: 1rem;
      /* Smaller py-4 */
      padding-bottom: 1rem;
      /* Smaller py-4 */
}
.confirmation-summary[data-v-4063674a] {
      padding: 1rem;
      /* Smaller p-4 */
}
.confirmation-summary .summary-item[data-v-4063674a] {
      padding: 0.75rem;
      /* Smaller p-2 */
}
.flex.flex-col.sm\:flex-row.items-center.py-3.sm\:py-5[data-v-4063674a] {
      padding-top: 0.75rem;
      /* py-3 equivalent */
      padding-bottom: 0.75rem;
      /* py-3 equivalent */
}
}
@media (min-width: 640px) and (max-width: 1023px) {
&[data-v-4063674a] {

    /* sm to lg breakpoints */
    }
.header-section h1[data-v-4063674a] {
      font-size: 1.25rem;
      /* sm:text-xl */
}
.header-section p[data-v-4063674a] {
      font-size: 0.875rem;
      /* sm:text-sm */
}
}
.is-preview .desktop-progress[data-v-4063674a] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}
.is-preview .desktop-progress .ml-2[data-v-4063674a] {
    margin-left: 0.5rem !important;
}
.is-preview .desktop-progress .flex-1[data-v-4063674a] {
    flex: 1 1 0% !important;
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
}
.is-preview .header-section h1[data-v-4063674a] {
    font-size: 20px !important;
}
.is-preview .header-section p[data-v-4063674a] {
    font-size: 14px !important;
}
.is-preview .desktop-progress .text-xs[data-v-4063674a] {
    white-space: normal !important;
    word-break: break-word !important;
}
}