/* veTech Shared Styles */

:root{
  --brand-start:#FA8E7C; --brand-end:#C931D8; --soft:#E9D0DE; --text:#353535; --sub:#949494;
}
html, body { color: var(--text); }
.btn-brand { background: linear-gradient(90deg,var(--brand-start),var(--brand-end)); color:#fff; }
.btn-brand:hover { filter: brightness(1.05); transform: translateY(-1px); }
.brand-gradient-text{ background: linear-gradient(90deg,var(--brand-start),var(--brand-end)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ring-gradient{ background: linear-gradient(90deg,var(--brand-start),var(--brand-end)); }
.divider-grad{ background: linear-gradient(90deg, rgba(250,142,124,.18), rgba(201,49,216,.18)); }
.card-hover{ transition: all .25s ease; }
.card-hover:hover{ transform: translateY(-4px); box-shadow: 0 10px 25px rgba(201,49,216,.12); }
.glass { background: rgba(255,255,255,0.7); backdrop-filter: saturate(140%) blur(8px); }

/* Dark mode variables and overrides */
html.dark, .dark body { background-color:#1a1a1a; }
html.dark {
  --text:#e5e5e5;
  --sub:#a1a1aa;
  --soft:#2a2230;
}
.dark header { 
  background-color: #1a1a1a !important; 
  border-color: rgba(255,255,255,0.08) !important; 
  backdrop-filter: blur(8px) saturate(100%) !important;
}
.dark .glass { background: rgba(26,26,26,0.6); }
.dark .bg-white { background-color:#1f1f1f !important; }
.dark .bg-zinc-100 { background-color: rgba(255,255,255,0.06) !important; }
.dark .border-zinc-100 { border-color: rgba(255,255,255,0.08) !important; }
.dark .border-zinc-200 { border-color: rgba(255,255,255,0.14) !important; }
.dark .hover\:border-zinc-300:hover { border-color: rgba(255,255,255,0.22) !important; }
.dark .ring-black\/5 { --tw-ring-color: rgba(0,0,0,0.3); }
.dark .shadow-lg { box-shadow: 0 10px 25px rgba(0,0,0,0.45) !important; }
.dark .divider-grad{ background: linear-gradient(90deg, rgba(250,142,124,.28), rgba(201,49,216,.28)); }
.dark .brand-gradient-text{ filter: brightness(1.05); }
.dark a[href] { color: inherit; }

/* Dark mode: FAQ tweaks */
.dark #faq .divide-zinc-100 { border-color: rgba(255,255,255,0.08) !important; }
.dark #faq .border-zinc-100 { border-color: rgba(255,255,255,0.08) !important; }
.dark #faq details summary { background-color: transparent; }
.dark #faq details summary:hover { background-color: rgba(255,255,255,0.03); }
.dark #faq details[open] { background-color: rgba(255,255,255,0.03); }
.dark #faq details + details { border-top-color: rgba(255,255,255,0.08) !important; }
.dark #faq summary i[data-lucide] { color: var(--sub); }

/* Dark mode: form field overrides */
.dark #leadForm input,
.dark #leadForm textarea,
.dark #leadForm select,
.dark #promoForm input,
.dark #promoForm textarea,
.dark #promoForm select {
  background: #18181b !important;
  color: #e4e4e7 !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.dark #leadForm input::placeholder,
.dark #leadForm textarea::placeholder,
.dark #promoForm input::placeholder,
.dark #promoForm textarea::placeholder {
  color: #868686 !important;
  opacity: 1;
}

/* Dark mode: promo form specific overrides */
.dark #promoForm #fileUploadLabel {
  border-color: rgba(255,255,255,0.14) !important;
  background: rgba(255,255,255,0.03) !important;
}
.dark #promoForm #fileUploadLabel:hover {
  border-color: rgba(255,255,255,0.22) !important;
  background: rgba(255,255,255,0.05) !important;
}
.dark #promoForm #promoFileInfo {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.dark #promoForm #removeFile:hover {
  background: rgba(255,255,255,0.1) !important;
}

/* Sticky form positioning */
@media (min-width: 1024px) {
  #promoFormCard {
    position: sticky;
    top: 120px;
  }
}

/* Portfolio project type chip dark mode */
.dark #portfolioGrid [data-lucide] {
  color: #C931D8;
}
.dark #portfolioGrid [style*="background: rgba(201,49,216,0.1)"] {
  background: rgba(201,49,216,0.15) !important;
  border-color: rgba(201,49,216,0.4) !important;
}

/* Portfolio store icons dark mode */
.dark #portfolioGrid svg path[fill="#000000"] {
  fill: #ffffff !important;
}

/* Hero gradient orbs dark mode visibility */
.dark section[id="hero"] .opacity-30[style*="radial-gradient"],
.dark section[id="home"] .opacity-30[style*="radial-gradient"] {
  opacity: 0.8 !important;
}

/* Services dropdown menu */
.dark nav .group .absolute {
  background-color: #1f1f1f !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.dark nav .group a:hover {
  background-color: rgba(255,255,255,0.05) !important;
}

/* Checkbox styling to match brand colors */
#promoForm input[type="checkbox"]:checked,
#leadForm input[type="checkbox"]:checked {
  background-color: #C931D8 !important;
  border-color: #C931D8 !important;
  accent-color: #C931D8;
}
#promoForm input[type="checkbox"],
#leadForm input[type="checkbox"] {
  accent-color: #C931D8;
}