/* ============================================================================
   WASH & POLISH · BLOG DESIGN COMPONENTS  (v1.0)
   ----------------------------------------------------------------------------
   Component palette for the blog content pipeline. Every reusable article
   block used by generated posts is styled here — the reference template
   (دليل-العناية-بالسيارة-في-صيف-الكويت.html) demonstrates each block once,
   wrapped in  <!-- ▸ BLOCK: name -->  markers.

   RULES
     • This file loads AFTER css/styles.min.css — it never edits site CSS.
     • Logical properties only (inset-inline-start, border-inline-start,
       margin-inline-end, text-align:start …) so every block works in the
       Arabic RTL root AND the /en/ LTR mirror unchanged.
     • Zero JavaScript: interactive blocks use native <details> only.
     • Class names avoid collisions with styles.min.css (.badge → .chip,
       .gallery → .post-gallery, .feature-card → .icon-card, .faq → .faq-acc).

   Brand: Teal #00a693 · Pale teal #e0f2f1 · Amber #f59e0b · Font: Cairo · RTL
============================================================================= */

:root {
    /* Component tokens — mapped onto the site palette (light theme) */
    --bc-primary:      var(--primary-color, #00a693);
    --bc-primary-dark: var(--primary-dark, #008f7d);
    --bc-primary-light:var(--primary-light, #00c0a9);
    --bc-deep:         #00564b;             /* extra-dark teal for dark surfaces */
    --bc-deep-2:       #007163;
    --bc-soft:         var(--secondary-color, #e0f2f1);
    --bc-amber:        var(--accent-color, #f59e0b);
    --bc-amber-dark:   #b45309;
    --bc-text:         var(--text-color, #1f2937);
    --bc-muted:        var(--text-light, #6b7280);
    --bc-border:       var(--border-color, #e5e7eb);
    --bc-bg-light:     var(--bg-light, #f9fafb);
    --bc-success:      #10b981;
    --bc-success-dark: #0c8f6a;
    --bc-error:        #ef4444;
    --bc-error-dark:   #c52f2f;
    --bc-radius:       0.75rem;
    --bc-radius-lg:    1rem;
    --bc-radius-full:  999px;
}

/* ==========================================================================
   ARTICLE SHELL — layout + base typography for generated posts
   ========================================================================== */
.blog-post { background: var(--bg-color, #ffffff); }

.blog-post-content {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
}

.blog-post-content h2 {
    font-size: clamp(1.5rem, 4vw, 2rem);
    color: var(--bc-text);
    margin: 3rem 0 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 3px solid var(--bc-primary);
}

.blog-post-content h3 {
    font-size: 1.35rem;
    color: var(--bc-text);
    margin: 2.25rem 0 1rem;
    padding-inline-start: 0.85rem;
    border-inline-start: 4px solid var(--bc-primary);
}

.blog-post-content p {
    font-size: 1.08rem;
    line-height: 1.9;
    color: var(--bc-text);
    margin-bottom: 1.25rem;
}

.blog-post-content > ul:not([class]) { margin: 0 0 1.5rem; padding: 0; }
.blog-post-content > ul:not([class]) li {
    position: relative;
    padding-inline-start: 1.6em;
    margin-bottom: 0.6rem;
    line-height: 1.8;
}
.blog-post-content > ul:not([class]) li::before {
    content: "◆";
    position: absolute;
    inset-inline-start: 0;
    color: var(--bc-primary);
    font-size: 0.8em;
    top: 0.35em;
}

.blog-post-content a { color: var(--bc-primary-dark); }
.blog-post-content a:hover { color: var(--bc-primary); }

/* Inline highlight */
.blog-post-content mark {
    background: linear-gradient(transparent 55%, rgba(245, 158, 11, 0.45) 55%);
    color: inherit;
    padding: 0 2px;
}

/* Brand blockquote */
.blog-post-content blockquote {
    background: var(--bc-soft);
    border-inline-start: 5px solid var(--bc-primary);
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    border-radius: var(--bc-radius);
    position: relative;
}
.blog-post-content blockquote::before {
    content: "\201D";
    font-size: 4rem;
    color: var(--bc-primary);
    opacity: 0.3;
    position: absolute;
    top: -10px;
    inset-inline-start: 12px;
    font-family: Georgia, serif;
    line-height: 1;
}
.blog-post-content blockquote p {
    font-size: 1.15rem;
    font-style: italic;
    margin-bottom: 0;
}

/* Figure with caption */
.blog-post-content figure {
    margin: 2.5rem 0;
    border-radius: var(--bc-radius);
    overflow: hidden;
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1));
}
.blog-post-content figure img { width: 100%; display: block; }
.blog-post-content figcaption {
    background: var(--bc-bg-light);
    padding: 0.9rem 1.5rem;
    font-size: 0.92rem;
    color: var(--bc-muted);
    text-align: center;
    font-style: italic;
}

/* ==========================================================================
   ARTICLE HERO — full-bleed cover image + teal gradient overlay
   Per-post image via inline style:  style="--hero-img:url('/images/….webp')"
   ========================================================================== */
.article-hero {
    position: relative;
    padding: clamp(6.5rem, 12vw, 9rem) 1.5rem clamp(2.75rem, 6vw, 4.5rem);
    color: #ffffff;
    background-color: var(--bc-deep);
    background-image:
        linear-gradient(115deg, rgba(0, 56, 49, 0.95) 0%, rgba(0, 80, 70, 0.82) 45%, rgba(0, 118, 104, 0.55) 100%),
        var(--hero-img, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    box-shadow: inset 0 -4px 0 var(--bc-amber);
}

/* Amber glow accent in the corner */
.article-hero::after {
    content: "";
    position: absolute;
    inset-inline-end: -90px;
    bottom: -90px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.30), transparent 70%);
    border-radius: var(--bc-radius-full);
    pointer-events: none;
}

.article-hero-inner {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

.article-hero h1 {
    font-size: clamp(1.9rem, 5.5vw, 3.1rem);
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    line-height: 1.25;
    text-wrap: balance;
}

.article-hero-lead {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 62ch;
    line-height: 1.75;
    margin: 0;
}

/* Hero badges row */
.hero-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Hero meta bar: author + dates + read time */
.hero-meta-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.hero-author { display: flex; align-items: center; gap: 12px; }
.hero-author .author-avatar {
    width: 46px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--bc-radius-full);
    background: linear-gradient(135deg, var(--bc-primary), var(--bc-amber));
    font-weight: 800; font-size: 1.05rem; color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.25);
}
.hero-author-info { display: flex; flex-direction: column; line-height: 1.35; }
.hero-author-info strong { color: #ffffff; font-weight: 700; }
.hero-author-info strong a { color: inherit; text-decoration: none; }
.hero-author-info span { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); }
.hero-divider-v { width: 1px; height: 34px; background: rgba(255, 255, 255, 0.22); }
.hero-meta-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 0.875rem; color: rgba(255, 255, 255, 0.85); }
.hero-meta-chip svg { width: 16px; height: 16px; color: var(--bc-amber); flex-shrink: 0; }
.hero-meta-chip strong { color: #ffffff; font-weight: 700; }

/* Hero actions row: share + save */
.hero-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
    width: 100%; padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.hero-actions-label { font-weight: 700; color: #ffffff; font-size: 0.875rem; margin-inline-end: 4px; }
.hero-actions .share-btn { background: rgba(255, 255, 255, 0.12); color: #ffffff; width: 40px; height: 40px; }
.hero-actions .share-btn:hover { color: #ffffff; }
.hero-save {
    display: inline-flex; align-items: center; gap: 7px; margin-inline-start: auto;
    padding: 0.55em 1.2em; background: rgba(255, 255, 255, 0.12); color: #ffffff;
    border: 0; border-radius: var(--bc-radius-full); font-family: inherit; font-weight: 700;
    font-size: 0.875rem; cursor: pointer; transition: all 0.2s ease;
}
.hero-save:hover { background: var(--bc-amber); color: var(--bc-deep); }
.hero-save svg { width: 16px; height: 16px; }

/* Hero "Summarize with AI" row */
.hero-ai { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; width: 100%; }
.hero-ai-label { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: #ffffff; font-size: 0.875rem; margin-inline-end: 4px; }
.hero-ai-label svg { width: 18px; height: 18px; color: var(--bc-amber); flex-shrink: 0; }
.ai-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 0.45em 1em;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff; border-radius: var(--bc-radius-full);
    font-size: 0.875rem; font-weight: 600;
    transition: all 0.2s ease;
}
.ai-chip:hover { background: #ffffff; color: var(--bc-deep); border-color: #ffffff; transform: translateY(-2px); }

/* --- Breadcrumb ---------------------------------------------------------- */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.72);
}
.breadcrumb a { color: #7fe7d9; }
.breadcrumb a:hover { color: #ffffff; }
.breadcrumb .sep { opacity: 0.5; }

/* ==========================================================================
   CHIPS & TAGS  (.chip replaces the master's .badge — site already owns .badge)
   ========================================================================== */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.3em 0.9em;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.5;
    border-radius: var(--bc-radius-full);
    background: var(--bc-primary);
    color: #ffffff;
    box-shadow: none;
}
.chip-amber { background: var(--bc-amber); color: #3d2800; }
.chip-soft  { background: rgba(224, 242, 241, 0.9); color: var(--bc-deep); }
.chip-dark  { background: var(--bc-deep); color: #ffffff; }

.tag-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0; }
.tag {
    display: inline-flex;
    align-items: center;
    padding: 0.35em 0.95em;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bc-text);
    background: var(--bc-bg-light);
    border: 1px solid var(--bc-border);
    border-radius: var(--bc-radius-full);
    transition: all 0.2s ease;
}
.tag:hover { background: var(--bc-primary); border-color: var(--bc-primary); color: #ffffff; }

/* ==========================================================================
   QUICK ANSWER / TL;DR
   ========================================================================== */
.quick-answer {
    display: flex;
    gap: 1.25rem;
    padding: 1.5rem;
    margin: 2.5rem 0;
    background: linear-gradient(135deg, rgba(0, 166, 147, 0.07), rgba(224, 242, 241, 0.45));
    border: 1px solid rgba(0, 166, 147, 0.25);
    border-inline-start: 5px solid var(--bc-primary);
    border-radius: var(--bc-radius);
}
.quick-answer .qa-icon {
    flex-shrink: 0;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bc-primary); color: #ffffff;
    border-radius: var(--bc-radius-full);
}
.quick-answer .qa-icon svg { width: 26px; height: 26px; }
.quick-answer h3 {
    margin: 0 0 6px; padding: 0; border: 0;
    font-size: 1.15rem; color: var(--bc-deep);
}
.quick-answer p { margin: 0; color: var(--bc-text); }

/* ==========================================================================
   TABLE OF CONTENTS — collapsible <details class="toc">, collapsed by default
   ========================================================================== */
.toc {
    background: var(--bc-bg-light);
    border: 1px solid var(--bc-border);
    border-radius: var(--bc-radius);
    padding: 1.25rem 1.5rem;
    margin: 2rem 0;
}
.toc-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.1rem; font-weight: 700;
    color: var(--bc-text); margin: 0;
    cursor: pointer; list-style: none; user-select: none;
}
.toc-title::-webkit-details-marker { display: none; }
.toc-title:hover { color: var(--bc-primary-dark); }
.toc-title svg { width: 22px; height: 22px; color: var(--bc-primary); flex-shrink: 0; }
/* Chevron toggles ▾ → ▴ */
.toc-title::after {
    content: ""; margin-inline-start: auto; flex-shrink: 0;
    width: 11px; height: 11px;
    border-inline-end: 2.5px solid var(--bc-primary);
    border-bottom: 2.5px solid var(--bc-primary);
    transform: rotate(45deg);
    transition: transform 0.25s ease;
}
.toc[open] .toc-title::after { transform: rotate(-135deg); }
.toc ol { list-style: none; counter-reset: toc; padding: 0; margin: 1rem 0 0; }
.toc li { counter-increment: toc; margin: 0; }
.toc li a {
    display: flex; align-items: baseline; gap: 10px;
    padding: 0.55rem 0.5rem;
    color: var(--bc-text); text-decoration: none; font-weight: 600;
    border-radius: 0.5rem;
    border-bottom: 1px dashed var(--bc-border);
    transition: all 0.2s ease;
}
.toc li:last-child a { border-bottom: 0; }
.toc li a::before {
    content: counter(toc);
    flex-shrink: 0;
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(0, 166, 147, 0.12); color: var(--bc-primary-dark);
    border-radius: var(--bc-radius-full); font-size: 0.8rem; font-weight: 800;
}
.toc li a:hover { background: rgba(0, 166, 147, 0.08); color: var(--bc-primary-dark); padding-inline-start: 0.85rem; }

/* ==========================================================================
   CALLOUTS (info / tip / warning / note / danger)
   ========================================================================== */
.callout {
    display: flex;
    gap: 1.1rem;
    padding: 1.15rem 1.5rem;
    margin: 1.75rem 0;
    border-radius: var(--bc-radius);
    border-inline-start: 5px solid var(--bc-primary);
    background: rgba(0, 166, 147, 0.06);
    color: var(--bc-text);
    box-shadow: none;
}
.callout-icon { flex-shrink: 0; width: 28px; height: 28px; color: var(--bc-primary); }
.callout-icon svg { width: 28px; height: 28px; }
.callout-body { flex: 1; }
.callout-body > :first-child { margin-top: 0; }
.callout-body > :last-child { margin-bottom: 0; }
.callout-body p { color: var(--bc-text); }
.callout-title { font-weight: 700; margin-bottom: 4px; color: var(--bc-deep); }

.callout-info    { border-color: var(--bc-primary); background: rgba(0, 166, 147, 0.06); }
.callout-info .callout-icon,    .callout-info .callout-title    { color: var(--bc-primary-dark); }
.callout-tip     { border-color: var(--bc-success); background: rgba(16, 185, 129, 0.08); }
.callout-tip .callout-icon,     .callout-tip .callout-title     { color: var(--bc-success-dark); }
.callout-warning { border-color: var(--bc-amber); background: rgba(245, 158, 11, 0.09); }
.callout-warning .callout-icon, .callout-warning .callout-title { color: var(--bc-amber-dark); }
.callout-note    { border-color: var(--bc-deep); background: rgba(0, 86, 75, 0.05); }
.callout-note .callout-icon,    .callout-note .callout-title    { color: var(--bc-deep); }
.callout-danger  { border-color: var(--bc-error); background: rgba(239, 68, 68, 0.07); }
.callout-danger .callout-icon,  .callout-danger .callout-title  { color: var(--bc-error-dark); }

/* ==========================================================================
   STAT CARDS
   ========================================================================== */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}
.stat-card {
    text-align: center;
    padding: 1.5rem 1rem;
    background: #ffffff;
    border: 1px solid var(--bc-border);
    border-radius: var(--bc-radius);
    box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0,0,0,0.05));
    transition: all 0.25s ease;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1)); border-color: var(--bc-primary); }
.stat-number {
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    font-weight: 800;
    line-height: 1.1;
    background: linear-gradient(135deg, var(--bc-primary), var(--bc-deep));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stat-card.amber .stat-number { background: linear-gradient(135deg, var(--bc-amber), var(--bc-amber-dark)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-label { margin-top: 8px; font-size: 0.875rem; color: var(--bc-muted); font-weight: 600; }

/* ==========================================================================
   ICON FEATURE CARDS  (.icon-card replaces master .feature-card — site owns it)
   ========================================================================== */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}
.icon-card {
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid var(--bc-border);
    border-radius: var(--bc-radius);
    box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0,0,0,0.05));
    transition: all 0.25s ease;
    text-align: start;
}
.icon-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1)); }
.icon-card .icon-badge {
    width: 54px; height: 54px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(0, 166, 147, 0.14), rgba(224, 242, 241, 0.6));
    color: var(--bc-primary-dark);
    border-radius: var(--bc-radius);
    margin-bottom: 0.85rem;
}
.icon-card .icon-badge svg { width: 28px; height: 28px; }
.icon-card h4 { margin: 0 0 6px; color: var(--bc-text); font-size: 1.1rem; }
.icon-card p { margin: 0; color: var(--bc-muted); font-size: 0.97rem; line-height: 1.7; }

