/* ============================================================
 * File Name   : parveen-profile.css
 * Version     : 3.2.8 FINAL (Overlay scroll fixed + Button not too low + Safe)
 * Path        : wp-content/plugins/parveen-user-profile/assets/css/parveen-profile.css
 *
 * Fix:
 * ✅ Standalone profile pages remain full-screen popup (as before)
 * ✅ Overlay mode: fields/photo scroll (real app feel)
 * ✅ Message/Save button stays pinned, but slightly above bottom
 * ✅ No aggressive html/body reset (prevents login/input issues sitewide)
 * ✅ Layering: chat above profile overlay
 * ============================================================ */


/* ============================================================
 * BASE (Scoped - NOT global html/body)
 * ============================================================ */
.pkd-page,
#pkd-profile-overlay {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial;
}


/* ============================================================
 * PAGE-AS-POPUP WRAPPER (Standalone pages)
 * ============================================================ */
.pkd-page {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;

  background: #000;

  z-index: 9999;

  display: flex;
  flex-direction: column;

  animation: none !important;

  overflow: hidden;

  touch-action: manipulation;
  overscroll-behavior: contain;

  -webkit-user-select: none;
  user-select: none;
}


/* ============================================================
 * ✅ OVERLAY MODE (IMPORTANT)
 * When profile is inside /app overlay:
 * - pkd-page must take full height
 * - Scroll MUST be inside .pkd-popup-content
 * ============================================================ */
body.pkd-overlay-open .pkd-page{
  position: relative !important;
  inset: auto !important;

  width: 100% !important;
  height: 100% !important;          /* ✅ was auto -> breaks scroll */
  min-height: 100% !important;

  z-index: auto !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;       /* body/overlay won't scroll */
}


/* ============================================================
 * TOP BACK BAR
 * ============================================================ */
.pkd-back-btn {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 20;

  font-size: 26px;
  color: #fff;
  padding: 14px 18px;

  cursor: pointer;
  user-select: none;

  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


/* ============================================================
 * MAIN CONTENT AREA (THIS MUST SCROLL)
 * ============================================================ */
.pkd-popup-content {
  flex: 1 1 auto;
  min-height: 0;                      /* ✅ required for flex scroll */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 120px;              /* standalone default */
}

/* Overlay: give more space because footer pinned */
body.pkd-overlay-open .pkd-popup-content{
  padding-bottom: 160px !important;
}


/* ============================================================
 * PHOTO AREA
 * ============================================================ */
.pkd-photo-box,
.pkd-photo-box-edit {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.pkd-photo-box img,
.pkd-photo-box-edit img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ============================================================
 * CHANGE PHOTO BUTTON
 * ============================================================ */
.pkd-change-photo-btn {
  position: absolute;
  bottom: 14px;
  right: 18px;

  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 14px;

  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
}


/* ============================================================
 * UPLOAD BUTTON
 * ============================================================ */
.pkd-upload-photo-btn{
  position: absolute;
  bottom: 14px;
  right: 18px;

  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;

  cursor: pointer;
  user-select: none;

  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.35);

  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}


/* ============================================================
 * UPLOAD PROGRESS
 * ============================================================ */
.pkd-upload-progress{
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);

  z-index: 5;
}

.pkd-upload-percent{
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
}


/* ============================================================
 * NAME & STATUS
 * ============================================================ */
.pkd-name-box {
  margin: 16px 18px 6px;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

.pkd-status-box {
  margin: 0 18px 18px;
  font-size: 14px;
  color: #fff;
  opacity: 0.85;
}


/* ============================================================
 * PROFILE FIELDS
 * ============================================================ */
.pkd-fields-box { padding: 0 18px; }

.pkd-field-line {
  margin: 10px 0;
  font-size: 16px;
  color: #fff;
  opacity: 0.9;
  line-height: 1.4;
}


/* ============================================================
 * EDIT FORM
 * ============================================================ */
#pkd-edit-form { padding: 12px 18px; }

#pkd-edit-form label {
  display: block;
  margin-top: 14px;
  font-size: 14px;
  color: #fff;
  opacity: 0.6;
}

#pkd-edit-form input,
#pkd-edit-form textarea {
  width: 100%;
  margin-top: 6px;
  padding: 12px 10px;

  background: rgba(255,255,255,0.08);
  color: #fff;

  border: none;
  border-radius: 8px;
  outline: none;
}

#pkd-edit-form textarea {
  min-height: 80px;
  resize: vertical;
}


/* ============================================================
 * FOOTER (BUTTON BAR)
 * Standalone: fixed
 * Overlay: fixed + slightly above bottom
 * ============================================================ */
.pkd-popup-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  width: 100%;

  padding: 12px 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  z-index: 25;
}

/* ✅ Overlay mode button position (NOT too low) */
body.pkd-overlay-open .pkd-popup-footer{
  z-index: 9500;

  /* ✅ keep slightly above bottom + safe area */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;

  padding: 10px 0 !important;
  background: rgba(0,0,0,0.55);
}


/* ============================================================
 * PRIMARY BUTTON
 * ============================================================ */
.pkd-aqua-btn {
  width: 90%;
  margin: 0 auto;

  display: block;
  text-align: center;

  padding: 16px 0;
  border-radius: 14px;

  background: #1ad6ff;
  color: #000;

  font-size: 17px;
  font-weight: 700;
  border: none;

  cursor: pointer;
}

.pkd-aqua-btn:active { transform: scale(0.98); }


