/**
 * GuardMe Partner Theme
 * This file contains all GuardMe-specific styling and theme overrides
 * Uses the standardized theme system with proper primary color overrides
 */

/* GuardMe Font Imports - Now loaded in root layout for better performance */

/* GuardMe Theme Variables - Override the default primary colors */
@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

/* GuardMe theme variables - scoped to :root for global override */
:root {
  --radius: 0.19rem;
}

/* Override CSS variables when body has partner-guardme class */
body.partner-guardme {
  --background: oklch(1.000 0.000 0) !important;
  --foreground: oklch(0.144 0.003 256.06976980994517) !important;
  --card: oklch(1.000 0.000 0) !important;
  --card-foreground: oklch(0.144 0.003 256.06976980994517) !important;
  --popover: oklch(1.000 0.000 0) !important;
  --popover-foreground: oklch(0.144 0.003 256.06976980994517) !important;
  --primary: oklch(0.2672 0.1125 260.56) !important;
  --primary-foreground: oklch(1.000 0.000 0) !important;
  --secondary: oklch(0.712 0.009 256.6995699252912) !important;
  --secondary-foreground: oklch(0.208 0.020 256.84044911913014) !important;
  --muted: oklch(0.712 0.009 256.6995699252912) !important;
  --muted-foreground: oklch(0.529 0.072 256.8786038565769) !important;
  --accent: oklch(0.886 0.017 292.9397363218309) !important;
  --accent-foreground: oklch(0.180 0.051 287.03253318287494) !important;
  --destructive: oklch(0.580 0.237 28.43022926835137) !important;
  --border: oklch(0.843 0.005 256.6745799325366) !important;
  --input: oklch(0.843 0.005 256.6745799325366) !important;
  --ring: oklch(0.2672 0.1125 260.56) !important;
  --chart-1: oklch(0.2672 0.1125 260.56) !important;
  --chart-2: oklch(0.642 0.140 257.112008344573) !important;
  --chart-3: oklch(0.733 0.089 256.86149478886574) !important;
  --chart-4: oklch(0.393 0.137 258.6401229775546) !important;
  --chart-5: oklch(0.301 0.099 258.1983322742823) !important;
  --sidebar: oklch(0.712 0.009 256.6995699252912) !important;
  --sidebar-foreground: oklch(0.208 0.020 256.84044911913014) !important;
  --sidebar-primary: oklch(0.2672 0.1125 260.56) !important;
  --sidebar-primary-foreground: oklch(1.000 0.000 0) !important;
  --sidebar-accent: oklch(0.886 0.017 292.9397363218309) !important;
  --sidebar-accent-foreground: oklch(0.180 0.051 287.03253318287494) !important;
  --sidebar-border: oklch(0.843 0.005 256.6745799325366) !important;
  --sidebar-ring: oklch(0.2672 0.1125 260.56) !important;
}

