@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai+Looped:wght@400;700&display=swap');
body { 
  font-family: 'IBM Plex Sans Thai Looped', sans-serif; 
  font-size: 0.97rem;
  background-color: #fff;
  color: #000;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Main content positioning to avoid navbar overlap */
main, .main-content {
  padding-top: 6rem !important;
  margin-top: 0 !important;
}

@media (min-width: 768px) {
  main, .main-content {
    padding-top: 5rem !important;
  }
}

/* Ensure container and wrapper elements also have proper spacing */
.container, .flex-1, .main-flex {
  padding-top: inherit !important;
}

/* Fix for search page specific layout */
.flex-1.relative.bg-blur {
  padding-top: 6rem !important;
}

@media (min-width: 768px) {
  .flex-1.relative.bg-blur {
    padding-top: 5rem !important;
  }
}
h1, h2, .lux-heading { 
  font-family: 'IBM Plex Sans Thai Looped', sans-serif; 
  letter-spacing: 0.04em; 
  font-weight: 700;
  color: #000;
}
.bg-blur {
  background-image: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,1)), url('assets/bgcar.jpg');
  background-size: cover;
  background-position: center;
}
.glass, .phone-card, .plate-card {
  background: rgba(255,255,255,1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  border-radius: 0;
  border: 1px solid #000;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.gold { 
  color: #000; 
  text-shadow: none;
}
.gold-border { 
  border: 1px solid #000; 
  box-shadow: none;
  border-radius: 0;
}
.lux-shadow { 
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.review-badge { 
  background: #fff; 
  color: #000; 
  border-radius: 0; 
  padding: 0.5em 1em; 
  font-size: 0.95em; 
  font-weight: normal; 
  box-shadow: none;
  letter-spacing: 0.05em;
  border: 1px solid #000;
}
.trust-badge { 
  background: #fff; 
  color: #000; 
  border-radius: 0; 
  padding: 0.5em 1em; 
  font-size: 0.95em; 
  font-weight: normal; 
  border: 1px solid #000; 
  display: inline-block; 
  margin: 0.2em 0;
  letter-spacing: 0.05em;
}
.nav-link {
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #000;
  transition: all 0.3s ease;
}
.nav-link:hover {
  color: #ff0000;
}
.btn-primary, .btn-secondary {
  background: #000;
  color: #fff;
  border: 1px solid #000;
  padding: 0.8em 2em;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 0.3s ease;
  border-radius: 0;
}
.btn-primary:hover, .btn-secondary:hover {
  background: #fff;
  color: #ff0000;
  border: 1px solid #ff0000;
}
/* เพิ่ม style สำหรับ input และ select */
input, select, textarea {
  border-radius: 0 !important;
  border: 1px solid #000 !important;
}
/* เพิ่ม style สำหรับ card และ container อื่นๆ */
.card, .container, .box {
  border-radius: 0 !important;
  border: 1px solid #000 !important;
}
.plate-category {
  color: #d90429;
  font-weight: bold;
}
/* เพิ่ม style สำหรับ hover effect ของลิงก์ทั้งหมด */
a:hover {
  color: #ff0000 !important;
}
/* ปรับ hover effect สำหรับปุ่มที่มี gradient */
.bg-gradient-to-r:hover {
  background: #ff0000 !important;
  color: #fff !important;
}

/* Animation Keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

/* ส่วนแสดงผลป้ายทะเบียนและเบอร์โทร */
.plate-card, .phone-card {
  animation: scaleIn 0.5s ease-out;
  transition: all 0.3s ease;
}

.plate-card:hover, .phone-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.plate-image, .phone-image {
  transition: transform 0.3s ease;
}

.plate-card:hover .plate-image,
.phone-card:hover .phone-image {
  transform: scale(1.05);
}

/* ราคาและปุ่มกดซื้อ */
.price-tag {
  animation: slideInRight 0.5s ease-out;
}

.buy-button {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.buy-button::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: -100%;
  background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.3), rgba(255,255,255,0.1));
  transition: left 0.5s ease;
}

.buy-button:hover::after {
  left: 100%;
}

/* หมวดหมู่และตัวกรอง */
.category-tag {
  animation: fadeInUp 0.3s ease-out;
  transition: all 0.2s ease;
}

.category-tag:hover {
  transform: translateY(-2px);
}

/* Loading Animation */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Responsive Animations */
@media (max-width: 768px) {
  .plate-card, .phone-card {
    animation-duration: 0.3s;
  }
  
  .category-tag {
    animation-duration: 0.2s;
  }
}

/* Gold Theme */
.gold {
  background: linear-gradient(45deg, #B8860B, #FFD700, #DAA520);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 3s infinite linear;
  background-size: 200% 100%;
}

/* Glass Effect */
.glass-effect {
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: all 0.3s ease;
}

.glass-effect:hover {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
}