/* ============================================
   NPFS Partner Compatibility Form & Report Styles
   ============================================ */

/* Form Styles */
.npfs-form * { box-sizing: border-box; }
.npfs-form { --npfs-gap: 14px; color: #fff !important; }
.npfs-field { margin-bottom: var(--npfs-gap) !important; }
.npfs-label { display: block; margin-bottom: 6px; font-weight: 600; color: #fff; }
.npfs-required { color: #ff3b30; margin-right: 6px; }
.npfs-input,
.npfs-select { 
  width: 100%; 
  height: 46px; 
  padding: 10px 12px; 
  border: 1px solid #525252; 
  background: rgba(39,39,39,.48); 
  color: #fff; 
  border-radius: 0; 
  min-width: 0; /* allow grid children to shrink properly */
}
.npfs-suf {
  justify-self: start;
  padding-left: 6px;
  white-space: nowrap;
}
.npfs-input:focus,
.npfs-select:focus { outline: none; border-color: #525252; }
.npfs-select option { color: #000; }

.npfs-grid { 
  display: grid; 
  grid-template-columns: 1fr 120px 1fr 120px 1fr 120px; 
  gap: 10px; 
  align-items: center; 
}
.npfs-birth { 
  grid-template-columns: 1fr 60px 1fr 80px 1fr 60px 1fr 60px; 
}

.npfs-inline { 
  display: inline-flex; 
  align-items: center; 
  gap: 10px; 
  white-space: nowrap; 
}
.npfs-pill { 
  width: 5px; 
  height: 18px; 
  background: #195C36; 
  border-radius: 999px; 
  display: inline-block; 
}
.npfs-price { color: #ff3b30; }
.npfs-actions { margin-top: 18px; }
.npfs-btn { 
  padding: 14px 20px; 
  border: 0; 
  border-radius: 0; 
  cursor: pointer; 
  background: #195C36; 
  color: #fff; 
  width: 100%; 
}
.npfs-msg { 
  margin-top: 10px; 
  color: #ff6a6a; 
  font-size: 13px; 
  min-height: 18px; 
}

/* Custom checkbox/radio */
.npfs-inline input[type=checkbox],
.npfs-inline input[type=radio] { 
  position: absolute; 
  opacity: 0; 
  width: 0; 
  height: 0; 
  pointer-events: none; 
}
.npfs-inline .npfs-box { 
  width: 18.2px; 
  height: 18.2px; 
  border: 1px solid #525252; 
  background: transparent; 
  display: inline-block; 
  position: relative; 
  flex: 0 0 18.2px; 
  border-radius: 0; 
}
.npfs-form .npfs-inline input[type=checkbox]:checked + .npfs-box,
.npfs-form .npfs-inline input[type=radio]:checked + .npfs-box { 
  background: #195C36; 
  border-color: #195C36; 
}
.npfs-form .npfs-inline input[type=checkbox]:checked + .npfs-box::after,
.npfs-form .npfs-inline input[type=radio]:checked + .npfs-box::after { 
  content: ''; 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  width: 10px; 
  height: 6px; 
  border-left: 2px solid #fff; 
  border-bottom: 2px solid #fff; 
  transform: translate(-50%,-60%) rotate(-45deg); 
}

/* Country dropdown */
.npfs-country { position: relative; }
.npfs-dropdown { 
  position: absolute; 
  left: 0; 
  right: 0; 
  top: 42px; 
  background: #0f0f0f; 
  border: 1px solid #525252; 
  max-height: 260px; 
  overflow: auto; 
  z-index: 9999; 
  display: none; 
}
.npfs-option { 
  padding: 8px 10px; 
  color: #fff; 
  cursor: pointer; 
}
.npfs-option:hover,
.npfs-option.is-active { 
  background: #195C36; 
}

/* Report Styles */
.npfs-report-wrap { color: #fff !important; }
.npfs-report-header { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  position: relative; 
  margin-bottom: 18px; 
}
.npfs-report-title { 
  font-size: 28px; 
  font-weight: 700; 
  margin: 0; 
  color: #fff !important; 
  text-align: center; 
}
.npfs-download { 
  position: absolute; 
  right: 0; 
  top: 50%; 
  transform: translateY(-50%); 
  background: #195C36 !important; 
  color: #fff !important; 
  border: 0 !important; 
  border-radius: 0 !important; 
  padding: 10px 14px !important; 
  cursor: pointer !important; 
}

.npfs-card { 
  background: rgba(82,82,82,0.5) !important; 
  border: 1px solid #525252 !important; 
  padding: 16px; 
  border-radius: 0 !important; 
  margin-bottom: 18px; 
}
.npfs-card.no-aside { display: block; }

.npfs-title-line { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  margin-bottom: 10px; 
}
.npfs-title-mark { 
  width: 8px; 
  height: 22px; 
  background: #195C36; 
  border-radius: 10px !important; 
  display: inline-block; 
}
.npfs-card-title { 
  font-size: 18px; 
  font-weight: 700; 
  margin: 0; 
  color: #fff !important; 
}

.npfs-row { 
  margin: 6px 0; 
  font-size: 14px; 
}
.npfs-row b { 
  font-weight: 700; 
  color: #fff; 
  margin-right: 8px; 
}

/* Tab navigation */
.npfs-partner-tabs { 
  display: flex; 
  gap: 0; 
  border-bottom: 2px solid #525252; 
  margin: 18px 0; 
}
.npfs-tab-btn { 
  background: rgba(82,82,82,0.3); 
  border: none; 
  border-bottom: 3px solid transparent; 
  color: #9aa3a7; 
  font-size: 16px; 
  font-weight: 600; 
  padding: 14px 28px; 
  cursor: pointer; 
  transition: all 0.2s; 
  flex: 1; 
  text-align: center; 
}
.npfs-tab-btn:hover { 
  color: #fff; 
  background: rgba(82,82,82,0.5); 
}
.npfs-tab-btn.npfs-tab-active { 
  color: #fff !important; 
  border-bottom-color: #195C36 !important; 
  background: rgba(82,82,82,0.5) !important; 
}

.npfs-tab-content { 
  display: none !important; 
}
.npfs-tab-content.npfs-tab-active { 
  display: block !important; 
}

/* Four Pillars grid */
.npfs-pillar-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 18px; 
  margin-bottom: 18px; 
}
.npfs-pillar { 
  border: 1px solid #525252; 
  background: rgba(82,82,82,0.5) !important; 
  border-radius: 0 !important; 
  padding: 0; 
}
.npfs-pillar-head { 
  padding: 12px 16px; 
  background: rgba(255,255,255,0.06); 
  font-weight: 800; 
  text-align: center; 
  color: #fff; 
}
.npfs-pillar-body { padding: 16px; }
.npfs-gan { 
  color: #FFA800; 
  font-size: 16px; 
  font-weight: 700; 
  margin: 0 0 12px; 
}
.npfs-exp { 
  line-height: 1.7; 
  margin: 0; 
  font-size: 14px; 
  color: #fff; 
}

/* Text styles */
.npfs-yy-text { 
  font-size: 14px; 
  line-height: 1.8; 
  margin: 0; 
  color: #fff; 
}
.npfs-text { 
  line-height: 1.8; 
  margin: 12px 0; 
  color: #fff; 
  font-size: 14px; 
}
.npfs-section-title { 
  color: #FFA800; 
  font-size: 16px; 
  font-weight: 700; 
  margin: 24px 0 12px; 
  padding-bottom: 8px; 
  border-bottom: 1px solid #525252; 
}

/* Compatibility scores */
.npfs-score-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
  gap: 16px; 
  margin: 24px 0; 
}
.npfs-score-card { 
  background: rgba(255,255,255,0.05); 
  padding: 16px; 
  border: 1px solid #525252; 
  border-radius: 8px; 
}
.npfs-score-header { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-bottom: 8px; 
}
.npfs-score-label { 
  font-weight: 700; 
  color: #FFA800; 
  font-size: 14px; 
}
.npfs-score-value { 
  font-size: 28px; 
  font-weight: 900; 
  color: #195C36; 
}
.npfs-score-desc { 
  font-size: 13px; 
  color: #9aa3a7; 
  line-height: 1.6; 
  margin-top: 8px; 
}

/* Quarterly analysis */
.npfs-quarterly-blocks { 
  display: flex; 
  flex-direction: column; 
  gap: 0; 
}
.npfs-quarterly-block { 
  background: rgba(66,66,66,0.64); 
  border-radius: 0 !important; 
  padding: 20px; 
  position: relative; 
}
.npfs-quarterly-block + .npfs-quarterly-block { 
  border-top: 3px solid #000; 
  margin-top: 0; 
}
.npfs-quarterly-title { 
  font-weight: 800; 
  color: #FFA800; 
  margin: 0 0 10px; 
  font-size: 15px; 
}
.npfs-quarterly-text { 
  line-height: 1.7; 
  margin: 0; 
  font-size: 14px; 
  color: #fff; 
}

/* Zodiac and celebrities */
.npfs-zodiac { 
  display: grid; 
  grid-template-columns: 420px 1fr; 
  gap: 24px; 
  align-items: start; 
  overflow: hidden; 
}
.npfs-zodiac-left,
.npfs-zodiac-right { min-width: 0; }
.npfs-zodiac-left { 
  font-size: 16px; 
  color: #fff; 
  text-align: center; 
}
.npfs-zodiac-left h4 { 
  margin: 0 0 10px; 
  font-weight: 800; 
  color: #fff; 
  font-size: 14px; 
}
.npfs-zodiac-img { 
  max-width: 100%; 
  height: auto; 
  display: block; 
  margin: 0 auto; 
  border: 1px solid #525252; 
  border-radius: 0 !important; 
}

.npfs-celebs { 
  font-size: 14px; 
  color: #fff; 
}
.npfs-celebs h4 { 
  margin: 0 0 12px; 
  font-weight: 800; 
  color: #fff; 
  font-size: 14px; 
}
.npfs-celeb-card { 
  display: grid; 
  grid-template-columns: 120px 1fr; 
  gap: 16px; 
  border: 1px solid #525252; 
  padding: 16px; 
  margin-bottom: 18px; 
}
.npfs-celeb-thumb { 
  width: 120px; 
  height: 120px; 
  background: #333; 
  background-position: center; 
  background-size: cover; 
}
.npfs-celeb-line { 
  height: 1px; 
  background: #525252; 
  margin: 10px 0; 
}
.npfs-celeb-title { 
  font-weight: 800; 
  color: #fff; 
  margin: 0 0 6px; 
}
.npfs-celeb-sub { 
  font-weight: 800; 
  color: #fff; 
  margin: 10px 0 6px; 
}
.npfs-celeb-text { 
  margin: 0; 
  line-height: 1.7; 
  color: #fff; 
  font-size: 14px; 
}

/* Zodiac box (Partner specific) */
.npfs-zodiac-box { 
  display: flex; 
  gap: 24px; 
  align-items: center; 
  margin: 16px 0; 
  padding: 16px; 
  background: rgba(255,255,255,0.03); 
  border: 1px solid #525252; 
}
.npfs-zodiac-info { flex: 1; }
.npfs-zodiac-name { 
  font-size: 18px; 
  font-weight: 700; 
  color: #FFA800; 
  margin-bottom: 8px; 
}

/* Avoid overflow for images/text */
.npfs-report-wrap img { 
  max-width: 100% !important; 
  height: auto !important; 
}
.npfs-exp,
.npfs-text,
.npfs-yy-text { 
  word-break: break-word; 
  overflow-wrap: anywhere; 
}

/* Mobile responsive */
@media (max-width: 991px) {
  .npfs-grid { grid-template-columns: 1fr !important; }
  /* Make birth form suffix columns auto-size to content on mobile */
  .npfs-birth { grid-template-columns: 1fr min-content 1fr min-content !important; }
  .npfs-pillar-grid { grid-template-columns: 1fr; }
  .npfs-gan { font-size: 14px; }
  .npfs-exp { font-size: 13px; }
  .npfs-yy-text { font-size: 13px; }
  .npfs-zodiac { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .npfs-card-title { font-size: 14px !important; }
  .npfs-pillar-head { font-size: 14px !important; }
  .npfs-report-title { font-size: 18px !important; }
  .npfs-report-header { flex-wrap: wrap; }
  .npfs-report-title { 
    flex: 1 0 100%; 
    margin: 0 0 8px; 
  }
  .npfs-download { 
    position: static !important; 
    transform: none !important; 
  }
  /* Ensure birth form suffixes remain content-sized on small screens */
  .npfs-birth { grid-template-columns: 1fr min-content 1fr min-content !important; }
  .npfs-partner-tabs { flex-direction: column; }
  .npfs-tab-btn { 
    border-bottom: none; 
    border-left: 3px solid transparent; 
    text-align: left; 
    padding: 12px 20px; 
  }
  .npfs-tab-btn.npfs-tab-active { 
    border-left-color: #195C36; 
  }
  .npfs-zodiac-box { flex-direction: column; }
  .npfs-celeb-card { 
    display: block !important; 
    text-align: center; 
  }
  .npfs-celeb-thumb { 
    width: 100% !important; 
    max-width: 200px !important; 
    margin: 0 auto 10px !important; 
  }
}