/* ============================================================
   Shared modern styling for PrimeSwop public content pages
   (about, faq, login, signup). Loads AFTER page-specific CSS.
   Content lives inside .bdcont, which sidenavbar.css pushes
   right on desktop when body.has-sidebar is set.
   ============================================================ */
:root{
	--brand:#c1121f; --brand-dark:#8f0d17; --brand-tint:#fdecee;
	--ink:#1f2430; --muted:#5b6270; --line:#e8e8ee; --pp-bg:#f6f7f9; --card:#fff;
}
html,body{ margin:0; padding:0; }
.bdcont{
	top:0 !important; padding-top:60px; min-height:100vh;
	box-sizing:border-box; background:var(--pp-bg);
	font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif; color:var(--ink);
	display:flex; flex-direction:column;
}
/* flex children with margin:0 auto shrink to content — force full width so
   max-width + margin:auto centres them instead of collapsing the layout */
.bdcont > *{ width:100%; box-sizing:border-box; }
/* keep the footer pinned to the bottom on short pages */
.bdcont .footer{ margin-top:auto; }

/* ---------- Hero ---------- */
.pp-hero{
	background:linear-gradient(120deg,#8f0d17,#c1121f 58%,#1a1a1a);
	color:#fff; padding:56px 26px; text-align:center;
}
.pp-hero h1{ margin:0 0 12px; font-size:32px; font-weight:800; letter-spacing:-.02em; }
.pp-hero p{ margin:0 auto; max-width:640px; font-size:15.5px; line-height:1.65; opacity:.93; }

/* ---------- Content ---------- */
.pp-wrap{ max-width:920px; margin:0 auto; padding:36px 22px 20px; }
.pp-card{
	background:var(--card); border:1px solid var(--line); border-radius:16px;
	box-shadow:0 1px 3px rgba(16,18,27,.06),0 10px 30px rgba(16,18,27,.05);
	padding:26px; margin-bottom:20px;
}
.pp-card h2{ font-size:21px; font-weight:800; color:var(--ink); margin:0 0 14px;
	display:flex; align-items:center; gap:11px; }
.pp-card h2::before{ content:""; width:5px; height:21px; border-radius:3px; background:var(--brand); }
.pp-card h3{ font-size:16.5px; font-weight:700; color:var(--brand-dark); margin:20px 0 8px; }
.pp-card p{ color:var(--muted); font-size:14.5px; line-height:1.75; margin:0 0 12px; }
.pp-card ul{ margin:0 0 14px; padding-left:20px; color:var(--muted); font-size:14.5px; line-height:1.85; }
.pp-card b{ color:var(--ink); }
.pp-divider{ height:1px; background:var(--line); margin:22px 0; border:0; }

/* ---------- Feature grid ---------- */
.pp-feature-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin-bottom:20px; }
.pp-feature{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px; }
.pp-feature i{ font-size:20px; color:var(--brand); background:var(--brand-tint); width:48px; height:48px;
	border-radius:12px; display:grid; place-items:center; margin-bottom:13px; }
.pp-feature h4{ margin:0 0 6px; font-size:15.5px; color:var(--ink); font-weight:700; }
.pp-feature p{ margin:0; color:var(--muted); font-size:13.5px; line-height:1.6; }

/* ---------- FAQ accordion ---------- */
.faq-list{ max-width:820px; margin:0 auto; }
.faq-item{ background:var(--card); border:1px solid var(--line); border-radius:12px; margin-bottom:12px; overflow:hidden; }
.faq-q{ display:flex; align-items:center; justify-content:space-between; gap:14px; cursor:pointer;
	padding:17px 20px; font-weight:600; color:var(--ink); font-size:15px; user-select:none; }
.faq-q i{ color:var(--brand); transition:transform .25s; flex:none; }
.faq-item.open .faq-q{ color:var(--brand); }
.faq-item.open .faq-q i{ transform:rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a p{ padding:0 20px 18px; margin:0; color:var(--muted); font-size:14.5px; line-height:1.75; }
.faq-item.open .faq-a{ max-height:800px; }

/* ---------- Auth hero (login / signup pages) ---------- */
.auth-hero{ min-height:calc(100vh - 60px); display:flex; align-items:center; justify-content:center;
	text-align:center; padding:60px 24px;
	background:linear-gradient(120deg,#8f0d17,#c1121f 58%,#1a1a1a); color:#fff; }
.auth-hero .inner{ max-width:520px; }
.auth-hero .logo{ font-size:34px; font-weight:800; margin:0 0 10px; letter-spacing:-.02em; }
.auth-hero h1{ font-size:26px; font-weight:800; margin:0 0 12px; }
.auth-hero p{ font-size:15px; opacity:.93; line-height:1.65; margin:0 0 24px; }
.auth-hero .authbtns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.auth-hero .authbtns button{ padding:12px 28px; border-radius:10px; border:none; cursor:pointer;
	font-weight:700; font-size:14px; transition:.15s; }
.auth-hero .authbtns .primary{ background:#fff; color:var(--brand); }
.auth-hero .authbtns .primary:hover{ background:#ffe9eb; }
.auth-hero .authbtns .ghost{ background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.55); }
.auth-hero .authbtns .ghost:hover{ background:rgba(255,255,255,.22); }

/* ---------- Auth pages (login / signup rendered inline, not as a popup) ---------- */
.auth-page{ flex:1; display:flex; flex-wrap:wrap; gap:40px; align-items:center; justify-content:center;
	padding:44px 24px; }
.auth-welcome{ max-width:400px; }
.auth-welcome .logo{ font-size:30px; font-weight:800; color:var(--brand); margin:0 0 14px; letter-spacing:-.02em; }
.auth-welcome .logo i{ color:var(--brand); }
.auth-welcome h1{ font-size:27px; color:var(--ink); margin:0 0 12px; font-weight:800; letter-spacing:-.01em; }
.auth-welcome p{ color:var(--muted); font-size:15px; line-height:1.7; margin:0 0 14px; }
.auth-welcome ul{ color:var(--muted); font-size:14.5px; line-height:1.9; padding-left:20px; margin:0; }
.auth-welcome ul li b{ color:var(--ink); }
/* the form card */
.authcard, .signup-formcard{ width:380px; max-width:100%; }
.auth-page .staticBox{ position:static !important; transform:none !important; top:auto; left:auto; margin:0; }
.auth-page .box{ max-height:none !important; }

@media (max-width:600px){
	.pp-hero h1{ font-size:26px; }
	.pp-hero{ padding:42px 20px; }
	.auth-page{ align-items:flex-start; padding:22px 16px; gap:22px; }
}