@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap');

/* ── BOOTSTRAP PRIMARY OVERRIDE ── */
:root {
  --bs-font-sans-serif: 'Plus Jakarta Sans', system-ui, sans-serif;
  --bs-primary: #D4623A;
  --bs-primary-rgb: 212,98,58;
  --bs-link-color: #D4623A;
  --bs-link-hover-color: #B84E2A;
  --bs-border-radius: 10px;
  --bs-border-radius-lg: 16px;

  --pd-cream:   #FDF7EF;
  --pd-cream-2: #F5ECD9;
  --pd-terra:   #D4623A;
  --pd-terra-d: #B84E2A;
  --pd-terra-l: #F0825C;
  --pd-forest:  #2B4A3C;
  --pd-gold:    #E8A83A;
  --pd-ink:     #1C1812;
  --pd-muted:   #6B6057;
  --pd-border:  rgba(28,24,18,.09);
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--pd-cream);
  color: var(--pd-ink);
  -webkit-font-smoothing: antialiased;
}

/* ── BUTTON OVERRIDES ── */
.btn-primary {
  --bs-btn-bg: var(--pd-terra);
  --bs-btn-border-color: var(--pd-terra);
  --bs-btn-hover-bg: var(--pd-terra-d);
  --bs-btn-hover-border-color: var(--pd-terra-d);
  --bs-btn-active-bg: #a04424;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: 212,98,58;
}
.btn-outline-primary {
  --bs-btn-color: var(--pd-terra);
  --bs-btn-border-color: var(--pd-terra);
  --bs-btn-hover-bg: var(--pd-terra);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: var(--pd-terra);
  --bs-btn-active-bg: var(--pd-terra-d);
  --bs-btn-focus-shadow-rgb: 212,98,58;
}
.btn-success {
  --bs-btn-bg: var(--pd-forest);
  --bs-btn-border-color: var(--pd-forest);
  --bs-btn-hover-bg: #1f3a2d;
}
.form-control:focus, .form-select:focus {
  border-color: var(--pd-terra);
  box-shadow: 0 0 0 .2rem rgba(212,98,58,.15);
}
.form-check-input:checked { background-color: var(--pd-terra); border-color: var(--pd-terra); }