/* ==========================================================================
   STEP-BY-STEP PROCESS (numbered, connector line)
   ========================================================================== */
.steps { list-style: none; padding: 0; margin: 2rem 0; position: relative; }
.step {
    position: relative;
    display: flex;
    gap: 1.15rem;
    padding-bottom: 1.5rem;
    padding-inline-start: 0;
    margin: 0;
}
.step:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-inline-start: 22px;
    top: 48px; bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--bc-primary), transparent);
}
.step-num {
    flex-shrink: 0;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--bc-primary), var(--bc-primary-dark));
    color: #ffffff; font-weight: 800; font-size: 1.15rem;
    border-radius: var(--bc-radius-full);
    box-shadow: 0 4px 10px rgba(0, 166, 147, 0.4);
    z-index: 1;
}
.step-content { padding-top: 6px; }
.step-content h4 { margin: 0 0 4px; color: var(--bc-text); font-size: 1.1rem; }
.step-content p { margin: 0; color: var(--bc-muted); }

/* ==========================================================================
   STYLED TABLE (.is-recommended highlights a row)
   ========================================================================== */
.table-wrap {
    overflow-x: auto;
    margin: 2rem 0;
    border-radius: var(--bc-radius);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1));
    -webkit-overflow-scrolling: touch;
}
.styled-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    min-width: 480px;
    font-size: 1rem;
}
.styled-table thead th {
    background: linear-gradient(135deg, var(--bc-deep), var(--bc-primary-dark));
    color: #ffffff;
    font-weight: 700;
    padding: 0.85rem 1.15rem;
    text-align: start;
    white-space: nowrap;
}
.styled-table tbody td { padding: 0.85rem 1.15rem; border-bottom: 1px solid var(--bc-border); }
.styled-table tbody tr:nth-child(even) { background: var(--bc-bg-light); }
.styled-table tbody tr:hover { background: rgba(0, 166, 147, 0.05); }
.styled-table tbody tr.is-recommended { background: rgba(245, 158, 11, 0.10); }
.styled-table tbody tr.is-recommended td { font-weight: 600; }
.styled-table tbody tr.is-recommended td:first-child { box-shadow: inset 4px 0 0 var(--bc-amber); }
.styled-table .cell-price { font-weight: 800; color: var(--bc-primary-dark); white-space: nowrap; }

