/* src/style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Base Styles & Variables */
:root {
  --brand: #c28c53;
  --brand-dark: #a57546;
  --brand-light: #e6b27d;
  --bg-adjuster-view: #eef2ff;
  --text-adjuster-view-header: #4338ca;
  --border-adjuster-view: #c7d2fe;
  --warm-stone: #e6dccc;
  --obsidian-black: #2c2c2a;
  --pale-ash: #f1ede7;
  transition:
    --brand 0.3s ease,
    --brand-dark 0.3s ease,
    --brand-light 0.3s ease;
}

/* Color Utility Classes */
.bg-warm-stone {
  background-color: #e6dccc;
}
.text-warm-stone {
  color: #e6dccc;
}
.bg-amber-clay {
  background-color: #c28c53;
}
.text-amber-clay {
  color: #c28c53;
}
.border-amber-clay {
  border-color: #c28c53;
}
.hover\:bg-amber-clay-light:hover {
  background-color: rgba(194, 140, 83, 0.1);
}
.bg-obsidian-black {
  background-color: #2c2c2a;
}
.text-obsidian-black {
  color: #2c2c2a;
}
.bg-pale-ash {
  background-color: #f1ede7;
}
.text-pale-ash {
  color: #f1ede7;
}
.bg-adjuster-view {
  background-color: #eef2ff;
}
.border-adjuster-view {
  border-color: #c7d2fe;
}
.text-adjuster-view-header {
  color: #4338ca;
}

html {
  background-color: #e6dccc !important; /* bg-warm-stone */
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: #e6dccc !important; /* bg-warm-stone */
  color: #2c2c2a; /* text-obsidian-black */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Use Satoshi font for specific elements */
h1,
h2,
h3,
h4,
h5,
h6,
.font-satoshi,
button,
nav a,
.logo-placeholder,
.testimonial span,
.outcome-label,
.step-number-badge,
.crm-snippet-label,
.crm-snippet-value,
.crm-snippet-link,
#talkLabel,
#mic-device,
#mic-selector,
.form-label,
.review-label,
.adjuster-view-header,
.adjuster-section-title,
.ai-confirmation-label,
.value-prop-text h5 {
  font-family: 'Satoshi', sans-serif;
}

/* Component Styles (Moved from HTML <style>) */
/* Buttons */
.btn {
  @apply px-6 py-3 md:px-7 md:py-3.5 rounded-lg font-medium transition-all duration-300 inline-flex items-center justify-center gap-2 text-center shadow cursor-pointer text-sm md:text-base;
}
.btn-sm {
  @apply px-4 py-2 text-xs md:text-sm; /* Adjusted smaller button size */
}
.btn-primary {
  @apply bg-brand text-white;
}
.btn-primary:hover {
  @apply bg-brand-dark shadow-md transform -translate-y-px;
}
.btn-secondary {
  @apply bg-transparent text-brand border border-brand;
}
.btn-secondary:hover {
  @apply bg-amber-clay/5 border-brand-dark text-brand-dark shadow transform -translate-y-px;
}
.btn-disabled {
  @apply bg-gray-300 text-gray-500 cursor-not-allowed shadow-none transform-none border-gray-300;
}
.btn-disabled:hover {
  @apply bg-gray-300;
}
.btn i {
  @apply flex-shrink-0;
}
.btn span {
  @apply whitespace-nowrap;
}
.btn-snippet {
  /* Style for non-interactive button in snippets */
  @apply bg-blue-600 text-white cursor-default opacity-75 py-3;
}

/* Form Input Styles (Demo Page) */
.form-label {
  @apply block font-medium text-sm text-obsidian-black mb-1.5 text-left;
}
.form-input,
.form-select,
.form-textarea {
  @apply block w-full bg-white border border-brand/40 rounded-md py-2.5 px-3.5 text-base text-obsidian-black shadow-inner-sm outline-none transition-colors duration-200 h-[calc(1.5em+1.25rem+2px)]; /* Adjusted padding/height */
}
.form-select {
  @apply pr-10;
} /* Account for arrow */
.form-textarea {
  @apply h-auto;
} /* Allow textarea to grow */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  @apply border-brand ring-2 ring-brand/20;
}
.form-input::placeholder,
.form-textarea::placeholder {
  @apply text-obsidian-black/50;
}
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23C28C53' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
}

