/*
Theme Name: iGadgetCare
Theme URI: https://igadgetcare.com
Author: iGadgetCare
Author URI: https://igadgetcare.com
Description: Premium device repair landing page theme for iGadgetCare (iPhone, MacBook, iPad, Smartwatch repair in Bangalore). Includes hero, services, why-us, contact form (Web3Forms integration), sticky mobile CTA and floating WhatsApp.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: igadgetcare
Tags: one-page, landing-page, business
*/

:root {
  --radius: 1rem;
  --background: oklch(0.99 0.002 250);
  --foreground: oklch(0.15 0.01 250);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.15 0.01 250);
  --primary: oklch(0.58 0.18 250);
  --primary-foreground: oklch(0.99 0 0);
  --primary-glow: oklch(0.72 0.17 245);
  --secondary: oklch(0.96 0.005 250);
  --secondary-foreground: oklch(0.2 0.01 250);
  --muted: oklch(0.96 0.005 250);
  --muted-foreground: oklch(0.5 0.015 250);
  --accent: oklch(0.94 0.02 245);
  --destructive: oklch(0.6 0.22 25);
  --border: oklch(0.92 0.005 250);
  --input: oklch(0.94 0.005 250);
  --ring: oklch(0.58 0.18 250);
  --whatsapp: oklch(0.62 0.17 150);
  --whatsapp-foreground: oklch(0.99 0 0);

  --gradient-hero: linear-gradient(135deg, oklch(0.97 0.015 250) 0%, oklch(0.94 0.04 245) 50%, oklch(0.98 0.01 250) 100%);
  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-glow));
  --gradient-glow: radial-gradient(circle at 50% 50%, oklch(0.72 0.17 245 / 0.35), transparent 70%);
  --shadow-soft: 0 4px 20px -4px oklch(0.5 0.05 250 / 0.1);
  --shadow-elegant: 0 20px 60px -20px oklch(0.58 0.18 250 / 0.25);
  --shadow-glow: 0 0 80px oklch(0.72 0.17 245 / 0.4);
  --glass-bg: oklch(1 0 0 / 0.7);
  --glass-border: oklch(1 0 0 / 0.5);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
a { color: inherit; }

/* Tailwind theme color overrides via CSS vars */
.bg-background { background-color: var(--background); }
.bg-card { background-color: var(--card); }
.bg-secondary { background-color: var(--secondary); }
.bg-secondary\/50 { background-color: color-mix(in oklab, var(--secondary) 50%, transparent); }
.bg-secondary\/60 { background-color: color-mix(in oklab, var(--secondary) 60%, transparent); }
.bg-primary { background-color: var(--primary); }
.bg-primary\/5 { background-color: color-mix(in oklab, var(--primary) 5%, transparent); }
.bg-primary\/10 { background-color: color-mix(in oklab, var(--primary) 10%, transparent); }
.bg-whatsapp { background-color: var(--whatsapp); }
.bg-whatsapp\/10 { background-color: color-mix(in oklab, var(--whatsapp) 10%, transparent); }
.bg-foreground { background-color: var(--foreground); }
.bg-background\/60 { background-color: color-mix(in oklab, var(--background) 60%, transparent); }

.text-foreground { color: var(--foreground); }
.text-background { color: var(--background); }
.text-primary { color: var(--primary); }
.text-primary-foreground { color: var(--primary-foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-whatsapp { color: var(--whatsapp); }
.text-whatsapp-foreground { color: var(--whatsapp-foreground); }
.text-destructive { color: var(--destructive); }

.border-border { border-color: var(--border); }
.border-primary\/40 { border-color: color-mix(in oklab, var(--primary) 40%, transparent); }
.border-white\/40 { border-color: rgba(255,255,255,0.4); }
.border-white\/20 { border-color: rgba(255,255,255,0.2); }

/* Custom utilities */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes float-delayed {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.05); }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-float-delayed { animation: float-delayed 7s ease-in-out infinite 1s; }
.animate-glow-pulse { animation: glow-pulse 5s ease-in-out infinite; }
.animate-fade-up { animation: fade-up 0.7s ease-out both; }
.animate-spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
}
.bg-gradient-hero { background-image: var(--gradient-hero); }
.bg-gradient-primary { background-image: var(--gradient-primary); }
.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-elegant { box-shadow: var(--shadow-elegant); }
.shadow-glow { box-shadow: var(--shadow-glow); }

.bg-clip-text { -webkit-background-clip: text; background-clip: text; }
.text-transparent { color: transparent; }

/* Modal */
.igc-modal-backdrop {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(15, 20, 35, 0.55);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center;
  padding: 1rem;
}
.igc-modal-backdrop.open { display: flex; animation: fade-up 0.25s ease-out; }
.igc-modal {
  background: var(--card);
  border-radius: 1.5rem;
  max-width: 28rem; width: 100%;
  padding: 1.5rem;
  box-shadow: var(--shadow-elegant);
}
.igc-input {
  margin-top: 0.375rem; width: 100%;
  border-radius: 1rem;
  background: color-mix(in oklab, var(--secondary) 60%, transparent);
  border: 1px solid var(--border);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  outline: none;
  transition: all 0.2s;
  font-family: inherit;
}
.igc-input:focus {
  background: var(--background);
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 15%, transparent);
}
.igc-toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  background: var(--foreground); color: var(--background);
  padding: 0.75rem 1.25rem; border-radius: 9999px;
  font-size: 0.875rem; z-index: 90;
  box-shadow: var(--shadow-elegant);
  opacity: 0; transition: opacity 0.3s;
}
.igc-toast.show { opacity: 1; }
.igc-toast.error { background: var(--destructive); color: var(--primary-foreground); }