/* =====================================================
   annons-enhance.css
   Additiv, varsam UI/UX-uppdatering för annons-sidorna.
   Skriver INTE över layout/positionering från befintliga stilmallar
   (annons.css, cards.css, pagination.css, left-panel.css) – lägger
   bara till Dinprogrammerare-varumärkets färger (lila/rosa), mjuka
   hover-animationer och lite mer liv kring korten och modulerna.
   Läggs till EFTER de befintliga CSS-filerna i $pageStyles.
===================================================== */

:root {
  --dp-purple: #4a3f66;
  --dp-purple-dark: #2d2740;
  --dp-pink: #f28b93;
  --dp-pink-dark: #e2677a;
}

/* ---------- "Nya uppdrag idag"-pillen ---------- */
.ads-nya-uppdrag-pill {
  background: linear-gradient(135deg, var(--dp-purple) 0%, var(--dp-pink) 145%) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 10px 24px -10px rgba(74, 63, 102, 0.55);
}
.ads-nya-uppdrag-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(74, 63, 102, 0.65);
}

/* ---------- Populära uppdrag-korten ---------- */
.ads-popular-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  border: 1px solid transparent;
}
.ads-popular-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -14px rgba(74, 63, 102, 0.35);
  border-color: rgba(242, 139, 147, 0.4);
}
.ads-popular-title {
  position: relative;
  padding-left: 0.9rem;
}
.ads-popular-title::before {
  content: "";
  position: absolute;
  left: 0; top: 0.15em;
  width: 4px; height: 1em;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--dp-purple), var(--dp-pink));
}

/* ---------- Toolbar-pillar ---------- */
.ads-toolbar__pill {
  transition: background 0.15s ease, color 0.15s ease;
}

/* ---------- Annons-korten i huvudlistan (varsam animation vid render) ---------- */
.ads-grid > * {
  animation: dp-fade-in 0.4s ease both;
}
.ads-grid > *:nth-child(2) { animation-delay: 0.03s; }
.ads-grid > *:nth-child(3) { animation-delay: 0.06s; }
.ads-grid > *:nth-child(4) { animation-delay: 0.09s; }
.ads-grid > *:nth-child(5) { animation-delay: 0.12s; }
.ads-grid > *:nth-child(6) { animation-delay: 0.15s; }
@keyframes dp-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ads-grid > * { animation: none; }
}

/* ---------- Favoritknapp ---------- */
.btn-favorite {
  transition: transform 0.15s ease, color 0.15s ease;
}
.btn-favorite:hover .btn-favorite-icon {
  transform: scale(1.15);
}
.btn-favorite.is-saved .btn-favorite-icon {
  color: var(--dp-pink-dark);
}

/* ---------- Annons-detaljsidan: hero-bild, pris, badges ---------- */
.annons-price {
  color: var(--dp-purple);
}
.verified-badge {
  color: #16a34a;
}
.ad-badge {
  background: linear-gradient(135deg, var(--dp-purple), var(--dp-purple-dark)) !important;
}

/* ---------- Modul-korten runt annonsen: matchande utvecklare / projektinfo ---------- */
.profile-block,
.annons-project-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.annons-project-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -14px rgba(74, 63, 102, 0.35);
}
.annons-section-header {
  position: relative;
  padding-left: 0.9rem;
}
.annons-section-header::before {
  content: "";
  position: absolute;
  left: 0; top: 0.2em;
  width: 4px; height: 1.1em;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--dp-purple), var(--dp-pink));
}

/* ---------- CTA-knappar på annons-sidan ---------- */
.annons-offer-form__actions .btn-primary,
.annons-locked-actions .btn-cta {
  background: linear-gradient(135deg, var(--dp-pink) 0%, var(--dp-pink-dark) 100%) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.annons-offer-form__actions .btn-primary:hover,
.annons-locked-actions .btn-cta:hover {
  transform: translateY(-2px);
}