/* ============================================================
   Requirement Details — redesigned page (scoped to .rd-page)
   Ported from: DreamAcco Requirement Details - Desktop / Mobile mockups.
   Follows the same conventions as property-details.css (95dbaa86):
   self-contained variables, .rd-desktop-only / .rd-mobile-only toggling,
   a sticky sidebar on desktop that becomes a fixed bottom bar on mobile.
   ============================================================ */

.rd-page{
  --blue:#0E8AE0;
  --blue-dark:#0A6EB5;
  --blue-tint:#E6F3FC;
  --orange:#FF9A1F;
  --orange-dark:#E5821A;
  --orange-tint:#FFF1E0;
  --pink-tint:#FCE7F1;
  --pink-ink:#A11F66;
  --pink-dot:#D14488;
  --ink:#0B1726;
  --ink-soft:#3A4757;
  --muted:#6B7785;
  --hairline:#E5E9EE;
  --hairline-soft:#EEF1F5;
  --canvas:#F6F8FB;
  --ok-bg:#E8F6EE;
  --ok-ink:#1B7F47;
  --display:"Plus Jakarta Sans","SF Pro Display",system-ui,sans-serif;
  --body:"Inter","SF Pro Text",system-ui,sans-serif;
  --shadow-sm:0 1px 3px rgba(15,30,50,.05);
  --shadow-md:0 8px 24px rgba(15,30,50,.08);

  background:var(--canvas);
  padding:22px 0 60px;
  font-family:var(--body);
  color:var(--ink);
  font-size:16px;
  line-height:1.55;
}
.rd-page,.rd-sticky{ box-sizing:border-box; }
.rd-page *,.rd-page *::before,.rd-page *::after,
.rd-sticky *,.rd-sticky *::before,.rd-sticky *::after{ box-sizing:border-box; }
.rd-page a{ color:var(--blue-dark); text-decoration:none; }
.rd-page a:hover{ color:var(--blue); }
.rd-page button{ font-family:inherit; cursor:pointer; }
.rd-page img{ display:block; max-width:100%; }
.rd-page h1,.rd-page h3,.rd-page p{ margin:0; }

.rd-page .container{ max-width:1180px; margin:0 auto; padding:0 32px; }

/* ---------- Breadcrumb (package output, restyled) ---------- */
.rd-page .breadcrumb{ float:none; position:static; background:none; padding:0; margin:0 0 16px; list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-family:var(--body); font-size:13px; color:var(--muted); border-radius:0; }
.rd-page .breadcrumb-item{ color:var(--muted); }
.rd-page .breadcrumb-item a{ color:var(--muted); }
.rd-page .breadcrumb-item a:hover{ color:var(--blue-dark); }
.rd-page .breadcrumb-item.active{ color:var(--muted); }
.rd-page .breadcrumb-item + .breadcrumb-item{ padding-left:0; }
.rd-page .breadcrumb-item + .breadcrumb-item::before{ content:"\203A"; padding-right:7px; color:var(--muted); opacity:.6; }

/* ---------- Layout ---------- */
.rd-layout{ display:grid; grid-template-columns:1fr 360px; gap:36px; align-items:start; }
.rd-layout > *{ min-width:0; }

