/* ===== PROJECT DETAILS STYLES (Colorlib UI Unified) ===== */

/* Top bar inside #colorlib-main */
.pd-top-navbar {
  background: #fff;
  border-bottom: 1px solid #eef0f4;
  padding: 14px 30px;
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 99;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
body.dark .pd-top-navbar {
  background: #141822;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.pd-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  font-family: "Quicksand", Arial, sans-serif;
  color: #2c98f0 !important;
  text-decoration: none !important;
  transition: transform 0.2s, color 0.2s;
}
.pd-back-link:hover {
  transform: translateX(-3px);
  color: #1a85dd !important;
}
body.dark .pd-back-link {
  color: #60a5fa !important;
}

/* Filter Bar */
.pd-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 35px;
  padding: 12px 16px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e8ecf2;
  position: sticky;
  top: 60px;
  z-index: 90;
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
body.dark .pd-filter-bar {
  background: #1e2430;
  border-color: rgba(255, 255, 255, 0.08);
}
.pd-filter-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  font-family: "Quicksand", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #555;
  background: #f1f5f9;
  border: 1px solid transparent;
  text-decoration: none !important;
  transition: all 0.2s;
}
.pd-filter-pill:hover,
.pd-filter-pill.active {
  background: #2c98f0;
  color: #fff !important;
}
body.dark .pd-filter-pill {
  background: #151b26;
  color: #94a3b8;
  border-color: rgba(255, 255, 255, 0.05);
}
body.dark .pd-filter-pill:hover,
body.dark .pd-filter-pill.active {
  background: #2c98f0;
  color: #fff !important;
}

/* Project Cards */
.pd-project-block {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.06);
  border: 1px solid #e8ecf2;
  margin-bottom: 45px;
  overflow: hidden;
  scroll-margin-top: 130px;
  transition: box-shadow 0.25s, transform 0.25s;
}
.pd-project-block:hover {
  box-shadow: 0 8px 35px rgba(44, 152, 240, 0.12);
}
body.dark .pd-project-block {
  background: #1e2430;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.4);
}