/* File Upload Simulation (Demo Page) */
.file-upload-btn.uploading {
  @apply bg-brand-dark cursor-wait;
}
.file-upload-btn.uploaded {
  @apply bg-green-500 text-white border-green-500 cursor-pointer;
}
.file-upload-btn.uploaded:hover {
  @apply bg-green-600 transform-none shadow;
}
.file-upload-visual {
  @apply mt-2;
}

/* Mock PDF Preview Styles (Demo Page) */
.mock-pdf-preview {
  @apply bg-white border border-brand/30 rounded-md p-3 mt-3 shadow-sm relative overflow-hidden;
}
.mock-pdf-header {
  @apply flex items-center gap-3 mb-2 pb-2 border-b border-gray-100;
}
.scan-indicator {
  @apply absolute top-0 left-[-100%] w-full h-full bg-gradient-to-r from-transparent via-brand/20 to-transparent z-10 opacity-0 pointer-events-none;
}
.scan-indicator.laser-scanning {
  opacity: 0.6;
  animation: laserScan 2s ease-in-out forwards;
}
@keyframes laserScan {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
.mock-pdf-icon {
  @apply flex-shrink-0 w-12 h-auto p-2 bg-pale-ash border border-brand/20 rounded flex items-center justify-center;
}
.mock-pdf-icon i {
  @apply text-red-500;
}
.mock-pdf-details {
  @apply flex-grow min-w-0;
}
.mock-pdf-filename {
  @apply font-medium text-sm text-obsidian-black truncate;
}
.mock-pdf-status {
  @apply text-xs text-gray-500 font-medium mt-0.5 flex items-center gap-1;
}
.mock-pdf-status.analyzed {
  @apply text-green-600;
}
.mock-pdf-metadata {
  @apply text-xs text-gray-700 leading-relaxed pt-2 grid grid-cols-[auto_1fr] gap-x-2 gap-y-0.5 items-center;
}
.mock-pdf-metadata dt {
  @apply font-medium text-gray-500 text-right;
}
.mock-pdf-metadata dd {
  @apply font-medium text-obsidian-black;
}

/* Step Indicator (Demo Page) */
.step-indicator {
  @apply flex justify-center mb-8 gap-2;
}
.step-dot {
  @apply w-2.5 h-2.5 rounded-full bg-brand/30 transition-colors duration-300;
}
.step-dot.active {
  @apply bg-brand;
}
.step-dot.completed {
  @apply bg-brand;
} /* Added for completed steps */

/* Form Steps (Demo Page) */
.form-step {
  display: none;
  animation: fadeIn 0.5s ease-in-out;
}
.form-step.active {
  display: block;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Review Styles (Demo Page) */
.review-label {
  @apply block font-medium text-xs text-gray-500 mb-0.5 text-left uppercase tracking-wide;
}
.review-value {
  @apply block w-full bg-pale-ash border border-brand/20 rounded-md py-2 px-3 text-sm text-obsidian-black mb-3 min-h-[38px];
}
.review-value-small {
  @apply text-xs py-1.5 px-2.5 min-h-[32px] leading-snug;
}
.review-ai-note {
  @apply text-xs text-brand/80 ml-1.5 inline-flex items-center whitespace-nowrap;
}
.review-flagged-item {
  @apply bg-yellow-50 border-yellow-300 text-yellow-800;
}
.review-flagged-item .review-ai-note {
  @apply text-yellow-700;
}
.review-flagged-item .review-ai-note i {
  @apply text-yellow-600;
}

/* Damage Thumbnail Grid (Demo Page) */
.damage-thumbnail-grid {
  @apply grid grid-cols-auto-fill-60 gap-3 mt-2 mb-4 p-3 bg-pale-ash border border-brand/20 rounded-md;
}
.damage-thumbnail {
  @apply w-full h-[60px] object-cover rounded border border-brand/10;
}
.damage-thumbnail-placeholder {
  @apply w-full h-[60px] flex items-center justify-center bg-gray-200 rounded text-gray-500 text-xs border border-dashed border-gray-400;
}

/* AI Confirmation Section (Demo Page) */
#ai-damage-confirmation {
  @apply mt-6 p-4 bg-pale-ash border border-brand/20 rounded-lg relative overflow-hidden;
  animation: fadeIn 0.5s ease-in-out;
}
#ai-damage-confirmation .scan-indicator {
  background: linear-gradient(
    to right,
    rgba(241, 237, 231, 0) 0%,
    rgba(241, 237, 231, 0.6) 50%,
    rgba(241, 237, 231, 0) 100%
  );
}
#ai-damage-details {
  opacity: 1;
  transition: opacity 0.3s ease;
}
#ai-damage-details.hidden {
  @apply opacity-0 h-0 overflow-hidden;
}
.ai-confirmation-label {
  @apply font-medium text-xs text-gray-500 mb-1 uppercase tracking-wider;
}
.ai-confirmation-value {
  @apply text-sm text-obsidian-black bg-white py-2 px-3 rounded border border-brand/30 mb-3;
}
#ai-damage-confirmation .btn-primary.btn-sm.confirmed {
  @apply bg-green-600 border-green-600 cursor-default;
}
#ai-damage-confirmation .btn-primary.btn-sm.confirmed:hover {
  @apply bg-green-700;
}

