*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

:root{
  --red:#E8231A;
  --dark:#080808;
  --card:#141414;
  --gray:#aaa;
  --white:#fff;
  --fd:'Bebas Neue',sans-serif;
  --fh:'Oswald',sans-serif;
  --fb:'Barlow',sans-serif;
}

body{
  background:
  radial-gradient(circle at top right, rgba(255,0,0,0.12), transparent 35%),
  #050505;
  color:white;
  font-family:var(--fb);
}

.admin-layout{
  min-height:100vh;
  display:grid;
  grid-template-columns:260px 1fr;
}

.admin-sidebar{
  background:#090909;
  border-right:1px solid rgba(255,0,0,0.18);
  padding:2rem;
}

.admin-sidebar h2{
  font-family:var(--fh);
  letter-spacing:.08em;
  margin-bottom:.3rem;
}

.admin-sidebar h2 span{
  color:var(--red);
}

.admin-sidebar p{
  color:#777;
  font-size:.8rem;
  margin-bottom:3rem;
}

.admin-sidebar nav{
  display:flex;
  flex-direction:column;
  gap:.7rem;
}

.admin-sidebar a{
  color:#aaa;
  text-decoration:none;
  padding:.9rem 1rem;
  border:1px solid transparent;
  transition:.3s;
}

.admin-sidebar a:hover,
.admin-sidebar a.active{
  color:white;
  border-color:rgba(255,0,0,0.35);
  background:rgba(255,0,0,0.08);
}

.admin-main{
  padding:3rem;
}

.admin-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:3rem;
}

.admin-label{
  color:var(--red);
  font-family:var(--fh);
  letter-spacing:.35em;
  text-transform:uppercase;
  font-size:.7rem;
  margin-bottom:.5rem;
}

.admin-header h1{
  font-family:var(--fd);
  font-size:4rem;
  letter-spacing:.04em;
  line-height:.9;
}

.back-btn{
  color:white;
  text-decoration:none;
  border:1px solid rgba(255,0,0,0.4);
  padding:.8rem 1.2rem;
  font-family:var(--fh);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.75rem;
}

.back-btn:hover{
  background:var(--red);
}

.admin-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.5rem;
}

.admin-card{
  background:
  radial-gradient(circle at top, rgba(255,0,0,0.10), transparent 60%),
  var(--card);

  border:1px solid rgba(255,0,0,0.18);
  padding:2rem;
  min-height:220px;
  transition:.35s;
}

.admin-card:hover{
  transform:translateY(-8px);
  border-color:rgba(255,0,0,0.45);
  box-shadow:0 0 35px rgba(255,0,0,0.12);
}

.admin-card h3{
  font-family:var(--fh);
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:1rem;
}

.admin-card p{
  color:var(--gray);
  line-height:1.7;
  margin-bottom:2rem;
}

.admin-card span{
  color:#ff4d4d;
  font-size:.75rem;
  font-family:var(--fh);
  letter-spacing:.15em;
  text-transform:uppercase;
}

.admin-card span.green{
  color:#4cff7b;
}

@media(max-width:768px){
  .admin-layout{
    grid-template-columns:1fr;
  }

  .admin-sidebar{
    border-right:none;
    border-bottom:1px solid rgba(255,0,0,0.18);
  }

  .admin-main{
    padding:2rem 1.2rem;
  }

  .admin-header{
    flex-direction:column;
    align-items:flex-start;
    gap:1.5rem;
  }

  .admin-header h1{
    font-size:3rem;
  }
}

/*Fake data*/
.stats-grid{
  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(220px,1fr));

  gap:1.2rem;

  margin-bottom:2rem;
}

.stat-box{
  background:
  radial-gradient(circle at top,
  rgba(255,0,0,0.12),
  transparent 60%),
  #111;

  border:1px solid rgba(255,0,0,0.18);

  padding:1.8rem;

  text-align:center;

  transition:.3s;
}

.stat-box:hover{
  transform:translateY(-5px);

  border-color:
  rgba(255,0,0,0.35);

  box-shadow:
  0 0 30px rgba(255,0,0,0.12);
}

.stat-box h2{
  font-size:3rem;

  color:white;

  font-family:var(--fd);

  margin-bottom:.4rem;
}

.stat-box p{
  color:#aaa;

  letter-spacing:.08em;

  text-transform:uppercase;

  font-size:.8rem;
}
/* MOBILE MENU BUTTON */

.admin-menu-toggle{

    display:none;

    margin-top:1rem;

    background:transparent;

    border:1px solid
    rgba(255,0,0,0.3);

    color:white;

    width:50px;
    height:50px;

    font-size:1.4rem;

    cursor:pointer;
}

