/* Utility Classes for MYSECUR.IT */

/* ===== MATERIAL ICONS BASE STYLING ===== */
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    transition: all 0.3s ease;
}

/* Colors - Professional Light Theme */
/* Background utilities */
.bg-custom-dark { background-color: var(--color-dark); }
.bg-custom-dark-2 { background-color: var(--color-dark-2); }
.bg-custom-dark-3 { background-color: var(--color-dark-3); }

/* Light theme backgrounds */
.bg-light { background-color: var(--color-background); }
.bg-light-soft { background-color: var(--color-gray-50); }
.bg-light-gray { background-color: var(--color-gray-100); }
.bg-light-muted { background-color: var(--color-gray-200); }

/* Primary professional colors */
.bg-custom-accent { background-color: var(--color-primary); }
.bg-custom-accent\/20 { background-color: var(--color-primary-20); }
.text-custom-accent { color: var(--color-primary); }
.border-custom-accent { border-color: var(--color-primary); }

/* Brand cyan colors - enhanced for light theme */
.bg-brand-cyan { background-color: var(--color-brand-cyan); }
.bg-brand-cyan\/10 { background-color: var(--color-brand-cyan-10); }
.bg-brand-cyan\/20 { background-color: var(--color-brand-cyan-20); }
.bg-brand-cyan-soft { background-color: var(--color-brand-cyan-soft); }
.text-brand-cyan { color: var(--color-brand-cyan); }
.border-brand-cyan { border-color: var(--color-brand-cyan); }

/* Light theme text colors */
.text-dark { color: var(--color-gray-900); }
.text-medium { color: var(--color-gray-600); }
.text-light { color: var(--color-gray-400); }

/* Hover states - optimized for light theme */
.hover\:bg-custom-accent-dark:hover { background-color: var(--color-primary-dark); }
.hover\:bg-brand-cyan:hover { background-color: var(--color-brand-cyan); }
.hover\:bg-brand-cyan-dark:hover { background-color: var(--color-brand-cyan-dark); }
.hover\:text-custom-accent:hover { color: var(--color-primary); }
.hover\:text-brand-cyan:hover { color: var(--color-brand-cyan); }
.hover\:text-white:hover { color: var(--color-white); }
.hover\:text-dark:hover { color: var(--color-gray-900); }

/* Common Transitions */
.transition-smooth { transition: var(--transition-smooth); }

/* Common Transforms */
.hover-scale:hover { transform: var(--transform-scale); }
.hover-lift:hover { transform: var(--transform-lift); }
.hover-lift-small:hover { transform: var(--transform-lift-small); }

/* Shadow Effects */
.shadow-custom-accent\/10 { box-shadow: var(--shadow-primary-10); }
.shadow-custom-accent\/25 { box-shadow: var(--shadow-primary-25); }
.shadow-card { box-shadow: var(--shadow-card); }



/* Enhanced Hover Effects */
.group:hover .group-hover\:animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Common Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes bounce-subtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Animation Classes */
.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

.animate-slide-in-left {
  animation: slideInLeft 0.6s ease-out;
}

.animate-bounce-subtle {
  animation: bounce-subtle 2s ease-in-out infinite;
}

/* Responsive Utilities */
.mobile-hidden {
  display: block;
}

@media (max-width: 767px) {
  .mobile-hidden {
    display: none;
  }
}

/* Smooth Scroll */
html {
  scroll-behavior: smooth;
}

/* Base Font */
body {
  font-family: var(--font-family);
}

/* Quiz Progress Gradient */
.bg-gradient-quiz {
  background: var(--gradient-quiz-progress);
}

/* ============================================ */
/* STANDARDIZED HOVER EFFECTS                  */
/* ============================================ */

/* Basic Hover Effects */
.hover-lift {
  transition: var(--transition-smooth);
}
.hover-lift:hover {
  transform: translateY(-8px);
}

.hover-lift-small {
  transition: var(--transition-smooth);
}
.hover-lift-small:hover {
  transform: translateY(-4px);
}

.hover-lift-medium {
  transition: var(--transition-smooth);
}
.hover-lift-medium:hover {
  transform: translateY(-10px);
}

