/* Basic Reset - Simplified */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body, h1, h2, h3, h4, p, ul, ol, li, figure, figcaption, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

/* Global Font */
body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  background-color: #efefef;
  text-align: center;
  padding-bottom: 15px;
      line-height: 1.5;
}

/* General Elements */
ul, ol {
  list-style: none;
}
a {
  text-decoration: none;
}
h2 {
    font-size: 20px;
    width: 100%;
}

#wrapper h2 {
    margin: 21px 0;
}
/* Wrapper */
body{ text-align:center; display:block; padding-bottom:15px; }
#wrapper {
  max-width:1280px;
  width:100%;
  background-color:#fff;
  display:inline-block;
  border:1px solid #f0f0f0;
  border-radius:5px;
  box-shadow:1px 1px 3px #d7d2d2;
  margin:5px 0;
}

  #wrapper {
      max-width: 1280px;
      width: 100%;
      background-color: #fff;
      margin: 0.55rem auto;
      border-radius: 0.375rem;
      box-shadow: 1px 1px 3px #d7d2d2;
      border: 1px solid #f0f0f0;
      display: block;
      padding-bottom: 1rem;
    }
 #header {
    width: 100%;
    background-color: #ed4880;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    flex-wrap: wrap;
    margin-bottom: -6px;
     margin-top: -4px;
}
    #header h1 {
      color: white;
      font-family: 'Heebo', sans-serif;
      font-weight: 700;
      font-size: 1.875rem;
      margin-top: 4px;
      flex-grow: 1;
      text-align: left;
    }
    #header h1 a {
      color: white;
      text-decoration: none;
      display: inline-block;
    }
    #main_nav {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      justify-content: flex-end;
      flex-grow: 1;
    }
    #main_nav ul {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
     
      margin: 17px;
      list-style: none;
    }
    #main_nav ul li {
      margin: 0;
    }
    #main_nav ul li a {
      display: inline-block;
      padding: 0.375rem 0.75rem;
      font-size: 0.875rem;
      border-radius: 0.625rem;
      border: 1px solid white;
      font-weight: 500;
      white-space: nowrap;
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    #main_nav ul li a:hover,
    #main_nav ul li a:focus {
      background-color: white;
      color: #ed4880;
      outline: none;
    }

#main_nav ul li {
  display: inline-block;
}


/* Sidenav */
#sidenavbtn {
  cursor: pointer;
  margin-left: 16px;
  margin-top: 29px;
}
#sidenavbtn span {
  display: block;
  width: 24px;
  height: 3px;
  margin: 5px 0;
  background-color: #fff;
}
.sidenavtext {
  color: white;
  font-size: large;
  margin-left: 1px;
}
#overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.55);
  z-index: 1;
  transition: 0.3s ease-in-out;
}
#sidenavwrap {
  position: fixed;
  top: 0; left: 0;
  width: 0;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
  z-index: 2;
  transition: 0.3s ease-in;
}
#sidenavwrap h3 {
  width: 200px;
  background: #212121;
  color: #fff;
  padding: 10px 0;
  text-align: center;
  font-size: 20px;
}
#sidenav {
  width: 200px;
}
#sidenav li {
  border-bottom: 1px solid #ccc;
}
#sidenav li a {
  display: block;
  padding: 10px 2%;
  color: #212121;
  font-size: 15px;
}
#sidenav li a:hover {
  color: #ed4880;
  padding-left: 4%;
}

/* Notification */

#notify{ width:100%; }
#notify p{ width:90%; margin:10px 3%; padding:5px 2%; font-size:16px; text-align:left; margin-top: 30px;}
#notify p.failed{ width:90%; font-size:16px; text-align:left; color:#ff0000; border:1px solid #ff0000; border-radius:5px; margin-top: 30px; }
#notify p.success{ width:90%; font-size:16px; text-align:left; color:#4caf50; border:1px solid #4caf50; border-radius:5px;margin-top: 30px; }

/* WhatsApp Float Button */
.whatsapp_float {
  position: fixed;
  bottom: 80px;
  right: 20px;
}
.whatsapp_float_btn {
  width: 50px;
}

/* Notify Badge */
.item {
  position: relative;
  display: inline-block;
}
.notify-badge {
  position: absolute;
  background: red;
  text-align: center;
  border-radius: 25px;
  color: white;
  padding: 5px 10px;
  font-size: 10px;
  font-weight: bold;
  top: -10px;
  right: -10px;
}

/* Animation */
@keyframes animate {
  0% { opacity: 0; }
  50% { opacity: 0.7; }
  100% { opacity: 0; }
}

/* Required Field Asterisk */
.required {
  color: red;
  font-size: 20px;
}
.pt-4 {
    padding-top: 6rem !important;
}
.mobalign{
    
    margin-top:-24px !important;
}

/* Responsive */
@media(max-width: 640px) {
  #main_nav {
    display: none;
  }
}
@media(max-width: 768px) {
 .mobalign {
    margin-top:7px !important;
  }
}

#main_content{ width:100%; }
#main_content h2{ width:100%; text-align:left; padding:10px; display:inline-block; }