.pd-project-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 26px 26px 0 26px;
  flex-wrap: wrap;
}
.pd-project-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2c98f0 0%, #1a85dd 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-size: 20px;
}
.pd-project-icon.color-2 { background: linear-gradient(135deg, #ec5453 0%, #c0392b 100%); }
.pd-project-icon.color-3 { background: linear-gradient(135deg, #f9bf3f 0%, #e6ac2b 100%); }
.pd-project-icon.color-4 { background: linear-gradient(135deg, #a84cb8 0%, #8e3e9e 100%); }
.pd-project-icon.color-5 { background: linear-gradient(135deg, #2fa499 0%, #1e8880 100%); }
.pd-project-icon.color-6 { background: linear-gradient(135deg, #4054b2 0%, #2d3d9a 100%); }

.pd-project-title-area { flex: 1; min-width: 0; }
.pd-project-category {
  font-family: "Quicksand", Arial, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: #2c98f0;
  font-weight: 700;
  margin-bottom: 5px;
  display: block;
}
.pd-project-category.color-2-text { color: #ec5453; }
.pd-project-category.color-3-text { color: #d4a017; }
.pd-project-category.color-4-text { color: #a84cb8; }
.pd-project-category.color-5-text { color: #2fa499; }
.pd-project-category.color-6-text { color: #4054b2; }

.pd-project-name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: #000;
  margin: 0 0 8px 0;
  line-height: 1.35;
}
body.dark .pd-project-name { color: #f1f5f9; }

.pd-project-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pd-project-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 20px;
  font-family: "Quicksand", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
  letter-spacing: 0.4px;
  transition: all 0.2s;
}
.pd-project-link.live { background: #2c98f0; color: #fff !important; border: 1px solid #2c98f0; }
.pd-project-link.live:hover { background: #1a85dd; }
.pd-project-link.color-2-btn { background: #ec5453; border-color: #ec5453; color: #fff !important; }
.pd-project-link.color-2-btn:hover { background: #c0392b; }
.pd-project-link.color-3-btn { background: #f9bf3f; border-color: #f9bf3f; color: #000 !important; }
.pd-project-link.color-3-btn:hover { background: #e6ac2b; }
.pd-project-link.color-4-btn { background: #a84cb8; border-color: #a84cb8; color: #fff !important; }
.pd-project-link.color-4-btn:hover { background: #8e3e9e; }
.pd-project-link.color-5-btn { background: #2fa499; border-color: #2fa499; color: #fff !important; }
.pd-project-link.color-5-btn:hover { background: #1e8880; }
.pd-project-link.color-6-btn { background: #4054b2; border-color: #4054b2; color: #fff !important; }
.pd-project-link.color-6-btn:hover { background: #2d3d9a; }
.pd-project-link.secondary { background: transparent; color: #333 !important; border: 1px solid #ddd; }
.pd-project-link.secondary:hover { background: #000; color: #fff !important; border-color: #000; }
body.dark .pd-project-link.secondary { color: #cbd5e1 !important; border-color: rgba(255,255,255,0.2); }
body.dark .pd-project-link.secondary:hover { background: #fff; color: #000 !important; }

.pd-project-image {
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  display: block;
  margin-top: 20px;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
}
body.dark .pd-project-image {
  border-color: rgba(255,255,255,0.06);
}

/* Body */
.pd-project-body { padding: 24px 26px 26px 26px; }
.pd-section-label {
  font-family: "Quicksand", Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: #999;
  margin-bottom: 8px;
  display: block;
}
body.dark .pd-section-label { color: #64748b; }

.pd-project-overview {
  font-family: "Quicksand", Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.8;
  color: rgba(0,0,0,0.72);
  margin-bottom: 22px;
}
body.dark .pd-project-overview { color: #94a3b8; }

.pd-role-highlight {
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
  border-left: 4px solid #2c98f0;
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin-bottom: 22px;
}
.pd-role-highlight.color-2-highlight { background: linear-gradient(135deg, #fff5f5 0%, #fdeaea 100%); border-left-color: #ec5453; }
.pd-role-highlight.color-3-highlight { background: linear-gradient(135deg, #fefcf0 0%, #fef8e8 100%); border-left-color: #f9bf3f; }
.pd-role-highlight.color-4-highlight { background: linear-gradient(135deg, #faf5fb 0%, #f5eaf7 100%); border-left-color: #a84cb8; }
.pd-role-highlight.color-5-highlight { background: linear-gradient(135deg, #f0faf9 0%, #e6f5f4 100%); border-left-color: #2fa499; }
.pd-role-highlight.color-6-highlight { background: linear-gradient(135deg, #f0f2fb 0%, #eaedfa 100%); border-left-color: #4054b2; }

body.dark .pd-role-highlight { background: rgba(44, 152, 240, 0.12); border-left-color: #2c98f0; }
body.dark .pd-role-highlight.color-2-highlight { background: rgba(236, 84, 83, 0.12); border-left-color: #ec5453; }
body.dark .pd-role-highlight.color-3-highlight { background: rgba(249, 191, 63, 0.12); border-left-color: #f9bf3f; }
body.dark .pd-role-highlight.color-4-highlight { background: rgba(168, 76, 184, 0.12); border-left-color: #a84cb8; }
body.dark .pd-role-highlight.color-5-highlight { background: rgba(47, 164, 153, 0.12); border-left-color: #2fa499; }
body.dark .pd-role-highlight.color-6-highlight { background: rgba(64, 84, 178, 0.12); border-left-color: #4054b2; }

.pd-role-highlight p {
  font-family: "Quicksand", Arial, sans-serif;
  font-size: 13.5px;
  line-height: 1.75;
  color: rgba(0,0,0,0.72);
  margin: 0;
}
body.dark .pd-role-highlight p { color: #cbd5e1; }

.pd-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 22px;
}
.pd-info-box {
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #edf2f7;
  padding: 18px 20px;
}
body.dark .pd-info-box {
  background: #151b26;
  border-color: rgba(255, 255, 255, 0.05);
}
.pd-info-box h4 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  color: #000;
  margin-bottom: 12px;
}
body.dark .pd-info-box h4 { color: #f1f5f9; }

.pd-info-box ul { margin: 0; padding: 0; list-style: none; }
.pd-info-box ul li {
  font-family: "Quicksand", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(0,0,0,0.68);
  padding-left: 18px;
  position: relative;
  margin-bottom: 5px;
}
body.dark .pd-info-box ul li { color: #94a3b8; }
.pd-info-box ul li::before {
  content: '\2192';
  position: absolute;
  left: 0;
  color: #2c98f0;
  font-size: 11px;
  font-weight: 700;
}

/* Tech badges */
.pd-tech-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.pd-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 20px;
  font-family: "Quicksand", Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  background: #e8f4fd;
  color: #2c98f0;
  border: 1px solid rgba(44,152,240,0.2);
}
.pd-badge.color-2 { background: #fdeaea; color: #ec5453; border-color: rgba(236,84,83,0.2); }
.pd-badge.color-3 { background: #fef8e8; color: #c89010; border-color: rgba(249,191,63,0.25); }
.pd-badge.color-4 { background: #f5eaf7; color: #a84cb8; border-color: rgba(168,76,184,0.2); }
.pd-badge.color-5 { background: #e6f5f4; color: #2fa499; border-color: rgba(47,164,153,0.2); }
.pd-badge.color-6 { background: #eaedfa; color: #4054b2; border-color: rgba(64,84,178,0.2); }

body.dark .pd-badge {
  background: rgba(44, 152, 240, 0.15);
  color: #60a5fa;
  border-color: rgba(44, 152, 240, 0.3);
}

.pd-divider { height: 1px; background: #eee; margin: 20px 0; }
body.dark .pd-divider { background: rgba(255,255,255,0.08); }

/* Responsive adjustments */
@media (max-width: 768px) {
  .pd-top-navbar { padding: 12px 18px; }
  .pd-project-header { padding: 18px 18px 0 18px; }
  .pd-project-body { padding: 18px 18px 20px 18px; }
  .pd-project-name { font-size: 18px; }
  .pd-two-col { grid-template-columns: 1fr; gap: 14px; }
  .pd-filter-bar { top: 50px; }
}
@media (max-width: 480px) {
  .pd-project-icon { width: 42px; height: 42px; font-size: 16px; }
  .pd-project-name { font-size: 16px; }
}