/* ===================================
   COMPREHENSIVE BUTTON SYSTEM
   Based on iOS HIG, Material Design, and IBM Carbon
   Research-backed for maximum conversion and accessibility
   =================================== */

/* -----------------------------------
   CSS CUSTOM PROPERTIES (Design Tokens)
   ----------------------------------- */
:root {
  /* Button Sizes - Touch target optimized */
  --btn-height-small: 40px;
  --btn-height-medium: 48px;
  --btn-height-large: 56px;

  /* Button Padding */
  --btn-padding-small: 8px 20px;
  --btn-padding-medium: 12px 24px;
  --btn-padding-large: 16px 32px;

  /* Border Radius */
  --btn-radius: 8px;
  --btn-radius-pill: 50px;

  /* Transitions - Research-backed timing */
  --btn-transition-hover: 200ms ease-out;
  --btn-transition-active: 100ms ease-in;

  /* Colors - Neon Cyberpunk Theme */
  --btn-primary-bg: linear-gradient(135deg, #00ffff, #00cccc);
  --btn-primary-bg-hover: linear-gradient(135deg, #00e6e6, #00b3b3);
  --btn-primary-text: #0a0a0a;

  --btn-secondary-border: #00ffff;
  --btn-secondary-text: #00ffff;
  --btn-secondary-bg-hover: rgba(0, 255, 255, 0.1);

  --btn-tertiary-text: #00ffff;
  --btn-tertiary-bg-hover: rgba(0, 255, 255, 0.05);

  --btn-ghost-text: #b0b0b0;
  --btn-ghost-hover: #ffffff;

  --btn-disabled-bg: rgba(255, 255, 255, 0.1);
  --btn-disabled-text: rgba(255, 255, 255, 0.4);

  /* Shadows */
  --btn-shadow: 0 4px 15px rgba(0, 255, 255, 0.2);
  --btn-shadow-hover: 0 6px 20px rgba(0, 255, 255, 0.4);
  --btn-shadow-active: 0 2px 8px rgba(0, 255, 255, 0.3);
}

/* -----------------------------------
   BASE BUTTON RESET
   Eliminates browser defaults
   ----------------------------------- */
.btn {
  /* Reset defaults */
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;

  /* Base styles */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.025em;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  /* Smooth transitions */
  transition: all var(--btn-transition-hover);
}

/* Remove default focus outline (will add custom below) */
.btn:focus {
  outline: none;
}

/* -----------------------------------
   PRIMARY BUTTONS
   Highest emphasis - filled background
   Use for main CTAs (max 1 per section)
   ----------------------------------- */
.btn-primary {
  /* Flexbox for proper vertical centering */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  /* Visual styles */
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-radius: var(--btn-radius);
  font-size: 1rem;
  padding: var(--btn-padding-medium);
  min-height: var(--btn-height-medium);
  box-shadow: var(--btn-shadow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: all var(--btn-transition-hover);
  line-height: 1;
  vertical-align: middle;
}

.btn-primary:hover {
  background: var(--btn-primary-bg-hover);
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow-hover);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--btn-shadow-active);
  transition: all var(--btn-transition-active);
}

/* Focus state for keyboard navigation - WCAG 2.4.13 compliant */
.btn-primary:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  box-shadow: var(--btn-shadow-hover), 0 0 0 4px rgba(0, 255, 255, 0.3);
}

/* Size variants */
.btn-primary.btn-small {
  padding: var(--btn-padding-small);
  min-height: var(--btn-height-small);
  font-size: 0.875rem;
}

.btn-primary.btn-large {
  padding: var(--btn-padding-large);
  min-height: var(--btn-height-large);
  font-size: 1.125rem;
}

/* Full width variant */
.btn-primary.btn-full {
  width: 100%;
}

/* Pill shape variant */
.btn-primary.btn-pill {
  border-radius: var(--btn-radius-pill);
}

/* -----------------------------------
   SECONDARY BUTTONS
   Medium emphasis - outlined style
   Use for alternative actions
   ----------------------------------- */
.btn-secondary {
  /* Flexbox for proper vertical centering */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  /* Visual styles */
  background: transparent;
  color: var(--btn-secondary-text);
  border: 2px solid var(--btn-secondary-border);
  border-radius: var(--btn-radius);
  font-size: 1rem;
  padding: var(--btn-padding-medium);
  min-height: var(--btn-height-medium);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: all var(--btn-transition-hover);
  line-height: 1;
  vertical-align: middle;
}

