

/* Updated AccountForm CSS — responsive improvements for mobile (873px and 480px breakpoints)
   Note: I preserved your font-families, font-sizes and most spacing values — only layout geometry and widths changed
*/

.account-container {
  background-color: #ffffff;
  padding: 30px 0px;
  padding-left: 35px;
  padding-right: 20px;
}

.form-wrapper {
  /* keep your original visual width on desktop but limit extremes */
  width: 62%;
  max-width: 980px; /* prevents extreme stretching on very wide screens */
  /* min-width: 320px; */
  /* margin: 0 auto; */
  background-color: #ffffff;
   padding: 0px 18px;
    padding-left: 0px;
    padding-right: 40px;
  border-radius: 4px;
  box-sizing: border-box;
}

.form-section {
  margin-bottom: 30px;
}

.section-title {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title-child{
  font-family: "Acumin Pro Bold";
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  color: #000000;
}

.parent-content-container{
  gap: 2px;
  display: flex;
  font-size: clamp(0.9rem, 1.8vw, 1rem);
  color: #000000;
  font-family: "Acumin Pro Medium";
  margin-top: -10px;
}

.sectiontittle-satric{
  margin-top: -4px;
}

.surname-label{
  color: #000000  ;
  font-family: "Acumin Pro Medium";
  font-size: clamp(0.5rem, 1.8vw, 1.2rem);
}

.form-group label {
  color: #000000  ;
  font-family: "Acumin Pro Medium";
  font-size: clamp(1rem, 1.8vw, 1rem);
  margin-bottom: 8px;
  display: flex;
  gap: 4px;
}

.form-grouptwo label {
  color: #000000  ;
  font-family: "Acumin Pro Medium";
  font-size: clamp(1rem, 1.8vw, 1rem);
  margin-bottom: 8px;
  display: flex;
  gap: 4px;
}

.form-group-three label {
  color: #000;
  font-family: Acumin Pro Medium;
  font-size: clamp(1rem, 1.8vw, 1rem);
  margin-bottom: 8px;
  display: flex;
  padding-top: 10px;
  gap: 4px;
}

.required {
  color: #000000  ;
  font-size: clamp(0.81rem, 1.8vw, 1.2rem);
  font-family: "Acumin Pro Medium";
  margin-top: -4px;
}

/* layout */
.form-row {
  display: flex;
  gap: 85px;
  margin-bottom: 20px;
  align-items: flex-start;
  flex-wrap: nowrap;
  box-sizing: border-box;
}

.form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.form-input {
  padding: 7px 14px;
  border: 1px solid #d1d1d1;
  border-radius: 12px;
  font-size: clamp(0.81rem, 1.8vw, 1rem);
  font-family: "Acumin Pro Medium";
  color: #000000;
  background-color: #ffffff;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.form-input::placeholder,
.edit-input::placeholder {
  color: #000000;
   font-size: clamp(0.81rem, 1.8vw, 1rem);
  font-family: "Acumin Pro Medium";
  opacity: 1;
}

.form-group.full-width {
  flex: 1 1 100%;
  max-width: 256px;
}

.form-grouptwo.full-width {
  flex: 1 1 100%;
  max-width: 500px;
}
.form-grouptwo {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.form-inputtwo {
  padding: 7px 0px;
  padding-left: 14px;
  padding-right: 10px;
  border: 1px solid #d1d1d1;
  border-radius: 12px;
  font-size: clamp(0.79rem, 1.8vw, 1rem);
  font-family: "Acumin Pro Medium";
  color: #000000;
  background-color: #ffffff;
  transition: border-color 0.2s;
  border: 1px solid #0000ff;
  box-sizing: border-box;
}

.form-group-three.full-width {
  flex: 1 1 100%;
  max-width: 300px;
}
.form-group-three {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.form-group-Fourth.full-width {
  flex: 1 1 100%;
  max-width: 500px;
}
.form-group-Fourth {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.form-input:focus {
  outline: none;
  border-color: #4a90e2;
}

.email-group {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.email-group .form-input {
  flex: 1;
}

.edit-btn:hover {
  color: #357abd;
}

.save-btn {
  padding: 7px 18px;
  background-color: #e93248;
  color: #ffffff;
  font-family: "Acumin Pro Bold";
  border: none;
  border-radius: 12px;
  font-size: clamp(0.9rem, 1.8vw, 1rem);
  cursor: pointer;
  transition: background-color 0.2s;
  margin-top: 13px;
  box-sizing: border-box;
}

.save-btn:hover {
  background-color: #c0392b;
}

.save-btn:active {
  transform: translateY(1px);
}

.section-titleTwo {
  color: #000000;
  font-family: "Acumin Pro Bold";
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  padding-top: 15px ;
  padding-bottom: 25px;
}

.section-title-three {
  color: #000;
  font-family: "Acumin Pro Bold";
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  padding-top: 15px;
  padding-bottom: 25px;
}

.section-divider {
  height: 1px;
  background-color: #e5e5e5;
  margin: 40px 0;
}

.cancel-section {
  margin-top: 40px;
  padding-top: 20px;
}

.cancel-btn {
  padding: 7px 28px;
  background-color: #ffffff;
  color: #000000;
  border: 2px solid #a92823;
  border-radius: 12px;
  font-size: clamp(0.9rem, 2vw, 1rem);
  cursor: pointer;
  transition: all 0.2s;
  font-family: "Acumin Pro Bold";
}

.cancel-btn:hover {
  background-color: #e74c3c;
  color: #ffffff;
}

.cancel-btn:active {
  transform: translateY(1px);
}

.paraagraph-cancelsection{
  color: #000000;
  font-family: "Acumin Pro Medium";
  font-size: clamp(0.8rem, 2vw, 1rem);
  padding-top: 20px;
  padding-bottom: 20px;
}

/* keep disabled style optional (you had commented it out) */
.form-input:disabled {
  /* background-color: #f9f9f9; */
  color: #333333;
  /* cursor: not-allowed; */
}

/* input-with-edit & edit text */
.input-with-edit {
  position: relative;
}

.edit-input {
  padding-right: 65px; /* space for edit text */
}

.edit-text {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  border: none;
  color: #000000;
  cursor: pointer;
  font-size: clamp(0.79rem, 1.8vw, 1rem);
  font-family: "Acumin Pro Bold";
  opacity: 0.8;
  white-space: nowrap;
}

.edit-text:hover {
  opacity: 1;
}

/* ---------- Responsive breakpoints ---------- */

/* Tablet and small-desktop breakpoint */
@media (max-width: 1023px){
.account-container {
    
    padding-left: 100px;
   
}}
@media (max-width: 873px) {
  /* stack the form rows vertically so inputs don't shrink horizontally */
  .form-row {
    flex-direction: column;
    gap: 20px; /* only layout gap — visual spacing remains similar to original */
    margin-bottom: 18px;
  }

  /* allow wrapper to be a bit wider on smaller devices but keep padding intact */
  .form-wrapper {
    width: 92%;
    max-width: 760px;
    padding: 0px 18px;
    padding-left: 0px;
    padding-right: 36px;
  }

  /* ensure labels and groups occupy full width */
  .form-group,
  .form-grouptwo,
  .form-group-three,
  .form-group-Fourth {
    width: 100%;
  }

  /* adjust max-widths used at desktop so they don't force overflow */
  .form-group.full-width { max-width: 100%; }
  .form-grouptwo.full-width { max-width: 100%; }
  .form-group-three.full-width { max-width: 100%; }
  .form-group-Fourth.full-width { max-width: 100%; }

  /* keep edit text visible and positioned — move slightly left on narrow tablet to avoid overflow */
  .edit-text {
    right: 12px;
  }
}

/* Small phones */
@media (max-width: 480px) {
  /* keep everything stacked */
  .form-row {
    gap: 16px;
    margin-bottom: 16px;
  }

  .form-wrapper {
    width: 100%;
    max-width: 100%;
     padding: 0px 18px;
    padding-left: 0px;
    padding-right: 0px;
  }

  /* inputs and groups should fill available width */
  .form-input,
  .form-inputtwo,
  .edit-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ensure the edit text doesn't cover input content on very small screens:
     we keep the same font sizes, so reduce the reserved padding slightly but still allow click */
  .edit-input { padding-right: 58px; }
  .edit-text {
    right: 10px;
    
  }

  /* buttons: make them fill or look nicer on small screen */
  .save-btn {
    width: 100%;
    text-align: center;
    padding: 10px 16px;
    margin-top: 12px;
  }

  .cancel-btn {
    width: 100%;
    padding: 10px 16px;
  }

  .paraagraph-cancelsection {
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .profile-header {
   
    padding: 22px 11px;
}
}
@media (max-width: 992px) {
  .account-container {
  background-color: #ffffff;
  padding: 30px 0px;
  padding-left: 0px;
  padding-right: 0px;
}

}
.error-message {
  color: #ff4444;
  font-size: 12px;
  margin-top: 5px;
  font-weight: normal;
  display: block;
}
.form-input:disabled,
.form-input.edit-input:disabled {
  background-color: #f5f5f5;
  color: #666;
  cursor: not-allowed;
  opacity: 0.7;
}
.save-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}