@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700;800;900&display=swap');


/* =============================== */
/* ROOT COLOR VARIABLES            */
/* =============================== */

:root{
  --bg1:#1e010a;      /* your deep maroon */
  --bg2:#651231;      /* your highlight maroon */

  --card:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.14);

  --text:#f5e9ec;
  --muted:rgba(245,233,236,.72);

  --accent:#8f2a45;
  --accent-soft:#b04a67;
}

/* =============================== */
/* GLOBAL PAGE STYLE               */
/* =============================== */

body::before{
  content: "";
  position: fixed;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(17, 140, 255, 0.62),   /* #651231 */
      rgba(35, 20, 186, 0.64)      /* #1e010a */
    ),
    url("images/back-1.jpg") center center / cover no-repeat;

  z-index: -1;

  /* optional but recommended */
  background-blend-mode: none;
}





/* =============================== */
/* UNIVERSITY HEADER               */
/* =============================== */

.uni-header{
  text-align:center;
  margin-bottom: 14px;
}

.uni-logo{
  width: 140px;
  max-width: 46vw;
  height: auto;
  margin-bottom: 10px;
}

.uni-title{
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  letter-spacing: .3px;
  color: #ffffff;
}

.uni-subtitle{
  color: var(--muted);
  font-weight: 500;
  font-size: .95rem;
}
.white-text{
  color: white;
}

@keyframes gifBlink {
  0%   { visibility: visible; }
  50%  { visibility: hidden; }
  100% { visibility: visible; }
}

.blink-text{
  animation: gifBlink 0.8s steps(1) infinite;
}
/* =============================== */
/* GLASS CARD STYLE                */
/* =============================== */

.card-glass{
  background: rgba(12,6,76,0.66);
  border: 1px solid rgba(255,255,255,0.24);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.65);
}


/* =============================== */
/* DIVIDER LINE                    */
/* =============================== */

.brand-line{
  height:3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--bg2),
    var(--accent-soft),
    var(--bg2),
    transparent
  );
  border-radius:99px;
  margin: 14px 0 20px;
}

/* =============================== */
/* TITLES                          */
/* =============================== */

.title{
  font-weight: 600;
  letter-spacing:.4px;
  font-size: clamp(1.45rem, 2.9vw, 2.1rem);
  color: #ffffff;
}

.subtitle{
  color: var(--muted);
}

/* =============================== */
/* INPUT FIELDS                    */
/* =============================== */

.form-control{
  border-radius:14px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.12);
  color:#fff;
}

.form-control:focus{
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 .2rem rgba(176,74,103,.22);
  background: rgba(255,255,255,.16);
  color:#fff;
}

/* =============================== */
/* BUTTONS                         */
/* =============================== */

.btn-blue{
  border-radius:14px;
  padding:12px 16px;
  font-weight:700;
  border:1px solid rgba(176,74,103,.55);
  background: linear-gradient(180deg, var(--accent-soft), var(--bg2));
  color:white;
  letter-spacing:.3px;
}

.btn-blue:hover{
  filter: brightness(1.06);
}

/* =============================== */
/* STATUS BADGES                   */
/* =============================== */

.badge-status{
  font-weight:700;
  letter-spacing:.6px;
  padding:.45rem .8rem;
  border-radius:999px;
}

.eligible{
  background: rgba(34,197,94,0.18);              /* translucent green */
  border: 1px solid rgba(34,197,94,0.55);         /* glowing edge */
  color: #dcfce7;

  backdrop-filter: blur(8px);                     /* glass effect ⭐ */
  -webkit-backdrop-filter: blur(8px);

  box-shadow:
    0 4px 12px rgba(34,197,94,0.25),              /* soft glow */
    inset 0 0 0 1px rgba(255,255,255,0.12);       /* inner glass line */

  border-radius: 999px;
}
.eligible:hover{
  background: rgba(34,197,94,0.28);
  box-shadow:
    0 6px 18px rgba(34,197,94,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.18);

  transform: translateY(-1px);
  transition: all .25s ease;
}

.btn-glass{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  margin-right: 8px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    0 4px 14px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.08);

  border-radius: 14px;
  font-weight: 600;
  padding: 12px 14px;

  /* ✅ THIS IS THE IMPORTANT PART */
  text-align: left;
  justify-content: flex-start;
  transition: all .25s ease;
}

.btn-glass:hover{
  background: rgba(255, 255, 255, 0.95);  /* nearly solid white */
  color: #651231;                         /* maroon text for contrast */

  border-color: rgba(255,255,255,0.95);

  transform: translateY(-1px);
  transition: all .25s ease;
}


.not-eligible{
  background: rgba(239,68,68,.16);
  border: 1px solid rgba(239,68,68,.45);
  color: #fecaca;
}

/* =============================== */
/* KEY VALUE DISPLAY BOX           */
/* =============================== */

.kv{
  border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.07);
  border-radius:14px;
  overflow:hidden;
}

.kv-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.kv-row:last-child{
  border-bottom:0;
}

.k{
  min-width:140px;
  color: rgba(245,233,236,.78);
  font-weight:600;
}

.v{
  color:#ffffff;
  font-weight:500;
  word-break:break-word;
  flex:1;
}

/* =============================== */
/* FOOTER / SMALL TEXT             */
/* =============================== */

.foot{
  color: rgba(255,255,255,1.0);
  font-size:1.0rem;
  
}

/* =============================== */
/* LINKS                           */
/* =============================== */

a{
  color: var(--accent-soft);
  text-decoration:none;
}

a:hover{
  color: #ffffff;
}
.form-control::placeholder{
  color: #6ecbff;   /* luminous blue */
  opacity: 1;
}