.btn-secondary:hover {
  background: var(--btn-secondary-bg-hover);
  border-color: #00e6e6;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 255, 255, 0.2);
}

.btn-secondary:active {
  transform: translateY(0);
  transition: all var(--btn-transition-active);
}

.btn-secondary:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 255, 255, 0.3);
}

/* Size variants */
.btn-secondary.btn-small {
  padding: var(--btn-padding-small);
  min-height: var(--btn-height-small);
  font-size: 0.875rem;
}

.btn-secondary.btn-large {
  padding: var(--btn-padding-large);
  min-height: var(--btn-height-large);
  font-size: 1.125rem;
}

.btn-secondary.btn-full {
  width: 100%;
}

.btn-secondary.btn-pill {
  border-radius: var(--btn-radius-pill);
}

/* -----------------------------------
   TERTIARY BUTTONS
   Low emphasis - minimal styling
   Use for less important actions
   ----------------------------------- */
.btn-tertiary {
  background: transparent;
  color: var(--btn-tertiary-text);
  border: none;
  border-radius: var(--btn-radius);
  font-size: 1rem;
  padding: 10px 20px;
  min-height: 40px;
  font-weight: 600;
  position: relative;
}

.btn-tertiary::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 20px;
  right: 20px;
  height: 1px;
  background: var(--btn-tertiary-text);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 200ms ease-out;
}

.btn-tertiary:hover {
  background: var(--btn-tertiary-bg-hover);
}

.btn-tertiary:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.btn-tertiary:active {
  transform: scale(0.98);
  transition: all var(--btn-transition-active);
}

.btn-tertiary:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* With arrow icon */
.btn-tertiary svg {
  width: 16px;
  height: 16px;
  transition: transform 200ms ease-out;
}

.btn-tertiary:hover svg {
  transform: translateX(4px);
}

/* -----------------------------------
   GHOST BUTTONS
   Lowest emphasis - text only
   Use for cancel, skip, back actions
   ----------------------------------- */
.btn-ghost {
  background: transparent;
  color: var(--btn-ghost-text);
  border: none;
  font-size: 1rem;
  padding: 10px 16px;
  min-height: 40px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.btn-ghost:hover {
  color: var(--btn-ghost-hover);
  background: rgba(255, 255, 255, 0.05);
}

.btn-ghost:active {
  transform: scale(0.98);
  transition: all var(--btn-transition-active);
}

.btn-ghost:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* -----------------------------------
   BUTTON STATES
   Disabled, Loading, Success
   ----------------------------------- */

/* Disabled state - uses aria-disabled for better accessibility */
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--btn-disabled-bg);
  color: var(--btn-disabled-text);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  border-color: var(--btn-disabled-bg);
  opacity: 0.5;
  pointer-events: none;
}

/* Loading state */
.btn.btn-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn.btn-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: btn-spinner 0.6s linear infinite;
}

@keyframes btn-spinner {
  to { transform: rotate(360deg); }
}

/* Success state (optional - for form submissions) */
.btn.btn-success {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
}

/* -----------------------------------
   BUTTON GROUPS
   Multiple buttons side by side
   ----------------------------------- */
.btn-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.btn-group.btn-group-center {
  justify-content: center;
}

.btn-group.btn-group-right {
  justify-content: flex-end;
}

/* Stacked button group (mobile-friendly) */
.btn-group.btn-group-stack {
  flex-direction: column;
  align-items: stretch;
}

.btn-group.btn-group-stack .btn {
  width: 100%;
}

/* -----------------------------------
   ICON BUTTONS
   For buttons with icons
   ----------------------------------- */
.btn-icon {
  padding: 0;
  width: var(--btn-height-medium);
  height: var(--btn-height-medium);
  border-radius: 50%;
}

.btn-icon.btn-small {
  width: var(--btn-height-small);
  height: var(--btn-height-small);
}

.btn-icon.btn-large {
  width: var(--btn-height-large);
  height: var(--btn-height-large);
}

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

/* Button with icon on left */
.btn svg:first-child {
  margin-right: 4px;
  margin-left: -4px;
}

/* Button with icon on right */
.btn svg:last-child {
  margin-left: 4px;
  margin-right: -4px;
}

/* -----------------------------------
   FIXED BOTTOM CTA
   Mobile-optimized sticky button
   ----------------------------------- */
.btn-fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  border-radius: 0;
  z-index: 1000;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
  /* Safe area for iOS notch */
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* -----------------------------------
   RESPONSIVE BEHAVIOR
   Touch-optimized for mobile
   ----------------------------------- */