/* ── NAVBAR ── */
.pd-navbar {
  background: rgba(253,247,239,.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--pd-border);
}
.pd-logo-mark {
  width: 34px; height: 34px;
  background: var(--pd-terra);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.pd-brand-text {
  font-family: 'Lora', serif;
  font-size: 1.15rem; font-weight: 600;
  color: var(--pd-ink);
}
.pd-navbar .nav-link { color: var(--pd-muted); font-weight: 500; font-size: .9rem; transition: color .15s; }
.pd-navbar .nav-link:hover { color: var(--pd-ink); }

/* ── TYPOGRAPHY ── */
.pd-display { font-family: 'Lora', serif; font-weight: 600; line-height: 1.18; letter-spacing: -.02em; }
.pd-display em { font-style: italic; color: var(--pd-terra); }
.text-muted { color: var(--pd-muted) !important; }
.fw-500 { font-weight: 500; }
.text-terra { color: var(--pd-terra) !important; }

/* ── AVATARS ── */
.pd-avatar    { width:52px;height:52px;  border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.9rem;  color:#fff; flex-shrink:0; }
.pd-avatar-sm { width:34px;height:34px;  border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.7rem;  color:#fff; flex-shrink:0; }
.pd-avatar-lg { width:64px;height:64px;  border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:1.25rem;color:#fff; flex-shrink:0; }

/* ── CARDS ── */
.pd-card {
  background: #fff;
  border: 1px solid var(--pd-border);
  border-radius: 16px;
  transition: transform .18s, box-shadow .18s;
}
.pd-card-hover:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(28,24,18,.09); }

/* ── MATCH CARDS ── */
.kid-tag      { font-size:.72rem; background:var(--pd-cream-2); border-radius:6px; padding:2px 8px; color:var(--pd-muted); }
.interest-tag { font-size:.72rem; background:rgba(43,74,60,.08); color:var(--pd-forest); border-radius:6px; padding:2px 8px; }
.dist-badge   { font-size:.72rem; background:rgba(212,98,58,.1); color:var(--pd-terra-d); border-radius:20px; padding:3px 10px; font-weight:600; }
.verified-badge { font-size:.7rem; background:rgba(43,74,60,.1); color:var(--pd-forest); border-radius:20px; padding:2px 10px; font-weight:600; }

/* ── FORM WIZARD ── */
.step-panel   { display:none; }
.step-panel.active { display:block; }
.step-progress { display:flex; gap:6px; margin-bottom:2rem; }
.step-bar     { height:4px; border-radius:2px; background:rgba(28,24,18,.1); flex:1; transition:background .3s; }
.step-bar.done,.step-bar.active { background:var(--pd-terra); }

/* ── OTP INPUT ── */
.otp-group { display:flex; gap:8px; justify-content:center; }
.otp-digit {
  width:48px; height:56px; text-align:center;
  font-size:1.4rem; font-weight:600; border-radius:12px;
  border:1.5px solid var(--pd-border);
  background:#fff; transition:border-color .2s;
}
.otp-digit:focus { border-color:var(--pd-terra); box-shadow:0 0 0 .2rem rgba(212,98,58,.15); outline:none; }

/* ── SEARCH RESULT ── */
.search-blur-card { filter:blur(5px); user-select:none; pointer-events:none; }
.search-lock-overlay {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(253,247,239,.7); border-radius:16px; flex-direction:column; gap:.5rem;
}

/* ── TABS ── */
.nav-tabs { border-bottom:1px solid var(--pd-border); }
.nav-tabs .nav-link { color:var(--pd-muted); border:none; border-bottom:2px solid transparent; font-weight:500; background:none; }
.nav-tabs .nav-link.active { color:var(--pd-terra); border-bottom-color:var(--pd-terra); }
.nav-tabs .nav-link:hover { color:var(--pd-ink); border-bottom-color:rgba(212,98,58,.3); }

/* ── MESSAGES ── */
.pd-conv-list { height:calc(100vh - 130px); overflow-y:auto; border-right:1px solid var(--pd-border); }
.pd-conv-item { padding:14px 16px; cursor:pointer; border-bottom:1px solid var(--pd-border); transition:background .15s; }
.pd-conv-item:hover,.pd-conv-item.active { background:var(--pd-cream-2); }
.pd-chat-window { height:calc(100vh - 130px); display:flex; flex-direction:column; }
.pd-chat-messages { flex:1; overflow-y:auto; padding:1.25rem; display:flex; flex-direction:column; gap:.75rem; }
.pd-bubble { max-width:70%; padding:10px 16px; border-radius:18px; font-size:.9rem; line-height:1.5; word-break:break-word; }
.pd-bubble-mine   { background:var(--pd-terra); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.pd-bubble-theirs { background:#fff; border:1px solid var(--pd-border); color:var(--pd-ink); align-self:flex-start; border-bottom-left-radius:4px; }
.pd-bubble-time   { font-size:.68rem; color:rgba(255,255,255,.65); margin-top:3px; text-align:right; }
.pd-bubble-time-t { font-size:.68rem; color:var(--pd-muted); margin-top:3px; }
.pd-chat-input    { padding:1rem 1.25rem; border-top:1px solid var(--pd-border); background:#fff; display:flex; gap:.75rem; align-items:center; }
.pd-chat-input input { border-radius:100px; border:1.5px solid var(--pd-border); padding:.5rem 1.1rem; flex:1; }
.pd-chat-input input:focus { border-color:var(--pd-terra); box-shadow:0 0 0 .2rem rgba(212,98,58,.12); outline:none; }
.pd-empty { text-align:center; padding:3rem 1rem; color:var(--pd-muted); }
.pd-empty .icon { font-size:2.5rem; margin-bottom:1rem; opacity:.4; }

/* ── HERO ── */
.pd-hero { padding:96px 0 72px; position:relative; overflow:hidden; }
.pd-hero-blob { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; }
.pd-section-tag {
  display:inline-block; background:rgba(212,98,58,.1); color:var(--pd-terra-d);
  border-radius:100px; padding:5px 14px; font-size:.78rem; font-weight:600;
}

/* ── HOW IT WORKS STEPS ── */
.pd-step-num {
  width:40px; height:40px; border-radius:50%; background:var(--pd-terra); color:#fff;
  font-size:.85rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.pd-step-icon {
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* ── FOOTER ── */
.pd-footer { background:var(--pd-ink); color:rgba(255,255,255,.5); }
.pd-footer a { color:rgba(255,255,255,.5); text-decoration:none; transition:color .15s; }
.pd-footer a:hover { color:#fff; }
.pd-footer-title { font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.3); margin-bottom:.75rem; }

/* ── UTILITY ── */
.bg-cream   { background:var(--pd-cream) !important; }
.bg-cream-2 { background:var(--pd-cream-2) !important; }
.border-pd  { border-color:var(--pd-border) !important; }
.rounded-xl { border-radius:16px !important; }
.rounded-2xl{ border-radius:24px !important; }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)} }
@keyframes float1 { 0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)} }
@keyframes float2 { 0%,100%{transform:translateY(0)}50%{transform:translateY(6px)} }
@keyframes pulse  { 0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)} }
.fade-up { animation:fadeUp .5s ease both; }
.fade-up-1 { animation:fadeUp .5s .1s ease both; }
.fade-up-2 { animation:fadeUp .5s .2s ease both; }
.fade-up-3 { animation:fadeUp .5s .3s ease both; }

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .pd-conv-list,.pd-chat-window { height:auto; min-height:300px; }
  .pd-hero { padding:80px 0 48px; }
}