/* ============================================================
   PN Web App — Mobile UI layer  v2
   ============================================================ */

:root {
  --topbar-h:  56px;
  --bn-h:      82px; /* floating pill height (~56px) + margin-bottom 8px + breathing room */
}

/* ── Kill admin bar ── */
#wpadminbar { display: none !important; }
html        { margin-top: 0 !important; }

/* ── Ensure [hidden] elements stay hidden even with inline display styles ── */
[hidden] { display: none !important; }

/* ── Remove blue tap flash on all interactive elements ── */
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) { outline: none; }

/* ── Skip link ── */
.pn-skip-link {
  position: absolute; left: -9999px; top: .5rem;
  background: #D4B27A; color: #0E1A2B;
  padding: .5rem 1rem; border-radius: 6px;
  font-weight: 600; font-size: 14px; z-index: 9999;
  text-decoration: none; font-family: Inter, sans-serif;
}
.pn-skip-link:focus { left: .5rem; }

/* ── Content fade ── */
@keyframes pn-fadein { from { opacity: 0; } to { opacity: 1; } }
#content { opacity: 0; transition: opacity .2s ease; }
#content.pn-ready { opacity: 1; }
@media (max-width: 1023px) {
  #content { opacity: 1 !important; animation: pn-fadein .22s ease both; }
}

/* ── Mobile layout: push content below fixed top bar ── */
@media (max-width: 1023px) {
  /* Lock header to 56px and fix position — beats pashtun-nikah.css */
  .pn-site-header {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    height: var(--topbar-h) !important;
    z-index: 999;
  }

  /* Kill the old dropdrop logo shape completely on mobile */
  .pn-logo-wrapper,
  .pn-logo-wrapper::after { display: none !important; }

  /* Kill old desktop nav inner padding */
  .pn-inner { padding-left: 0 !important; }

  #page           { padding-top: var(--topbar-h); }
  body            { padding-bottom: var(--bn-h); }
  .pn-site-footer { display: none; }
}

/* ── Bottom nav: hidden on desktop ── */
.pn-bottom-nav { display: none; }
@media (max-width: 1023px) { .pn-bottom-nav { display: flex; } }

/* ── Page spacing ── */
@media (max-width: 1023px) {
  .pn-page         { padding: 1.25rem .875rem 2rem; }
  .pn-container,
  .pn-container-sm { padding-left: .875rem; padding-right: .875rem; }
}

/* ── Touch-friendly forms ── */
@media (max-width: 1023px) {
  input, select, textarea { font-size: 16px !important; }
  .pn-field input,
  .pn-field select,
  .pn-field textarea { min-height: 48px; padding: .75rem 1rem; border-radius: 10px; }
  .pn-btn { min-height: 50px; font-size: .95rem; border-radius: 12px; }
  button, input[type="submit"], input[type="button"] { min-height: 44px; }
  .pn-card    { border-radius: 16px; padding: 1.375rem 1.25rem; }
  .pn-card-lg { padding: 1.5rem 1.25rem; }
}

/* ── Login page ── */
@media (max-width: 1023px) {
  .pn-login-wrap {
    padding: 1.5rem .875rem 2rem;
    min-height: calc(100svh - var(--topbar-h) - var(--bn-h));
    display: flex; align-items: flex-start; justify-content: center;
  }
  .pn-login-inner { width: 100%; max-width: 100%; }
}

/* ── Push notification banner ── */
#pn-push-banner {
  position: fixed; bottom: 96px; left: 12px; right: 12px; /* above floating pill nav */
  background: #15243A; border: 1px solid rgba(212,178,122,.3); border-radius: 16px;
  padding: 14px 16px; z-index: 1300; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4); transform: translateY(20px); opacity: 0;
  pointer-events: none; transition: transform .3s, opacity .3s;
}
#pn-push-banner.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
#pn-push-banner p { color: rgba(255,255,255,.85); font-size: 13px; margin: 0; }
.pn-push-actions { display: flex; gap: 8px; }
.pn-push-allow {
  background: #D4B27A; color: #0E1A2B; border: none; border-radius: 20px;
  padding: 7px 18px; font-weight: 600; font-size: 13px; cursor: pointer; min-height: 36px;
}
.pn-push-dismiss {
  background: transparent; color: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.2); border-radius: 20px;
  padding: 7px 14px; font-size: 13px; cursor: pointer; min-height: 36px;
}
#pn-a2hs {
  position: fixed; bottom: 96px; left: 12px; right: 12px; /* above floating pill nav */
  background: #15243A; border: 1px solid rgba(212,178,122,.2); border-radius: 16px;
  padding: 12px 14px; z-index: 1300; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4); transform: translateY(20px); opacity: 0;
  pointer-events: none; transition: transform .3s, opacity .3s;
}
#pn-a2hs.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
#pn-a2hs span  { flex: 1; color: rgba(255,255,255,.85); font-size: 13px; }
#pn-a2hs-ok   { background: #D4B27A; color: #0E1A2B; border: none; border-radius: 16px; padding: 6px 14px; font-weight: 600; font-size: 13px; cursor: pointer; min-height: 36px; white-space: nowrap; }
#pn-a2hs-no   { background: transparent; border: none; color: rgba(255,255,255,.4); font-size: 18px; cursor: pointer; padding: 4px 6px; min-height: 36px; min-width: 36px; }