/* Adjuster View (Demo Page) */
#adjuster-view {
  @apply mt-6 p-6 rounded-lg border border-adjuster-view bg-adjuster-view;
  animation: fadeIn 0.5s ease-in-out;
}
.adjuster-view-header {
  @apply text-xl font-bold text-adjuster-view-header mb-4 pb-3 border-b border-adjuster-view flex items-center gap-2;
}
.adjuster-section-title {
  @apply text-base font-semibold text-adjuster-view-header mt-5 mb-3 pb-1 border-b border-dashed border-adjuster-view flex items-center gap-2;
}
#adjuster-view .review-label {
  @apply text-indigo-600 text-[11px] mb-0;
} /* Indigo label */
#adjuster-view .review-value {
  @apply bg-white border-adjuster-view text-xs py-1.5 px-2.5 mb-2;
}
#adjuster-view .review-flagged-item {
  @apply bg-yellow-100 border-yellow-300 text-yellow-900 py-1.5 px-2.5;
} /* Lighter yellow */
#adjuster-view .review-flagged-item .review-ai-note {
  @apply text-yellow-800;
}
#adjuster-view .review-flagged-item .review-ai-note i {
  @apply text-yellow-700;
} /* Amber 600 for icon */
#adjuster-view .ai-value-estimate {
  @apply bg-green-100 border border-green-300 text-green-800;
}
#adjuster-view .ai-value-estimate p:first-child {
  @apply text-green-700;
} /* Darker Green for value */
.crm-sync-status {
  @apply inline-flex items-center gap-1.5 text-xs font-medium px-2.5 py-1 rounded-full;
}
.crm-sync-status.synced {
  @apply bg-green-100 text-green-700 border border-green-200;
}
.crm-sync-status.pending {
  @apply bg-yellow-100 text-yellow-700 border border-yellow-200;
}
.document-link {
  @apply text-indigo-600 underline text-xs cursor-pointer;
}
.document-link:hover {
  @apply text-indigo-800;
}
#adjuster-damage-preview {
  @apply grid grid-cols-auto-fill-50 gap-2 mt-1;
}
#adjuster-damage-preview img {
  @apply w-full h-[50px] object-cover rounded border border-adjuster-view;
}

