/* =========================================================
   SPARE PARTS ESTIMATOR — UNIVERSAL THEME SYSTEM
   Covers Archive, Brand, Cluster, Device pages
   ========================================================= */

/* =========================
   DESIGN TOKENS
========================= */

:root {
    --sp-page-bg: #f4f6f9;
    --sp-card-bg: #ffffff;
    --sp-border: #e3e8ef;

    --sp-heading: #0f172a;
    --sp-text: #334155;
    --sp-muted: #64748b;

    --sp-link: #2563eb;
    --sp-link-hover: #1d4ed8;

    --sp-radius: 14px;
    --sp-padding: 24px;
    --sp-gap: 32px;
}

/* =========================
   PAGE WRAPPER
========================= */

.sp-archive-page,
.sp-brand-page,
.sp-cluster-page,
.sp-device-page,
.sp-type-page,
.sp-series-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px;
    background: transparent;
    color: var(--sp-text);
    line-height: 1.65;
    font-size: 15.5px;
}

.site-content {
    background: var(--sp-page-bg);
}

/* =========================
   TYPOGRAPHY
========================= */

.sp-archive-page h1,
.sp-brand-page h1,
.sp-cluster-page h1,
.sp-device-page h1,
.sp-type-page h1,
.sp-series-page h1 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 22px;
    color: var(--sp-heading);
}

.sp-archive-page h2,
.sp-brand-page h2,
.sp-cluster-page h2,
.sp-device-page h2,
.sp-type-page h2,
.sp-series-page h2 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 16px;
    margin-top: 20px;
    color: var(--sp-heading);
}

.sp-archive-page h3,
.sp-brand-page h3,
.sp-cluster-page h3,
.sp-device-page h3 {
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 10px;
    color: var(--sp-heading);
}

.sp-archive-page p,
.sp-brand-page p,
.sp-cluster-page p,
.sp-device-page p,
.sp-type-page p,
.sp-series-page p {
    margin-bottom: 12px;
    color: var(--sp-text);
}

.sp-device-type {
    color: var(--sp-muted);
    font-size: 14px;
}

/* =========================
   LINKS
========================= */

.sp-archive-page a,
.sp-brand-page a,
.sp-cluster-page a,
.sp-device-page a,
.sp-type-page a,
.sp-series-page a {
    color: var(--sp-link);
    text-decoration: none;
    font-weight: 500;
}

.sp-archive-page a:hover,
.sp-brand-page a:hover,
.sp-cluster-page a:hover,
.sp-device-page a:hover {
    color: var(--sp-link-hover);
    text-decoration: underline;
}

/* =========================================
   GLOBAL STRUCTURAL CARD SYSTEM
   All top-level sections become cards
========================================= */

.sp-archive-page > section,
.sp-brand-page > section,
.sp-cluster-page > section,
.sp-device-page > section,
.sp-type-page > section,
.sp-series-page > section {
    background: var(--sp-card-bg);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    padding: var(--sp-padding);
    margin-top: var(--sp-gap);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
                0 4px 12px rgba(15, 23, 42, 0.04);
}

.sp-archive-page > section > h2:first-child,
.sp-brand-page > section > h2:first-child,
.sp-cluster-page > section > h2:first-child,
.sp-device-page > section > h2:first-child,
.sp-type-page > section > h2:first-child,
.sp-series-page > section > h2:first-child {
    margin-top: 0;
}

/* =========================
   TABLE SYSTEM
========================= */

.sp-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 16px;
}

.sp-table thead th {
    background: #f1f5f9;
    padding: 14px 16px;
    font-weight: 600;
    border-bottom: 1px solid var(--sp-border);
    font-size: 15px;
}

.sp-table td {
    padding: 16px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 15px;
}

.sp-table tbody tr:hover {
    background: #f8fafc;
}

.sp-table td:last-child {
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
}

.sp-price-breakdown {
    font-size: 12px;
    color: var(--sp-muted);
    margin-top: 6px;
}

/* =========================
   TOTAL BOX
========================= */

.sp-total-box {
    margin-top: 24px;
    padding: 18px 20px;
    background: #eef2f7;
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    font-size: 18px;
    color: var(--sp-heading);
}

/* =========================
   LISTS
========================= */

.sp-archive-page ul,
.sp-brand-page ul,
.sp-cluster-page ul,
.sp-device-page ul,
.sp-type-page ul,
.sp-series-page ul {
    padding-left: 18px;
}

.sp-archive-page li,
.sp-brand-page li,
.sp-cluster-page li,
.sp-device-page li,
.sp-type-page li,
.sp-series-page li {
    margin-bottom: 8px;
}


/* ==========================
FAQ SECTION UI
========================== */

