/* =========================================
   1. Root Variables & Theme Configuration
   (Required for colors, spacing, and fonts)
   ========================================= */
:root {
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --color-red-500: oklch(.637 .237 25.331);
  --color-green-500: oklch(.723 .219 149.579);
  --color-green-600: oklch(.627 .194 149.214);
  --color-blue-50: oklch(.97 .014 254.604);
  --color-indigo-100: oklch(.93 .034 272.788);
  --color-indigo-500: oklch(.585 .233 277.117);
  --color-indigo-600: oklch(.511 .262 276.966);
  --color-indigo-700: oklch(.457 .24 277.023);
  --color-gray-300: oklch(.872 .01 258.338);
  --color-gray-600: oklch(.446 .03 256.802);
  --color-gray-700: oklch(.373 .034 259.733);
  --color-white: #fff;
  --spacing: .25rem;
  --container-2xl: 42rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  --radius: .625rem;
  --border: #0000001a;
  --ring: oklch(.708 0 0);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-offset-shadow: 0 0 #0000;
}

/* =========================================
   2. Base Resets
   (Normalizes browser styles)
   ========================================= */
*, :after, :before, ::backdrop {
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
}

#estimate-form-component-wrapper input, 
#estimate-form-component-wrapper select, 
#estimate-form-component-wrapper textarea, 
#estimate-form-component-wrapper button {
  font: inherit;
  color: inherit;
  background-color: transparent;
}

#estimate-form-component-wrapper button {
  appearance: button;
  cursor: pointer;
}

/* =========================================
   3. Utility Classes (Used in Form)
   ========================================= */

/* Layout & Spacing */
.block { display: block; }
.flex { display: flex; }
.grid { display: grid; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }

.mt-1 { margin-top: calc(var(--spacing) * 1); }
.mt-4 { margin-top: calc(var(--spacing) * 4); }
.mb-2 { margin-bottom: calc(var(--spacing) * 2); }
.mb-4 { margin-bottom: calc(var(--spacing) * 4); }
.mb-6 { margin-bottom: calc(var(--spacing) * 6); }

.p-8 { padding: calc(var(--spacing) * 8); }
.px-4 { padding-inline: calc(var(--spacing) * 4); }
.px-6 { padding-inline: calc(var(--spacing) * 6); }
.py-2 { padding-block: calc(var(--spacing) * 2); }
.py-3 { padding-block: calc(var(--spacing) * 3); }

.gap-2 { gap: calc(var(--spacing) * 2); }
.gap-3 { gap: calc(var(--spacing) * 3); }
.gap-4 { gap: calc(var(--spacing) * 4); }

.space-y-4 > :not(:last-child) { margin-bottom: calc(var(--spacing) * 4); }
.space-y-6 > :not(:last-child) { margin-bottom: calc(var(--spacing) * 6); }

/* Sizing */
.w-4 { width: calc(var(--spacing) * 4); }
.w-5 { width: calc(var(--spacing) * 5); }
.w-8 { width: calc(var(--spacing) * 8); }
.w-16 { width: calc(var(--spacing) * 16); }
.w-full { width: 100%; }

.h-4 { height: calc(var(--spacing) * 4); }
.h-5 { height: calc(var(--spacing) * 5); }
.h-8 { height: calc(var(--spacing) * 8); }
.h-16 { height: calc(var(--spacing) * 16); }

/* Grid Columns */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

@media (min-width: 48rem) {
  .md\:col-span-1 { grid-column: span 1 / span 1; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Colors & Backgrounds */
#estimate-form-component-wrapper .bg-white { background-color: var(--color-white); }
#estimate-form-component-wrapper .bg-indigo-600 { background-color: var(--color-indigo-600); }

#estimate-form-component-wrapper .text-white { color: var(--color-white); }
#estimate-form-component-wrapper .text-gray-600 { color: var(--color-gray-600); }
#estimate-form-component-wrapper .text-gray-700 { color: var(--color-gray-700); }
#estimate-form-component-wrapper .text-red-500 { color: var(--color-red-500); }
#estimate-form-component-wrapper .text-green-500 { color: var(--color-green-500); }
#estimate-form-component-wrapper .text-green-600 { color: var(--color-green-600); }
#estimate-form-component-wrapper .text-indigo-600 { color: var(--color-indigo-600); }

/* Typography */
#estimate-form-component-wrapper .text-center { text-align: center; }

/* Borders & Rounded Corners */
#estimate-form-component-wrapper .rounded-lg { border-radius: var(--radius); }
#estimate-form-component-wrapper .border { border-width: 1px; border-style: solid; }
#estimate-form-component-wrapper .border-gray-300 { border-color: var(--color-gray-300); }
#estimate-form-component-wrapper .outline-none { outline: none; }

/* Inputs & Forms */
#estimate-form-component-wrapper .resize-none { resize: none; }

/* Effects (Shadows & Transitions) */
#estimate-form-component-wrapper .shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

#estimate-form-component-wrapper .transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}

#estimate-form-component-wrapper .transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}

/* Pseudo-classes (Hover & Focus) */
@media (hover: hover) {
  #estimate-form-component-wrapper .hover\:bg-indigo-700:hover { background-color: var(--color-indigo-700); }
}

#estimate-form-component-wrapper .focus\:border-transparent:focus { border-color: transparent; }

#estimate-form-component-wrapper .focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

#estimate-form-component-wrapper .focus\:ring-indigo-500:focus { --tw-ring-color: var(--color-indigo-500); }

#estimate-form-component-wrapper .hidden { display: none; }