/* Profile Page Styles - Refined from Figma */
/* DM Sans is loaded via the global Google Fonts <link> in includes/header.php
   (do NOT @import here — that creates a render-blocking critical request chain). */

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

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

.col-lg-4 {
  width: 25%;
}

/* --- Sidebar --- */
.profile-sidebar-card {
  background: #e6f8ff;
  border-radius: 15px;
  padding: 20px;
  /* Reserve space on the right so the absolutely-positioned Edit pill never
     overlaps the user-info text (longest case: a wrapped email). */
  padding-right: 70px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  min-height: 87px;
  position: relative;
  /* `min-width: 0` lets the user-info shrink with ellipsis so a long email
     doesn't push the Edit pill out past the card's right edge. */
  min-width: 0;
}

.profile-user-info {
  flex: 1 1 auto;
  min-width: 0;
}

.profile-user-info h5,
.profile-user-info p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.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;
}

/* Edit pill on the user card — opens profile.php for editing. Replaces the
   former "My Profile" sidebar menu item per Figma; only 3 nav rows now
   (My Orders, Wishlist, Contact Us). Pinned to the top-right corner of the
   card so it stays anchored regardless of how many info lines render. */
.profile-edit-btn {
  position: absolute;
  top: 12px;
  right: 16px;
  background: #ffffff;
  border: 1px solid #00a5f1;
  color: #00a5f1;
  border-radius: 35px;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  font-size: 12px;
  padding: 4px 14px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

.profile-edit-btn:hover {
  background: #e6f8ff;
  color: #00a5f1;
  text-decoration: none;
}

.profile-menu {
  border-top: 1px solid #e7eef1;
  padding-top: 10px;
  /* Extend the divider to the column's right edge so it meets the vertical
     border-right on .profile-left-col (which has 18px padding). */
  margin-right: -18px;
  padding-right: 18px;
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 8px;
  margin-bottom: 5px;
  border-radius: 8px;
  cursor: pointer !important;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
  color: inherit;
}

.profile-menu-item:hover,
.profile-menu-item:hover .menu-text {
  text-decoration: none;
  background: #e6f8ff;
  color: #00a5f1;
}

/* Active route — text turns brand blue at normal weight (not bold). */
.profile-menu-item.active .menu-text {
  color: #00a5f1;
  font-weight: 400;
}

.menu-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.menu-icon img,
.menu-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.profile-left-col {
  border-right: 1px solid #e7eef1;
  padding: 18px;
  flex-direction: column;
  /* Fill the inner viewport area (100vh minus the container's top+bottom
     padding) so the logout button sits at the bottom without scrolling. */
  min-height: calc(100vh - 187px);
}

/* Force the column to flex layout at desktop breakpoints so `margin-top: auto`
   on `.logout-btn-container` actually pushes Logout to the bottom of the
   sidebar. `!important` is load-bearing here: kyc-upload, orders, and
   order-details add Bootstrap `d-none d-md-block` / `d-lg-block` utilities,
   which apply `display: block !important` and would otherwise collapse the
   flex column. The rule is gated to `min-width: 768px` so it doesn't beat
   `d-none`'s `display: none !important` on mobile — without the gate the
   sidebar would render on top of the mobile layout. */
@media (min-width: 768px) {
  .profile-left-col {
    display: flex !important;
  }
}

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

.logout-btn-container {
  margin-top: auto; /* Push to bottom of sidebar so it's always in view */
  padding-bottom: 30px; /* Breathing room below the button */
}

.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;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-logout:hover {
  background-color: #ffe6e6;
  border-color: #ffb3b3;
  color: #ff2d2d;
  cursor: pointer;
}

/* Suppress the default mouse-click focus ring; keyboard users still get
   a focus indicator via :focus-visible (the browser default). */
.btn-logout:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

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

/* 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;
  border-radius: 3px;
}

.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;
  /* Long values (emails, names) get truncated with an ellipsis instead of
     running visually under the verify badge / KYC arrow. */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

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

.custom-form-control::placeholder {
  font-size: 14px !important;
  color: #b2c0c7 !important;
}

/* Reserve room on the right of the input when the group has a verify badge
   so the long text never overlaps the badge. KYC-status row sits the badge
   further left (40px) and also has an arrow, so it needs more clearance. */
.custom-input-group:has(.verify-badge) .custom-form-control {
  padding-right: 90px;
}
.custom-input-group.kyc-status-container .custom-form-control {
  padding-right: 110px;
}

/* 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: #e6f8ff;
  color: rgba(48, 48, 48, 0.6);
  cursor: not-allowed;
}

/* Floating label keeps a white pill background even when the input is
   disabled, so it stays visually distinct from the field beneath. */
.custom-input-group:has(.custom-form-control:disabled) .custom-input-label {
  background: #ffffff;
  color: #95a1a7;
  border-radius: 3px;
}

/* 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;
  white-space: nowrap;
}

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

/* Field-level inline errors (below the input, left-aligned, red) */
.field-error {
  color: #f60004;
  font-size: 12px;
  font-weight: 400;
  margin-top: -22px;
  margin-bottom: 18px;
  padding-left: 4px;
  display: none;
  line-height: 1.3;
}

.field-error.show {
  display: block;
}

.custom-form-control.has-error {
  border-color: #f60004 !important;
}

.kyc-status-container {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.kyc-status-container:hover {
  background-color: #f4f7f9;
}

.kyc-arrow {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #303030;
  font-size: 12px;
  font-weight: 300;
}

/* 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;
  position: relative;
  background: #ffffff;
}

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

.btn-gender {
  width: 65px;
  height: 32px;
  border: none;
  background: transparent;
  color: #303030;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px; /* Small radius for buttons inside */
  cursor: pointer;
  transition: color 0.3s ease, opacity 0.15s ease;
  position: relative;
  z-index: 1;
}

/* Hover affordance — fade non-active gender buttons. The active one already
   has the sliding pill behind it, so we don't change its appearance. */
.btn-gender:not(.active):hover {
  opacity: 0.6;
}

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

/* Sliding active-state indicator — same animation as the orders.css tabs. */
.gender-indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: #303030;
  border-radius: 12px;
  transform: translateX(0);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}