.hover-lift-large {
  transition: var(--transition-smooth);
}
.hover-lift-large:hover {
  transform: translateY(-12px);
}

/* Scale Effects */
.hover-scale {
  transition: var(--transition-smooth);
}
.hover-scale:hover {
  transform: scale(1.05);
}

.hover-scale-small {
  transition: var(--transition-smooth);
}
.hover-scale-small:hover {
  transform: scale(1.02);
}

.hover-scale-large {
  transition: var(--transition-smooth);
}
.hover-scale-large:hover {
  transform: scale(1.1);
}

/* Combined Effects */
.hover-lift-scale {
  transition: var(--transition-smooth);
}
.hover-lift-scale:hover {
  transform: translateY(-8px) scale(1.02);
}

.hover-lift-scale-large {
  transition: var(--transition-smooth);
}
.hover-lift-scale-large:hover {
  transform: translateY(-12px) scale(1.02);
}

/* Shadow Effects */

/* ============================================ */
/* SVG ICON CONSISTENCY                         */
/* ============================================ */

/* Base icon alignment and stroke weight */
svg.icon { 
  vertical-align: -0.125em; 
  stroke-width: 1.9;
}

/* Contextual sizing to harmonize visuals */
.services-step-icon svg.icon { width: 40px; height: 40px; stroke-width: 2.1; }
.badge-text svg.icon { width: 16px; height: 16px; margin-right: 8px; }
.fact-description-cta-text svg.icon { width: 16px; height: 16px; margin-right: 6px; }
.highlight-icon svg.icon { width: 40px; height: 40px; }
.contact-method-icon svg.icon { width: 40px; height: 40px; }
.hover-glow-primary {
  transition: var(--transition-smooth);
}
.hover-glow-primary:hover {
  box-shadow: var(--shadow-primary-glow);
}

.hover-glow-success {
  transition: var(--transition-smooth);
}
.hover-glow-success:hover {
  box-shadow: var(--shadow-success-30);
}

.hover-glow-warning {
  transition: var(--transition-smooth);
}
.hover-glow-warning:hover {
  box-shadow: var(--shadow-warning-30);
}

/* Border Effects */
.hover-border-primary {
  transition: var(--transition-smooth);
}
.hover-border-primary:hover {
  border-color: var(--color-primary-50);
}

.hover-border-success {
  transition: var(--transition-smooth);
}
.hover-border-success:hover {
  border-color: var(--color-success-50);
}

.hover-border-warning {
  transition: var(--transition-smooth);
}
.hover-border-warning:hover {
  border-color: var(--color-warning-50);
}

/* Complex Combined Effects */
.hover-card-primary {
  transition: var(--transition-smooth);
}
.hover-card-primary:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-primary-glow);
  border-color: var(--color-primary-50);
}

.hover-card-success {
  transition: var(--transition-smooth);
}
.hover-card-success:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-success-30);
  border-color: var(--color-success-50);
}

.hover-card-warning {
  transition: var(--transition-smooth);
}
.hover-card-warning:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-warning-30);
  border-color: var(--color-warning-50);
}

/* Special Effects */
.hover-rotate-scale {
  transition: var(--transition-smooth);
}
.hover-rotate-scale:hover {
  transform: rotate(5deg) scale(1.1);
}

.hover-slide-right {
  transition: var(--transition-smooth);
}
.hover-slide-right:hover {
  transform: translateX(8px);
}

/* Complex Intro Card Effect */
.hover-intro-card {
  transition: var(--transition-smooth);
}
.hover-intro-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-primary-complex-glow);
  border-color: var(--color-primary-50);
}

/* Fact Card Effect with Subtle Rotation */
.hover-fact-card {
  transition: var(--transition-smooth);
}
.hover-fact-card:hover {
  transform: translateY(-12px) rotate(1deg);
  border-color: var(--color-primary-30);
  box-shadow: 0 20px 40px var(--color-primary-20);
}

/* Contact Method Effect */
.hover-contact-method {
  transition: var(--transition-smooth);
}
.hover-contact-method:hover {
  transform: translateY(-15px) scale(1.03);
  border-color: var(--color-primary-30);
  box-shadow: 0 25px 50px var(--color-primary-20);
}