/* ========================================
   DataOrigin Custom Styles
   ======================================== */

/* Typography - DM Sans and DM Mono fonts */
* {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

body, .navbar, .nav-link, .btn, p, div, span, h1, h2, h3, h4, h5, h6, 
.navbar-brand, .dropdown-menu, .form-control, .card, .modal, .alert {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Monospace font for code and technical content */
code, pre, .code, .monospace, kbd, samp, var {
  font-family: 'DM Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace !important;
}

/* Enhanced typography for better readability */
body {
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: -0.01em !important;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

.navbar-brand, .nav-link {
  font-weight: 500 !important;
}

.btn {
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

/* Color overrides */
.text-custom-red {
  color: #FF6B35 !important;
}

.text-secondary {
  color: #333333 !important; /* Darker than original for better contrast */
}

.btn-warning {
  background-color: #EB1600 !important;
  border-color: #EB1600 !important;
}

/* Navbar styling */
.navbar {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* ========================================
   DataOrigin Button Styles
   ======================================== */

/* Primary Button */
.btn-dataorigin-primary {
  background: linear-gradient(135deg, #FF6B35 0%, #FF8E53 100%) !important;
  border: none !important;
  color: white !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease-in-out !important;
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.25) !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  min-height: 48px !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn-dataorigin-primary:hover {
  background: linear-gradient(135deg, #E55A2B 0%, #E67A47 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(255, 107, 53, 0.35) !important;
  color: white !important;
  text-decoration: none !important;
}

.btn-dataorigin-primary:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.25) !important;
}

.btn-dataorigin-primary:focus {
  outline: 2px solid #FF6B35 !important;
  outline-offset: 2px !important;
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.25), 0 0 0 3px rgba(255, 107, 53, 0.1) !important;
}

/* Secondary Button */
.btn-dataorigin-secondary {
  background: linear-gradient(135deg, #1B365D 0%, #2A4A6B 100%) !important;
  border: none !important;
  color: white !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease-in-out !important;
  box-shadow: 0 2px 8px rgba(27, 54, 93, 0.25) !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  min-height: 48px !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn-dataorigin-secondary:hover {
  background: linear-gradient(135deg, #0F2A47 0%, #1E3A57 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(27, 54, 93, 0.35) !important;
  color: white !important;
  text-decoration: none !important;
}

.btn-dataorigin-secondary:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(27, 54, 93, 0.25) !important;
}

.btn-dataorigin-secondary:focus {
  outline: 2px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 2px 8px rgba(27, 54, 93, 0.25), 0 0 0 3px rgba(27, 54, 93, 0.1) !important;
}

/* Button Size Variants */
.btn-dataorigin-lg {
  font-size: 18px !important;
  padding: 16px 32px !important;
  min-height: 56px !important;
}

.btn-dataorigin-sm {
  font-size: 14px !important;
  padding: 8px 16px !important;
  min-height: 40px !important;
}

/* Ripple Effect for Buttons */
.btn-dataorigin-primary::before,
.btn-dataorigin-secondary::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.3) !important;
  transform: translate(-50%, -50%) !important;
  transition: width 0.3s ease, height 0.3s ease !important;
}

.btn-dataorigin-primary:active::before,
.btn-dataorigin-secondary:active::before {
  width: 300px !important;
  height: 300px !important;
}

/* ========================================
   Image Carousel Styles
   ======================================== */

/* Mobile-first approach with scroll-snap */
@media (max-width: 768px) {
  .image-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  /* Hide radio buttons on mobile */
  .image-carousel input[type="radio"] {
    display: none;
  }

  /* Images container - horizontal scroll with snap */
  .carousel-images {
    display: flex;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    gap: 0;
  }

  /* Hide scrollbar for WebKit browsers */
  .carousel-images::-webkit-scrollbar {
    display: none;
  }

  .carousel-image {
    width: 100%;
    min-width: 100%;
    height: auto;
    object-fit: cover;
    flex-shrink: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Navigation dots for mobile */
  .carousel-navigation {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    pointer-events: none; /* Disable interaction on mobile */
  }

  .nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ddd;
    transition: all 0.3s ease;
    border: 1px solid transparent;
  }

  /* Active dot will be managed by JavaScript intersection observer if needed */
  .nav-dot.active {
    background-color: #FF6B35;
    border-color: #FF6B35;
    box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2);
  }
}

/* Desktop styles (768px and up) */
@media (min-width: 769px) {
  .image-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  /* Show radio buttons on desktop */
  .image-carousel input[type="radio"] {
    display: none;
  }

  /* Images container for desktop */
  .carousel-images {
    display: flex;
    width: 400%; /* 4 images = 400% */
    transition: transform 0.5s ease-in-out;
  }

  .carousel-image {
    width: 25%; /* Each image takes 25% of container */
    height: auto;
    object-fit: cover;
    flex-shrink: 0;
  }

  /* Navigation dots for desktop */
  .carousel-navigation {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
  }

  .nav-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ddd;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
  }

  .nav-dot:hover {
    background-color: #FF6B35;
    transform: scale(1.1);
  }

  /* Active states for each slide on desktop */
  #slide1:checked ~ .carousel-images {
    transform: translateX(0%);
  }

  #slide2:checked ~ .carousel-images {
    transform: translateX(-25%);
  }

  #slide3:checked ~ .carousel-images {
    transform: translateX(-50%);
  }

  #slide4:checked ~ .carousel-images {
    transform: translateX(-75%);
  }

  /* Active dot styling for desktop */
  #slide1:checked ~ .carousel-navigation label[for="slide1"],
  #slide2:checked ~ .carousel-navigation label[for="slide2"],
  #slide3:checked ~ .carousel-navigation label[for="slide3"],
  #slide4:checked ~ .carousel-navigation label[for="slide4"] {
    background-color: #FF6B35;
    border-color: #FF6B35;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);
  }
}