/* ==========================================================================
   PRICING CARDS (.featured = highlighted plan)
   ========================================================================== */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
    align-items: stretch;
}
.price-card {
    position: relative;
    display: flex; flex-direction: column;
    padding: 1.5rem;
    background: #ffffff;
    border: 2px solid var(--bc-border);
    border-radius: var(--bc-radius-lg);
    box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0,0,0,0.05));
    transition: all 0.25s ease;
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0,0,0,0.1)); }
.price-card.featured { border-color: var(--bc-primary); box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1)); padding-top: 3rem; }
.price-card .ribbon {
    position: absolute;
    top: 1rem;
    inset-inline-end: 1rem;
    background: var(--bc-amber); color: #3d2800;
    font-size: 0.75rem; font-weight: 800;
    padding: 0.25em 0.85em; border-radius: var(--bc-radius-full);
}
.price-plan { font-size: 1.1rem; font-weight: 700; color: var(--bc-deep); margin-bottom: 4px; }
.price-amount { font-size: 2.4rem; font-weight: 800; color: var(--bc-primary-dark); line-height: 1.1; }
.price-amount small { font-size: 0.875rem; font-weight: 600; color: var(--bc-muted); }
.price-features { list-style: none; padding: 0; margin: 1rem 0; flex: 1; }
.price-features li {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0; color: var(--bc-text); font-size: 0.97rem;
    border-bottom: 1px solid var(--bc-border);
}
.price-features li::before {
    content: "✓"; flex-shrink: 0;
    width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(16, 185, 129, 0.15); color: var(--bc-success);
    border-radius: var(--bc-radius-full); font-weight: 800; font-size: 0.7rem;
}