.aform_wrap{ display:inline-block; width:100%; margin:10px 0 25px 0; }
#add_member_form{ display:inline-block; width:98%; margin:1%; text-align:left; vertical-align:top; display:inline-block; }
#add_member_form .formitembox{ display:inline-block; width:50%; margin:10px 0; float:left; }
#add_member_form .form-item{ display:inline-block; width:98%; margin:1%; }
#add_member_form .form-item label{ display:inline-block; width:48%; max-width:240px; padding:0 1%; font-size:16px; vertical-align:top; }
select, textarea, input{ display:inline-block; font-size:16px; width:48%; max-width:300px; padding:9px 1%; vertical-align:top; }
#add_member_form .form-item .button{ width:auto; padding:5px 12px; background-color:#009688; color:#fff; cursor:pointer; border:1px solid #537572; border-radius:5px; }
#add_member_form .form-item .button:hover{ background-color:#0bb8a8; }
#add_member_form .form-item .autowidth{ width:auto; margin-right:3px; }
#add_member_form .form-item select option{font-size:16px; }
#add_member_form .form-item .submit_btn{ padding:10px 15px; border-radius:10px; cursor:pointer; border:2px solid #000; }

#sideimgbox{ width:50%; float:right; text-align:left; vertical-align:top; display:inline-block; }
#bio_holder{ width:96%; margin:1%; padding:1%; text-align:left; vertical-align:top; display:inline-block; border:1px solid #999999}
/*#bio_holder img{ max-height:100px; max-width:100px; }*/
#bio_holder h3{ text-align:left; }
#bio_holder .upbio{ display:inline-block; }

#imgbig{ width:auto; height:auto; max-width:90%; }
#searchresulttable .imgthumb, #searchresulttable .profiletwo .imgthumb{ margin:1%; padding:0; width:auto; max-width:30%; height:100px;margin-top: -22px; }
.img_holder{ width:96%; margin:1%; padding:1%; text-align:left; vertical-align:top; display:inline-block; border:1px solid #999999}
.img_holder img{ background:none; border:none; max-width:100px; max-height:100px; }
.img_holder h3{ text-align:left; }

@media(max-width:768px){
    #add_member_form .form-item{margin:10px 1%; }
    #add_member_form .form-item label{ width:100%; padding:0; display:block; }
    #add_member_form .form-item input{ width:100%; padding:0; display:block; }
    #add_member_form .form-item select{ width:100%; padding:0; display:block; }
    #add_member_form .form-item .autowidth{ display:inline-block; }
    
    #bio_holder .upbio{ display:block; }
}
  
    .img_holder {
      width: 95%;    
      margin: 1%;
      padding: 1%;
      text-align: left;
      vertical-align: top;
      display: inline-block;
      border: 1px solid #999999;
    }
    .max-h-\[90vh\] {
      max-height: 50vh;
    }
   
 
#main_nav ul li a {
    width: auto;
    padding: 5px 5px;
    margin: 0;
    font-size: 14px;
    border-radius: 10px;
}


#header {
    width: 100%;
    background-color: #ed4880;
}



  /* Headings */
  .aform_wrap h2 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
   
  }
  .aform_wrap h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
  
  }
  

  /* Upload form */
  #imageUploadForm {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  @media (min-width: 640px) {
    #imageUploadForm {
      flex-direction: row;
    }
  }
  #imageUpload {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 6px 10px;
    width: 100%;
    max-width: 211px;
  }
  #imageUploadsubmit {   
    padding: 9px 18px;
    border: 1px solid #999999;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
	font-size:16px;
  }
  #imageUploadsubmit:hover {
    background: #b91c1c;
  }

  /* Uploaded images container */
  #uploadedImages {
      display: flex;
    flex-wrap: wrap;
    border: 2px solid red; /* ✅ full red border */
    border-radius: 8px;
    padding: 12px;
    gap: 12px;
    margin-top: 16px;
    background: #f8f8f8;
  }
  #uploadedImages.hidden {
    display: none;
  }
  #uploadedImages span {
    position: relative;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 4px;
    background: #fff;
  }
  #uploadedImages img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
  }
  #uploadedImages a {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #e5e7eb;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    text-align: center;
    line-height: 22px;
    font-size: 14px;
    font-weight: bold;
    color: #374151;
    text-decoration: none;
    cursor: pointer;
    transition: 0.2s;
  }
  #uploadedImages a:hover {
    background: #dc2626;
    color: #fff;
  }

  /* Cropper Modal */
  #cropperModal {
    position: fixed;
    inset: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
  }
  #cropperModal.active {
    display: flex;
  }
  #cropperModal .modal-content {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  }
  #cropperModal h3 {
    text-align: center;
    margin-bottom: 12px;
    font-weight: 600;
  }
  #cropperImage {
    max-width: 100%;
    max-height: 70vh;
    display: block;
    margin: auto;
  }
  .modal-actions {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }
  .modal-actions button {
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid #ccc;
    cursor: pointer;
  }
  #cropCancelBtn {
    background: #fff;
  }
  #cropCancelBtn:hover {
    background: #f3f4f6;
  }
  #cropConfirmBtn {
    background: #dc2626;
    color: #fff;
    border: none;
  }
  #cropConfirmBtn:hover {
    background: #b91c1c;
  }


  /* Cropper Modal */
#cropperModal {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
}
#cropperModal.hidden {
  display: none !important; /* ✅ ensures hidden works with JS */
}
#cropperModal .modal-content {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}