/* ── Desktop nav active ── */
.pn-nav-active { color: #D4B27A !important; }

/* ============================================================
   DARK THEME  ·  html.pn-dark
   Navy-black palette — gold accents preserved
   ============================================================ */

html.pn-dark {
  color-scheme: dark;
  --pnp-paper:     #142035;
  --pnp-ink:       #E8D4AE;
  --pnp-mute:      #8B96A8;
  --pnp-line:      rgba(255,255,255,.1);
  --pnp-cream:     #080F1C;
  --pnp-gold-tint: rgba(212,178,122,.1);
}

/* Page & body backgrounds */
html.pn-dark body,
html.pn-dark #page { background: #080F1C !important; color: #E8D4AE; }

html.pn-dark .pn-page,
html.pn-dark .pn-settings-page,
html.pn-dark .pn-browse-page,
html.pn-dark .pn-requests-page,
html.pn-dark .pn-feedback-page,
html.pn-dark .pn-messages-page,
html.pn-dark .pn-member-profile-page,
html.pn-dark .pn-notif-page,
html.pn-dark .pn-cv-page,
html.pn-dark main.pn-page { background: #080F1C !important; }

/* White cards → dark navy */
html.pn-dark .pn-req-card,
html.pn-dark .pn-settings-card,
html.pn-dark .pn-settings-info-card,
html.pn-dark .pn-settings-list,
html.pn-dark .pn-settings-item,
html.pn-dark .pn-token-card,
html.pn-dark .pn-referral-card,
html.pn-dark .pn-fb-card,
html.pn-dark .pn-notif-card,
html.pn-dark .pn-cv-card,
html.pn-dark .pn-mp-section,
html.pn-dark .pn-act-stats,
html.pn-dark .pn-credit-bar,
html.pn-dark .pn-viewer-card,
html.pn-dark .pn-conv-item,
html.pn-dark .pn-thread-header,
html.pn-dark .pn-send-form,
html.pn-dark .pn-modal-sheet { background: #142035 !important; border-color: rgba(255,255,255,.07) !important; }

html.pn-dark .pn-wali-reveal { background: rgba(212,178,122,.07) !important; border-color: rgba(212,178,122,.2) !important; }

/* Slight card shade for list items */
html.pn-dark .pn-settings-link:hover,
html.pn-dark .pn-settings-link:active { background: rgba(255,255,255,.04) !important; }

/* Inputs & selects */
html.pn-dark input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
html.pn-dark select,
html.pn-dark textarea {
  background: #1B2A4A !important;
  color: #E8D4AE !important;
  border-color: rgba(255,255,255,.15) !important;
}
html.pn-dark input::placeholder,
html.pn-dark textarea::placeholder { color: rgba(232,212,174,.4) !important; }

/* Primary text */
html.pn-dark .pn-browse-title,
html.pn-dark .pn-settings-header h1,
html.pn-dark .pn-sic-value,
html.pn-dark .pn-settings-label,
html.pn-dark .pn-token-count,
html.pn-dark .pn-fb-title,
html.pn-dark .pn-req-name,
html.pn-dark .pn-viewer-name,
html.pn-dark .pn-thread-name,
html.pn-dark .pn-wali-value,
html.pn-dark .pn-wc-id,
html.pn-dark .pn-mp-section h2,
html.pn-dark .pn-mp-detail-val,
html.pn-dark .pn-conv-name,
html.pn-dark .pn-notif-title,
html.pn-dark h1, html.pn-dark h2, html.pn-dark h3 { color: #E8D4AE !important; }

/* Muted text */
html.pn-dark .pn-req-meta,
html.pn-dark .pn-settings-subtitle,
html.pn-dark .pn-sic-label,
html.pn-dark .pn-settings-sublabel,
html.pn-dark .pn-token-sub,
html.pn-dark .pn-fb-body,
html.pn-dark .pn-browse-eyebrow,
html.pn-dark .pn-viewer-meta,
html.pn-dark .pn-conv-preview,
html.pn-dark .pn-mp-text,
html.pn-dark .pn-mp-detail-label,
html.pn-dark .pn-notif-body,
html.pn-dark .pn-notif-time,
html.pn-dark p { color: #8B96A8 !important; }

/* Tabs */
html.pn-dark .pn-req-tabs,
html.pn-dark .pn-pn-req-tabs { border-bottom-color: rgba(255,255,255,.1) !important; }
html.pn-dark .pn-req-tab { color: #8B96A8 !important; background: none !important; border-color: transparent !important; }
html.pn-dark .pn-req-tab.is-active { color: #D4B27A !important; border-bottom-color: #D4B27A !important; }

/* Chat bubbles */
html.pn-dark .pn-bubble-row.theirs .pn-bubble { background: #1B2A4A !important; color: #E8D4AE !important; }
html.pn-dark .pn-thread-messages { background: #080F1C !important; }
html.pn-dark .pn-send-input { background: #1B2A4A !important; color: #E8D4AE !important; border-color: rgba(255,255,255,.12) !important; }

/* Browse card avatars & empty states */
html.pn-dark .pn-profile-card,
html.pn-dark article.pn-profile-card { background: #142035 !important; border-color: rgba(255,255,255,.07) !important; }
html.pn-dark .pn-wc-tag { background: rgba(255,255,255,.07) !important; color: #8B96A8 !important; }
html.pn-dark .pn-empty-state { color: #8B96A8 !important; }

/* Modals */
html.pn-dark .pn-modal-overlay { background: rgba(0,0,0,.7) !important; }
html.pn-dark .pn-modal-header { border-bottom-color: rgba(255,255,255,.07) !important; }
html.pn-dark .pn-modal-row-label { color: #8B96A8 !important; }
html.pn-dark .pn-modal-row-value { color: #E8D4AE !important; }

/* Top bar already dark — keep it but slightly adjust */
html.pn-dark .pn-site-header { background: #040A14 !important; }

/* Bottom nav */
html.pn-dark .pn-bottom-nav { background: #040A14 !important; border-top-color: rgba(212,178,122,.15) !important; }

/* Filter sheet */
html.pn-dark .pn-filter-sheet-inner,
html.pn-dark .pn-filter-sheet-body { background: #142035 !important; }
html.pn-dark .pn-fsb-label { color: #8B96A8 !important; }
html.pn-dark .pn-filter-select,
html.pn-dark .pn-filter-input { background: #1B2A4A !important; color: #E8D4AE !important; border-color: rgba(255,255,255,.15) !important; }

/* Upgrade strip */
html.pn-dark .pn-req-upgrade-strip { background: rgba(212,178,122,.06) !important; border-color: rgba(212,178,122,.2) !important; }
html.pn-dark .pn-req-upgrade-left { color: #E8D4AE !important; }

/* Referral card input */
html.pn-dark .pn-referral-input-row input { background: #1B2A4A !important; color: #E8D4AE !important; }

/* Profile CV */
html.pn-dark .pn-cv-label { color: #8B96A8 !important; }
html.pn-dark .pn-cv-value { color: #E8D4AE !important; }
html.pn-dark .pn-cv-bio { color: #C8D4E0 !important; }
html.pn-dark .pn-cv-row { border-color: rgba(255,255,255,.06) !important; }
html.pn-dark .pn-cv-trait-chip { background: rgba(212,178,122,.08) !important; border-color: rgba(212,178,122,.2) !important; color: #E8D4AE !important; }

/* pnp-* profile template elements (hardcoded colours not covered by var() redef) */
html.pn-dark .pnp-topbar-id,
html.pn-navy .pnp-topbar-id { color: #FFFFFF !important; }

/* Browse card profile ID — gold is unreadable on dark card backgrounds */
html.pn-dark .pn-card-id,
html.pn-navy .pn-card-id { color: #FFFFFF !important; }

html.pn-dark .pnp-bio { color: #C8BAA8 !important; }
html.pn-dark .pnp-action-bar { background: rgba(8,15,28,.95) !important; border-top-color: rgba(255,255,255,.08) !important; }
html.pn-dark .pnp-topbar { border-bottom-color: rgba(255,255,255,.08) !important; }
html.pn-dark .pnp-sheet { background: #142035 !important; }
html.pn-dark .pnp-sheet-handle { background: rgba(255,255,255,.15) !important; }
html.pn-dark .pnp-sheet-btn { color: #E8D4AE !important; border-top-color: rgba(255,255,255,.08) !important; }
html.pn-dark .pnp-sheet-btn--danger { color: #F87171 !important; }

/* Browse filter bar */
html.pn-dark .pn-filter-bar { background: #142035 !important; border-color: rgba(255,255,255,.08) !important; }
html.pn-dark .pnp-filter-pill--default,
html.pn-dark .pn-filter-pill--default { background: rgba(255,255,255,.07) !important; color: #8B96A8 !important; }

/* ============================================================
   NAVY THEME  ·  html.pn-navy
   Midnight-blue palette — electric blue & gold accents
   ============================================================ */

html.pn-navy {
  color-scheme: dark;
  --pnp-paper:     #0C1A35;
  --pnp-ink:       #D6E4F7;
  --pnp-mute:      #6B87AB;
  --pnp-line:      rgba(100,160,255,.1);
  --pnp-cream:     #060D1F;
  --pnp-gold-tint: rgba(100,160,255,.08);
}

/* Page backgrounds */
html.pn-navy body,
html.pn-navy #page { background: #060D1F !important; color: #D6E4F7; }

html.pn-navy .pn-page,
html.pn-navy .pn-settings-page,
html.pn-navy .pn-browse-page,
html.pn-navy .pn-requests-page,
html.pn-navy .pn-feedback-page,
html.pn-navy .pn-messages-page,
html.pn-navy .pn-member-profile-page,
html.pn-navy .pn-notif-page,
html.pn-navy .pn-cv-page,
html.pn-navy main.pn-page { background: #060D1F !important; }

/* Cards */
html.pn-navy .pn-req-card,
html.pn-navy .pn-settings-card,
html.pn-navy .pn-settings-info-card,
html.pn-navy .pn-settings-list,
html.pn-navy .pn-settings-item,
html.pn-navy .pn-token-card,
html.pn-navy .pn-referral-card,
html.pn-navy .pn-fb-card,
html.pn-navy .pn-notif-card,
html.pn-navy .pn-cv-card,
html.pn-navy .pn-mp-section,
html.pn-navy .pn-act-stats,
html.pn-navy .pn-credit-bar,
html.pn-navy .pn-viewer-card,
html.pn-navy .pn-conv-item,
html.pn-navy .pn-thread-header,
html.pn-navy .pn-send-form,
html.pn-navy .pn-modal-sheet { background: #0C1A35 !important; border-color: rgba(100,160,255,.1) !important; }

html.pn-navy .pn-wali-reveal { background: rgba(212,178,122,.07) !important; border-color: rgba(212,178,122,.2) !important; }
html.pn-navy .pn-settings-link:hover,
html.pn-navy .pn-settings-link:active { background: rgba(100,160,255,.05) !important; }

/* Inputs */
html.pn-navy input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
html.pn-navy select,
html.pn-navy textarea {
  background: #0E1F3D !important;
  color: #D6E4F7 !important;
  border-color: rgba(100,160,255,.2) !important;
}
html.pn-navy input::placeholder,
html.pn-navy textarea::placeholder { color: rgba(214,228,247,.35) !important; }

/* Primary text */
html.pn-navy .pn-browse-title,
html.pn-navy .pn-settings-header h1,
html.pn-navy .pn-sic-value,
html.pn-navy .pn-settings-label,
html.pn-navy .pn-token-count,
html.pn-navy .pn-fb-title,
html.pn-navy .pn-req-name,
html.pn-navy .pn-viewer-name,
html.pn-navy .pn-thread-name,
html.pn-navy .pn-wali-value,
html.pn-navy .pn-wc-id,
html.pn-navy .pn-mp-section h2,
html.pn-navy .pn-mp-detail-val,
html.pn-navy .pn-conv-name,
html.pn-navy .pn-notif-title,
html.pn-navy h1, html.pn-navy h2, html.pn-navy h3 { color: #D6E4F7 !important; }

/* Muted text */
html.pn-navy .pn-req-meta,
html.pn-navy .pn-settings-subtitle,
html.pn-navy .pn-sic-label,
html.pn-navy .pn-settings-sublabel,
html.pn-navy .pn-token-sub,
html.pn-navy .pn-fb-body,
html.pn-navy .pn-browse-eyebrow,
html.pn-navy .pn-viewer-meta,
html.pn-navy .pn-conv-preview,
html.pn-navy .pn-mp-text,
html.pn-navy .pn-mp-detail-label,
html.pn-navy .pn-notif-body,
html.pn-navy .pn-notif-time,
html.pn-navy p { color: #6B87AB !important; }

/* Blue accent for active states */
html.pn-navy .pn-req-tab.is-active { color: #5B9EE8 !important; border-bottom-color: #5B9EE8 !important; }
html.pn-navy .pn-req-tab { color: #6B87AB !important; background: none !important; border-color: transparent !important; }
html.pn-navy .pn-req-tabs { border-bottom-color: rgba(100,160,255,.12) !important; }

/* Chat */
html.pn-navy .pn-bubble-row.mine .pn-bubble { background: #1A3A70 !important; color: #D6E4F7 !important; }
html.pn-navy .pn-bubble-row.theirs .pn-bubble { background: #0C1A35 !important; color: #D6E4F7 !important; }
html.pn-navy .pn-thread-messages { background: #060D1F !important; }
html.pn-navy .pn-send-input { background: #0E1F3D !important; color: #D6E4F7 !important; border-color: rgba(100,160,255,.2) !important; }

/* Profile cards */
html.pn-navy .pn-profile-card,
html.pn-navy article.pn-profile-card { background: #0C1A35 !important; border-color: rgba(100,160,255,.1) !important; }
html.pn-navy .pn-wc-tag { background: rgba(100,160,255,.1) !important; color: #6B87AB !important; }
html.pn-navy .pn-empty-state { color: #6B87AB !important; }

/* Modals */
html.pn-navy .pn-modal-overlay { background: rgba(0,5,20,.75) !important; }
html.pn-navy .pn-modal-header { border-bottom-color: rgba(100,160,255,.1) !important; }
html.pn-navy .pn-modal-row-label { color: #6B87AB !important; }
html.pn-navy .pn-modal-row-value { color: #D6E4F7 !important; }

/* Header & bottom nav */
html.pn-navy .pn-site-header { background: #030812 !important; }
html.pn-navy .pn-bottom-nav { background: #030812 !important; border-top-color: rgba(91,158,232,.15) !important; }

/* Bottom nav icon active — blue accent */
html.pn-navy .pn-bn-link.is-active { color: #5B9EE8 !important; }

/* Filter sheet */
html.pn-navy .pn-filter-sheet-inner,
html.pn-navy .pn-filter-sheet-body { background: #0C1A35 !important; }
html.pn-navy .pn-fsb-label { color: #6B87AB !important; }
html.pn-navy .pn-filter-select,
html.pn-navy .pn-filter-input { background: #0E1F3D !important; color: #D6E4F7 !important; border-color: rgba(100,160,255,.2) !important; }

/* Upgrade strip */
html.pn-navy .pn-req-upgrade-strip { background: rgba(91,158,232,.06) !important; border-color: rgba(91,158,232,.2) !important; }
html.pn-navy .pn-req-upgrade-left { color: #D6E4F7 !important; }

/* Referral */
html.pn-navy .pn-referral-input-row input { background: #0E1F3D !important; color: #D6E4F7 !important; }

/* Profile CV */
html.pn-navy .pn-cv-label { color: #6B87AB !important; }
html.pn-navy .pn-cv-value { color: #D6E4F7 !important; }
html.pn-navy .pn-cv-bio { color: #B8C8DC !important; }
html.pn-navy .pn-cv-row { border-color: rgba(255,255,255,.05) !important; }
html.pn-navy .pn-cv-trait-chip { background: rgba(91,158,232,.08) !important; border-color: rgba(91,158,232,.2) !important; color: #D6E4F7 !important; }

/* pnp-* profile template elements */
html.pn-navy .pnp-bio { color: #B0C8E8 !important; }
html.pn-navy .pnp-action-bar { background: rgba(6,13,31,.95) !important; border-top-color: rgba(100,160,255,.1) !important; }
html.pn-navy .pnp-topbar { border-bottom-color: rgba(100,160,255,.1) !important; }
html.pn-navy .pnp-sheet { background: #0C1A35 !important; }
html.pn-navy .pnp-sheet-handle { background: rgba(100,160,255,.2) !important; }
html.pn-navy .pnp-sheet-btn { color: #D6E4F7 !important; border-top-color: rgba(100,160,255,.1) !important; }
html.pn-navy .pnp-sheet-btn--danger { color: #F87171 !important; }

/* Browse filter bar */
html.pn-navy .pn-filter-bar { background: #0C1A35 !important; border-color: rgba(100,160,255,.1) !important; }
html.pn-navy .pn-filter-pill--default { background: rgba(100,160,255,.08) !important; color: #6B87AB !important; }

/* City dropdown (shared between registration, edit-profile, browse filter) */
.pn-city-select {
  display: none;
  border: 1px solid var(--gold, #D4B27A);
  background: var(--cream, #F6F1E8);
  border-radius: var(--radius, 8px);
  padding: .75rem 1rem;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
}