/* ================= RESET ================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:"Poppins",sans-serif;
}

body{
  min-height:100vh;
  color:#fff;

  background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.65)),
    url("images/Hero-imggg.jpg");

  background-size:cover;
  background-position:center;

  padding:40px 20px;

  position:relative;
  overflow-x:hidden;
}

/* ================= BACKGROUND OVERLAY (MATCH DASHBOARD) ================= */

body::before{
  content:'';
  position:absolute;
  inset:0;

  background:linear-gradient(
    135deg,
    rgba(1,98,136,0.88),
    rgba(0,71,99,0.82),
    rgba(13,28,34,0.92)
  );

  z-index:0;
}

body::after{
  content:'';
  position:absolute;

  width:420px;
  height:420px;

  background:rgba(255,204,0,0.12);
  border-radius:50%;
  filter:blur(120px);

  top:-120px;
  right:-120px;

  z-index:0;
}

/* ================= CONTAINER ================= */

.profile-container{
  max-width:1100px;
  margin:auto;

  position:relative;
  z-index:2;
}

/* ================= CARD ================= */

.profile-card{
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(24px);

  border-radius:30px;
  overflow:hidden;

  border:1px solid rgba(255,255,255,0.12);

  box-shadow:
    0 25px 70px rgba(0,0,0,0.4),
    inset 0 1px 1px rgba(255,255,255,0.05);
}

/* ================= COVER ================= */

.profile-cover{
  height:220px;

  background:linear-gradient(
    135deg,
    #016288,
    #004763
  );
}

/* ================= TOP SECTION ================= */

.profile-top{
  text-align:center;

  padding:0 40px 40px;

  margin-top:-75px;
}

.profile-image img{
  width:150px;
  height:150px;

  border-radius:50%;
  object-fit:cover;

  border:6px solid rgba(13,28,34,0.95);

  box-shadow:0 15px 40px rgba(0,0,0,0.5);
}

/* NAME */

.profile-top h1{
  font-size:2.2rem;
  margin-top:15px;
}

/* EMAIL */

.profile-top p{
  color:rgba(255,255,255,0.7);
  margin-top:8px;
}

/* BADGE */

.badge{
  display:inline-block;

  margin-top:15px;

  padding:10px 18px;

  border-radius:999px;

  background:rgba(255,204,0,0.12);
  color:#ffcc00;

  font-size:0.9rem;
  font-weight:600;
}

/* ================= BIO ================= */

.profile-bio{
  padding:0 40px 40px;
}

.profile-bio h2{
  font-size:1.4rem;
  margin-bottom:15px;
}

.profile-bio p{
  background:rgba(255,255,255,0.06);

  border:1px solid rgba(255,255,255,0.08);

  padding:25px;

  border-radius:20px;

  color:rgba(255,255,255,0.75);
  line-height:1.8;
}

/* ================= STATS ================= */

.profile-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;

  padding:0 40px 40px;
}

.stat-box{
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(20px);

  border:1px solid rgba(255,255,255,0.10);

  border-radius:22px;

  padding:30px 20px;

  text-align:center;

  transition:0.3s ease;
}

.stat-box:hover{
  transform:translateY(-6px);
  border-color:rgba(255,204,0,0.35);
}

.stat-box i{
  font-size:2rem;
  color:#ffcc00;

  margin-bottom:10px;
}

.stat-box h3{
  font-size:2rem;
}

.stat-box p{
  color:rgba(255,255,255,0.6);
  margin-top:5px;
}

/* ================= ACTIVITY ================= */

.profile-activity{
  padding:0 40px 40px;
}

.profile-activity h2{
  font-size:1.4rem;
  margin-bottom:20px;
}

.activity-item{
  display:flex;
  align-items:center;
  gap:15px;

  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(20px);

  border:1px solid rgba(255,255,255,0.08);

  padding:18px;

  border-radius:16px;

  margin-bottom:12px;

  transition:0.3s ease;
}

.activity-item:hover{
  transform:translateX(6px);
  border-color:rgba(255,204,0,0.25);
}

.activity-item i{
  font-size:1.4rem;
  color:#00ffa2;
}

.activity-item p{
  color:rgba(255,255,255,0.85);
}

/* ================= ACTIONS ================= */

.actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:15px;

  padding:0 40px 50px;
}

/* BUTTON BASE */

.btn{
  text-decoration:none;
  border:none;

  padding:14px 22px;
  border-radius:14px;

  font-weight:600;
  cursor:pointer;

  transition:0.3s ease;
}

/* PRIMARY */

.primary-btn{
  background:#ffcc00;
  color:#08131b;

  box-shadow:0 10px 30px rgba(255,204,0,0.25);
}

.primary-btn:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(255,204,0,0.35);
}

/* SECONDARY */

.secondary-btn{
  background:rgba(255,255,255,0.06);
  color:#fff;

  border:1px solid rgba(255,255,255,0.12);
}

.secondary-btn:hover{
  transform:translateY(-4px);
  border-color:rgba(255,204,0,0.35);
}

/* LOGOUT */

.logout-btn{
  background:#dc2626;
  color:#fff;
}

.logout-btn:hover{
  transform:translateY(-4px);
  background:#b91c1c;
}

/* ================= RESPONSIVE ================= */

@media(max-width:768px){

  body{
    padding:20px 15px;
  }

  .profile-top{
    padding:0 20px 30px;
  }

  .profile-bio,
  .profile-stats,
  .profile-activity,
  .actions{
    padding-left:20px;
    padding-right:20px;
  }

  .profile-top h1{
    font-size:1.8rem;
  }

  .profile-image img{
    width:120px;
    height:120px;
  }
}

/* ================= PROFILE UPLOAD ================= */

.profile-upload{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;

    margin-top: 1.5rem;
    margin-bottom: 2rem;

    flex-wrap: wrap;
}

/* INPUT FILE */

#profileImage{
    color: white;
    font-size: 0.95rem;
}

/* FILE BUTTON */

#profileImage::file-selector-button{

    padding: 12px 18px;

    border: none;
    border-radius: 12px;

    background: rgba(255,255,255,0.08);

    color: white;

    cursor: pointer;

    margin-right: 12px;

    transition: 0.3s ease;
}

#profileImage::file-selector-button:hover{
    background: rgba(255,255,255,0.15);
}

/* BUTTON */

#saveProfile{
    padding: 12px 22px;
}