/* Dharmavaram Silk Sarees — Premium Silk Sarees Marketplace */

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #faf6f0;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #faf6f0; }
::-webkit-scrollbar-thumb { background: #d6c4a0; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #c9a14a; }

/* Display fonts */
.font-display { font-family: 'Playfair Display', serif; letter-spacing: -0.01em; }
.font-serif { font-family: 'Cormorant Garamond', serif; }

/* Selection */
::selection { background: #7f1d1d; color: #faf6f0; }

/* Line clamp */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Smooth animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.animate-fade-up { animation: fadeInUp 0.6s ease-out backwards; }
.animate-float { animation: float 3s ease-in-out infinite; }

/* Hide scrollbar utility */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Range input */
input[type="range"] {
  -webkit-appearance: none;
  background: transparent;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: #f6cfc0;
  border-radius: 2px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: #7f1d1d;
  border: 3px solid #faf6f0;
  border-radius: 50%;
  margin-top: -7px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(127,29,29,0.3);
}

/* Premium card hover */
.group:hover .group-hover-rotate { transform: rotate(0deg); }

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, #fbeae3 25%, #f6cfc0 50%, #fbeae3 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Focus styles */
*:focus-visible {
  outline: 2px solid #7f1d1d;
  outline-offset: 2px;
}

/* Premium gradient text */
.text-gradient-gold {
  background: linear-gradient(135deg, #c9a14a 0%, #e8c879 50%, #967220 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Page transition */
main { animation: fadeInUp 0.4s ease-out; }

/* Tab content underline */
.tab-active {
  border-bottom: 2px solid #7f1d1d;
  color: #7f1d1d;
}

/* Detail summary chevron */
details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: '+'; float: right; transition: transform 0.2s; }
details[open] summary::after { transform: rotate(45deg); }

/* Premium button hover */
button:not(:disabled), a { transition: all 0.2s ease; }

/* Quick view modal entrance */
#quick-view-modal:not(.hidden) > div:nth-child(2) > div {
  animation: fadeInUp 0.3s ease-out;
}

/* Disabled state */
button:disabled, input:disabled { cursor: not-allowed; opacity: 0.6; }

/* Table hover */
table tbody tr:hover { background: rgba(217, 119, 6, 0.03); }