/* Profile Page Styles - Refined from Figma */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");

body {
  background-color: #ffffff;
  font-family: "DM Sans", sans-serif;
}

/* --- Layout --- */
.profile-container {
  padding-top: 107px;
  padding-bottom: 80px;
}

/* --- Sidebar --- */
.profile-sidebar-card {
  background: #e6f8ff;
  border-radius: 15px;
  padding: 20px 25px;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 30px;
  min-height: 87px;
}

.profile-avatar {
  width: 44px;
  height: 44px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 20px;
  color: #00a5f1;
}

.profile-user-info h5 {
  font-weight: 500;
  font-size: 14px;
  color: #303030;
  margin: 0;
}

.profile-user-info p {
  font-weight: 500;
  font-size: 12px;
  color: #303030;
  margin: 0;
  line-height: 1.4;
}

.profile-menu {
  border-top: 1px solid #e7eef1;
  padding-top: 20px;
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 0;
  margin-bottom: 15px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  color: inherit;
}

.profile-menu-item:hover {
  text-decoration: none;
  opacity: 0.8;
}

.menu-icon {
  width: 20px;
  height: 20px;
  background: #c1e4f3; /* Ellipse 8 color */
  border-radius: 50%;
  flex-shrink: 0;
}

.profile-left-col {
  border-right: 1px solid #e7eef1;
  padding: 18px;
}

.menu-text {
  font-weight: 400;
  font-size: 14px;
  color: #303030;
}

.logout-btn-container {
  margin-top: 350px; /* Pushed down as per design */
}