.sp-device-faq {
    margin-top: 40px;
}

.sp-device-faq h2 {
    margin-bottom: 20px;
}

.sp-faq-item {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    background: #ffffff;
    transition: all 0.2s ease;
}

.sp-faq-item:hover {
    border-color: #d1d5db;
}

.sp-faq-question {
    width: 100%;
    text-align: left;
    padding: 16px 18px;
    background: #eef2f7;
    color: #0f172a;
    border: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sp-faq-question:focus {
    outline: none;
}

.sp-faq-icon {
    font-size: 18px;
    font-weight: bold;
    transition: transform 0.2s ease;
}

.sp-faq-answer {
    display: none;
    padding: 16px 18px;
    font-size: 15px;
    line-height: 1.6;
    color: #1f2937;
    background: #ffffff;
}

.sp-faq-item.active .sp-faq-answer {
    display: block;
}

.sp-faq-item.active .sp-faq-icon {
    transform: rotate(45deg);
}

.sp-device-meta {
    margin: 10px 0 20px 0;
    font-size: 16px;
}

/* ==========================
   Related Devices Grid
========================== */

.sp-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.sp-related-card {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:6px;
    padding: 14px 16px;
    background: #f8f9fa;
    border-radius: 10px;
    text-decoration: none;              /* remove underline */
    font-weight: 500;
    color: #1e3a8a;
    transition: all 0.2s ease;
    border: 1px solid #e5e5e5;
}

.sp-related-card .sp-related-arrow{
    margin-left:auto;
    font-size:14px;
    opacity:0.6;
}

.sp-related-card:hover {
    background: #e9f2ff;
    border-color: #1e40af;
    transform: translateY(-2px);
    text-decoration: none;              /* ensure no underline */
}

.sp-related-card:focus {
    text-decoration: none;
}

.sp-view-all-series{
    background:#fffbeb;
    border-color:#fde68a;
}

.sp-view-all-series .sp-view-text{
    color:#d97706;
    font-weight:600;
}

.sp-view-all-series:hover{
    background:#fef3c7;
    border-color:#f59e0b;
}

/* =========================================
   BREADCRUMBS STYLE
========================================= */

.sp-breadcrumbs {
    font-size: 14px;
    margin-bottom: 15px;
}

.sp-breadcrumbs ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sp-breadcrumbs li::after {
    content: "›";
    margin-left: 6px;
}

.sp-breadcrumbs li:last-child::after {
    content: "";
}

.sp-breadcrumbs a {
    text-decoration: none;
    color: var(--sp-link);
}

.sp-breadcrumbs a:hover {
    text-decoration: underline;
}

.sp-breadcrumbs .active {
    font-weight: 600;
    color: #333;
}

/* =========================================
   FIX FLEX SHRINK ISSUE FOR TYPE & SERIES
========================================= */

.site-content > .sp-type-page,
.site-content > .sp-series-page {
    flex: 0 0 100%;
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   BRAND HIERARCHY STRUCTURE (NEW)
   ========================================================= */

.sp-brand-hierarchy {
    margin-top: var(--sp-gap);
}

.sp-brand-type-block {
    margin-top: 40px;
}

.sp-brand-type-block h3 {
    font-size: 20px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--sp-border);
}

.sp-brand-type-block h3 a {
    color: var(--sp-heading);
    font-weight: 600;
}

.sp-brand-type-block h3 a:hover {
    color: var(--sp-link);
}

.sp-brand-series-block {
    margin-top: 26px;
}

.sp-brand-series-block h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--sp-muted);
}

.sp-brand-series-block h4 a {
    color: var(--sp-muted);
}

.sp-brand-series-block h4 a:hover {
    color: var(--sp-link);
}

/* Improve grid spacing inside brand page */
.sp-brand-hierarchy .sp-related-grid {
    margin-top: 10px;
}

/* =========================================
   PAGINATION
========================================= */

.sp-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.sp-pagination a {
    padding: 6px 12px;
    border: 1px solid var(--sp-border);
    border-radius: 6px;
    background: #ffffff;
    text-decoration: none;
    color: var(--sp-link);
    font-weight: 500;
    font-size: 14px;
}

.sp-pagination a:hover {
    background: #eef2ff;
}

.sp-pagination a.active {
    background: var(--sp-link);
    color: #ffffff;
    border-color: var(--sp-link);
}

/* =========================================================
   SERVICE PRICE TABLE (IMPROVED UI/UX)
   ========================================================= */

.sp-service-table{
width:100%;
border-collapse:separate;
border-spacing:0;
margin-top:20px;
background:#ffffff;
border:1px solid var(--sp-border);
border-radius:8px;
overflow:hidden;
table-layout:fixed;
}