/* ==========================================================================
   PROS / CONS
   ========================================================================== */
.proscons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}
.proscons-col { padding: 1.5rem; border-radius: var(--bc-radius); }
.proscons .pros { background: rgba(16, 185, 129, 0.06); border: 1px solid rgba(16, 185, 129, 0.25); }
.proscons .cons { background: rgba(239, 68, 68, 0.05); border: 1px solid rgba(239, 68, 68, 0.22); }
.proscons h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 0.75rem; font-size: 1.05rem; }
.proscons .pros h4 { color: var(--bc-success-dark); }
.proscons .cons h4 { color: var(--bc-error-dark); }
.proscons ul { list-style: none; padding: 0; margin: 0; }
.proscons li { display: flex; gap: 8px; padding: 6px 0; color: var(--bc-text); }
.proscons li::before { flex-shrink: 0; font-weight: 800; }
.proscons .pros li::before { content: "＋"; color: var(--bc-success); }
.proscons .cons li::before { content: "－"; color: var(--bc-error); }

/* ==========================================================================
   KEY TAKEAWAY / HIGHLIGHT BOX
   ========================================================================== */
.key-takeaway {
    position: relative;
    display: flex; gap: 1.15rem;
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    background: linear-gradient(135deg, var(--bc-deep), var(--bc-primary-dark));
    color: #ffffff;
    border-radius: var(--bc-radius-lg);
    overflow: hidden;
}
.key-takeaway::after {
    content: "";
    position: absolute; inset-inline-end: -40px; top: -40px;
    width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.35), transparent 70%);
}
.key-takeaway .kt-icon { flex-shrink: 0; width: 40px; height: 40px; color: var(--bc-amber); z-index: 1; }
.key-takeaway .kt-icon svg { width: 40px; height: 40px; }
.key-takeaway h3 { color: #ffffff; margin: 0 0 6px; padding: 0; border: 0; z-index: 1; font-size: 1.2rem; }
.key-takeaway p { margin: 0; color: rgba(255, 255, 255, 0.92); z-index: 1; }

/* ==========================================================================
   CHECKLIST
   ========================================================================== */
.checklist { list-style: none; padding: 0; margin: 1.5rem 0; }
.checklist li {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 0; color: var(--bc-text); line-height: 1.7;
}
.checklist li svg {
    flex-shrink: 0; width: 22px; height: 22px; margin-top: 3px;
    color: var(--bc-success);
}

/* ==========================================================================
   FAQ ACCORDION (native <details>, no JS)
   (.faq-acc replaces master .faq — site already owns .faq/.faq-item)
   ========================================================================== */
.faq-acc { margin: 2rem 0; }
.faq-acc details {
    background: #ffffff;
    border: 1px solid var(--bc-border);
    border-radius: var(--bc-radius);
    margin-bottom: 0.75rem;
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}
.faq-acc details[open] { box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1)); border-color: rgba(0, 166, 147, 0.4); }
.faq-acc summary {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 1.1rem 1.4rem;
    font-weight: 700; color: var(--bc-text); cursor: pointer;
    list-style: none;
}
.faq-acc summary::-webkit-details-marker { display: none; }
.faq-acc summary::after {
    content: "";
    flex-shrink: 0;
    width: 11px; height: 11px;
    border-inline-end: 2.5px solid var(--bc-primary);
    border-bottom: 2.5px solid var(--bc-primary);
    transform: rotate(45deg);
    transition: transform 0.25s ease;
}
.faq-acc details[open] summary::after { transform: rotate(-135deg); }
.faq-acc summary:hover { color: var(--bc-primary-dark); }
.faq-answer { padding: 0 1.4rem 1.1rem; color: var(--bc-muted); }
.faq-answer > :first-child { margin-top: 0; }
.faq-answer p { color: var(--bc-muted); margin-bottom: 0; }

