/* ============================================================
   FIND YOUR PROGRAM
   Poori file — purani .fyp CSS ko REPLACE karein (append nahi).
============================================================ */

.fyp{
  position: relative;
  padding: 5.5rem 0 7rem;
  background: #0F0445;
  overflow: hidden;
}

.fyp-head{
  max-width: 820px;
  margin: 0 0 2rem;
}
.fyp-h{ margin-bottom: 1rem; }
.fyp-p{
  max-width: 820px;
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.6;
}

.fyp-sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   FILTER BAR — faculty dropdown + search + find
============================================================ */
.fyp-filters{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .9rem;
  margin: 2.25rem 0 2rem;
  padding: 40px;
  min-height: 125px;
  border-radius: 32px;
  background: #2D235F;
}

.fyp-filters-label{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
  color: #fff;
  font-size: 20px;
  font-weight: 400;
}

.fyp-controls{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin-left: auto;
}

.fyp-select{
  height: 44px;
  min-width: 240px;
  padding: 0 40px 0 16px;
  border: 1px solid #fff;
  border-radius: 30px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.fyp-select:focus-visible{ outline: 2px solid #FFC800; outline-offset: 2px; }
/* native dropdown list dark bg par readable rahe */
.fyp-select option{ color: #0F0445; background: #fff; }

.fyp-search{
  display: flex;
  align-items: center;
  gap: .5rem;
}
.fyp-search-input{
  width: 260px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid #fff;
  border-radius: 30px;
  background: transparent;
  color: #fff;
  font-size: 16px;
}
.fyp-search-input::placeholder{ color: rgba(255, 255, 255, .65); }
.fyp-search-input:focus-visible{ outline: 2px solid #FFC800; outline-offset: 2px; }
.fyp-search-input::-webkit-search-cancel-button{
  -webkit-appearance: none;
  width: 14px; height: 14px;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fyp-find-btn{
  height: 44px;
  padding: 8px 32px;
  border: 0;
  border-radius: 29.5px;
  background: #FFC800;
  color: #0F0445;
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: -0.64px;
  cursor: pointer;
}
.fyp-find-btn:hover{ background: #ffd633; }
.fyp-find-btn:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }

/* ============================================================
   FACULTY GROUPS
============================================================ */
.fyp-group{ margin-top: 2.5rem; }
.fyp-group:first-of-type{ margin-top: 2rem; }
.fyp-group.is-hidden{ display: none !important; }

.fyp-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

/* ============================================================
   CARD
============================================================ */
.fyp-card{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 16px;
  padding: 24px;
  border: 0.842px solid #0F0445;
  border-radius: 15.008px;
  background: #FFF;
}
/* JS inline display se hide karta hai; ye do class sirf state ke liye */
.fyp-card--hidden,
.fyp-card--filtered-out{ display: none; }

/* compare on hone par hi card clickable dikhe */
.fyp-selectable .fyp-card{ cursor: pointer; }
.fyp-selectable .fyp-card--blocked{ cursor: not-allowed; opacity: .55; }

.fyp-card-tags{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .4rem;
  width: 100%;
  margin-bottom: .8rem;
}
.fyp-tag{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5.774px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  line-height: 127.038%;
  text-align: center;
  text-transform: uppercase;
}
.fyp-tag--level{
  border-radius: 28.871px;
  background: #F2E3FF;
  color: #000;
}
.fyp-tag--badge{
  border-radius: 70.748px;
  background: #E32548;
  color: #FFF;
}

.fyp-card-title{
  margin: 0;
  color: #160A4D;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
}
.fyp-card-subtitle{
  margin: 0;
  color: #000;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
}

.fyp-card-meta{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}
.fyp-chip{
  display: flex;
  align-items: center;
  gap: 3.369px;
  padding: 8px;
  border-radius: 4.169px;
  background: #E2E2E2;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
}
.fyp-chip svg{ flex-shrink: 0; color: #7A7A8C; }

/* card ki width variable hai, isliye 100% — pehle 352px fixed tha */
.fyp-divider{
  width: 100%;
  height: 0.834px;
  opacity: 0.2;
  background: #000;
}

.fyp-card-note{
  margin: 0;
  color: #000;
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
}

.fyp-card-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
}
.fyp-fee{ display: flex; flex-direction: column; }
.fyp-fee span{
  color: #160A4D;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
}
.fyp-fee b{
  color: #160A4D;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

.fyp-ask-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6.67px;
  min-width: 140px;
  padding: 8px;
  border-radius: 6.67px;
  background: #160A4D;
  color: #FFF;
  font-size: 15.16px;
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
}

/* ============================================================
   VIEW MORE  (har group ke neeche)
============================================================ */
.fyp-viewmore-wrap{
  display: flex;
  justify-content: center;
  margin: 1.5rem 0 0;
}
/* JS `is-hidden` WRAP par lagata hai, button par nahi */
.fyp-viewmore-wrap.is-hidden{ display: none !important; }

.fyp-viewmore-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 42px;
  padding: 8px 32px;
  border: 0;
  border-radius: 29.5px;
  background: #FFC800;
  color: #0F0445;
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: -0.64px;
  text-decoration: none;
  cursor: pointer;
}
.fyp-viewmore-btn:hover{ background: #ffd633; color: #0F0445; }

/* ============================================================
   EMPTY STATE
============================================================ */
.fyp-empty{
  margin: 2rem 0 0;
  color: #fff;
  font-size: 18px;
  text-align: center;
}
.fyp-empty[hidden]{ display: none !important; }

/* ============================================================
   COMPARE BAR
============================================================ */
.fyp-compare-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  padding: 8px 8px 8px 32px;
  border: 0.99px solid #FFF;
  border-radius: 64px;
  background: rgba(255, 255, 255, 0.10);
}
.fyp-compare-note{
  margin: 0;
  color: #FFF;
  font-size: 16px;
  line-height: 23.713px;
}
.fyp-compare-note b{ margin-right: .3rem; color: #fff; font-weight: 700; }

.fyp-compare-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 42px;
  padding: 8px 32px;
  border-radius: 29.5px;
  background: #FFC800;
  color: #0F0445;
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: -0.64px;
  text-decoration: none;
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1199.98px){
  .fyp-controls{ margin-left: 0; }
  .fyp-select{ min-width: 200px; }
  .fyp-search-input{ width: 220px; }
}

@media (max-width: 991.98px){
  .fyp-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767.98px){
  .fyp-grid{ grid-template-columns: 1fr; }
  .fyp-p{ font-size: 16px; }

  .fyp-filters{
    min-height: 0;
    padding: 20px;
    row-gap: .75rem;
  }
  .fyp-filters-label{ font-size: 16px; }

  .fyp-controls{ width: 100%; gap: .6rem; }
  .fyp-select{ width: 100%; min-width: 0; font-size: 14px; }
  .fyp-search{ width: 100%; }
  .fyp-search-input{ flex: 1 1 auto; width: auto; min-width: 0; font-size: 14px; }
  .fyp-find-btn{ flex: 0 0 auto; padding: 8px 22px; font-size: 14px; }

  .fyp-group{ margin-top: 2rem; }
}

@media (max-width: 575.98px){
  .fyp{ padding: 3.5rem 0 6rem; }
  .fyp-compare-inner{ flex-direction: column; align-items: flex-start; gap: .75rem; }
  .fyp-compare-btn{ width: 100%; }
}

@media (max-width: 375px){
  .fyp-p{ font-size: 15px; }
  .fyp-tag--level,
  .fyp-tag--badge{ font-size: 10px; }
  .fyp-chip{ padding: 5px 8px; font-size: 12px; }
  .fyp-ask-btn{ min-width: 115px; font-size: 14px; }
  .fyp-fee span{ font-size: 12px; }
  .fyp-fee b{ font-size: 14px; }
}