/* header */

.sp-service-table th{
background:#f1f5f9;
padding:16px 18px;
text-align:left;
font-weight:600;
font-size:15px;
border-bottom:1px solid var(--sp-border);
}

/* body cells */

.sp-service-table td{
padding:16px 18px;
border-bottom:1px solid #eef2f7;
font-size:15px;
vertical-align:middle;
}

/* zebra rows */

.sp-service-table tbody tr:nth-child(even){
background:#fafbfd;
}

/* hover highlight */

.sp-service-table tbody tr:hover{
background:#f1f7ff;
transition:background 0.15s ease;
}

/* price column */

.sp-service-table td:nth-child(2){
text-align:right;
font-weight:600;
white-space:nowrap;
color:#0f172a;
}

/* device category column */

.sp-service-table td:nth-child(3){
color:var(--sp-muted);
font-size:14px;
}

/* search + sort controls */

.sp-cluster-table-controls{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-bottom:16px;
}

.sp-table-search,
.sp-table-sort{
padding:9px 12px;
border:1px solid var(--sp-border);
border-radius:6px;
font-size:14px;
background:#ffffff;
}

/* sortable header */

.sp-sortable{
cursor:pointer;
user-select:none;
white-space:nowrap;
}

/* sort icon */

.sp-sort-indicator{
font-size:11px;
margin-left:6px;
color:#64748b;
opacity:0.7;
}

/* =========================================
   CLUSTER MODEL COMPARISON (IMPROVED)
========================================= */

.sp-comparison-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:18px;
margin:22px 0;
}

.sp-comparison-card{
border:1px solid var(--sp-border);
border-radius:10px;
padding:18px;
background:#ffffff;
text-align:center;
transition:all 0.18s ease;
}

.sp-comparison-card:hover{
border-color:#2563eb;
box-shadow:0 6px 18px rgba(15,23,42,0.08);
transform:translateY(-2px);
}

.sp-comparison-label{
display:block;
font-size:13px;
color:var(--sp-muted);
margin-bottom:8px;
}

.sp-comparison-model{
display:block;
font-size:16px;
margin-bottom:8px;
}

.sp-comparison-model a{
color:var(--sp-link);
font-weight:600;
text-decoration:none;
}

.sp-comparison-model a:hover{
text-decoration:underline;
}

/* PRICE COLOR CHANGED FROM BLUE */

.sp-comparison-price{
font-weight:700;
font-size:18px;
color:#0f172a;
}

/* =========================
   ADSENSE MINIMAL CARD SHADOW
========================= */

.sp-ad{
margin:20px auto;
width:100%;
max-width:100%;
text-align:center;

border-radius:var(--sp-radius);
box-shadow:0 1px 2px rgba(15,23,42,.04),
           0 4px 12px rgba(15,23,42,.04);

overflow:hidden;
position:relative;
box-sizing:border-box;
background:transparent;
padding:0;
border:none;
}

/* responsive ad container */

.sp-ad ins.adsbygoogle{
display:block !important;
width:100% !important;
max-width:100% !important;
margin:0 auto !important;
overflow:hidden !important;
}

/* fix adsense internal wrapper */

.sp-ad div[id^="aswift"]{
max-width:100% !important;
width:100% !important;
overflow:hidden !important;
}

/* prevent iframe overflow */

.sp-ad iframe{
max-width:100% !important;
width:100% !important;
}

.sp-price-summary-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:16px;
margin:20px 0;
}

.sp-price-box{
background:#f7f7f7;
padding:15px;
text-align:center;
border-radius:6px;
}

.sp-price-label{
display:block;
font-size:13px;
color:#777;
}

.sp-price-value{
font-size:20px;
font-weight:600;
}

.sp-model-index-list{
columns:2;
margin-top:10px;
}

.sp-model-index-list li{
margin-bottom:6px;
}

/* =========================================================
   CLUSTER TOC EXPANDABLE
   ========================================================= */

.sp-cluster-toc{
cursor:pointer;
background:#eef5ff;
border:1px solid #d6e6ff;
border-radius:12px;
}

.sp-cluster-toc h2 {
display:flex;
align-items:center;
justify-content:space-between;
cursor:pointer;
margin-bottom:0;
}

.sp-cluster-toc h2::after {
content:"▼";
font-size:12px;
margin-left:8px;
color:var(--sp-muted);
transition:transform 0.2s ease;
}

.sp-cluster-toc ul{
margin-top:25px;
padding-left:18px;
}

.sp-cluster-toc.collapsed ul{
display:none;
}

.sp-cluster-toc.collapsed h2::after{
transform:rotate(-90deg);
}

