/* ===== Epic Essay • Sample Orders (Clean Skin) ========================== */
/* Tokens */
:root{
    --ink:#0f172a; --muted:#667085; --line:rgba(15,23,42,.10);
    --bg1:#f7f9ff; --bg2:#eef3ff; --card:#fff;
    --primary-600:#2563eb; --primary-700:#1e47d7;        /* brand blue */
    --accent-500:#ff7a45; --accent-600:#ff8e66;           /* CTA orange */
    --radius:18px; --radius-lg:22px;
    --shadow:0 14px 40px rgba(2,6,23,.10);
}

/* Section */
.samples{ background:linear-gradient(180deg,var(--bg2),var(--bg1)); padding:38px 0 56px }
.samples .wrap{ width:min(1200px,92vw); margin:auto }

/* Header */
.samples-head{ text-align:center; margin-bottom:16px }
.samples-head h1{ margin:0 0 10px; font-size:clamp(30px,4.5vw,54px); font-weight:900; color:var(--ink) }
.consent{
    display:inline-flex; gap:8px; align-items:center;
    padding:8px 14px; border-radius:999px; background:#edf9ff; color:#0b4fb3; font-weight:700;
    border:1px solid rgba(37,99,235,.22)
}
.consent .dot{ width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.18) }

/* Filters (sticky tools) */
.samples-filters{
    position:sticky; top:0; z-index:5;
    display:flex; gap:12px; align-items:center; justify-content:space-between;
    background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78));
    backdrop-filter:saturate(1.2) blur(6px);
    border:1px solid var(--line); border-radius:var(--radius-lg); padding:10px 12px; box-shadow:var(--shadow);
    margin-bottom:18px;
}
.search{ display:flex; align-items:center; gap:8px; flex:1; min-width:220px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:10px 12px }
.search svg{ width:18px; height:18px; color:#475569 }
.search input{ border:0; outline:0; width:100%; font:inherit; color:var(--ink); background:transparent }
.selects{ display:flex; gap:8px; flex-wrap:wrap }
.pill{
    background:#fff; border:1px solid var(--line); color:#1f2937; padding:8px 12px; border-radius:999px; font-weight:700; cursor:pointer;
}
.pill.has-caret::after{ content:"▾"; margin-left:6px; font-size:12px }
.pill.is-active{ border-color:rgba(37,99,235,.35); box-shadow:0 0 0 3px rgba(37,99,235,.12); color:#0f2a5a }

/* Grid */
.samples-grid{ display:grid; gap:16px; grid-template-columns:repeat(3,1fr) }
@media (max-width:1020px){ .samples-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:680px){
    .samples-filters{ flex-direction:column; align-items:stretch }
    .samples-grid{ grid-template-columns:1fr }
}

/* Card */
.sample-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
    box-shadow:var(--shadow); padding:18px; display:flex; flex-direction:column; gap:12px;
    transition:transform .25s, box-shadow .25s, border-color .25s;
}
.sample-card:hover{ transform:translateY(-6px); box-shadow:0 18px 48px rgba(2,6,23,.12); border-color:rgba(37,99,235,.24) }

.card-head{ display:flex; flex-direction:column; gap:10px }
.doctype{
    display:inline-flex; gap:8px; align-items:center; font-weight:800; color:#1343b0;
    background:#eef5ff; border:1px solid rgba(37,99,235,.22); padding:6px 10px; border-radius:12px; width:max-content;
}
.doctype svg{ width:18px; height:18px; color:var(--primary-600) }
.title{ margin:0; font-size:clamp(18px,2.1vw,26px); color:var(--ink); line-height:1.25 }

.stats{
    display:grid; grid-template-columns:1fr 8px 1fr 8px 1fr; align-items:center;
    background:#f7fafc; border:1px solid var(--line); border-radius:14px; padding:10px 12px
}
.stats dt{ color:#64748b; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.08em }
.stats dd{ margin:2px 0 0; font-weight:800; color:#0f172a; font-size:16px }
.stats .sep{ width:1px; height:28px; background:linear-gradient(#e5e7eb,#cbd5e1); justify-self:center; border-radius:1px }

.tags{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none }
.tags li{ background:#f3f6ff; color:#334155; border:1px solid #e2e8f0; padding:6px 10px; border-radius:999px; font-weight:700; font-size:13px }

.excerpt{ margin:0; color:var(--muted); font-style:italic; line-height:1.45 }

/* CTA row */
.card-cta{ margin-top:auto; display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap }
.btn{
    display:inline-flex; align-items:center; justify-content:center; border-radius:999px; text-decoration:none;
    padding:12px 16px; font-weight:800; border:1px solid transparent; transition:.25s;
}
.btn-primary{ background:linear-gradient(135deg,var(--accent-500),var(--accent-600)); color:#fff; box-shadow:0 10px 26px rgba(255,122,69,.28) }
.btn-primary:hover{ filter:brightness(.98) }
.btn-ghost{ background:#f3f6ff; color:#0f2a5a; border-color:rgba(37,99,235,.28) }
.btn-ghost:hover{ background:#eaf0ff }

/* Pager */
.pager{ display:flex; gap:10px; align-items:center; justify-content:center; margin-top:18px }
.page-ind{ color:#475569; font-weight:700 }

/* Utility (single, keep) */
.custom-select{ padding:12px !important; border-radius:20px; border:.1px solid rgba(128,128,128,.5) }