/* ---------- Identity hero ---------- */
.rd-hero{ position:relative; background:#fff; border:1px solid var(--hairline-soft); border-radius:20px; box-shadow:var(--shadow-sm); overflow:hidden; }
.rd-hero::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--orange); }
.rd-hero-top{ padding:26px 26px 22px 32px; display:flex; gap:20px; align-items:flex-start; }
.rd-ava{ position:relative; flex-shrink:0; width:86px; height:86px; }
.rd-ava img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.rd-ava .ver{ position:absolute; right:-2px; bottom:-2px; width:28px; height:28px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; border:3px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.rd-id{ flex:1; min-width:0; }
.rd-name-row{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.rd-name{ font-family:var(--display); font-weight:800; font-size:26px; color:var(--ink); letter-spacing:-.02em; }
.rd-occ{ margin-top:4px; font-family:var(--body); font-size:14px; color:var(--muted); }
.rd-chips{ margin-top:12px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rd-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; font-family:var(--body); font-weight:700; font-size:12.5px; }
.rd-chip .d{ width:7px; height:7px; border-radius:4px; }
.rd-chip.ver{ background:var(--ok-bg); color:var(--ok-ink); }
.rd-chip.new{ background:var(--orange); color:#fff; letter-spacing:.05em; text-transform:uppercase; font-size:10.5px; }
.rd-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.rd-icon-btn{ width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:.13s; }
.rd-icon-btn:hover{ border-color:var(--muted); color:var(--ink); }
.rd-icon-btn.fav i.fas{ color:#E4405F; }

/* ---------- Looking for / budget capsules ---------- */
.rd-capsules{ display:grid; grid-template-columns:1.25fr 1fr; gap:14px; margin-top:24px; }
.rd-cap{ border-radius:16px; padding:20px 22px; }
.rd-cap.look{ background:var(--orange-tint); border:1px solid rgba(255,154,31,.22); }
.rd-cap.budget{ background:#fff; border:1px solid var(--hairline); }
.rd-cap .k{ font-family:var(--body); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.rd-cap.look .k{ color:var(--orange-dark); }
.rd-cap.budget .k{ color:var(--muted); }
.rd-cap .v{ margin-top:8px; font-family:var(--display); font-weight:800; font-size:24px; color:var(--ink); letter-spacing:-.02em; }
.rd-cap .v .u{ font-size:14px; color:var(--muted); font-weight:600; margin-left:3px; }

/* ---------- Sections ---------- */
.rd-section{ margin-top:32px; padding-top:32px; border-top:1px solid var(--hairline); }
.rd-page .rd-label{ font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.02em; color:var(--ink); margin-bottom:20px; }

.rd-facts-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.rd-fact{ background:#fff; border:1px solid var(--hairline); border-radius:14px; padding:16px; display:flex; gap:12px; align-items:flex-start; }
.rd-fact.wide{ grid-column:1/-1; }
.rd-fact .ic{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rd-fact .ic.accent{ background:var(--orange-tint); color:var(--orange-dark); }
.rd-fact .ic.plain{ background:var(--canvas); color:var(--ink-soft); }
.rd-fact .label{ font-family:var(--body); font-size:10.5px; color:var(--muted); font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.rd-fact .value{ margin-top:3px; font-family:var(--display); font-weight:800; font-size:15.5px; color:var(--ink); letter-spacing:-.01em; line-height:1.35; }

.rd-about p{ font-family:var(--body); font-size:15px; line-height:1.75; color:var(--ink-soft); max-width:800px; white-space:pre-line; }

.rd-pref-list{ display:flex; flex-wrap:wrap; gap:10px; }
.rd-pref{ display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--hairline); color:var(--ink-soft); padding:10px 16px; border-radius:999px; font-family:var(--body); font-weight:700; font-size:13.5px; }
.rd-pref svg{ color:var(--orange); flex-shrink:0; }

.rd-report{ margin-top:28px; display:inline-flex; align-items:center; gap:8px; background:none; border:1px solid var(--hairline); border-radius:11px; padding:12px 18px; font-family:var(--body); font-weight:700; font-size:13.5px; color:var(--muted); }
.rd-report:hover{ border-color:var(--muted); color:var(--ink-soft); }

/* ---------- Sidebar ---------- */
.rd-sidebar{ position:sticky; top:24px; }
.rd-price-card{ background:#fff; border:1px solid var(--hairline); border-radius:18px; padding:24px; box-shadow:var(--shadow-md); }
.rd-price-card .cap{ font-family:var(--body); font-size:11px; color:var(--muted); font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.rd-price-card .amt{ margin-top:6px; font-family:var(--display); font-weight:800; font-size:30px; color:var(--ink); letter-spacing:-.02em; }
.rd-price-card .amt .u{ font-size:14px; color:var(--muted); font-weight:600; }
.rd-price-card .btn-row{ display:flex; gap:10px; margin-top:18px; }
.rd-price-card .btn-call{ width:54px; height:54px; border-radius:14px; background:#fff; border:1.5px solid var(--hairline); color:var(--ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rd-price-card .btn-call:hover{ border-color:var(--muted); }
.rd-price-card .btn-msg{ flex:1; height:54px; border-radius:14px; border:none; background:var(--orange); color:#fff; font-family:var(--display); font-weight:800; font-size:15.5px; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 8px 20px rgba(255,154,31,.35); }
.rd-price-card .btn-msg:hover{ background:var(--orange-dark); }
.rd-price-card .note{ margin-top:14px; font-family:var(--body); font-size:12px; color:var(--muted); display:flex; align-items:center; gap:7px; }

/* ---------- Owner-viewer CTA (Edit / activate-deactivate / delete) ---------- */
.owner-cta{ margin-top:18px; display:flex; flex-direction:column; gap:8px; }
.owner-cta .row{ display:flex; align-items:center; gap:10px; }
.owner-cta .btn-edit{ flex:1; height:54px; border-radius:14px; border:none; background:var(--orange); color:#fff; font-family:var(--display); font-weight:800; font-size:15.5px; display:flex; align-items:center; justify-content:center; gap:8px; }
.owner-cta .btn-edit:hover{ background:var(--orange-dark); }
.owner-cta .btn-toggle-active{ width:auto; padding:0 16px; height:54px; border-radius:14px; background:#fff; border:1.5px solid var(--hairline); color:var(--ink-soft); font-family:var(--body); font-weight:700; font-size:13.5px; white-space:nowrap; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.owner-cta .btn-toggle-active:hover{ border-color:var(--muted); }
.owner-cta .btn-delete{ margin-top:2px; width:100%; height:42px; border-radius:11px; border:1px solid #F1C9CB; background:#FDF0F1; color:#C0505A; font-family:var(--body); font-weight:700; font-size:13px; }
.owner-cta .btn-delete:hover{ background:#FBE2E4; }
.owner-cta .status{ margin-top:6px; display:flex; align-items:center; gap:7px; font-family:var(--body); font-size:12px; color:var(--ok-ink); font-weight:700; }
.owner-cta .status .d{ width:7px; height:7px; border-radius:50%; background:var(--ok-ink); flex-shrink:0; }
.owner-cta .status.warn{ color:#B6611A; }
.owner-cta .status.warn .d{ background:#B6611A; }

/* ---------- Mobile sticky bottom bar ---------- */
.rd-sticky{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:40; background:#fff; border-top:1px solid var(--hairline-soft); padding:11px 16px calc(11px + env(safe-area-inset-bottom)); box-shadow:0 -6px 20px rgba(15,30,50,.06); }
.rd-sticky .inner{ display:flex; align-items:center; gap:10px; }
.rd-sticky .price{ flex-shrink:0; }
.rd-sticky .price .cap{ font-family:var(--body); font-size:9.5px; color:var(--muted); font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.rd-sticky .price .amt{ font-family:var(--display); font-weight:800; font-size:19px; color:var(--ink); letter-spacing:-.02em; line-height:1.05; }
.rd-sticky .price .amt .u{ font-size:11px; color:var(--muted); font-weight:600; }
.rd-sticky .btn-call{ width:50px; height:50px; border-radius:14px; background:#fff; border:1.5px solid var(--hairline); color:var(--ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rd-sticky .btn-msg{ flex:1; height:50px; border-radius:14px; border:none; background:var(--orange); color:#fff; font-family:var(--display); font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 8px 20px rgba(255,154,31,.4); }
.rd-sticky .owner-cta{ margin-top:0; gap:8px; }
.rd-sticky .owner-cta .btn-edit,
.rd-sticky .owner-cta .btn-toggle-active{ height:50px; font-size:15px; }
.rd-sticky .owner-cta .btn-toggle-active{ padding:0 13px; font-size:12px; }
.rd-sticky .owner-cta .btn-delete{ height:38px; border-radius:10px; font-size:12.5px; margin-top:0; }

/* ---------- Mobile-only subhead (app-style, ported from the Mobile mockup) ---------- */
.rd-mobile-only{ display:none; }
.rd-subhead{ display:flex; align-items:center; gap:10px; padding:0 0 14px; }
.rd-hbtn{ width:38px; height:38px; border-radius:50%; background:#fff; border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; color:var(--ink); flex-shrink:0; }
.rd-hbtn.fav i.fas{ color:#E4405F; }
.rd-subhead .ttl{ flex:1; min-width:0; }
.rd-subhead .ttl .t{ font-family:var(--display); font-weight:800; font-size:15.5px; color:var(--ink); letter-spacing:-.02em; line-height:1.1; }
.rd-subhead .ttl .p{ font-size:10.5px; color:var(--muted); margin-top:2px; font-family:var(--body); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1080px){
  .rd-layout{ grid-template-columns:1fr; }
  .rd-sidebar{ position:static; display:none; }
  .rd-sticky{ display:block; }
  .rd-page .container{ padding-bottom:90px; }
}
@media (max-width:780px){
  .rd-desktop-only{ display:none !important; }
  .rd-mobile-only{ display:block; }
  .rd-hero-top{ padding:18px 18px 16px 20px; gap:14px; }
  .rd-ava{ width:64px; height:64px; }
  .rd-name{ font-size:19px; }
  .rd-capsules{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .rd-page .container{ padding:0 16px; padding-bottom:90px; }
  .rd-facts-grid{ grid-template-columns:1fr; }
  .rd-section{ margin-top:24px; padding-top:24px; }
  .rd-label{ font-size:17px; }
}