.sp-cheapest-models ol,
.sp-costliest-models ol{
margin-top:12px;
}

.sp-cheapest-models li,
.sp-costliest-models li{
margin-bottom:6px;
}

.sp-cluster-toc h2::after{
content:"▼";
float:right;
font-size:14px;
transition:transform .2s ease;
}

.sp-cluster-toc.collapsed h2::after{
transform:rotate(-90deg);
}

/* =========================================================
SERIES PAGE MODEL GRID
Overrides applied only when sp-series-model-grid exists
========================================================= */

.sp-related-grid.sp-series-model-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
gap:18px;
margin-top:20px;
}

/* override card layout only inside this grid */

.sp-series-model-grid .sp-related-card{

flex-direction:column;
align-items:flex-start;
justify-content:flex-start;

gap:8px;

padding:16px;
background:#ffffff;

border:1px solid var(--sp-border);
border-radius:10px;

min-height:120px;
}

/* model title */

.sp-series-model-grid .sp-related-card strong{
display:block;
font-size:15px;
line-height:1.4;
color:var(--sp-heading);
}

/* repair label */

.sp-series-model-grid .sp-device-type{
font-size:13px;
color:var(--sp-muted);
}

/* price value */

.sp-series-model-grid .sp-device-type strong{
display:block;
font-size:14px;
margin-top:3px;
color:#0f172a;
}

/* CTA */

.sp-series-model-grid .sp-related-arrow{
margin-top:auto;
font-size:13px;
color:var(--sp-link);
font-weight:500;
}


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

@media (max-width: 768px) {

    .sp-archive-page,
    .sp-brand-page,
    .sp-cluster-page,
    .sp-device-page {
        padding: 24px 14px;
        font-size: 15px;
    }

    .sp-archive-page > section,
    .sp-brand-page > section,
    .sp-cluster-page > section,
    .sp-device-page > section,
    .sp-type-page > section,
    .sp-series-page > section {
        padding: 16px 14px;
        margin-top: 22px;
    }

    .sp-archive-page h1,
    .sp-brand-page h1,
    .sp-cluster-page h1,
    .sp-device-page h1,
    .sp-type-page h1,
    .sp-series-page h1 {
        font-size: 24px;
    }

    .sp-archive-page h2,
    .sp-brand-page h2,
    .sp-cluster-page h2,
    .sp-device-page h2,
    .sp-type-page h2,
    .sp-series-page h2 {
        font-size: 20px;
    }

    /* Remove table rendering artifacts */
    .sp-table {
        display: block;
        width: 100%;
        margin-top: 0;
        border: 0;
        border-collapse: separate;
        border-spacing: 0;
    }

    .sp-table thead {
        display: none;
    }

    .sp-table tbody {
        display: block;
    }

    /* Row cards */
    .sp-table tbody tr {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 14px 12px;
        margin-bottom: 12px;
        background: #ffffff;
        border: 1px solid var(--sp-border);
        border-radius: 12px;
    }

    /* IMPORTANT: remove cell borders that cause ghost lines */
    .sp-table td {
        display: block;
        padding: 0;
        border: none !important;
    }

    .sp-table td:first-child {
        flex: 0 0 34px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sp-table td:nth-child(2) {
        flex: 1;
        padding: 0 10px;
        font-size: 14px;
        line-height: 1.4;
    }

    .sp-table td:last-child {
        flex: 0 0 auto;
        text-align: right;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
    }

    .sp-price-breakdown {
        display: none;
    }

    .sp-device-meta {
        display: flex;
        gap: 20px;
        align-items: center;
    }
    .sp-meta-item {
        display: inline-block;
    }

    /* =========================
    MOBILE SERVICE TABLE FIX
    ========================= */

    .sp-service-table thead{
    display:none;
    }

    .sp-service-table tbody{
    display:block;
    }

    .sp-service-table tbody tr{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    padding:14px 12px;
    margin-bottom:12px;

    background:#ffffff;
    border:1px solid var(--sp-border);
    border-radius:12px;
    }

    .sp-service-table td{
    display:block;
    border:none;
    padding:0;
    }

    /* MODEL */

    .sp-service-table td:nth-child(1){
    flex:1;
    font-weight:600;
    }

    /* PRICE */

    .sp-service-table td:nth-child(2){
    flex:0 0 auto;
    text-align:right;
    font-weight:700;
    white-space:nowrap;
    }

    /* DEVICE TYPE */

    .sp-service-table td:nth-child(3){
    flex:0 0 auto;
    font-size:13px;
    color:var(--sp-muted);
    white-space:nowrap;
    }

    .sp-ad{
    min-height:280px;
    }

}