/* Mobile (< 600px) - Full width primary CTAs */
@media (max-width: 599px) {
  .btn-primary:not(.btn-icon) {
    width: 100%;
  }

  .btn-group:not(.btn-group-inline) {
    flex-direction: column;
    width: 100%;
  }

  .btn-group:not(.btn-group-inline) .btn {
    width: 100%;
  }
}

/* Tablet (600px - 1024px) - Slightly smaller buttons */
@media (min-width: 600px) and (max-width: 1024px) {
  .btn-primary,
  .btn-secondary {
    min-height: 44px;
    padding: 10px 20px;
    font-size: 0.9375rem;
  }
}

/* Desktop (> 1024px) - Comfortable sizing */
@media (min-width: 1025px) {
  .btn-primary,
  .btn-secondary {
    min-height: 44px;
    padding: 11px 24px;
  }

  .btn-primary.btn-large,
  .btn-secondary.btn-large {
    min-height: 52px;
  }
}

/* -----------------------------------
   ACCESSIBILITY ENHANCEMENTS
   Reduced motion support
   ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  button,
  .btn {
    transition: none;
  }

  .btn::before,
  .btn::after {
    transition: none;
    animation: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .btn-primary {
    border: 2px solid #ffffff;
  }

  .btn-secondary {
    border-width: 3px;
  }
}

/* -----------------------------------
   UTILITY CLASSES
   ----------------------------------- */

/* No uppercase */
.btn-no-uppercase {
  text-transform: none;
}

/* Block display */
.btn-block {
  display: flex;
  width: 100%;
}

/* Compact spacing */
.btn-compact {
  padding: 8px 16px;
  min-height: 36px;
  font-size: 0.875rem;
}

/* -----------------------------------
   CONTEXT-SPECIFIC BUTTONS
   For specific use cases
   ----------------------------------- */

/* Navigation CTA button (in header) */
.btn-nav {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  padding: 10px 24px;
  border-radius: var(--btn-radius);
  font-size: 0.9375rem;
  font-weight: 600;
  min-height: 40px;
}

.btn-nav:hover {
  background: var(--btn-primary-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 255, 255, 0.3);
}

/* Form submit button */
.btn-submit {
  width: 100%;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  padding: var(--btn-padding-medium);
  min-height: var(--btn-height-medium);
  border-radius: var(--btn-radius);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Service card link button */
.btn-service-link {
  background: transparent;
  border: 2px solid var(--btn-secondary-border);
  color: var(--btn-secondary-text);
  padding: 10px 20px;
  min-height: 44px;
  border-radius: var(--btn-radius);
  font-size: 0.875rem;
  font-weight: 600;
}

.btn-service-link:hover {
  background: var(--btn-secondary-bg-hover);
  transform: translateY(-2px);
}

/* Portfolio/project view button */
.btn-project {
  background: rgba(0, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 255, 255, 0.3);
  color: #00ffff;
  padding: 12px 24px;
  border-radius: var(--btn-radius);
  font-weight: 600;
  font-size: 0.9375rem;
}

.btn-project:hover {
  background: rgba(0, 255, 255, 0.2);
  border-color: #00ffff;
  box-shadow: 0 4px 15px rgba(0, 255, 255, 0.3);
}

/* -----------------------------------
   ANIMATION CLASSES
   Optional smooth entrance
   ----------------------------------- */
.btn-fade-in {
  animation: btnFadeIn 0.4s ease-out;
}

@keyframes btnFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -----------------------------------
   LEGACY BUTTON CLASS MAPPING
   Backwards compatibility with existing code
   ----------------------------------- */

/* Map old hero button to new system */
.hero-submit-button {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  width: 100%;
  padding: var(--btn-padding-medium);
  min-height: var(--btn-height-medium);
  border-radius: var(--btn-radius);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  cursor: pointer;
  transition: all var(--btn-transition-hover);
  box-shadow: var(--btn-shadow);
  font-size: 1rem;
  font-family: 'Exo', sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero-submit-button:hover {
  background: var(--btn-primary-bg-hover);
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow-hover);
}

.hero-submit-button:active {
  transform: translateY(0);
  box-shadow: var(--btn-shadow-active);
}

.hero-submit-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  box-shadow: var(--btn-shadow-hover), 0 0 0 4px rgba(0, 255, 255, 0.3);
}

