/* ===========================================
   IKE Services Utility Classes
   Helper classes for rapid development
   =========================================== */

/* ===========================================
   TEXT UTILITIES
   =========================================== */

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

.font-thin { font-weight: var(--font-weight-thin); }
.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: var(--font-weight-extrabold); }
.font-black { font-weight: var(--font-weight-black); }

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }
.text-5xl { font-size: var(--font-size-5xl); }
.text-6xl { font-size: var(--font-size-6xl); }

.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }
.text-info { color: var(--color-info); }

.leading-none { line-height: 1; }
.leading-tight { line-height: var(--line-height-tight); }
.leading-snug { line-height: var(--line-height-snug); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose { line-height: var(--line-height-loose); }

/* ===========================================
   BACKGROUND UTILITIES
   =========================================== */

.bg-primary { background-color: var(--color-bg-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-tertiary { background-color: var(--color-bg-tertiary); }
.bg-muted { background-color: var(--color-bg-muted); }
.bg-accent { background-color: var(--color-bg-accent); }
.bg-transparent { background-color: transparent; }

.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-secondary { background: var(--gradient-secondary); }
.bg-gradient-accent { background: var(--gradient-accent); }
.bg-gradient-greek { background: var(--gradient-greek); }
.bg-gradient-subtle { background: var(--gradient-subtle); }

/* ===========================================
   BORDER UTILITIES
   =========================================== */

.border { border: 1px solid var(--color-border-light); }
.border-0 { border: 0; }
.border-2 { border: 2px solid var(--color-border-light); }
.border-4 { border: 4px solid var(--color-border-light); }
.border-8 { border: 8px solid var(--color-border-light); }

.border-light { border-color: var(--color-border-light); }
.border-medium { border-color: var(--color-border-medium); }
.border-dark { border-color: var(--color-border-dark); }

.border-t { border-top: 1px solid var(--color-border-light); }
.border-b { border-bottom: 1px solid var(--color-border-light); }
.border-l { border-left: 1px solid var(--color-border-light); }
.border-r { border-right: 1px solid var(--color-border-light); }

.rounded-none { border-radius: var(--border-radius-none); }
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded { border-radius: var(--border-radius-md); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-xl { border-radius: var(--border-radius-xl); }
.rounded-2xl { border-radius: var(--border-radius-2xl); }
.rounded-3xl { border-radius: var(--border-radius-3xl); }
.rounded-full { border-radius: var(--border-radius-full); }

/* ===========================================
   SHADOW UTILITIES
   =========================================== */

.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }
.shadow-inner { box-shadow: var(--shadow-inner); }
.shadow-none { box-shadow: none; }

/* ===========================================
   POSITION UTILITIES
   =========================================== */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-auto { z-index: auto; }

/* ===========================================
   DISPLAY UTILITIES
   =========================================== */

.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }

/* ===========================================
   OVERFLOW UTILITIES
   =========================================== */

.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }

.overflow-x-auto { overflow-x: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-x-visible { overflow-x: visible; }
.overflow-x-scroll { overflow-x: scroll; }

.overflow-y-auto { overflow-y: auto; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-y-visible { overflow-y: visible; }
.overflow-y-scroll { overflow-y: scroll; }

/* ===========================================
   WIDTH & HEIGHT UTILITIES
   =========================================== */

.w-0 { width: 0; }
.w-1 { width: 0.25rem; }
.w-2 { width: 0.5rem; }
.w-3 { width: 0.75rem; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-8 { width: 2rem; }
.w-10 { width: 2.5rem; }
.w-12 { width: 3rem; }
.w-16 { width: 4rem; }
.w-20 { width: 5rem; }
.w-24 { width: 6rem; }
.w-32 { width: 8rem; }
.w-40 { width: 10rem; }
.w-48 { width: 12rem; }
.w-56 { width: 14rem; }
.w-64 { width: 16rem; }
.w-full { width: 100%; }
.w-screen { width: 100vw; }
.w-auto { width: auto; }

.h-0 { height: 0; }
.h-1 { height: 0.25rem; }
.h-2 { height: 0.5rem; }
.h-3 { height: 0.75rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-8 { height: 2rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-16 { height: 4rem; }
.h-20 { height: 5rem; }
.h-24 { height: 6rem; }
.h-32 { height: 8rem; }
.h-40 { height: 10rem; }
.h-48 { height: 12rem; }
.h-56 { height: 14rem; }
.h-64 { height: 16rem; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-auto { height: auto; }

/* ===========================================
   MAX-WIDTH UTILITIES
   =========================================== */

.max-w-xs { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }
.max-w-full { max-width: 100%; }
.max-w-none { max-width: none; }

/* ===========================================
   OBJECT FIT UTILITIES
   =========================================== */

.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.object-fill { object-fit: fill; }
.object-none { object-fit: none; }
.object-scale-down { object-fit: scale-down; }

/* ===========================================
   TRANSITION UTILITIES
   =========================================== */

.transition-none { transition: none; }
.transition-all { transition: all var(--transition-fast); }
.transition-colors { transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast); }
.transition-opacity { transition: opacity var(--transition-fast); }
.transition-shadow { transition: box-shadow var(--transition-fast); }
.transition-transform { transition: transform var(--transition-fast); }

/* ===========================================
   ANIMATION UTILITIES
   =========================================== */

.animate-none { animation: none; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-bounce { animation: bounce 1s infinite; }

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/* ===========================================
   FOCUS UTILITIES
   =========================================== */

.focus:outline-none:focus {
  outline: none;
}

.focus:outline:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ===========================================
   PRINT UTILITIES
   =========================================== */

.print:hidden { display: none !important; }
.print:block { display: block !important; }
.print:inline { display: inline !important; }
.print:inline-block { display: inline-block !important; }

/* ===========================================
   SCREEN READER UTILITIES
   =========================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: var(--spacing-2) var(--spacing-4);
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border: 2px solid var(--color-accent);
  border-radius: var(--border-radius-md);
}

/* ===========================================
   INTERACTION UTILITIES
   =========================================== */

.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-move { cursor: move; }
.cursor-not-allowed { cursor: not-allowed; }

.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }
.select-auto { user-select: auto; }
.pointer-events-none { pointer-events: none; }

/* ===========================================
   ICON SYSTEM - DIGITAL PREMIUM
   =========================================== */

/* Base icon wrapper with digital styling */
.digital-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 12px;
  background: linear-gradient(135deg,
              rgba(99, 102, 241, 0.15) 0%,
              rgba(139, 92, 246, 0.08) 100%);
  border-radius: 12px;
  border: 1px solid rgba(99, 102, 241, 0.3);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.digital-icon:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-violet);
}

/* Icon glow animation */
.digital-icon::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  animation: icon-shine 3s infinite;
}

@keyframes icon-shine {
  0%, 100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* SVG icon styling */
.digital-icon svg,
.feature-icon svg,
.why-icon svg,
.benefit-icon svg,
.offer-icon svg {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  stroke-width: 1.5px;
  color: var(--color-accent);
  transition: all 0.3s ease;
}

.digital-icon:hover svg {
  color: var(--color-digital-blue);
  transform: scale(1.1);
}

/* Icon size variants */
.digital-icon-sm {
  width: 36px;
  height: 36px;
  padding: 8px;
}

.digital-icon-sm svg {
  width: 20px;
  height: 20px;
}

.digital-icon-lg {
  width: 64px;
  height: 64px;
  padding: 16px;
}

.digital-icon-lg svg {
  width: 32px;
  height: 32px;
}

/* Icon color variants */
.digital-icon-blue {
  background: linear-gradient(135deg,
              rgba(14, 165, 233, 0.15) 0%,
              rgba(14, 165, 233, 0.08) 100%);
  border-color: rgba(14, 165, 233, 0.3);
}

.digital-icon-blue svg {
  color: var(--color-digital-blue);
}

.digital-icon-violet {
  background: linear-gradient(135deg,
              rgba(139, 92, 246, 0.15) 0%,
              rgba(139, 92, 246, 0.08) 100%);
  border-color: rgba(139, 92, 246, 0.3);
}

.digital-icon-violet svg {
  color: var(--color-accent);
}

.digital-icon-success {
  background: linear-gradient(135deg,
              rgba(16, 185, 129, 0.15) 0%,
              rgba(16, 185, 129, 0.08) 100%);
  border-color: rgba(16, 185, 129, 0.3);
}

.digital-icon-success svg {
  color: var(--color-success);
}

/* ===========================================
   GLASSMORPHISM EFFECTS
   =========================================== */

/* Glass card - modern frosted glass effect */
.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  border-radius: var(--border-radius-xl);
  transition: all 0.3s ease;
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
}

/* Glass badge - small frosted badge */
.glass-badge {
  background: rgba(99, 102, 241, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(99, 102, 241, 0.2);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  transition: all 0.3s ease;
}

/* Premium card with digital top border */
.premium-digital-card {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(99, 102, 241, 0.1);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animated gradient border on hover */
.premium-digital-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-digital);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.premium-digital-card:hover::before {
  opacity: 1;
}

/* Subtle pattern overlay */
.premium-digital-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: var(--pattern-grid);
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

.premium-digital-card > * {
  position: relative;
  z-index: 1;
}

.premium-digital-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow-violet);
}

/* ===========================================
   FLOATING ANIMATIONS
   =========================================== */

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
  }
  50% {
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.4);
  }
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}
.pointer-events-auto { pointer-events: auto; }

/* ===========================================
   GRADIENT TEXT
   =========================================== */

.text-gradient {
  background: var(--gradient-digital);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.text-gradient-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.text-gradient-accent {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}