/* ============================================================
   SteelPro - 钢材外贸独立站 自定义样式
   ============================================================ */

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
}

::selection {
  background-color: #d4943a;
  color: #111720;
}

/* ---------- Navigation ---------- */
@media (max-width: 1023px) {
  #mobile-menu.show {
    display: block !important;
  }
}

/* Navbar shadow on scroll */
#navbar {
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05);
}

/* ---------- Floating WhatsApp ---------- */
#whatsapp-float {
  animation: floatBounce 2s infinite;
}

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

/* ---------- Form Focus ---------- */
input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(212, 148, 58, 0.3);
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239aa8b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

select option {
  background: #1a212e;
  color: #fff;
}

/* ---------- Product Cards Hover ---------- */
.group:hover img {
  transform: scale(1.1);
}

.group img {
  transition: transform 0.5s ease;
}

/* ---------- Hero background image ---------- */
.mix-blend-overlay {
  mix-blend-mode: overlay;
}

/* ---------- Nav Link Active ---------- */
.nav-link.active {
  color: #d4943a !important;
}

/* ---------- Language Switcher ---------- */
.lang-btn.bg-accent {
  background-color: #d4943a;
  color: #111720 !important;
}
.lang-btn.bg-accent:hover {
  background-color: #a6722e;
}

/* ---------- Smooth Navbar Background Transition ---------- */
#navbar.scrolled {
  background: rgba(17, 23, 32, 0.98) !important;
}

/* ---------- Form Success/Error States ---------- */
.form-success {
  color: #4ade80 !important;
  display: block !important;
}
.form-error {
  color: #f87171 !important;
  display: block !important;
}

/* ---------- Responsive adjustments ---------- */
@media (max-width: 640px) {
  .text-4xl {
    font-size: 1.875rem;
  }
  .text-5xl {
    font-size: 2.25rem;
  }
  .text-6xl {
    font-size: 2.5rem;
  }
}

/* ---------- Product Detail Modal ---------- */
#product-modal.show {
  display: block;
}

#product-modal {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

#modal-body {
  animation: slideUp 0.3s ease;
}

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

/* Sub-product cards in modal */
.sub-product-card {
  cursor: default;
}
.sub-product-card:hover {
  border-color: #d4943a;
}

/* Product tabs */
.prod-tab {
  cursor: pointer;
}
.prod-tab.active {
  color: #d4943a;
  border-bottom: 1px solid #d4943a;
}