/* Utility CSS Classes - Extracted from Inline Styles */

/* ============================================
   CSS VARIABLES - DESIGN TOKENS
   ============================================ */
:root {
  /* Colors */
  --color-primary: #008053;
  --color-primary-dark: #006d45;
  --color-primary-light: #00a86b;
  --color-secondary: #667eea;
  --color-danger: #f44336;
  --color-success: #4CAF50;
  
  /* Text Colors */
  --text-dark: #333;
  --text-medium: #555;
  --text-light: #666;
  --text-white: #fff;
  
  /* Background Colors */
  --bg-white: #ffffff;
  --bg-light: #f8f9fa;
  --bg-lighter: #f5f5f5;
  --bg-warning: #fff3e0;
  
  /* Border Colors */
  --border-light: #e0e0e0;
  --border-medium: #ddd;
  --border-dark: #ccc;
  
  /* Spacing */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 15px;
  --spacing-lg: 20px;
  --spacing-xl: 30px;
  --spacing-xxl: 40px;
  
  /* Border Radius */
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-xxl: 15px;
  --radius-pill: 20px;
  
  /* Box Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.1);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-xl: 0 10px 30px rgba(0,0,0,0.15);
  --shadow-focus: 0 0 0 3px rgba(0,128,83,0.1);
  
  /* Transitions */
  --transition-fast: 0.2s;
  --transition-base: 0.3s;
  --transition-slow: 0.5s;
}

/* ============================================
   COMMON COMPONENTS
   ============================================ */

/* Card Component */
.card {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-md);
}

.card-sm {
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
}

.card-lg {
  padding: var(--spacing-xxl);
  border-radius: var(--radius-xxl);
}

/* Form Input Component */
.form-input {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: 15px;
  box-sizing: border-box;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

/* Display Utilities */
.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-flex { display: flex !important; }

/* Flexbox Utilities */
.align-items-center { align-items: center; }
.gap-8 { gap: 8px; }
.flex-shrink-0 { flex-shrink: 0; }

/* Spacing Utilities */
.mr-10 { margin-right: 10px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-40 { margin-bottom: 40px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-40 { margin-top: 40px; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Text Utilities */
.text-center { text-align: center; }
.text-underline { text-decoration: underline; }
.font-weight-500 { font-weight: 500; }
.font-weight-600 { font-weight: 600; }
.font-size-14 { font-size: 14px; }
.font-size-16 { font-size: 16px; }
.font-size-09rem { font-size: 0.9rem; }

/* Color Utilities */
.color-primary { color: var(--color-primary); }
.color-primary-light { color: var(--color-secondary); }
.color-white { color: var(--text-white); }
.color-gray-666 { color: var(--text-light); }
.color-gray-999 { color: #999; }
.color-gray-333 { color: var(--text-dark); }

/* SVG Color Utilities */
.svg-green { color: #10b981; }
.svg-blue { color: #6772e5; }
.svg-amber { color: #f59e0b; }
.svg-purple { color: #667eea; }
.svg-cyan { color: #0066cc; }

/* Background Utilities */
.bg-primary { background: var(--color-primary); }
.bg-danger { background: var(--color-danger); }

/* Button Utilities */
.btn-primary {
  background: var(--color-primary);
  color: var(--text-white);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
  text-decoration: none;
  display: inline-block;
}

.btn-primary:hover {
  background: var(--color-primary-dark);
}

.btn-danger {
  background: var(--color-danger);
  color: var(--text-white);
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--border-medium);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* Login/Nav Link Styles */
.nav-login-link {
  color: var(--color-primary) !important;
  font-weight: 600;
}

.nav-signup-link {
  background: var(--color-primary);
  color: var(--text-white);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  display: inline-block;
}

/* Certificate Section */
.certificate-card {
  background: linear-gradient(135deg, #f6f9fc 0%, #e9f3f0 100%);
  padding: var(--spacing-xl);
  border-radius: var(--radius-xl);
  border: 2px solid var(--color-primary);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* SVG Icon Utilities */
.svg-inline-icon {
  display: inline;
  vertical-align: text-bottom;
}

.svg-middle-icon {
  vertical-align: middle;
  margin-right: 8px;
}

/* Testimonial Avatar Gradients */
.avatar-gradient-1 {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.avatar-gradient-2 {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.avatar-gradient-3 {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.avatar-gradient-4 {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.avatar-gradient-5 {
  background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
}

.avatar-gradient-6 {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

/* Link Color Utilities */
.link-primary {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.link-primary:hover {
  text-decoration: underline;
}

.link-white {
  color: var(--text-white);
  text-decoration: underline;
}

.link-cyan {
  color: #0066cc;
  text-decoration: underline;
}

.link-amber {
  color: #f59e0b;
  text-decoration: underline;
}

/* Container Utilities */
.max-w-800 {
  max-width: 800px;
}

/* FAQ Section Styles */
.faq-cta-heading {
  margin-bottom: 16px;
  color: var(--text-dark);
}

.faq-cta-text {
  margin-bottom: 24px;
  color: var(--text-light);
  font-size: 16px;
}

.faq-disclaimer {
  margin-top: 16px;
  color: #999;
  font-size: 14px;
}

/* Section Description */
.section-description {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 40px;
  color: var(--text-light);
  font-size: 16px;
}

/* Blog Post Styles */
.blog-disclaimer {
  margin-top: 20px;
  font-size: 0.9rem;
}

.blog-cta {
  margin-top: 40px;
}