/* ==========================================================================
   STAR RATING & METER BARS
   ========================================================================== */
.rating { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--bc-text); }
.stars { display: inline-flex; gap: 2px; color: var(--bc-amber); }
.stars svg { width: 20px; height: 20px; }
.rating small { color: var(--bc-muted); font-weight: 600; }

.meter-row { margin: 0.75rem 0; }
.meter-row .meter-label { display: flex; justify-content: space-between; font-size: 0.875rem; font-weight: 600; color: var(--bc-text); margin-bottom: 4px; }
.meter { height: 10px; background: var(--bc-border); border-radius: var(--bc-radius-full); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: var(--bc-radius-full); background: linear-gradient(90deg, var(--bc-primary), var(--bc-amber)); }

/* ==========================================================================
   TESTIMONIAL
   ========================================================================== */
.testimonial {
    display: flex; gap: 1.15rem;
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    background: var(--bc-bg-light);
    border: 1px solid var(--bc-border);
    border-inline-start: 5px solid var(--bc-amber);
    border-radius: var(--bc-radius);
    position: relative;
}
.testimonial .quote-mark {
    position: absolute; inset-inline-start: 1rem; top: -10px;
    font-size: 3.5rem; line-height: 1; color: var(--bc-amber); opacity: 0.4; font-family: Georgia, serif;
}
.testimonial-avatar {
    flex-shrink: 0; width: 56px; height: 56px;
    border-radius: var(--bc-radius-full);
    background: linear-gradient(135deg, var(--bc-primary), var(--bc-deep));
    display: flex; align-items: center; justify-content: center;
    color: #ffffff; font-weight: 800; font-size: 1.15rem;
}
.testimonial p { margin: 0 0 6px; font-style: italic; color: var(--bc-text); }
.testimonial cite { font-style: normal; font-weight: 700; color: var(--bc-deep); }
.testimonial cite span { display: block; font-weight: 600; font-size: 0.85rem; color: var(--bc-muted); }

