/* ==========================================================================
   Komater Tools - 主样式表
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS 变量（自定义属性）
   -------------------------------------------------------------------------- */
:root {
  --bs-primary: #3897B3;      /* 主品牌色 - 蓝色 */
  --bs-primary-light: #4EC1C4; /* 主色调的浅色变体 */
  --bs-background: #F2F7F7;    /* 主背景色 */
  --bs-highlight: #F1C40F;     /* 强调色 - 黄色 */
  --bs-text-dark: #2C3E50;     /* 深色文字 */
}

/* --------------------------------------------------------------------------
   2. 基础样式
   -------------------------------------------------------------------------- */
body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--bs-background);
  color: var(--bs-text-dark);
  margin: 0;
  min-width: 320px; /* 防止在小屏幕上出现横向滚动条 */
}

/* 全宽区域通用类 */
/* 已迁移到utilities.css，无需保留 */

/* --------------------------------------------------------------------------
   3. 排版样式
   -------------------------------------------------------------------------- */
h1, h2 {
  font-weight: 600;
  color: var(--bs-text-dark);
}

.highlight {
  color: var(--bs-highlight);
}

/* BUTTON STYLES MOVED TO assets/css/components/product-card.css */

/* PRODUCT CARD STYLES MOVED TO assets/css/components/product-card.css */

/* --------------------------------------------------------------------------
   6. 轮播图样式
   -------------------------------------------------------------------------- */
/* 轮播容器 */
.carousel {
  width: 100%;
  height: 800px; /* Fixed height - Adjusted, was 700px */
  overflow: hidden;
  margin-bottom: 2.25rem;
}

