/* ============================================================

   ASTROTALK REGISTRATION FORM - FINAL STYLED VERSION

   ============================================================ */



/* ====== Layout Wrapper ====== */

.ar-container {

  display: grid !important;

  grid-template-columns: 40% 60% !important;

  width: 100% !important;

  max-width: 1140px !important;

  background: #fff !important;

 

  

  border-radius: 0 !important;

  overflow: hidden !important;

}



/* ====== Left Panel (Image Section) ====== */

.ar-left-panel {

  background: url('https://hopeai.in/astro/wp-content/uploads/2025/11/adult-holding-ball-light-scaled.jpg') center/cover no-repeat !important;

  position: relative !important;

  border-radius: 0 !important;

}

.ar-left-panel::after {

  content: '' !important;

  position: absolute !important;

  inset: 0 !important;

  background: rgba(0,0,0,0.45) !important;

}

.ar-left-panel h2 {

  position: absolute !important;

  top:5%;

  left: 20px !important;

  color: #fff !important;

  font-size: 22px !important;

  font-weight: 700 !important;

  text-transform: uppercase !important;

  margin: 0 !important;

}



/* ====== Form Section ====== */

.ar-form-section {



  background: #fff !important;

  font-family: "Poppins", sans-serif !important;

}

.ar-form-section h3 {

  font-size: 22px !important;

  margin-bottom: 8px !important;

  color: #111 !important;

}

.ar-subtitle {

  font-size: 14px !important;

  color: #666 !important;

  margin-bottom: 20px !important;

}



/* ====== Avatar Upload ====== */

.ar-avatar-upload {

  display: flex !important;

  gap: 15px !important;

  align-items: center !important;

  margin-bottom: 15px !important;

}

.ar-avatar-preview {

  width: 110px !important;

  height: 110px !important;

  display: grid !important;

  place-items: center !important;

  border: 2px dashed #bbb !important;

  color: #777 !important;

  font-size: 13px !important;

  overflow: hidden !important;

  background: #fafafa !important;

  border-radius: 0 !important;

}

.ar-avatar-preview img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

}



/* ====== Button ====== */

.ar-btn {

  background: #820a0b !important;

  border: none !important;

  padding: 10px 16px !important;

  cursor: pointer !important;

  font-weight: 600 !important;

  text-transform: uppercase !important;

  color: #fff !important;

  border-radius: 0 !important;

  transition: all 0.3s ease !important;

  font-size: 14px !important;

  letter-spacing: 0.5px !important;

}

.ar-btn:hover {

  background: #a80e0f !important;

}



/* ====== Inputs & Labels ====== */

label {

  display: block !important;

  font-weight: 600 !important;

  margin: 0 0 4px  !important;

  color: #333 !important;

  font-size: 14px !important;

}

input[type="text"],

input[type="email"],

input[type="tel"],

input[type="date"],

select,

textarea {

  width: 100% !important;

  padding: 10px 12px !important;

  border: 1px solid #ccc !important;

  background: #fafafa !important;

  outline: none !important;

  border-radius: 0 !important;

  color: #111 !important;

  font-size: 14px !important;

  font-family: "Poppins", sans-serif !important;

  box-shadow: none !important;

  transition: border 0.3s ease !important;

}

input:focus, select:focus, textarea:focus {

  border-color: #820a0b !important;

  background: #fff !important;

}



/* ====== Two-column Row ====== */

.ar-row {

  display: flex !important;

  gap: 20px !important;

  flex-wrap: wrap !important;

  margin-bottom: 16px !important;

}



/* ====== Language Panel ====== */

.ar-language-panel {

  position: relative !important;

  margin-bottom: 16px !important;

}

.ar-language-field {

  border: 1px solid #ccc !important;

  background: #fafafa !important;

  padding: 8px !important;

  min-height: 40px !important;

  display: flex !important;

  align-items: center !important;

  gap: 6px !important;

  flex-wrap: wrap !important;

  cursor: pointer !important;

  font-size: 14px !important;

}

.ar-language-list {

  position: absolute !important;

  left: 0 !important;

  top: 46px !important;

  width: 100% !important;

  border: 1px solid #ccc !important;

  background: #fff !important;

  padding: 8px !important;

  display: none;

  z-index: 40 !important;

  max-height: 200px !important;

  overflow: auto !important;

}

.ar-lang-row {

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  padding: 6px 4px !important;

  border-bottom: 1px solid #eee !important;

  font-size: 14px !important;

  cursor: pointer !important;

}



/* ====== Skills Box ====== */

.ar-skills-box {

  display: flex !important;

  flex-wrap: wrap !important;

  border: 1px solid #ccc !important;

  padding: 8px !important;

  min-height: 40px !important;

  background: #fafafa !important;

  margin-bottom: 16px !important;

}

.ar-suggestion {

  display: inline-block !important;

  background: #820a0b !important;

  padding: 6px 10px !important;

  margin: 6px 6px 0 0 !important;

  cursor: pointer !important;

  color: #fff !important;

  font-size: 13px !important;

  text-transform: capitalize !important;

  transition: all 0.3s ease !important;

}

.ar-suggestion:hover {

  background: #a80e0f !important;

}



/* ====== Actions ====== */

.ar-actions {

  text-align: right !important;

  margin-top: 20px !important;

}







/* ===============================

   RESPONSIVE FIXES — MOBILE VIEW

   =============================== */

@media (max-width: 991px) {



  .ar-container {

    width: 100% !important;

   

  }



  



  .ar-row {

    flex-direction: column !important;

    gap: 15px !important;

  }



  .ar-row > div {

    flex: 1 1 100% !important;

    width: 100% !important;

  }



  .ar-avatar-upload {

    flex-direction: column !important;

    align-items: flex-start !important;

    gap: 15px !important;

  }



  #arAvatarPreview {

    width: 130px !important;

    height: 130px !important;

  }



  .ar-skills-box, .ar-language-field {

    width: 100% !important;

  }



  .ar-left-panel h2 {

    font-size: 22px !important;

    text-align: center !important;

  }



  .ar-actions {

    text-align: center !important;

  }



  .ar-btn {

    width: 100% !important;

    font-size: 15px !important;

  }



  #arLanguageList {

    position: relative !important;

    width: 100% !important;

    max-height: 180px !important;

  }



  .ar-suggestions {

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

  }

}



@media (max-width: 576px) {

  .ar-container {

    display: block !important;

    

  }



  .ar-left-panel h2 {

    font-size: 20px !important;

  }



  .ar-btn {

    padding: 12px !important;

  }

}