/* ==========================================================================
   DECORATIVE DIVIDER
   ========================================================================== */
.divider {
    display: flex; align-items: center; gap: 1rem;
    margin: 3rem 0;
    color: var(--bc-primary);
}
.divider::before, .divider::after {
    content: ""; flex: 1; height: 1px;
    background: linear-gradient(to right, transparent, var(--bc-border), transparent);
}
.divider svg { width: 26px; height: 26px; flex-shrink: 0; }

/* ==========================================================================
   AUTHOR BIO
   ========================================================================== */
.author-bio {
    display: flex; gap: 1.15rem; align-items: center;
    padding: 1.5rem;
    margin: 2rem 0;
    background: var(--bc-bg-light);
    border: 1px solid var(--bc-border);
    border-radius: var(--bc-radius);
}
.author-bio .author-pic {
    flex-shrink: 0; width: 64px; height: 64px;
    border-radius: var(--bc-radius-full);
    background: linear-gradient(135deg, var(--bc-deep), var(--bc-primary));
    display: flex; align-items: center; justify-content: center;
    color: #ffffff; font-weight: 800; font-size: 1.4rem;
}
.author-bio h4 { margin: 0 0 4px; color: var(--bc-text); font-size: 1.1rem; }
.author-bio h4 a { color: inherit; }
.author-bio p { margin: 0; color: var(--bc-muted); font-size: 0.92rem; }

/* ==========================================================================
   SHARE ROW
   ========================================================================== */
.share-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
    margin: 2rem 0;
    padding: 1rem 0;
    border-top: 1px solid var(--bc-border);
    border-bottom: 1px solid var(--bc-border);
}
.share-row span { font-weight: 700; color: var(--bc-text); }
.share-btn {
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--bc-radius-full);
    background: var(--bc-bg-light); color: var(--bc-muted);
    border: 1px solid var(--bc-border);
    transition: all 0.2s ease;
}
.share-btn:hover { transform: translateY(-3px); color: #ffffff; }
.share-btn svg { width: 20px; height: 20px; }
.share-btn.x:hover  { background: #000000; border-color: #000000; }
.share-btn.fb:hover { background: #1877F2; border-color: #1877F2; }
.share-btn.wa:hover { background: #25D366; border-color: #25D366; }

/* ==========================================================================
   RELATED POSTS
   ========================================================================== */
.related-posts { max-width: 1100px; margin: 3rem auto; padding: 0 1.5rem; }
.related-posts > h3 { color: var(--bc-text); margin-bottom: 1.5rem; }
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}
.related-card {
    display: block;
    background: #ffffff;
    border: 1px solid var(--bc-border);
    border-radius: var(--bc-radius);
    overflow: hidden;
    text-decoration: none;
    transition: all 0.25s ease;
}
.related-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1)); }
.related-card img { width: 100%; height: 150px; object-fit: cover; }
.related-card .related-body { padding: 1rem 1.15rem 1.25rem; }
.related-card .related-cat { font-size: 0.75rem; font-weight: 700; color: var(--bc-primary-dark); text-transform: uppercase; letter-spacing: 0.5px; }
.related-card h4 { margin: 6px 0 0; color: var(--bc-text); font-size: 1.05rem; line-height: 1.45; }

/* ==========================================================================
   CTA BOX (end of article)
   ========================================================================== */