/* Map old service link to new system */
.service-link {
  background: transparent;
  border: 2px solid var(--btn-secondary-border);
  color: var(--btn-secondary-text);
  padding: 10px 20px;
  min-height: 44px;
  border-radius: var(--btn-radius);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--btn-transition-hover);
}

.service-link:hover {
  background: var(--btn-secondary-bg-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 255, 255, 0.2);
}

.service-link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Navbar contact button - Primary CTA in header */
.navbar .submit-button a {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  padding: 10px 24px !important;
  border-radius: var(--btn-radius) !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  min-height: 40px !important;
  border: none !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--btn-transition-hover);
  box-shadow: var(--btn-shadow) !important;
  position: relative;
  overflow: visible !important; /* Show button, hide pseudo */
  clip-path: none !important; /* Remove angled shape */
  letter-spacing: 0.05em !important;
}

/* Remove old blue ::before pseudo-element */
.navbar .submit-button a::before {
  display: none !important;
}

/* Remove corner decorations */
.navbar .submit-button .button-corners,
.navbar .submit-button .button-corners span {
  display: none !important;
}

/* Remove button glow effect */
.navbar .submit-button .button-glow {
  display: none !important;
}

.navbar .submit-button a:hover {
  background: var(--btn-primary-bg-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--btn-shadow-hover) !important;
  color: var(--btn-primary-text) !important;
}

.navbar .submit-button a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Write a review button - Standout CTA */
.write-review-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  padding: 16px 32px;
  border-radius: var(--btn-radius);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 700;
  min-height: var(--btn-height-medium);
  transition: all var(--btn-transition-hover);
  box-shadow: var(--btn-shadow);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.write-review-btn:hover {
  background: var(--btn-primary-bg-hover);
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow-hover);
}

.write-review-btn:active {
  transform: translateY(0);
}

.write-review-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.write-review-btn .btn-icon {
  width: 20px;
  height: 20px;
}

/* Responsive sizing */
@media (max-width: 768px) {
  .write-review-btn {
    padding: 14px 28px;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .write-review-btn {
    padding: 12px 24px;
    font-size: 0.95rem;
  }
}

/* Pricing card buttons - Secondary emphasis */
.pricing-cta-button {
  width: 100%;
  padding: 16px 32px;
  background: transparent;
  border: 2px solid var(--btn-secondary-border);
  border-radius: var(--btn-radius-pill);
  color: var(--btn-secondary-text);
  font-size: 1.1rem;
  font-weight: 600;
  min-height: var(--btn-height-medium);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all var(--btn-transition-hover);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Exo', sans-serif;
}

.pricing-cta-button:hover {
  background: var(--btn-secondary-bg-hover);
  border-color: #00e6e6;
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow);
}

.pricing-cta-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Featured pricing card - Primary CTA */
.pricing-cta-button.pricing-cta-featured {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: none;
  box-shadow: var(--btn-shadow);
}

.pricing-cta-button.pricing-cta-featured:hover {
  background: var(--btn-primary-bg-hover);
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow-hover);
}

.pricing-cta-link {
  text-decoration: none;
  display: inline-block;
}

.pricing-button-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.pricing-cta-button:hover .pricing-button-icon {
  transform: translateX(4px);
}

/* Quote submit button - Primary CTA */
.quote-submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-size: 1.125rem;
  font-weight: 700;
  padding: 18px 40px;
  min-height: var(--btn-height-large);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--btn-transition-hover);
  box-shadow: var(--btn-shadow);
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: 'Exo', sans-serif;
}

.quote-submit-button:hover {
  background: var(--btn-primary-bg-hover);
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow-hover);
}

.quote-submit-button:active {
  transform: translateY(0);
}

.quote-submit-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  box-shadow: var(--btn-shadow-hover), 0 0 0 4px rgba(0, 255, 255, 0.3);
}

.quote-button-icon {
  width: 20px;
  height: 20px;
}

/* Footer contact form submit button - Secondary emphasis */
.footer-contact-form .submit-button {
  font-family: 'Exo', sans-serif;
  font-weight: 600;
  background: transparent;
  color: var(--btn-secondary-text);
  font-size: 0.875rem;
  padding: 10px 24px;
  min-height: 44px;
  border: 2px solid var(--btn-secondary-border);
  border-radius: var(--btn-radius);
  cursor: pointer;
  transition: all var(--btn-transition-hover);
  box-shadow: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-contact-form .submit-button:hover {
  background: var(--btn-secondary-bg-hover);
  border-color: #00ffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 255, 255, 0.3);
}

.footer-contact-form .submit-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}