/* =========================
   PAGE BASE
========================= */

body {
  background: #FFFAF5;
}

/* =========================
   PROFILE WRAPPER
========================= */

.profile-wrapper {
  max-width: 1100px;
  margin: auto;
  padding: 40px 0;
}

/* =========================
   CARDS (LEFT + RIGHT)
========================= */

.profile-wrapper .card {
  background: #ffffff;
  border-radius: 24px;
  border: 2px solid #A187E3;
  box-shadow: 0 10px 28px rgba(161, 135, 227, 0.18);
}

/* =========================
   AVATAR
========================= */

.avatar-img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  background: #FFF5F9;
  border: 5px solid transparent;
  margin: 0 auto 15px auto;
  display: block;
}

/* Role-based avatar ring */
.profile-wrapper.owner .avatar-img {
  border-color: #A187E3; 
}

.profile-wrapper.sitter .avatar-img {
  border-color: #FFC685; 
}


/* =========================
   FILE INPUT (Choose files)
========================= */
.profile-wrapper input[type="file"] {
  border: 2px solid #A187E3;
  border-radius: 12px;
}

.profile-wrapper input[type="file"]:focus {
  border-color: #A187E3;
  box-shadow: 0 0 0 0.25rem rgba(161, 135, 227, 0.25);
}





/* =========================
   SECTION TITLES
========================= */

.section-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: #38023B ; 
  margin-bottom: 12px;
}

/* =========================
   INPUTS & SELECTS
========================= */

.profile-wrapper .form-control,
.profile-wrapper .form-select {
  background-color: #FFFAF5;
  border: 2px solid #FFDBE2;
  border-radius: 10px;

  color: #38023B;
  font-weight: 500;

  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.profile-wrapper .form-control:focus,
.profile-wrapper .form-select:focus {
  border-color: #A187E3;
  box-shadow: 0 0 0 0.2rem rgba(161, 135, 227, 0.25);
}

/* Disabled input (email) */
.profile-wrapper .form-control:disabled {
  background-color: #f1f1f1;
  opacity: 0.8;
}

/* =========================
   BUTTONS (UNIFIED)
========================= */

/* Primary actions */
.profile-wrapper .btn-primary,
.profile-wrapper .btn-outline-primary {
  background: #A187E3;
  border: none;
  color: #ffffff;
  border-radius: 8px;
  font-weight: 600;
}

/* Hover → orange */
.profile-wrapper .btn-primary:hover,
.profile-wrapper .btn-outline-primary:hover {
  background: #FFC685;
  color: #38023B;
}

/* Secondary button – Change Password */
.profile-wrapper .btn-secondary {
  background: transparent;
  color: #FFDBE2;

  border: 2px solid #FFDBE2;
  border-radius: 8px; 
  font-weight: 600;

  transition: background-color 0.2s ease,
              color 0.2s ease,
              transform 0.15s ease;
}

/* Hover / focus */
.profile-wrapper .btn-secondary:hover,
.profile-wrapper .btn-secondary:focus {
  background: #FFDBE2;
  color: white;
  transform: translateY(-1px);
}


.profile-wrapper .btn-secondary:focus {
  box-shadow: none;
}


/* =========================
   GALLERY
========================= */

.gallery-thumb {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  margin: 5px;
  cursor: pointer;
  border: 2px solid #FFDBE2;
  transition: transform 0.2s ease;
}

.gallery-thumb:hover {
  transform: scale(1.05);
}

/* =========================
   CHECKBOX SECTION (SITTER)
========================= */

#sitterFields label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 12px;
  font-weight: 500;
  color: #38023B;
}

/* =========================
   HR DIVIDERS
========================= */

.profile-wrapper hr {
  border: none;
  border-top: 1px solid #E5D4FF;
  margin: 18px 0;
}