/* ===== ShieldPress Docs PRO Layout ===== */
/* ===== HERO ===== */

.spdocs-hero{
background:linear-gradient(135deg,#0f172a,#020617);
color:white;
text-align:center;
padding:90px 20px;
}

.spdocs-hero h1{
font-size:44px;
font-weight:700;
margin-bottom:12px;
letter-spacing:-0.5px;
}

.spdocs-hero p{
opacity:.85;
font-size:18px;
}

.spdocs-hero input{
margin-top:24px;
padding:14px 18px;
border-radius:12px;
border:none;
width:420px;
max-width:92%;
font-size:15px;
}

.spdocs-wrap{
max-width:1250px;
margin:60px auto;
padding:0 20px;
display:flex;
gap:40px;
align-items:flex-start;
}

/* ===== LEFT SIDEBAR ===== */

.spdocs-sidebar{
width:260px;
flex-shrink:0;
}

.spdocs-sidebar .docs-sidebar{
background:#fff;
padding:22px;
border-radius:18px;
box-shadow:0 20px 60px rgba(0,0,0,.08);
position:sticky;
top:30px;
}

.spdocs-sidebar a{
display:block;
padding:11px 14px;
border-radius:10px;
text-decoration:none;
color:#334155;
font-weight:500;
margin-bottom:6px;
transition:.18s;
}

.spdocs-sidebar a:hover{
background:#2563eb;
color:white;
transform:translateX(3px);
}

/* ===== MAIN CONTENT ===== */

.spdocs-content{
flex:1;
background:white;
padding:48px;
border-radius:22px;
box-shadow:0 20px 60px rgba(0,0,0,.08);
min-height:600px;
}

.spdocs-content h1{
font-size:34px;
margin-bottom:14px;
}

.spdocs-content h2{
margin-top:34px;
margin-bottom:10px;
font-size:22px;
}

.spdocs-content p{
color:#475569;
line-height:1.75;
}

/* ===== BREADCRUMB ===== */

.spdocs-breadcrumb{
font-size:14px;
color:#64748b;
margin-bottom:28px;
}

.spdocs-breadcrumb a{
color:#2563eb;
text-decoration:none;
}

.spdocs-breadcrumb span{
margin:0 6px;
}

/* ===== RIGHT TOC ===== */

.spdocs-toc{
width:230px;
flex-shrink:0;
}

.spdocs-toc .docs-toc{
background:#fff;
padding:22px;
border-radius:18px;
box-shadow:0 20px 60px rgba(0,0,0,.08);
position:sticky;
top:30px;
}

.spdocs-toc ul{
padding-left:18px;
}

.spdocs-toc a{
font-size:14px;
color:#475569;
text-decoration:none;
}

.spdocs-toc a:hover{
color:#2563eb;
}

/* ===== Screenshot ===== */

.doc-shot{
height:auto;
background:linear-gradient(135deg,#e2e8f0,#f1f5f9);
border-radius:16px;
margin:26px 0;
display:flex;
align-items:center;
justify-content:center;
color:#64748b;
font-weight:600;
}

/* ===== Feedback ===== */

.docs-feedback{
margin-top:60px;
padding:26px;
background:#f1f5f9;
border-radius:16px;
text-align:center;
}

.docs-feedback button{
margin:6px;
padding:10px 18px;
border:none;
border-radius:10px;
background:#2563eb;
color:white;
font-weight:600;
cursor:pointer;
}

.spdocs-toc li{
margin-bottom:8px;
}

/* ===== DOC UI BLOCKS ===== */

.doc-note{
background:#eff6ff;
border-left:4px solid #2563eb;
padding:14px 16px;
border-radius:10px;
margin:16px 0;
}

.doc-tip{
background:#ecfdf5;
border-left:4px solid #10b981;
padding:14px 16px;
border-radius:10px;
margin:16px 0;
}

.doc-warning{
background:#fef2f2;
border-left:4px solid #ef4444;
padding:14px 16px;
border-radius:10px;
margin:16px 0;
}

.doc-example{
background:#fff7ed;
border-left:4px solid #f97316;
padding:14px 16px;
border-radius:10px;
margin:16px 0;
}

.doc-cta{
margin-top:50px;
padding:26px;
background:#f1f5f9;
border-radius:16px;
text-align:center;
}

/* ===== TROUBLESHOOTING ===== */
.doc-troubleshoot{
background:#fff7ed;
border-left:4px solid #f97316;
padding:16px;
border-radius:10px;
margin:20px 0;
}

/* ===== FAQ ===== */
.doc-faq{
margin-top:40px;
}

.doc-faq-item{
border-bottom:1px solid #e5e7eb;
padding:12px 0;
}

.doc-faq-item h4{
font-size:16px;
margin-bottom:6px;
}

.doc-faq-item p{
font-size:14px;
color:#475569;
}

/* ===== DOC IMAGES ===== */

.doc-image{
margin:24px 0;
text-align:center;
}

.doc-image img{
max-width:100%;
border-radius:14px;
box-shadow:0 20px 60px rgba(0,0,0,.08);
border:1px solid #e5e7eb;
}

.doc-caption{
margin-top:10px;
font-size:14px;
color:#64748b;
}

/* ===== MOBILE ===== */

@media (max-width:1100px){

.spdocs-wrap{
flex-direction:column;
}

.spdocs-sidebar,
.spdocs-toc{
width:100%;
}

.spdocs-sidebar .docs-sidebar,
.spdocs-toc .docs-toc{
position:relative;
top:0;
}

}