/* ============================================================
 * TOAST
 * ============================================================ */
.pkd-toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);

  background: #111;
  color: #fff;
  padding: 12px 18px;
  border-radius: 10px;

  font-size: 14px;
  opacity: 0;

  transition: opacity 0.3s ease;
  z-index: 99999;
}
.pkd-toast.show { opacity: 1; }


/* ============================================================
 * SAVING OVERLAY
 * ============================================================ */
#pkd-saving-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;

  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  display: flex;
  align-items: center;
  justify-content: center;

  animation: none !important;
}

.pkd-saving-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;

  background: rgba(20, 20, 20, 0.9);
  padding: 22px 26px;
  border-radius: 16px;

  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

.pkd-spinner {
  width: 42px;
  height: 42px;

  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: #1ad6ff;

  animation: pkd_spin 0.8s linear infinite;
}
@keyframes pkd_spin { to { transform: rotate(360deg); } }

.pkd-saving-text {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  opacity: 0.9;
  letter-spacing: 0.2px;
}


/* ============================================================
 * PICKER UI (as-is)
 * ============================================================ */
.pkd-fake-input {
  margin-top: 6px;
  padding: 12px 12px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: rgba(255,255,255,0.08);
  border-radius: 8px;

  color: #fff;
  font-size: 15px;

  cursor: pointer;
}

.pkd-picker-arrow { font-size: 20px; opacity: 0.6; }

.pkd-picker-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;

  background: rgba(0,0,0,0.70);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  display: flex;
  align-items: flex-end;
}

.pkd-picker-sheet {
  width: 100%;
  background: #0d0d0d;

  border-radius: 18px 18px 0 0;
  padding: 18px 16px 14px;

  animation: none !important;
}

.pkd-picker-title {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 14px;
}

.pkd-picker-options {
  max-height: 50vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.pkd-picker-option,
.pkd-wheel-item {
  padding: 14px 12px;
  text-align: center;

  font-size: 16px;
  color: #fff;

  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.pkd-picker-option:last-child,
.pkd-wheel-item:last-child { border-bottom: none; }

.pkd-picker-option.active,
.pkd-wheel-item.active {
  color: #1ad6ff;
  font-weight: 700;
  background: rgba(26,214,255,0.08);
}

.pkd-wheel {
  max-height: 50vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.pkd-picker-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.pkd-picker-actions button {
  flex: 1;
  padding: 12px 0;

  border-radius: 10px;
  border: none;

  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.pkd-picker-cancel { background: rgba(255,255,255,0.12); color: #fff; }
.pkd-picker-ok { background: #1ad6ff; color: #000; }


/* ============================================================
 * Presence UI (as-is)
 * ============================================================ */
.pkd-presence {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pkd-presence-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.35);
}
.pkd-dot-online {
  background: #22c55e;
  box-shadow: 0 0 10px rgba(34,197,94,0.35), 0 0 0 2px rgba(0,0,0,0.35);
}
.pkd-dot-offline {
  background: #111;
  border: 1px solid rgba(255,255,255,0.22);
}


/* ============================================================
 * Inline photo error badge
 * ============================================================ */
.pkd-photo-error {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 9;

  padding: 8px 12px;
  border-radius: 14px;

  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  font-size: 13px;
  font-weight: 600;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
  display: none;
}


/* ============================================================
 * Layering helpers
 * ============================================================ */
#pkd-profile-overlay{
  position: fixed;
  inset: 0;
  z-index: 9000;
}

/* Chat above profile */
#sl-chat-app{
  position: fixed;
  inset: 0;
  z-index: 10000;
}


/* ============================================================
 * PROFILE VIEW STYLE (chips + card) — RESTORE (Fix missing fields)
 * ============================================================ */

/* Sometimes theme CSS collapses these blocks; force visibility */
.pkd-fields-box,
.pkd-profile-card,
.pkd-info-block,
.pkd-info-row,
.pkd-highlight-row{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Chips row (Age/Role etc summary chips) */
.pkd-highlight-row {
  display: flex !important;
  gap: 12px;
  padding: 12px 18px 6px;
}

.pkd-chip {
  flex: 1;
  background: linear-gradient(135deg, #1ad6ff22, #1ad6ff10);
  border: 1px solid rgba(26,214,255,0.35);
  border-radius: 14px;
  padding: 10px 12px;
  text-align: center;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.pkd-chip-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.5px;
  opacity: 0.7;
  color: #fff;
}

.pkd-chip-value {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #1ad6ff;
  margin-top: 2px;
}

/* Card that contains Bio / Gender / Height / Weight etc */
.pkd-profile-card {
  margin: 10px 14px 20px;
  padding: 14px 14px 4px;

  background: rgba(255,255,255,0.04);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.pkd-info-block {
  padding: 10px 6px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.pkd-info-title {
  font-size: 13px;
  opacity: 0.65;
  margin-bottom: 6px;
  color: #fff;
}

.pkd-info-text {
  font-size: 15px;
  line-height: 1.5;
  color: #fff;
}

.pkd-info-row {
  display: flex !important;
  justify-content: space-between;
  align-items: center;

  padding: 12px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.pkd-info-row:last-child { border-bottom: none; }

.pkd-info-row span {
  font-size: 14px;
  opacity: 0.65;
  color: #fff;
}

.pkd-info-row strong {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

/* Mobile spacing */
@media (max-width: 768px) {
  .pkd-highlight-row { padding-top: 10px; }
  .pkd-profile-card { margin-bottom: 24px; }
}