.blog-post-cta {
    max-width: 860px;
    margin: 3rem auto;
    padding: 2.5rem 2rem;
    background: linear-gradient(135deg, var(--bc-deep), var(--bc-primary-dark));
    border-radius: var(--bc-radius-lg);
    text-align: center;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}
.blog-post-cta::after {
    content: "";
    position: absolute; inset-inline-start: -60px; bottom: -60px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.28), transparent 70%);
    pointer-events: none;
}
.blog-post-cta h3 { color: #ffffff; margin: 0 0 0.5rem; font-size: 1.6rem; position: relative; z-index: 1; }
.blog-post-cta p { color: rgba(255, 255, 255, 0.9); margin: 0 0 1.5rem; position: relative; z-index: 1; }
.blog-post-cta-buttons {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;
    position: relative; z-index: 1;
}

/* BUTTON SAFETY NET — CTA + pricing links always look like real buttons,
   even if a generated post drops the .btn classes. Mirrors the site's .btn. */
.blog-post-cta-buttons a,
.price-card a,
.cta-banner a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.875rem 2rem;
    font-weight: 700;
    line-height: 1.2;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.25s ease;
    white-space: nowrap;
}
.blog-post-cta-buttons a { font-size: 1.05rem; min-width: 220px; }
.price-card a { width: 100%; margin-top: auto; font-size: 1rem; }
.blog-post-cta-buttons a svg, .price-card a svg, .cta-banner a svg { flex-shrink: 0; }