.carousel-inner {
  height: 100%; /* Take full height of .carousel */
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* 轮播项 */
.carousel-item {
  height: 100%; /* Take full height of .carousel-inner */
  /* display: flex; align-items: center; justify-content: center; */ /* Temporarily remove flex for testing */
  background-color: lightcoral; /* DEBUG: See .carousel-item area */
  position: relative; 
}

/* 轮播图片 */
.carousel-item img {
  display: block; 
  width: 100%;
  height: 100%; /* Back to 100% without !important for now */
  object-fit: cover; /* Keep cover, remove !important if added */
  object-position: center; 
  background-color: lightseagreen; 
  position: relative; 
  z-index: 1; 
}

/* 轮播文字说明 */
.carousel-caption {
  background: rgba(0, 0, 0, 0.6);
  padding: 25px;
  border-radius: 10px;
  bottom: 25%;
  max-width: 80%;
  margin: 0 auto;
  left: 10%;
  right: 10%;
  z-index: 2;
}

/* Carousel Controls - Circular Background */
.carousel .carousel-control-prev,
.carousel .carousel-control-next {
  background-color: var(--bs-primary-light); /* #4EC1C4 */
  width: 48px; /* Size of the circle */
  height: 48px; /* Size of the circle */
  border-radius: 50%; /* Makes it circular */
  opacity: 0.85; /* Default opacity */
  top: 50%; /* Vertically center */
  transform: translateY(-50%);
  /* Override Bootstrap defaults */
  background-image: none; /* Remove default Bootstrap gradient */
  border: none; /* Remove default Bootstrap border */
  padding: 0; /* Reset padding */
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel .carousel-control-prev {
  left: 20px; /* Adjust horizontal position from the edge */
}

.carousel .carousel-control-next {
  right: 20px; /* Adjust horizontal position from the edge */
}

.carousel .carousel-control-prev:hover,
.carousel .carousel-control-next:hover {
  opacity: 1;
  background-color: var(--bs-primary) !important; /* Darker shade on hover */
}

/* Note: The arrow icons (.carousel-control-prev-icon, .carousel-control-next-icon)
   are typically white SVGs in Bootstrap. They should provide good contrast
   against the new background. If not, their styles might need further adjustment. */

/* --------------------------------------------------------------------------
   7. 页脚相关辅助类（如两列导航、底部条款等，供footer.css复用）
   -------------------------------------------------------------------------- */
/* 已迁移到footer.css，无需保留 */

/* --------------------------------------------------------------------------
   8. 响应式调整
   -------------------------------------------------------------------------- */
/* 768px以下：容器内边距缩小 */
@media (max-width: 768px) {
  .container {
    padding-left: 5px;
    padding-right: 5px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
}

/* 900px以下：两列导航变为纵向 */
@media (max-width: 900px) {
  .footer-links.two-columns {
    flex-direction: column;
    gap: 0;
    align-items: center;
    max-width: 250px;
  }
  .footer-links.two-columns > div {
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   9. 统一模块间距工具类
   -------------------------------------------------------------------------- */
/* 已迁移到utilities.css，无需保留 */

/* =========================
   Counters Section Styles
   ========================= */
.counters-section {
  padding: 4rem 0;
  background-color: #ffffff; /* Or a slightly different background */
}

.counter-item {
  padding: 20px;
  /* Optional: add a border or background to individual items */
  /* border: 1px solid #eee; */
  /* border-radius: 8px; */
}

.counter-icon {
  font-size: 3rem; /* Size of the icon */
  color: var(--bs-primary) !important; /* Use primary color for icons */
  margin-bottom: 1rem;
  display: block;
}

.counter-value {
  font-size: 2.8rem;
  font-weight: 700;
  color: #333;
  display: block;
  margin-bottom: 0.5rem;
}

.counter-title {
  font-size: 1.1rem;
  color: #555;
  font-weight: 500;
}

/* Responsive adjustments for counters if needed */
@media (max-width: 768px) {
  .counter-item {
    margin-bottom: 2rem; /* Add space between items when stacked */
  }
  .counter-value {
    font-size: 2.2rem;
  }
  .counter-icon {
    font-size: 2.5rem;
  }
  .counter-title {
    font-size: 1rem;
  }
}

/* =========================
   Our Services Section Styles
   ========================= */
.our-services-section {
  padding: 4rem 0;
  padding-top: 3.5rem; /* Adjusted for consistent spacing around counter */
  background-color: #ffffff; /* White background */
}

.our-services-section .section-title {
  margin-bottom: 4rem; /* Increased space below the main title */
  font-weight: 600;
  color: #333;
}

.service-item {
  margin-bottom: 3.5rem; /* Space between service items */
}

.service-item:last-child {
  margin-bottom: 0;
}

.service-item img {
  border-radius: 0 !important; /* Remove border-radius to make images rectangular */
  transition: transform 0.3s ease-in-out; /* Smooth transition for zoom effect */
}

.service-item img:hover {
  transform: scale(1.05); /* Slightly zoom in on hover */
}

/* Ensure any existing rounded class on images in this section is overridden */
.service-item .rounded {
  border-radius: 0 !important;
}

.service-item .shadow-sm {
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important; /* Keep shadow if needed, or remove if not */
}

.service-text-content {
  padding: 0 1.5rem; /* Padding for text content */
}

/* Adjust padding for text content when it's on the left of an image */
.row.align-items-center.service-item .col-md-6:first-child .service-text-content {
    padding-left: 0; 
    padding-right: 1.5rem;
}
.row.align-items-center.service-item .col-md-6:last-child .service-text-content {
    padding-right: 0;
    padding-left: 1.5rem;
}

/* Specific case for when text is on left (order-md-1) and image on right (order-md-2) */
.row.align-items-center.service-item .col-md-6.order-md-1 .service-text-content {
    padding-right: 0; /* Text on left, so no right padding towards image */
    padding-left: 1.5rem; /* Ensure left padding from container edge */
}
.row.align-items-center.service-item .col-md-6.order-md-2 + .col-md-6.order-md-1 .service-text-content {
    padding-left: 0; /* If text is second but ordered first, ensure no left padding to image */
    padding-right: 1.5rem;
}


.service-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--bs-text-dark);
  margin-bottom: 1rem;
}

.service-description {
  font-size: 1rem;
  color: #555;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.service-item .btn-outline-primary {
  border-color: var(--bs-primary);
  color: var(--bs-primary);
  padding: 0.6rem 1.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.service-item .btn-outline-primary:hover {
  background-color: var(--bs-primary);
  color: #fff;
}

/* =========================
   Fullwidth Counters Section Styles
   ========================= */
.fullwidth-counters-section {
  background-color: var(--bs-primary-light); /* Changed to secondary color */
  color: #ffffff;
  padding: 3rem 0;
  width: 100vw; /* Force full viewport width */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 3.5rem; /* Added to create consistent spacing above counters */
  box-sizing: border-box;
}

.fullwidth-counters-section .container-fluid {
  padding-left: 15px;
  padding-right: 15px;
  max-width: 1200px; /* Optional: constrain max-width of content within full-width bar */
  margin-left: auto;
  margin-right: auto;
}

.fullwidth-counter-item {
  padding: 1rem 0;
}

.counter-column {
  position: relative; /* For a pseudo-element separator */
}

/* Vertical separator line, not on the last item */
.counter-column:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%; /* Adjust height of the separator */
  background-color: rgba(255, 255, 255, 0.2);
}

.fullwidth-counters-section .counter-value {
  font-size: 3rem; /* Large numbers */
  font-weight: 700;
  display: block;
  margin-bottom: 0.25rem;
}

.fullwidth-counters-section .counter-label {
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0;
}

/* Responsive adjustments for fullwidth counters */
@media (max-width: 767px) {
  .fullwidth-counters-section {
    padding: 2rem 0;
  }
  .fullwidth-counter-item {
    margin-bottom: 1.5rem; /* Space between items when stacked */
  }
  .fullwidth-counters-section .counter-value {
    font-size: 2.5rem;
  }
  .fullwidth-counters-section .counter-label {
    font-size: 0.85rem;
  }
  .counter-column:not(:last-child)::after {
    display: none; /* Hide separators when stacked */
  }
   .counter-column:not(:last-child) .fullwidth-counter-item{
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Add bottom border when stacked */
    padding-bottom: 1.5rem;
  }
  .counter-column:last-child .fullwidth-counter-item {
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

@media (max-width: 575px) {
    /* For very small screens, ensure each counter takes full width if needed */
    .fullwidth-counters-section .col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .our-services-section .section-title {
    font-size: 1.8rem;
    margin-bottom: 2.5rem;
  }
  .service-item img {
    margin-bottom: 1.5rem; /* Add space below image when stacked */
  }
  .service-text-content,
  .row.align-items-center.service-item .col-md-6:first-child .service-text-content,
  .row.align-items-center.service-item .col-md-6:last-child .service-text-content,
  .row.align-items-center.service-item .col-md-6.order-md-1 .service-text-content,
  .row.align-items-center.service-item .col-md-6.order-md-2 + .col-md-6.order-md-1 .service-text-content {
    padding: 0 0.5rem; /* Adjust padding for stacked layout */
    text-align: center; /* Center text on small screens */
  }
  .service-title {
    font-size: 1.5rem;
  }
  .service-description {
    font-size: 0.95rem;
  }
}

/* Products Section */
.products-section {
  padding: 0;
  background-color: #f8f9fa; /* Light background for product section */
}

.products-section h1 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  text-align: center;
}