/* assets/style.css - Custom styles for SourceCodeMarket */
:root{
  --brand:#2563eb; /* stronger blue for contrast */
  --brand-2:#22c55e; /* green accent */
  --ink:#111827; /* near-black text */
  --muted:#4b5563; /* dark gray */
  --surface:#ffffff;
  --ring: rgba(37,99,235,.28);
}
body {
    background: radial-gradient(1200px 800px at 10% -10%, rgba(51,153,204,.06), transparent 60%),
                radial-gradient(1000px 800px at 110% 10%, rgba(109,213,237,.06), transparent 60%), #f7f9fb;
    color: var(--ink);
    font-family: 'Segoe UI', Arial, sans-serif;
}
.navbar-brand {
    font-weight: bold;
    color: var(--brand) !important;
}
.card {
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #fff;
}
.btn-primary, .btn-success {
    border-radius: 20px;
    padding-left: 24px;
    padding-right: 24px;
    background-image: none; background-color: var(--brand);
    border-color: var(--brand); color:#fff;
    box-shadow: 0 8px 18px rgba(34,197,94,.25);
    transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-success{ background-color: var(--brand-2); border-color: var(--brand-2) }
.btn-outline-primary{ border-color: var(--brand); color: var(--brand); }
.table th, .table td {
    vertical-align: middle;
}
footer {
    background: #0f172a;
    color:#cbd5e1;
    border-top: 1px solid #eaeaea;
}
.alert {
    border-radius: 8px;
}
@media (max-width: 768px) {
    .card-title {
        font-size: 1.1rem;
    }
    .container {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* Modern enhancements */
.hero-section {
    position: relative;
    background: linear-gradient(120deg, #0f172a, #1e293b); /* slate dark */
    color:#f8fafc; /* near-white text */
    padding-top: 4rem; padding-bottom: 4rem;
    animation: none; /* reduce distractions */
    box-shadow: inset 0 -8px 30px rgba(255,255,255,.25);
}
.hero-section .lead{ color:#cbd5e1 }
.hero-section .btn-primary{
  background-color: var(--brand);
  background-image: linear-gradient(135deg, var(--brand), #1d4ed8);
  border: none; color:#fff;
}
.hero-section .btn-primary:hover{ filter: brightness(1.05) }

/* Buttons ensure contrast */
.btn-primary, .btn-success{
  background-image: none; background-color: var(--brand);
  border-color: var(--brand); color:#fff;
}
.btn-success{ background-color: var(--brand-2); border-color: var(--brand-2) }
.btn-outline-primary{ border-color: var(--brand); color: var(--brand) }

/* Reduce glossy sheen intensity */
.card{
  background: #fff; border: 1px solid #e5e7eb;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.product-card::after{ display:none }

/* Typography and spacing */
.card-title{ font-weight:600; color: var(--ink) }
.text-muted{ color:#6b7280 !important }

/* Focus visibility */
:focus-visible{ outline: 3px solid var(--ring); outline-offset: 2px }

/* Hover effects subtle */
.product-card{ transition: transform .15s ease, box-shadow .15s ease }
.product-card:hover{ transform: translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.08) }

/* Footer contrast */
footer{ background:#0f172a; color:#cbd5e1 }
footer a{ color:#e2e8f0 }

/* Navbar contrast */
.navbar{ background: rgba(255,255,255,.92) !important; border-bottom:1px solid #e5e7eb !important }
.navbar-brand{ color: var(--brand) !important }

/* Responsive tweaks */
@media (max-width: 992px){
  .hero-section .display-5{ font-size: 2rem }
}
@media (max-width: 768px){
  .card-img-top{ height: 150px !important }
  .navbar .container{ padding-left: 12px; padding-right: 12px }
}
@media (max-width: 480px){
  .badge{ font-size:.8rem }
  .btn{ padding-left:18px; padding-right:18px }
}

/* Motion accessibility */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}

/* Price chip overlay */
.price-chip{
  position:absolute; top:10px; left:10px; z-index:2;
  background: rgba(15,23,42,.9); color:#fff; 
  padding:6px 10px; border-radius: 999px; 
  font-weight:600; font-size:.9rem; letter-spacing:.2px;
  box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
}
.price-chip.is-free{ background: linear-gradient(135deg, var(--brand-2), #16a34a); }

/* Professional price tag under title */
.price-tag{ 
  display:inline-flex; align-items:center; gap:4px;
  font-weight:700; color:#0f172a; font-size:1.05rem;
  background:#f1f5f9; border:1px solid #e2e8f0; 
  padding:6px 10px; border-radius: 10px; 
}
.price-tag .currency{ color: var(--brand); font-weight:800 }
.price-tag.free{ background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.35); color:#065f46; }

/* Stretched link focus ring visible */
.stretched-link:focus-visible{ outline: 3px solid var(--ring); outline-offset: 3px }

/* Skeleton Loading Animation - Production Ready */
.skeleton {
  background: linear-gradient(90deg, #f8fafc 25%, #e2e8f0 50%, #f8fafc 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
  border-radius: 0.375rem;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-card {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.skeleton-image {
  width: 100%;
  height: 160px;
  background: #f1f5f9;
  border-radius: 0;
}

.skeleton-text {
  height: 1rem;
  margin: 0.5rem 0;
  border-radius: 0.375rem;
  background: #f1f5f9;
}

.skeleton-text.title {
  height: 1.375rem;
  width: 85%;
  margin-bottom: 0.75rem;
}

.skeleton-text.description {
  height: 0.875rem;
  width: 100%;
  margin-bottom: 0.375rem;
}

.skeleton-text.description:nth-child(3) {
  width: 90%;
}

.skeleton-text.description:last-child {
  width: 65%;
}

.skeleton-button {
  height: 2.375rem;
  width: 110px;
  border-radius: 1.25rem;
  margin-top: 1rem;
  background: #e2e8f0;
}

.skeleton-price {
  height: 1.125rem;
  width: 70px;
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
  background: #f1f5f9;
}

/* Production optimizations */
.skeleton-container {
  display: block;
}

.content-loaded .skeleton-container {
  display: none !important;
}

.products-container {
  min-height: 400px;
  position: relative;
}

.products-grid {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.products-grid.show {
  opacity: 1;
}

/* Responsive skeleton adjustments */
@media (max-width: 992px) {
  .skeleton-image {
    height: 150px;
  }
  
  .skeleton-text.title {
    height: 1.25rem;
    width: 80%;
  }
}

@media (max-width: 768px) {
  .skeleton-image {
    height: 140px;
  }
  
  .skeleton-button {
    width: 100px;
    height: 2.25rem;
  }
  
  .skeleton-text.description {
    height: 0.8rem;
  }
}

@media (max-width: 576px) {
  .skeleton-image {
    height: 130px;
  }
  
  .skeleton-text.title {
    height: 1.125rem;
    width: 75%;
  }
  
  .skeleton-price {
    width: 60px;
    height: 1rem;
  }
  
  .skeleton-button {
    width: 90px;
    height: 2rem;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
    background: #f1f5f9;
  }
  
  .products-grid {
    transition: none;
  }
}