/* 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: 25px;
}

/* 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-breadcrumb-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.kyc-breadcrumb-link:hover {
  color: #00a5f1;
  text-decoration: none;
}

.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 {
  font-weight: 700;
  color: #00a5f1;
  display: inline-block;
  min-width: 14px;
}

/* 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: 28px;
  line-height: 1;
  font-weight: 400;

  color: #000;
  cursor: pointer;
}

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

/* KYC Rejection Modal (Custom) */
.kyc-rejection-overlay {
  position: fixed;
  inset: 0;
  z-index: 1060;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kyc-rejection-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px 28px;
  width: 340px;
  max-width: 90vw;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.kyc-rejection-close {
  position: absolute !important;
  top: 12px;
  right: 16px;
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: #666;
  cursor: pointer;
}

.kyc-rejection-close:hover {
  color: #000;
}

.kyc-rejection-title {
  font-weight: 700;
  font-size: 18px;
  color: #303030;
  margin-bottom: 10px;
}

.kyc-rejection-text {
  color: #888;
  font-size: 14px;
  margin-bottom: 20px;
}

.kyc-rejection-ok {
  width: auto;
  padding: 8px 28px;
  /* .btn-common-primary is display:flex, so text-align:center on the parent
     card doesn't position the button itself. margin auto centers the button
     within the card now that its width has shrunk to fit the label. */
  margin: 0 auto;
}

.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: 12px;
}

.mobile-user-card {
  background: #e6f8ff;
  border-radius: 35px;
  padding: 20px;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  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: #ffffff;
}

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

.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-link-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

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

.btn.btn-mobile-logout,
.btn-mobile-logout {
  position: fixed !important;
  bottom: 20px !important;
  left: 15px !important;
  right: 15px !important;
  width: calc(100% - 30px) !important;
  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;
  z-index: 100;
  box-sizing: border-box;
  margin: 0;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn.btn-mobile-logout:hover,
.btn-mobile-logout:hover {
  background-color: #ffe6e6;
  border-color: #ffb3b3;
  color: #ff2d2d;
}

.btn.btn-mobile-logout:focus:not(:focus-visible),
.btn-mobile-logout:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ===== Logout confirmation modal buttons ===== */
#logout-confirm-no,
#logout-confirm-yes {
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
}

/* "No" — outlined ghost. Soft neutral tint. */
#logout-confirm-no:hover {
  background: #f4f7f9 !important;
  cursor: pointer;
}