/* Button skins used inside blocks (match site .btn--primary / --secondary) */
.btn-solid { background: var(--bc-primary); color: #ffffff; box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1)); }
.btn-solid:hover { background: var(--bc-primary-light); color: #ffffff; transform: translateY(-2px); }
.btn-amber { background: var(--bc-amber); color: #3d2800; box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1)); }
.btn-amber:hover { background: #fbbf24; transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--bc-primary-dark); border: 2px solid var(--bc-primary); }
.btn-ghost:hover { background: var(--bc-primary); color: #ffffff; }
.blog-post-cta .btn-ghost { color: #ffffff; border-color: rgba(255, 255, 255, 0.7); }
.blog-post-cta .btn-ghost:hover { background: #ffffff; color: var(--bc-deep); border-color: #ffffff; }
.btn-whatsapp { background: #25D366; color: #ffffff; box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1)); }
.btn-whatsapp:hover { background: #1eb955; color: #ffffff; transform: translateY(-2px); }

/* ==========================================================================
   EXTRA BLOCKS (set 2)
   ========================================================================== */

/* --- Trust badges strip -------------------------------------------------- */
.trust-strip {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 0.75rem 2rem;
    padding: 1rem 1.5rem;
    margin: 2rem 0;
    background: var(--bc-bg-light);
    border: 1px solid var(--bc-border);
    border-radius: var(--bc-radius);
}
.trust-item { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--bc-deep); font-size: 0.9rem; }
.trust-item svg { width: 26px; height: 26px; color: var(--bc-primary); flex-shrink: 0; }

/* --- Before / After showcase --------------------------------------------- */
.beforeafter { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0; }
.ba-card { position: relative; border-radius: var(--bc-radius); overflow: hidden; box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1)); margin: 0; }
.ba-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin: 0; border-radius: 0; }
.ba-label {
    position: absolute; top: 0.75rem; inset-inline-start: 0.75rem;
    padding: 0.3em 0.95em; border-radius: var(--bc-radius-full);
    font-weight: 800; font-size: 0.85rem; color: #ffffff;
    z-index: 1;
}
.ba-before .ba-label { background: var(--bc-text); }
.ba-after  .ba-label { background: var(--bc-success); }

/* --- Pull quote ---------------------------------------------------------- */
.pullquote {
    text-align: center; max-width: 60ch;
    margin: 3rem auto;
    padding: 1.5rem 2rem;
    font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 700; line-height: 1.55;
    color: var(--bc-deep);
}
.pullquote::before {
    content: "\201D"; display: block; font-family: Georgia, serif;
    font-size: 4rem; line-height: 0.4; color: var(--bc-amber); margin-bottom: 1rem;
}
.pullquote span { display: block; margin-top: 1rem; font-size: 1rem; font-weight: 600; color: var(--bc-primary-dark); }

/* --- VS head-to-head cards ----------------------------------------------- */
.vs-wrap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: stretch; margin: 2rem 0; }
.vs-card { padding: 1.5rem; background: #ffffff; border: 2px solid var(--bc-border); border-radius: var(--bc-radius); box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0,0,0,0.05)); }
.vs-card.win { border-color: var(--bc-success); box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1)); }
.vs-card h4 { margin: 0 0 0.75rem; color: var(--bc-text); display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.vs-card ul { list-style: none; padding: 0; margin: 0; }
.vs-card li { padding: 5px 0; color: var(--bc-muted); font-size: 0.97rem; }
.vs-badge { align-self: center; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--bc-deep); color: #ffffff; font-weight: 800; border-radius: var(--bc-radius-full); box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1)); font-family: var(--font-english, Inter, sans-serif); }

/* --- Coupon / offer ticket ----------------------------------------------- */
.coupon {
    position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1rem; margin: 2rem 0; padding: 1.5rem 2rem;
    background: linear-gradient(135deg, var(--bc-amber), #d97706);
    color: #3d2800; border-radius: var(--bc-radius);
}
.coupon::before, .coupon::after {
    content: ""; position: absolute; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; background: var(--bg-color, #ffffff); border-radius: var(--bc-radius-full);
}
.coupon::before { inset-inline-start: -14px; }
.coupon::after  { inset-inline-end: -14px; }
.coupon-text h4 { margin: 0; font-size: 1.25rem; color: #3d2800; }
.coupon-text p { margin: 4px 0 0; font-weight: 600; color: #4a3200; }
.coupon-code {
    padding: 0.5em 1.2em; background: rgba(61, 40, 0, 0.12);
    border: 2px dashed #6b4a00; border-radius: 0.5rem;
    font-weight: 800; font-size: 1.1rem; letter-spacing: 1px;
    font-family: var(--font-english, Inter, sans-serif);
}

/* --- Inline mid-article CTA banner --------------------------------------- */
.cta-banner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1rem; margin: 2rem 0; padding: 1.5rem 2rem;
    background: linear-gradient(135deg, var(--bc-deep), var(--bc-primary));
    border-radius: var(--bc-radius); color: #ffffff;
}
.cta-banner-text h4 { margin: 0 0 4px; color: #ffffff; font-size: 1.25rem; }
.cta-banner-text p { margin: 0; color: rgba(255, 255, 255, 0.9); font-size: 1rem; }
.cta-banner a { flex-shrink: 0; }

/* --- Image gallery grid (.post-gallery — site already owns .gallery) ------ */
.post-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; margin: 2rem 0; }
.post-gallery figure { margin: 0; overflow: hidden; border-radius: var(--bc-radius); box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0,0,0,0.05)); }
.post-gallery img { width: 100%; height: 160px; object-fit: cover; margin: 0; border-radius: 0; box-shadow: none; transition: transform 0.3s ease; display: block; }
.post-gallery img:hover { transform: scale(1.08); }

/* --- Quick info / contact card ------------------------------------------- */
.info-card { margin: 2rem 0; padding: 1.5rem; background: var(--bc-bg-light); border: 1px solid var(--bc-border); border-radius: var(--bc-radius); }
.info-card h4 { margin: 0 0 0.75rem; color: var(--bc-deep); display: flex; align-items: center; gap: 8px; font-size: 1.1rem; }
.info-row { display: flex; align-items: center; gap: 0.75rem; padding: 9px 0; border-bottom: 1px solid var(--bc-border); color: var(--bc-text); }
.info-row:last-child { border-bottom: 0; }
.info-row svg { width: 20px; height: 20px; color: var(--bc-primary); flex-shrink: 0; }
.info-row strong { color: var(--bc-deep); }

/* --- Responsive video embed (16:9, poster + play) ------------------------- */
.video-embed {
    position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 2rem 0;
    border-radius: var(--bc-radius); overflow: hidden;
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1)); background: var(--bc-deep);
}
.video-embed iframe, .video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed .video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.video-embed .play-btn {
    position: absolute; inset: 0; margin: auto; width: 74px; height: 74px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 166, 147, 0.92); color: #ffffff; border-radius: var(--bc-radius-full);
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1)); transition: transform 0.25s ease;
}
.video-embed:hover .play-btn { transform: scale(1.1); }
.video-embed .play-btn svg { width: 30px; height: 30px; margin-inline-start: 3px; }

/* --- Glossary / definition box ------------------------------------------- */
.glossary { margin: 2rem 0; padding: 1.5rem 2rem; background: rgba(0, 166, 147, 0.04); border: 1px solid rgba(0, 166, 147, 0.2); border-radius: var(--bc-radius); }
.glossary h4 { margin: 0 0 0.75rem; color: var(--bc-deep); display: flex; align-items: center; gap: 8px; font-size: 1.1rem; }
.glossary h4 svg, .info-card h4 svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--bc-primary); }
.glossary dl { margin: 0; }
.glossary dt { font-weight: 800; color: var(--bc-primary-dark); margin-top: 0.75rem; }
.glossary dd { margin: 2px 0 0; color: var(--bc-muted); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
    .quick-answer, .callout, .testimonial, .key-takeaway, .author-bio { flex-direction: column; gap: 0.75rem; }
    .key-takeaway { padding: 1.5rem; }
    .article-hero h1 { font-size: 1.7rem; }
    .blog-post-cta-buttons a { width: 100%; }
    .cta-banner { justify-content: center; text-align: center; }
}
@media (max-width: 600px) {
    .vs-wrap { grid-template-columns: 1fr; }
    .vs-badge { margin: 0 auto; }
}
@media (max-width: 540px) {
    .beforeafter { grid-template-columns: 1fr; }
}