.dark {
  --background: oklch(0.187 0.017 256.8334636188997);
  --foreground: oklch(0.961 0.002 256.66156576740076);
  --card: oklch(0.229 0.024 256.84582960694013);
  --card-foreground: oklch(0.961 0.002 256.66156576740076);
  --popover: oklch(0.229 0.024 256.84582960694013);
  --popover-foreground: oklch(0.961 0.002 256.66156576740076);
  --primary: oklch(0.383 0.098 257.3570125841265);
  --primary-foreground: oklch(0.961 0.002 256.66156576740076);
  --secondary: oklch(0.266 0.010 256.7628637424184);
  --secondary-foreground: oklch(0.959 0.007 256.68054065590115);
  --muted: oklch(0.266 0.010 256.7628637424184);
  --muted-foreground: oklch(0.713 0.026 256.76422983608705);
  --accent: oklch(0.616 0.089 290.4192545872341);
  --accent-foreground: oklch(0.948 0.017 292.96547070198983);
  --destructive: oklch(0.580 0.237 28.43022926835137);
  --border: oklch(0.362 0.022 256.8045135680469);
  --input: oklch(0.362 0.022 256.8045135680469);
  --ring: oklch(0.383 0.098 257.3570125841265);
  --chart-1: oklch(0.383 0.098 257.3570125841265);
  --chart-2: oklch(0.682 0.139 257.04283441471637);
  --chart-3: oklch(0.769 0.103 256.8763976756369);
  --chart-4: oklch(0.435 0.123 257.61229856524153);
  --chart-5: oklch(0.349 0.073 257.0700180028426);
  --sidebar: oklch(0.308 0.037 256.85987298341536);
  --sidebar-foreground: oklch(0.961 0.002 256.66156576740076);
  --sidebar-primary: oklch(0.383 0.098 257.3570125841265);
  --sidebar-primary-foreground: oklch(0.961 0.002 256.66156576740076);
  --sidebar-accent: oklch(0.616 0.089 290.4192545872341);
  --sidebar-accent-foreground: oklch(0.948 0.017 292.96547070198983);
  --sidebar-border: oklch(0.362 0.022 256.8045135680469);
  --sidebar-ring: oklch(0.383 0.098 257.3570125841265);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* GuardMe-specific component styling */
body.partner-guardme {
  font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  background-color: #FFFFFF !important;
}

/* Global GuardMe header font override - catch all headers */
/* This ensures ALL h1-h6 elements use Lexend font when body has partner-guardme class */
body.partner-guardme h1 {
  font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: rgb(26, 29, 40);
}

body.partner-guardme h2,
body.partner-guardme h3,
body.partner-guardme h4,
body.partner-guardme h5,
body.partner-guardme h6 {
  font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  color: rgb(0, 0, 0);
}

/* GuardMe Header Typography - Apply Lexend font to Tailwind classes */
.partner-guardme .text-4xl,
.partner-guardme .text-3xl,
.partner-guardme .text-2xl,
.partner-guardme .text-xl,
.partner-guardme .text-lg {
  font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  color: rgb(0, 0, 0);
}

/* GuardMe header sizes - consistent with global design system */
/* Only override font sizes for specific cases where needed */
.partner-guardme h1 {
  font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: rgb(26, 29, 40);
}

/* GuardMe Hero Section Title - Override the large text classes with responsive sizes */
.partner-guardme .text-2xl {
  font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 500 !important;
  font-size: 1.5rem !important; /* 24px - mobile */
  line-height: 2rem !important; /* 32px */
  color: rgb(26, 29, 40) !important;
}

.partner-guardme .text-3xl {
  font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 500 !important;
  font-size: 1.875rem !important; /* 30px - small screens */
  line-height: 2.25rem !important; /* 36px */
  color: rgb(26, 29, 40) !important;
}

@media (min-width: 768px) {
  .partner-guardme .text-6xl,
  .partner-guardme .text-7xl,
  .partner-guardme .md\:text-7xl {
    font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 500 !important;
    font-size: 3rem !important; /* 48px - desktop */
    line-height: 3.5rem !important; /* 56px */
    color: rgb(26, 29, 40) !important;
  }
}

.partner-guardme h2 {
  font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important; /* 24px */
  line-height: 20px !important; /* 30px */
  color: rgb(0, 0, 0) !important;
}

.partner-guardme h3 {
  font-size: 13px; /* 20px - smaller than h2 */
  line-height: 16px; /* 28px */
}

.partner-guardme h4 {
  font-size: 12px; /* 18px */
  line-height: 16px; /* 24px */
}

.partner-guardme h5 {
  font-size: 11px; /* 16px - base size */
  line-height: 16px; /* 24px */
}

.partner-guardme h6 {
  font-size: 10px; /* 14px - smaller than base */
  line-height: 16px; /* 20px */
}

/* GuardMe Body Text Typography - consistent with global system */
.partner-guardme p,
.partner-guardme .text-base,
.partner-guardme .text-sm,
.partner-guardme .text-xs {
  font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
}

/* Use standard Tailwind sizes instead of custom overrides */
.partner-guardme .text-base {
  font-size: 1rem; /* 16px - standard base size */
  line-height: 1.5rem; /* 24px */
}

.partner-guardme .text-sm {
  font-size: 0.875rem; /* 14px - standard small size */
  line-height: 1.25rem; /* 20px */
}

.partner-guardme .text-xs {
  font-size: 0.75rem; /* 12px - standard extra small size */
  line-height: 1rem; /* 16px */
}

/* GuardMe Button Typography */
.partner-guardme button,
.partner-guardme .btn {
  font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
}

/* GuardMe Logo Styling */
.partner-guardme .guardme-header-logo {
  transition: opacity 0.2s ease;
}

.partner-guardme .guardme-header-logo:hover {
  opacity: 0.9;
}

.partner-guardme .guardme-footer-logo {
  transition: opacity 0.2s ease;
}

.partner-guardme .guardme-footer-logo:hover {
  opacity: 0.8;
}

/* Header styling for GuardMe */
.partner-guardme .header {
  background: linear-gradient(135deg, oklch(var(--primary)) 0%, oklch(var(--primary) / 0.9) 100%);
  border-bottom: 1px solid oklch(var(--border));
}

.partner-guardme .header .logo {
  filter: brightness(0) invert(1); /* Make logo white on dark header */
}

/* Button overrides for GuardMe - Only target button backgrounds and radius */
.partner-guardme button[data-slot="button"],
.partner-guardme .btn-primary,
.partner-guardme .button[data-variant="primary"] {
  border-radius: 0.19rem !important;
}

/* CTA buttons get #06f background */
.partner-guardme button[data-slot="button"].bg-primary,
.partner-guardme .btn-primary,
.partner-guardme .button[data-variant="primary"] {
  background-color: #06f !important;
  border-color: #06f !important;
}

.partner-guardme button[data-slot="button"].bg-primary:hover,
.partner-guardme .btn-primary:hover,
.partner-guardme .button[data-variant="primary"]:hover {
  background-color: #0056cc !important;
  border-color: #0056cc !important;
}

.partner-guardme .btn-secondary,
.partner-guardme .button[data-variant="secondary"] {
  border-radius: 0.19rem !important;
}

.partner-guardme .btn-outline,
.partner-guardme .button[data-variant="outline"] {
  border-radius: 0.19rem !important;
}

.partner-guardme .btn-outline:hover,
.partner-guardme .button[data-variant="outline"]:hover {
  border-radius: 0.19rem !important;
}

/* Card styling for GuardMe */
.partner-guardme .card {
  background-color: oklch(var(--card));
  color: oklch(var(--card-foreground));
  border: 1px solid oklch(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 2px 8px oklch(var(--primary) / 0.1);
}

.partner-guardme .card:hover {
  box-shadow: 0 8px 25px oklch(var(--primary) / 0.15);
}

/* Navigation styling */
.partner-guardme .nav-link {
  color: oklch(var(--muted-foreground));
  transition: color 0.2s ease;
}

.partner-guardme .nav-link:hover,
.partner-guardme .nav-link.active {
  color: oklch(var(--primary));
}

/* Form elements */
.partner-guardme .input,
.partner-guardme input[type="text"],
.partner-guardme input[type="email"],
.partner-guardme input[type="password"],
.partner-guardme textarea,
.partner-guardme select {
  border: 1px solid oklch(var(--input));
  border-radius: var(--radius);
  background-color: oklch(var(--card));
}

.partner-guardme .input:focus,
.partner-guardme input:focus,
.partner-guardme textarea:focus,
.partner-guardme select:focus {
  border-color: oklch(var(--ring));
  box-shadow: 0 0 0 2px oklch(var(--ring) / 0.2);
}

/* Status indicators using theme colors */
.partner-guardme .status-open {
  background-color: oklch(var(--chart-2));
  color: white;
}

.partner-guardme .status-busy {
  background-color: oklch(var(--chart-3));
  color: white;
}

.partner-guardme .status-closed {
  background-color: oklch(var(--muted-foreground));
  color: white;
}

/* Specialty badges */
.partner-guardme .specialty-badge {
  border-radius: calc(var(--radius) / 2);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .partner-guardme .mobile-section {
    padding: 1.5rem;
  }

  .partner-guardme .mobile-card {
    margin-bottom: 1rem;
  }
}

/* Footer styling */
.partner-guardme .footer {
  background-color: hsl(212 55% 23%);
  color: hsl(210 20% 90%);
  padding: 3rem 0 2rem;
}

.partner-guardme .footer a {
  color: hsl(205 100% 85%);
  text-decoration: none;
  transition: color 0.2s ease;
}

.partner-guardme .footer a:hover {
  color: white;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .partner-guardme .mobile-doctor-section {
    padding: 1.5rem;
  }

  .partner-guardme .provider-card {
    padding: 1rem;
  }
}

/* GuardMe text weight overrides - make text lighter and smaller */
.partner-guardme .text-lg {
  font-size: 0.875rem !important; /* 14px instead of 18px */
  line-height: 1.25rem !important; /* 20px */
  font-weight: 300 !important;
  color: rgb(107, 114, 128) !important; /* lighter gray-500 instead of gray-700 */
}

.partner-guardme .text-xl {
  font-size: 1rem !important; /* 16px instead of 20px */
  line-height: 1.5rem !important; /* 24px */
  font-weight: 300 !important;
  color: rgb(107, 114, 128) !important; /* lighter gray-500 instead of gray-700 */
}

.partner-guardme .text-gray-700 {
  font-weight: 300 !important;
  color: rgb(94, 100, 112) !important; /* lighter gray-500 instead of gray-700 */
}

/* Mobile Doctor Section Text Color Overrides */
.partner-guardme .mobile-doctor-section h2,
.partner-guardme .mobile-doctor-section .text-4xl,
.partner-guardme .mobile-doctor-section .text-5xl {
  color: white !important;
}

.partner-guardme .mobile-doctor-section .text-xl,
.partner-guardme .mobile-doctor-section .text-2xl {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Demo component styling for GuardMe */
.partner-guardme .partner-demo-card {
  background: linear-gradient(135deg, hsl(var(--secondary)) 0%, hsl(var(--accent)) 100%);
  border: 2px solid hsl(var(--primary) / 0.2);
  box-shadow: var(--shadow-lg);
  transition: all 0.3s ease;
}

.partner-guardme .partner-demo-card:hover {
  border-color: hsl(var(--primary) / 0.4);
  box-shadow: var(--shadow-xl);
  transform: translateY(-2px);
}

.partner-guardme .partner-demo-card h3 {
  color: hsl(var(--primary));
  font-weight: 600;
}



@media print {
  .partner-guardme .header,
  .partner-guardme .footer,
  .partner-guardme .mobile-doctor-section {
    background: white !important;
    color: black !important;
  }
}