/* Value Props Section (Demo Page) */
#value-props-container {
  @apply mb-10 p-6 bg-pale-ash border border-brand/20 rounded-lg;
}
.value-prop-item {
  @apply flex items-start gap-3;
}
.value-prop-icon {
  @apply flex-shrink-0 text-brand mt-0.5;
}
.value-prop-text h5 {
  @apply text-base font-semibold mb-0.5;
}
.value-prop-text p {
  @apply text-sm text-gray-700 leading-relaxed;
}

/* Logo Placeholder (Demo Page) */
.form-logo-placeholder {
  @apply absolute top-6 left-6 text-xs font-medium text-gray-400 opacity-70 border border-dashed border-gray-300 px-2 py-1 rounded;
}

/* Footer */
.content-wrapper {
  @apply flex-grow;
}

/* Remote Audio Element (Demo Page) */
#remoteAudio {
  /* display: none; */
  @apply w-full mt-2.5;
} /* Make visible for debugging */

/* Show Form Link (Demo Page) */
#show-form-link,
#show-form-link-inline {
  @apply block text-center mt-2 text-xs text-brand underline cursor-pointer;
}
#show-form-link:hover,
#show-form-link-inline:hover {
  @apply text-brand-dark;
}

/* Landing Page Specific Styles */
.body-text {
  @apply text-base leading-relaxed;
}
.body-text > *:not(:last-child) {
  @apply mb-3;
}
.body-text.text-lg {
  @apply text-lg;
}
.body-text.text-sm {
  @apply text-sm leading-relaxed;
}
.caption-text {
  @apply text-xs opacity-80;
}

section {
  @apply py-14 md:py-18 px-4 md:px-10 w-full;
}

.divider {
  @apply h-0.5 bg-gradient-to-r from-transparent via-[#F5E5D3] to-transparent my-8;
}

.hero-section-bg {
  @apply relative z-0;
}
.hero-section-bg::before {
  content: '';
  @apply absolute inset-0 bg-cover bg-bottom bg-no-repeat opacity-10 z-[-1];
  background-image: url('/header-background.webp'); /* Path relative to public dir */
}
@media (max-width: 767px) {
  .hero-section-bg::before {
    background-size: 180% auto;
  }
}

.card {
  @apply bg-white p-5 rounded-lg shadow-md border border-black/5 flex flex-col;
} /* Adjusted shadow/border */
.challenge-card {
  @apply bg-white rounded-lg shadow-lg p-5 flex flex-col md:flex-row md:items-start gap-4 md:gap-6;
}
.outcome-label {
  @apply inline-block mt-auto px-3 py-1 bg-brand/10 text-brand-dark rounded text-xs font-medium uppercase tracking-wider;
}
.testimonial {
  @apply bg-pale-ash p-5 rounded-lg border-l-4 border-brand shadow-sm;
}
.testimonial p {
  @apply italic mb-3 text-gray-700 leading-relaxed;
}
.testimonial span {
  @apply font-medium text-sm text-obsidian-black;
}
.step-number-badge {
  @apply w-14 h-14 rounded-full bg-brand text-white flex items-center justify-center font-bold text-2xl flex-shrink-0 shadow-md;
}

/* Form Snippet Styles (Landing Page) */
.form-snippet-label {
  @apply block font-medium text-sm text-obsidian-black mb-1 text-left;
}
.form-snippet-input,
.form-snippet-select,
.form-snippet-textarea {
  @apply block w-full bg-pale-ash border border-brand/30 rounded-md py-2 px-3 text-base text-obsidian-black shadow-inner-sm outline-none pointer-events-none;
}
.form-snippet-input::placeholder,
.form-snippet-textarea::placeholder {
  @apply text-obsidian-black/40;
}
.form-snippet-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23C28C53' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  @apply pr-10;
}
.form-snippet-read-only {
  @apply bg-pale-ash/60 border border-brand/10 rounded-md py-2 px-3 text-sm text-obsidian-black mt-1 text-left relative overflow-hidden;
}
.form-snippet-ai-note {
  @apply text-[11px] text-brand/80 ml-1.5 inline-flex items-center whitespace-nowrap;
}
.form-snippet-file {
  @apply bg-pale-ash p-3 rounded-md flex items-center gap-3 border border-brand/20 relative overflow-hidden;
}
.form-snippet-img-placeholder {
  @apply bg-pale-ash border border-brand/20 rounded p-2 text-center w-24 flex-shrink-0 relative;
}
.form-snippet-img-placeholder .remove-btn {
  @apply absolute -top-1.5 -right-1.5 bg-white rounded-full p-0.5 leading-none opacity-70 pointer-events-none cursor-default;
}
.form-snippet-ai-summary {
  @apply bg-pale-ash/50 border border-brand/20 rounded-md p-3 text-sm leading-relaxed text-obsidian-black text-left relative overflow-hidden;
}