/* "Yes, Logout" — solid blue gradient. Fade. */
#logout-confirm-yes:hover {
  opacity: 0.8;
  cursor: pointer;
}

#logout-confirm-no:focus:not(:focus-visible),
#logout-confirm-yes:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* --- 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: 62px;
    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: 16px;
  font-weight: 600;
  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: 80px; */
  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;
  transition: border-color 0.15s ease;
}

/* On mobile the visible border lives on the wrapper, not the input — the
   desktop `.custom-form-control:focus` rule changes the input's invisible
   border and has no effect here. Mirror that focus treatment via
   :focus-within so tapping any field shows the brand-blue border. */
.custom-input-group:focus-within {
  border-color: #00a5f1;
}

/* Don't paint the focus ring on disabled fields (Mobile Number is readonly
   and gets a pale-blue tint elsewhere — focusing it shouldn't masquerade
   as editable). */
.custom-input-group:has(.custom-form-control:disabled):focus-within {
  border-color: #e7eef1;
}

.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: 16px;
  color: #303030;
  font-weight: 500;
  background: transparent;
  outline: none !important;
  box-shadow: none !important;
  /* Truncate long values (emails, names) instead of letting them slide under
     the verify badge sitting on the right side of the wrapper. */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* Reserve room on the right when a verify badge is present in the group. */
.custom-input-group:has(.verify-badge) .custom-form-control {
  padding-right: 80px;
}

.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;
  /* Anchor the absolutely-positioned `.gender-indicator` here. Without this
     the indicator escapes to the overlay container and stretches across the
     whole screen on mobile, where its parent is `.gender-border` directly. */
  position: relative;
}

.gender-border .btn-gender {
  border: none;
  /* Transparent so the sliding `.gender-indicator` pill behind the row stays
     visible as it animates between options — opaque white + border-right was
     hiding the indicator and making the control look segmented instead of a
     smooth pill (matches the rental-login modal toggle). */
  background: transparent;
  color: #303030;
  font-size: 14px;
  padding: 12px 10px;
  transition: color 0.3s ease;
  flex: 1;
  border-radius: 0;
  position: relative;
  z-index: 1;
}

.gender-border .btn-gender:first-child {
  border-radius: 12px 0 0 12px;
}

.gender-border .btn-gender:last-child {
  border-radius: 0 12px 12px 0;
}

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

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

/* Address proof container - 50% width */
.verified-doc-container-addr {
  width: 50% !important;
  max-width: 100%;
}

@media screen and (min-width: 768px) {
  .verified-doc-container-addr {
    width: 33% !important;
  }

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

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

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

.verified-doc-card img {
  width: 100%;
  height: 140px;
  object-fit: contain;
  border-radius: 8px;
  background: #f8f9fa;
  cursor: zoom-in;
  display: block;
}

@media (max-width: 768px) {
  .verified-doc-card {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  .verified-doc-card img {
    height: 180px;
  }
  .verified-doc-container-addr {
    width: 100% !important;
  }
  #kycOverlay .mobile-overlay-content {
    padding-top: 24px;
  }
  #contactOverlay .mobile-overlay-content {
    padding-top: 5px;
  }
}

/* KYC verified image lightbox */
.kyc-img-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.kyc-img-lightbox.active {
  display: flex;
}

.kyc-img-lightbox img {
  max-width: 95%;
  max-height: 90vh;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.kyc-img-lightbox-close {
  position: absolute !important;
  top: 20px;
  right: 25px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.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) {
  .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;
  }
}

/* Contact Us Overlay Cards */
.contact-card {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #E6F8FF;
  border-radius: 20px;
  padding: 18px 20px;
  margin-bottom: 15px;
  text-decoration: none;
  width: 100%;
  max-width: 420px;
}

.contact-card:hover {
  text-decoration: none;
  opacity: 0.85;
}

.contact-card-icon {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.contact-card-info {
  display: flex;
  flex-direction: column;
}

.contact-card-label {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #6b7a82;
}

.contact-card-value {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #303030;
}

/* Guest user layouts (hides sidebar, centers content) */
body.is-guest .profile-left-col {
  display: none !important;
}

body.is-guest .pl-custom {
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto !important;
  padding-left: 15px !important;
  flex: 0 0 100% !important;
}

body.is-guest .pl-custom .contact-card {
  max-width: 100% !important;
}