/* Storepilot sub-page additions — prose, FAQ accordion, contact card, form */

/* Prose article — for privacy / terms / account-deletion */
.sp-prose { color: #1C1917; }
.sp-prose p { font-size: 16px; line-height: 1.75; color: #44403C; margin: 0 0 16px; }
.sp-prose h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 24px; line-height: 1.25; color: #1C1917; margin: 36px 0 12px; letter-spacing: -0.01em; }
.sp-prose h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 18px; line-height: 1.3; color: #1C1917; margin: 24px 0 8px; }
.sp-prose ul { padding-left: 22px; margin: 0 0 18px; }
.sp-prose ul li { font-size: 16px; line-height: 1.75; color: #44403C; margin-bottom: 6px; list-style: disc; }
.sp-prose ul ul { margin-top: 6px; }
.sp-prose strong { color: #1C1917; font-weight: 700; }
.sp-prose a { color: #008BEB; font-weight: 600; text-decoration: none; }
.sp-prose a:hover { text-decoration: underline; }
.sp-prose code { background: #F5F5F4; border: 1px solid #E7E5E4; padding: 1px 6px; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; color: #1C1917; }
.sp-prose em { color: #57534E; }

/* Crumbs */
.sp-crumbs { font-size: 13px; color: #57534E; margin-bottom: 16px; }
.sp-crumbs a { color: #008BEB; text-decoration: none; font-weight: 600; }
.sp-crumbs a:hover { text-decoration: underline; }

/* FAQ accordion */
.sp-faq details { border: 1px solid #E7E5E4; border-radius: 16px; background: #fff; padding: 0; margin-bottom: 12px; transition: box-shadow .2s ease; }
.sp-faq details[open] { box-shadow: 0 4px 24px -8px rgba(28,25,23,0.10); }
.sp-faq summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 22px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 16.5px; color: #1C1917; position: relative; }
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 12px; height: 12px; border-right: 2px solid #008BEB; border-bottom: 2px solid #008BEB; transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; }
.sp-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.sp-faq .sp-faq-body { padding: 0 22px 20px; color: #44403C; font-size: 15.5px; line-height: 1.7; }
.sp-faq .sp-faq-body ul { padding-left: 18px; margin: 8px 0; }
.sp-faq .sp-faq-body ul li { list-style: disc; margin-bottom: 4px; }
.sp-faq .sp-faq-body strong { color: #1C1917; }
.sp-faq .sp-faq-body a { color: #008BEB; font-weight: 600; }
.sp-faq .sp-faq-body code { background:#F5F5F4; border:1px solid #E7E5E4; padding:1px 6px; border-radius:6px; font-size:13px; }

/* Contact form */
.sp-form { background:#fff; border:1px solid #E7E5E4; border-radius: 24px; padding: 28px; box-shadow: 0 4px 24px -8px rgba(28,25,23,0.06); }
.sp-form label { display:block; font-size: 13px; font-weight: 600; color: #1C1917; margin-bottom: 6px; }
.sp-form input[type="text"],
.sp-form input[type="email"],
.sp-form input[type="tel"],
.sp-form select,
.sp-form textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid #E7E5E4; background: #FAFAF9;
  border-radius: 12px; padding: 12px 14px; font-size: 15px; color: #1C1917;
  font-family: 'DM Sans', sans-serif; transition: border-color .15s, box-shadow .15s, background .15s;
}
.sp-form input:focus, .sp-form select:focus, .sp-form textarea:focus {
  outline: none; border-color: #008BEB; background:#fff;
  box-shadow: 0 0 0 3px rgba(0,139,235,0.15);
}
.sp-form textarea { resize: vertical; min-height: 130px; }
.sp-form .sp-form-row { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .sp-form .sp-form-row { grid-template-columns: 1fr 1fr; } }
.sp-form .sp-field { margin-bottom: 14px; }
.sp-form .sp-check { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:#44403C; line-height:1.5; }
.sp-form .sp-check input { margin-top: 3px; }
.sp-form .sp-check a { color: #008BEB; font-weight: 600; }

/* Status banner */
.sp-status { margin-top: 14px; font-size: 14px; }
.sp-success { background: #ECFDF5; border:1px solid #A7F3D0; color: #065F46; padding: 12px 16px; border-radius: 12px; font-weight: 600; }