/* Step 1 Horizontal Layout (Landing Page) */
.step1-stage-card {
  @apply bg-white border border-brand/15 rounded-lg p-4 shadow-lg h-full flex flex-col min-h-[340px] w-full md:w-auto;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .step1-stage-card {
    max-width: 550px;
  }
}
.step1-stage-card h5 {
  @apply text-base mb-3 font-medium;
}
.step1-stage-card p.text-xs {
  @apply text-[13px] leading-relaxed text-gray-700 mb-3;
}
.step1-stage-3-content {
  @apply flex-grow flex flex-col;
}
.step1-damage-indicators {
  @apply border-t border-brand/20 pt-3 mt-3;
}

/* CRM Snippet Styles (Landing Page) */
.crm-snippet-frame {
  @apply bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden;
}
.crm-snippet-header {
  @apply bg-gray-50 px-4 py-3 border-b border-gray-200 flex items-center justify-between;
}
.crm-snippet-pills span {
  @apply inline-block h-2 w-2 rounded-full mr-1;
}
.crm-snippet-restoria-section {
  @apply bg-white border border-brand rounded-md m-4 p-4 shadow-sm;
}
.crm-snippet-label {
  @apply text-xs text-gray-500 uppercase tracking-wider mb-0.5;
}
.crm-snippet-value {
  @apply text-sm text-gray-800 font-medium;
}
.crm-snippet-summary {
  @apply text-sm text-gray-700 leading-relaxed bg-gray-50 p-3 rounded border border-gray-200;
}
.crm-snippet-flag {
  @apply flex items-start gap-2 text-sm py-1;
} /* Changed to items-start */
.crm-snippet-link {
  @apply text-sm text-blue-600 font-medium underline cursor-default;
}

/* Hero Snippet Adjustments (Landing Page) */
.hero-snippet .form-snippet-label {
  @apply text-xs mb-0.5 text-gray-500;
}
.hero-snippet .form-snippet-read-only {
  @apply text-sm py-1.5 px-2.5 bg-pale-ash border-brand/20;
}
.hero-snippet .form-snippet-ai-note {
  @apply text-[11px];
}
.hero-snippet .form-snippet-ai-note i {
  @apply w-3 h-3 mr-0.5;
}
.hero-snippet .flagged-item {
  @apply text-amber-800 bg-amber-50 border-amber-200;
}
.hero-snippet .flagged-item .form-snippet-ai-note {
  @apply text-amber-700;
}
.hero-snippet .flagged-item .form-snippet-ai-note i {
  @apply text-amber-600;
}

/* Mock PDF Text Style (Landing Page) */
.mock-pdf-text {
  @apply font-mono text-[7px] leading-tight text-gray-600 overflow-hidden whitespace-pre;
}
.mock-pdf-text strong {
  @apply font-bold text-gray-800;
}

/* Step Item Spacing (Landing Page) */
.step-item {
  @apply mt-16;
}
.step-item:first-child {
  @apply mt-0;
}
.step-item:not(:last-child) {
  @apply pb-16 border-b border-brand/10;
}

/* Google Form Iframe (Landing Page) */
.google-form-container {
  @apply bg-pale-ash p-0;
}
.google-form-iframe {
  @apply block w-full h-[1000px] border-none rounded;
}

/* Utility */
.hidden {
  display: none;
}
.grid-cols-auto-fill-60 {
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
}
.grid-cols-auto-fill-50 {
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
}