/* MOBILE */

@media(max-width:768px){

    .admin-layout{
        grid-template-columns:1fr;
    }

    .admin-sidebar{

        position:fixed;

        top:0;
        left:-100%;

        width:260px;

        height:100vh;

        z-index:999;

        transition:.35s;

        background:#090909;
    }

    .admin-sidebar.show-sidebar{
        left:0;
    }

    .admin-menu-toggle{
        display:block;
    }

}

/*ADMIN LOGIN STYLES*/
.login-body{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at top, rgba(255,0,0,0.16), transparent 45%),
    #050505;
}

.login-box{
  width:min(90%,420px);
  background:
    radial-gradient(circle at top, rgba(255,0,0,0.12), transparent 60%),
    #141414;
  border:1px solid rgba(255,0,0,0.25);
  padding:3rem 2rem;
  text-align:center;
  box-shadow:0 0 45px rgba(255,0,0,0.10);
}

.login-box h1{
  font-family:var(--fh);
  letter-spacing:.08em;
  margin-bottom:.5rem;
}

.login-box h1 span{
  color:var(--red);
}

.login-box p{
  color:#aaa;
  margin-bottom:2rem;
}

.login-box input{
  width:100%;
  background:#0c0c0c;
  border:1px solid rgba(255,255,255,0.12);
  color:white;
  padding:1rem;
  margin-bottom:1rem;
  outline:none;
}

.login-box input:focus{
  border-color:rgba(255,0,0,0.5);
}

.login-box button{
  width:100%;
  background:var(--red);
  color:white;
  border:none;
  padding:1rem;
  font-family:var(--fh);
  letter-spacing:.15em;
  text-transform:uppercase;
  cursor:pointer;
  margin-top:.5rem;
}

.login-box a{
  display:inline-block;
  margin-top:1.5rem;
  color:#aaa;
  text-decoration:none;
  font-size:.85rem;
}
#login-msg{

margin-top:1rem;

font-size:.9rem;

letter-spacing:.04em;

}

/*To protect admin page with the login page*/
.admin-actions{
  display:flex;
  gap:1rem;
}

.logout-btn{

  background:transparent;

  border:1px solid
  rgba(255,0,0,0.35);

  color:white;

  padding:.8rem 1.2rem;

  font-family:var(--fh);

  letter-spacing:.12em;

  text-transform:uppercase;

  cursor:pointer;

  transition:.3s;
}

.logout-btn:hover{
  background:var(--red);
}

/*PRAYER ADMIN STYLES*/
.prayer-admin-section{
  margin-top:4rem;
}

.section-head h2{
  font-family:var(--fh);

  letter-spacing:.08em;

  margin-bottom:2rem;
}

.prayer-requests-grid{
  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(300px,1fr));

  gap:1.5rem;
}

.prayer-request-card{

  background:
  radial-gradient(circle at top,
  rgba(255,0,0,0.10),
  transparent 60%),
  #141414;

  border:1px solid
  rgba(255,0,0,0.18);

  padding:1.5rem;
}

.prayer-request-card h3{
  margin-bottom:1rem;

  color:white;
}

.prayer-request-card p{
  color:#ccc;

  line-height:1.8;

  margin-bottom:1.5rem;
}

.prayer-actions{
  display:flex;

  gap:1rem;
}

.prayer-actions button{

  flex:1;

  border:none;

  padding:.8rem;

  cursor:pointer;

  color:white;

  font-family:var(--fh);

  letter-spacing:.08em;
}

.approve-btn{
  background:#1f9d55;
}

.delete-btn{
  background:#E8231A;
}

.loading-text{
  color:#aaa;
}



.admin-form-section{
  margin-top:3rem;
}

.admin-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin-top:1.5rem;
}

.admin-form input{
  background:#111;
  border:1px solid rgba(255,0,0,0.25);
  color:white;
  padding:1rem;
  outline:none;
  font-family:var(--fb);
}

.admin-form input:focus{
  border-color:rgba(255,0,0,0.65);
  box-shadow:0 0 18px rgba(255,0,0,0.12);
}

.admin-form button{
  grid-column:1 / -1;
  background:var(--red);
  color:white;
  border:none;
  padding:1rem;
  font-family:var(--fh);
  letter-spacing:.15em;
  text-transform:uppercase;
  cursor:pointer;
}

.admin-form button:hover{
  filter:brightness(1.1);
}

@media(max-width:768px){
  .admin-form{
    grid-template-columns:1fr;
  }
}

/*APPAREL ADMIN*/
.admin-form select{
  background:#111;
  border:1px solid rgba(255,0,0,0.25);
  color:white;
  padding:1rem;
  outline:none;
  font-family:var(--fb);
}