.btn-logout {
  width: 100%;
  height: 45px;
  border: 1px solid #e7eef1;
  border-radius: 100px;
  background: #ffffff;
  color: #303030;
  font-weight: 400;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Main Content --- */
.profile-main-title {
  font-weight: 500;
  font-size: 20px;
  color: #303030;
  margin-bottom: 40px;
}

/* Custom Input Group matching Figma "Rectangle 5" style */
.custom-input-group {
  position: relative;
  margin-bottom: 30px;
}

.custom-input-label {
  position: absolute;
  top: -8px;
  left: 15px;
  background: #ffffff;
  padding: 0 5px;
  font-size: 12px;
  font-weight: 400;
  color: #95a1a7; /* Label Color */
  z-index: 2;
}

.custom-form-control {
  height: 50px;
  border: 1px solid #e7eef1;
  border-radius: 10px;
  padding: 10px 15px;
  font-size: 16px;
  font-weight: 400;
  color: #303030;
  width: 100%;
  background-color: #ffffff;
}

.custom-form-control:focus {
  border-color: #00a5f1;
  box-shadow: none;
  outline: none;
}

/* Readonly fields like Mobile Number should look specific (Figma Group 27) */
.custom-form-control:disabled {
  background-color: #e6f8ff; /* Light blue bg for readonly */
  border-color: #e7eef1;
  color: rgba(48, 48, 48, 0.6);
}

/* Verify Badge */
.verify-badge {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: #ffe0e0;

  border-radius: 35px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 500;
  color: #f60004;
  cursor: pointer;
}

.verify-badge.verified {
  background: #dbffeb;
  color: #00c853;
}

.kyc-status-container {
  cursor: pointer;
}

.kyc-arrow {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #00a5f1;
}

/* Gender Selection */
.gender-row {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.gender-label {
  font-size: 15px;
  color: #303030;
  margin-right: 40px;
  margin-left: 10px;
  width: 60px;
}

.gender-btn-group {
  display: inline-flex;
  border-radius: 12px;
}

.gender-border {
  border: 1px solid #e7eef1;
}

.btn-gender {
  width: 65px;
  height: 32px;
  border: none;
  background: #ffffff;
  color: #303030;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px; /* Small radius for buttons inside */
  cursor: pointer;
  transition: all 0.2s;
}

.btn-gender.active {
  background: #303030;
  color: #ffffff;
}

/* Save Button */
.btn-save-profile {
  display: block;
  background: linear-gradient(180deg, #21b9ff 0%, #00a5f1 100%);
  border-radius: 200px;
  border: none;
  width: 335px;
  height: 50px;
  font-weight: 500;
  font-size: 16px;
  color: #ffffff !important;
  margin-top: 60px;
}

.pl-custom {
  padding-left: 40px; /* Spacer between sidebar and main content */
  padding-top: 35px;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .pl-custom {
    padding-left: 15px;
    margin-top: 0px !important;
  }
  .logout-btn-container {
    margin-top: 50px;
  }
}
/* --- KYC Page Styles --- */
.kyc-breadcrumb {
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #95a1a7;
  margin-bottom: 25px;
}

.kyc-breadcrumb span {
  color: #303030;
}

.kyc-info-box {
  background: #e6f8ff;
  border-radius: 15px;
  padding: 10px 20px;
  margin-bottom: 30px;
  text-align: center;
}

.kyc-info-text {
  font-weight: 500;
  font-size: 13px;
  color: #303030;
  margin: 0;
}

.kyc-section-title {
  font-weight: 700;
  font-size: 14px;
  color: #303030;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.kyc-section-bullet {
  width: 20px;
  height: 20px;
  background: #c1e4f3;
  border-radius: 50%;
  display: inline-block;
}

/* Custom Radio Rows */
.kyc-radio-option {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  cursor: pointer;
}

.kyc-radio-circle {
  width: 18px;
  height: 18px;
  border: 1px solid #e7eef1;
  border-radius: 50%;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

/* When active, show inner blue dot? Or just border? Design says Ellipse 9 with border. 
   Wait, user provided CSS has Ellipse 9 as border box.
   Let's assume selected state fills it or changes border. */

.kyc-radio-option.active .kyc-radio-circle {
  border-color: #00a5f1;
  background: #e6f8ff; /* Optional highlight */
}

.kyc-radio-option.active .kyc-radio-circle::after {
  content: "";
  width: 10px;
  height: 10px;
  background: #00a5f1;
  border-radius: 50%;
}

.kyc-radio-text {
  font-weight: 500;
  font-size: 14px;
  color: #303030;
}

/* Upload Area - Dashed */
.kyc-upload-dashed {
  background: #ffffff;
  border: 1px dashed #d9e5eb;
  border-radius: 10px;
  height: 122px;
  width: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  cursor: pointer;
  position: relative;
  padding: 0px 10px;
  margin: 10px;
}

.address-proof-options {
  margin-left: 15px;
}

.kyc-upload-btn {
  border: 1px solid #00a5f1;
  border-radius: 50px;
  padding: 4px 15px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: #ffffff;
}

.kyc-upload-btn span {
  font-weight: 500;
  font-size: 14px;
  color: #00a5f1;
}

.alert {
  padding: 10px !important;
  font-size: 14px !important;
}

.modal-close-btn {
  position: absolute;
  top: 10px;
  right: 15px;

  background: transparent;
  border: none;
  padding: 0;

  font-size: 30px;
  line-height: 1;
  font-weight: 400;

  color: #000;
  cursor: pointer;
}

.modal-close-btn:hover {
  opacity: 0.6;
}

.id-proof-options {
  margin-left: 15px;
}

#idProofUploadContainer {
  align-items: center;
}

.btn-submit-kyc {
  background: linear-gradient(
    180deg,
    rgba(33, 185, 255, 0.5) 0%,
    rgba(0, 165, 241, 0.5) 100%
  );
  border-radius: 200px;
  width: 335px;
  height: 50px;
  border: none;
  color: #ffffff;
  font-weight: 500;
  font-size: 16px;
  margin-top: 40px;
  margin-bottom: 40px;
}

/* Active submit button gradient usually full opacity, Figma shows 0.5 opacity for disabled? */
.btn-submit-kyc.active {
  background: linear-gradient(180deg, #21b9ff 0%, #00a5f1 100%);
  cursor: pointer;
}

/* --- Mobile Layout Specific --- */
.mobile-profile-layout {
  padding: 0 10px;
  margin-top: 80px; /* For the fixed mobile navbar */
}

.mobile-user-card {
  background: #e6f8ff;
  border-radius: 15px;
  padding: 20px;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  position: relative;
}

.mobile-avatar {
  width: 54px;
  height: 54px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 22px;
  color: #00a5f1;
  margin-right: 15px;
  flex-shrink: 0;
}

.mobile-user-info h5 {
  font-weight: 500;
  font-size: 16px;
  color: #303030;
  margin: 0;
  margin-bottom: 3px;
}

.mobile-user-info p {
  font-weight: 400;
  font-size: 13px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

.btn-mobile-edit {
  position: absolute;
  top: 25px;
  right: 20px;
  border: 1px solid #00a5f1;
  border-radius: 20px;
  padding: 4px 18px;
  font-size: 13px;
  font-weight: 500;
  color: #00a5f1;
  text-decoration: none;
  background: transparent;
}

.mobile-links-container {
  margin-bottom: 40px;
}

.mobile-link-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid #e7eef1;
  text-decoration: none;
}

.mobile-link-item:hover {
  text-decoration: none;
  opacity: 0.8;
}

.mobile-link-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.mobile-icon-circle {
  width: 32px;
  height: 32px;
  background: #c1e4f3;
  border-radius: 50%;
}

.mobile-link-text {
  font-size: 15px;
  color: #000000;
  font-weight: 400;
}

.btn-mobile-logout {
  width: 100%;
  height: 50px;
  border: 1px solid #e7eef1;
  border-radius: 100px;
  background: #ffffff;
  color: #303030;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

/* --- Mobile SPA Styles --- */
.mobile-header,
.mobile-sub-header {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 0;
}

.back-btn {
  font-size: 18px;
  padding: 5px;
  cursor: pointer;
}

@media (max-width: 768px) {
  /* Reset padding/borders for mobile single view */
  .profile-left-col {
    border-right: none;
    padding: 0 15px;
    margin-bottom: 0;
  }

  .pl-custom {
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 0;
  }

  .profile-container {
    padding-top: 55px; /* Reduced from 140px since navbar might be different or we want tighter layout */
    padding-bottom: 0px;
  }

  /* Ensure card looks good on mobile */
  .profile-sidebar-card {
    margin-bottom: 20px;
  }

  /* Full width for views */
  .view-section {
    width: 100%;
  }

  /* Hide Navbar? User images show "My Profile" header, implies no top navbar or simplified one. 
     If we keep existing navbar, padding-top 140px is fine. 
     If user wants "Separate full page", they might mean hiding the main nav.
     For now, I'll keep the main navbar but assume the container handles the spacing.
  */

  /* Adjust Logout button position for mobile (design shows at bottom) */
  .logout-btn-container {
    margin-top: 50px;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
  }
}

/* --- Mobile Overlay Styles --- */
.mobile-fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  z-index: 1045;
  overflow-y: auto;
  display: none;
  flex-direction: column;
}

.mobile-fullscreen-overlay.active {
  display: flex;
  animation: slideInRight 0.3s ease forwards;
}

.mobile-fullscreen-overlay.closing {
  animation: slideOutRight 0.3s ease forwards;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

.mobile-overlay-header {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.mobile-overlay-back {
  font-size: 20px;
  color: #303030;
  cursor: pointer;
  margin-right: 15px;
}

.mobile-overlay-title {
  font-size: 18px;
  font-weight: 500;
  color: #303030;
  flex-grow: 1;
}

.mobile-overlay-action {
  font-size: 13px;
  color: #00a5f1;
  font-weight: 500;
  border: 1px solid #00a5f1;
  border-radius: 20px;
  padding: 6px 14px;
  text-decoration: none;
  background: #ffffff;
}

.mobile-overlay-content {
  padding: 20px;
  padding-bottom: 100px;
  flex-grow: 1;
}

/* Shared Mobile Form Styles overrides for overlay if needed */
.custom-input-group {
  position: relative;
  margin-bottom: 25px;
  background: #ffffff;
  border: 1px solid #e7eef1;
  border-radius: 12px;
  padding: 0px 10px;
}

.custom-input-label {
  display: block;
  font-size: 11px;
  color: #95a1a7;
  margin-bottom: 2px;
  font-weight: 400;
}

.custom-form-control {
  width: 100%;
  border: none;
  padding: 0;
  font-size: 15px;
  color: #303030;
  font-weight: 500;
  background: transparent;
  outline: none !important;
  box-shadow: none !important;
}

.custom-form-control:disabled {
  background: transparent;
  color: #303030;
}

.verify-badge {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #f60004;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.verify-badge.pending {
  color: #f60004;

  background-color: #ffe0e0;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
}

.gender-border {
  border: 1px solid #e7eef1;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
}

.btn-gender {
  border: none;
  background: #ffffff;
  color: #303030;
  font-size: 14px;
  padding: 12px 10px;
  transition: all 0.2s;
  border-right: 1px solid #e7eef1;
  flex: 1;
}

.btn-gender:last-child {
  border-right: none;
}

.btn-overlay-save {
  background: #21b9ff;
  color: #ffffff;
  border: none;
  border-radius: 100px;
  height: 50px;
  width: 100%;
  font-size: 16px;
  /* font-weight: 600; */
  cursor: pointer;
  margin-bottom: 20px;
}

/* Verified KYC Document Display */
.verified-doc-container {
  display: flex;
  gap: 20px;
  margin-top: 15px;
  width: 50%;
}

#mobileNavbarTitle {
  font-size: 16px !important;
  font-weight: 500 !important;
}

.verified-doc-card {
  background: #ffffff;
  border: 1px solid #e7eef1;
  border-radius: 12px;
  padding: 8px;
  flex: 1;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); */
}

.verified-doc-card img {
  width: 100%;
  /* height: 160px; */
  object-fit: contain;
  border-radius: 8px;
  background: #f8f9fa;
}

.verified-doc-type-label {
  font-size: 14px;
  font-weight: 600;
  color: #303030;
  margin: 15px 0 5px 0;
}

.verified-doc-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: #e6f4ea;
  border-radius: 20px;
  color: #1e8e3e;
  font-size: 12px;
  font-weight: 500;
}

.verified-doc-status i {
  font-size: 14px;
}

@media (max-width: 768px) {
  .verified-doc-card {
    width: 100%;
  }

  .options-container {
    padding-left: 20px;
  }
}

.options-container {
  padding-left: 20px;
}

/* Only hide overlay content when a fullscreen overlay is not active.
   Do not hide standalone mobile views like #kycOverlay. */
.mobile-fullscreen-overlay:not(.active) .mobile-overlay-content {
  display: none;
}

.mobile-fullscreen-overlay.active .mobile-overlay-content {
  display: block;
}

.kyc-fixed-footer {
  background: #ffffff;
  padding: 20px 0;
  display: flex;
}

.kyc-fixed-footer .container {
  display: flex;
  /* justify-content: center; */
}

/* Fixed Footer for Submit Button - Mobile Only */
@media (max-width: 991px) {
  .kyc-fixed-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    padding: 20px 0;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    text-align: center;
  }

  .verified-doc-container {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .kyc-fixed-footer {
    padding: 15px 20px;
  }

  .kyc-fixed-footer .btn-overlay-save,
  .kyc-fixed-footer .btn-common-primary {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    width: 100%;
    max-width: 400px;
  }
}