/* ===================================
   CSS VARIABLES
   =================================== */
:root {
    /* Primary Colors */
    --blog-primary: #2c5f2d;
    --blog-primary-light: #4a8b4d;
    --blog-primary-dark: #1a3a1b;

    /* Accent Colors */
    --blog-accent: #97bc62;
    --blog-accent-light: #b8d896;
    --blog-accent-bg: #eef6e6;

    /* Neutral Colors */
    --blog-text: #333333;
    --blog-text-light: #666666;
    --blog-text-muted: #999999;
    --blog-bg: #ffffff;
    --blog-bg-light: #f6f7f9;
    --blog-bg-dark: #2a2a2a;
    --blog-border: #9aa3ac;

    /* Semantic Colors */
    --blog-success: #28a745;
    --blog-warning: #ffc107;
    --blog-danger: #dc3545;
    --blog-info: #17a2b8;

    /* Semantic Backgrounds */
    --blog-info-bg: #e7f6f8;
    --blog-warning-bg: #fff8e6;
    --blog-success-bg: #e8f5ea;

    /* Spacing */
    --spacing-xs: 6px;
    --spacing-sm: 10px;
    --spacing-md: 14px;
    --spacing-lg: 18px;
    --spacing-xl: 24px;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);
}


/* ===================================
   BASE STYLES
   =================================== */
.gp-post {
    // max-width: 820px;
    // margin: 0 auto;
    // padding: var(--spacing-md);
    line-height: 1.6;
    color: var(--blog-text);
}

.gp-post img {
    max-width: 100%;
    height: auto;
    margin: 0 !important;
    border-radius: var(--radius-sm);
}

.gp-post p {
	margin-block: 1rem;
}


/* ===================================
   HERO SECTION
   =================================== */
.gp-hero {
    margin-bottom: var(--spacing-xl);
}

.gp-title {
    font-size: 2.2rem !important;
    font-weight: 700;
    margin: 0 0 var(--spacing-sm);
    color: var(--blog-primary-dark);
    line-height: 1.3;
}

.gp-subtitle {
    font-size: 1.1rem !important;
    margin: 0 0 var(--spacing-lg);
    color: var(--blog-text-light);
    line-height: 1.5;
}

.gp-figure-hero {
    margin: var(--spacing-lg) 0;
    /*box-shadow: var(--shadow-md);*/
    border-radius: var(--radius-md);
    overflow: hidden;
}


/* ===================================
   TYPOGRAPHY
   =================================== */
.gp-h2 {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    margin-top: var(--spacing-xl) !important;
    margin-bottom: var(--spacing-md) !important;
    color: var(--blog-primary);
    border-bottom: 2px solid var(--blog-accent-light);
    padding-bottom: var(--spacing-xs);
}

.gp-h3 {
    font-size: 1.15rem !important;
    font-weight: 600;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    color: var(--blog-primary-light);
}

.gp-h4 {
    font-size: 1.05rem !important;
    font-weight: 600;
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
    color: var(--blog-text);
}

.gp-h5 {
    font-size: 1rem !important; 
    font-weight: 600;
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    color: var(--blog-text);
}

.gp-h6 {
    font-size: 0.95rem !important;
    font-weight: 600;
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    color: var(--blog-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* ===================================
   FIGURES & IMAGES
   =================================== */
.gp-figure {
    margin: var(--spacing-lg) 0;
}

.gp-caption {
    font-size: 0.95rem !important;
    color: var(--blog-text-light);
    text-align: center;
    margin-top: var(--spacing-xs);
    font-style: italic;
}

.gp-imgmeta {
    font-size: 0.85rem !important;
    color: var(--blog-text-muted);
    text-align: center;
    margin-top: 4px;
}


/* ===================================
   QUICK ANSWER / SNIPPET
   =================================== */
.gp-snippet {
    border: 1px solid var(--blog-accent);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin: var(--spacing-lg) 0;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: brightness(0.98);
    box-shadow: var(--shadow-sm);
}

.gp-snippet .gp-h2 {
    margin-top: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.gp-snippet-text {
    margin: var(--spacing-sm) 0;
    font-size: 1rem !important;
    line-height: 1.6 !important;
}

.gp-snippet-list {
    margin-top: var(--spacing-md);
}

.gp-snippet-list ul {
    list-style: none;
    padding-left: 0;
}

.gp-snippet-list ul li {
    padding-left: 24px;
    position: relative;
    margin: var(--spacing-xs) 0;
}

.gp-snippet-list ul li::before {
    content: "\f26b";
    font-family: "bootstrap-icons", sans-serif;
    color: var(--blog-accent);
    position: absolute;
    left: 0;
}

.gp-snippet-lead {
    font-weight: 600;
    color: var(--blog-primary);
    margin-bottom: var(--spacing-xs);
}

.gp-mini-snippet {
    font-weight: 600;
    color: var(--blog-primary);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(151, 188, 98, 0.1);
    backdrop-filter: brightness(0.98);
    font-size: 1rem !important;
    border-left: 3px solid var(--blog-accent);
    border-radius: var(--radius-sm);
    display: inline-block;
}


/* ===================================
   TABLE OF CONTENTS
   =================================== */
.gp-toc {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: brightness(0.97);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
}

.gp-toc .gp-h2 {
    margin-top: 0;
    border-bottom: none;
    padding-bottom: 0;
    font-size: 1.3rem !important;
}

.gp-toc ol {
    margin: var(--spacing-sm) 0 0;
    padding-left: 0;
    list-style: none;
    counter-reset: toc-counter;
}

.gp-toc li {
    margin: var(--spacing-xs) 0;
    counter-increment: toc-counter;
    padding-left: 24px;
    position: relative;
}

.gp-toc li::before {
    content: counter(toc-counter) ".";
    position: absolute;
    left: 0;
    color: var(--blog-accent);
    font-weight: 600;
    font-size: 0.95rem !important;
}

.gp-toc a {
    color: var(--blog-primary);
    text-decoration: none;
    transition: color 0.3s;
}

.gp-toc a:hover {
    color: var(--blog-primary-dark);
    text-decoration: underline;
}


/* ===================================
   CTA BLOCKS
   =================================== */
.gp-cta {
    border: 1px solid rgba(151, 188, 98, 0.3);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    margin: var(--spacing-xl) 0;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: brightness(0.98);
}

.gp-cta .gp-h2 {
    margin-top: 0;
    border-bottom: none;
    padding-bottom: 0;
    font-size: 1.4rem !important;
    color: var(--blog-primary-dark);
}

.gp-cta-text {
    margin: var(--spacing-sm) 0 var(--spacing-md);
    font-size: 1rem !important;
    color: var(--blog-text-light);
}

.gp-cta-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-top: var(--spacing-md);
}

.gp-cta-bullets {
    margin-top: var(--spacing-md);
    padding-left: 0 !important;
    list-style: none;
    color: var(--blog-text-light);
}

.gp-cta-bullets li {
    margin: var(--spacing-xs) 0;
    padding-left: 24px;
    position: relative;
}

.gp-cta-final {
    border-color: rgba(151, 188, 98, 0.2);
    background: rgba(255, 255, 255, 0.5);
    text-align: center;
}

.gp-cta-final .gp-h2 {
    font-size: 1.3rem !important;
}

.gp-cta-final .gp-cta-text {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.gp-cta-final .gp-btn {
    margin-top: var(--spacing-xs);
}

/* CTA Box - Gradient variant */
.gp-cta-box {
    background: linear-gradient(135deg, var(--blog-primary) 0%, var(--blog-primary-light) 100%);
    color: var(--blog-bg);
    padding: clamp(2em, 5vw, 3em) clamp(1.5em, 4vw, 2em);
    border-radius: var(--radius-md);
    text-align: center;
    margin: var(--spacing-xl) 0;
    box-shadow: var(--shadow-md);
}

.gp-cta-box .gp-h2,
.gp-cta-box .gp-h3 {
    color: var(--blog-bg);
    margin-top: 0;
    border-bottom: none;
    padding-bottom: 0;
    font-size: clamp(1.5rem, 4vw, 2rem) !important;
}

.gp-cta-box p {
    font-size: clamp(1rem, 2.5vw, 1.15rem) !important;
    margin-bottom: 1.5em;
    opacity: 0.95;
    color: var(--blog-bg);
}

.gp-cta-box .gp-btn-primary {
    background-color: var(--blog-bg);
    color: var(--blog-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.gp-cta-box .gp-btn-primary:hover {
    background-color: var(--blog-bg-light);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}


/* ===================================
   BUTTONS
   =================================== */
.gp-btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem !important; 
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none !important;
}

.gp-btn-primary {
    background: var(--blog-primary);
    color: var(--blog-bg) !important;
    box-shadow: var(--shadow-sm);
}

.gp-btn-primary:hover {
    background: var(--blog-primary-dark);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.gp-btn-secondary {
    border: 1px solid var(--blog-primary);
    color: var(--blog-primary) !important;
    background: var(--blog-bg);
}

.gp-btn-secondary:hover {
    background: var(--blog-primary);
    color: var(--blog-bg) !important;
    transform: translateY(-2px);
}


/* ===================================
   CALLOUT BLOCKS
   =================================== */
.gp-callout {
    border-left: 3px solid var(--blog-accent);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    margin: var(--spacing-lg) 0;
    background: rgba(151, 188, 98, 0.08);
    backdrop-filter: brightness(0.98);
}

.gp-callout .gp-h3 {
    margin-top: 0;
}

.gp-callout ul {
    list-style: none;
    padding-left: 0;
}

.gp-callout ul li {
    padding-left: 24px;
    position: relative;
    margin: var(--spacing-xs) 0;
}

.gp-callout-takeaways {
    border-left-color: var(--blog-info);
    background: rgba(23, 162, 184, 0.08);
    backdrop-filter: brightness(0.98);
}

.gp-callout-warning {
    border-left-color: var(--blog-warning);
    background: rgba(255, 193, 7, 0.08);
    backdrop-filter: brightness(0.98);
}

.gp-callout-recommend {
    border-left-color: var(--blog-success);
    background: rgba(40, 167, 69, 0.08);
    backdrop-filter: brightness(0.98);
}


/* ===================================
   STEPS / HOW-TO
   =================================== */
.gp-steps {
    counter-reset: step-counter;
    list-style: none;
    padding-left: 0 !important;
}

.gp-steps li {
    counter-increment: step-counter;
    margin: var(--spacing-sm) 0;
    padding: var(--spacing-sm);
    padding-left: 50px;
    position: relative;
    background: rgba(151, 188, 98, 0.08);
    backdrop-filter: brightness(0.98);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--blog-accent);
}

.gp-steps li::before {
    content: counter(step-counter);
    position: absolute;
    left: var(--spacing-sm);
    top: var(--spacing-sm);
    width: 28px;
    height: 28px;
    background: var(--blog-primary);
    color: var(--blog-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.95rem !important;
}

/* Simple Steps (Alternative) */
.gp-steps-simple {
    list-style: none;
    padding-left: 0;
    counter-reset: simple-step;
}

.gp-steps-simple li {
    counter-increment: simple-step;
    margin: var(--spacing-md) 0;
    padding-left: 40px;
    position: relative;
}

.gp-steps-simple li::before {
    content: counter(simple-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    background: var(--blog-accent);
    color: var(--blog-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem !important;
}

.gp-steps-simple strong {
    color: var(--blog-primary);
    display: block;
    margin-bottom: 4px;
}


/* ===================================
   TABLES
   =================================== */
.gp-table-simple {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-lg) 0;
    background: unset !important;
}
.gp-table-simple tr {
		background: unset	!important;
		border:0;
}
.gp-table-simple th {
    text-align: left;
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: 600;
    font-size: 0.95rem !important;
    color: var(--blog-primary);
    border-bottom: 2px solid rgba(151, 188, 98, 0.3);
}

.gp-table-simple td {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.95rem !important;
    color: var(--blog-text);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.gp-table-simple tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02) !important;
}

.gp-table-simple tbody tr:last-child td {
    border-bottom: none;
}

.gp-table-simple tbody tr:hover {
    background: rgba(151, 188, 98, 0.05) !important;
}

.gp-table-simple {
	tbody {
		border-width: 0 !important;
	}
}


/* ===================================
   PRODUCT CARDS
   =================================== */
.gp-products {
    margin: var(--spacing-xl) 0;
}

.gp-product-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

@media (min-width: 680px) {
    .gp-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.gp-product-card {
    border: 1px solid var(--blog-border);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    background: var(--blog-bg);
}

.gp-product-card:hover {
    border-color: var(--blog-accent);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.gp-product-card .gp-h3 {
    margin-top: 0;
}

.gp-product-card p {
    margin: var(--spacing-sm) 0 var(--spacing-md);
    color: var(--blog-text-light);
}

.gp-product-primary {
    // border: 2px solid var(--blog-primary);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: brightness(0.98);
    position: relative;
}



/* ===================================
   RELATED GUIDES
   =================================== */
.gp-related {
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: brightness(0.97);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-md);
}

.gp-related .gp-h2 {
    margin-top: 0;
}

.gp-related ul {
    list-style: none;
    padding-left: 0;
}

.gp-related li {
    margin: var(--spacing-sm) 0;
    padding-left: 24px;
    position: relative;
}

.gp-related li::before {
    content: "\f285";
    font-family: "bootstrap-icons", sans-serif;
    position: absolute;
    left: 0;
    color: var(--blog-accent);
    font-weight: 400;
    font-size: 1.1rem !important;
}

.gp-related a {
    color: var(--blog-primary);
    text-decoration: none;
    transition: color 0.3s;
}

.gp-related a:hover {
    color: var(--blog-primary-dark);
    text-decoration: underline;
}


/* ===================================
   FAQ SECTION
   =================================== */
.gp-faq {
    margin: var(--spacing-xl) 0;
}

.gp-faq-item {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    margin: var(--spacing-sm) 0;
    transition: all 0.2s ease;
    background: var(--blog-bg);
}

.gp-faq-item:hover {
    border-color: rgba(151, 188, 98, 0.3);
}

.gp-faq-item[open] {
    border-color: rgba(151, 188, 98, 0.4);
    background: rgba(151, 188, 98, 0.03);
}

.gp-faq-q {
    cursor: pointer;
    font-weight: 500;
    color: var(--blog-text);
    font-size: 1rem !important;
    padding: var(--spacing-xs) 0;
    list-style: none;
}

.gp-faq-q::-webkit-details-marker {
    display: none;
}

.gp-faq-q::marker {
    content: "";
}

.gp-faq-q::before {
    content: "\f282";
    font-family: "bootstrap-icons", sans-serif;
    color: var(--blog-accent);
    margin-right: var(--spacing-xs);
    font-size: 0.85rem !important;
    display: inline-block;
    transition: transform 0.2s ease;
}

.gp-faq-item[open] .gp-faq-q::before {
    transform: rotate(90deg);
}

.gp-faq-q:hover {
    color: var(--blog-primary);
}

.gp-faq-a {
    margin-top: var(--spacing-xs);
    padding-left: 20px;
    color: var(--blog-text);
    line-height: 1.6 !important;
    font-size: 0.95rem !important;
}


/* ===================================
   INLINE CTA
   =================================== */
.gp-inline-cta {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md);
    background: rgba(151, 188, 98, 0.08);
    backdrop-filter: brightness(0.98);
    border-left: 3px solid var(--blog-primary);
    border-radius: var(--radius-sm);
}

.gp-inline-cta a {
    color: var(--blog-primary);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s;
}

.gp-inline-cta a:hover {
    color: var(--blog-primary-dark);
    text-decoration: underline;
}


/* ===================================
   SPECS / SIZING
   =================================== */
.gp-specs {
    list-style: none;
    padding-left: 0 !important;
}

.gp-specs li {
    margin: var(--spacing-xs) 0;
    padding: var(--spacing-xs) var(--spacing-sm);
    /*background: rgba(151, 188, 98, 0.08);*/
    backdrop-filter: brightness(0.98);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--blog-accent);
    font-size: 0.95rem !important; 
}

.gp-specs strong {
    color: var(--blog-primary);
}


/* ===================================
   ICONS & ENHANCEMENTS
   =================================== */
.gp-cta-bullets li::before {
    content: "\f633";
    font-family: "bootstrap-icons", sans-serif;
    color: var(--blog-primary);
    position: absolute;
    left: 0;
}

.gp-callout ul li::before {
    content: "\f285";
    font-family: "bootstrap-icons", sans-serif;
    color: var(--blog-accent);
    position: absolute;
    left: 0;
    top: 1px
}


/* ===================================
   QUOTE BLOCK
   =================================== */
.gp-quote {
    margin: var(--spacing-xl) var(--spacing-lg);
    padding: 0;
    font-style: italic;
}

.gp-quote-text {
    font-size: 1.15rem !important;
    line-height: 1.7 !important;
    color: var(--blog-text-light);
    margin: 0 0 var(--spacing-sm);
}

.gp-quote-author {
    font-size: 0.9rem !important;
    color: var(--blog-text-muted);
    font-style: normal;
    font-weight: 500;
}

.gp-quote-author::before {
    content: "— ";
}


/* ===================================
   IMAGE WITH TEXT
   =================================== */
.gp-img-text {
    display: flex;
    gap: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    align-items: flex-start;
    flex-wrap: wrap;
}

.gp-img-text-left .gp-img-text-image {
    order: 1;
}

.gp-img-text-left .gp-img-text-content {
    order: 2;
}

.gp-img-text-right .gp-img-text-image {
    order: 2;
}

.gp-img-text-right .gp-img-text-content {
    order: 1;
}

.gp-img-text-image {
    flex: 0 0 280px;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.gp-img-text-image img {
    width: 100%;
    height: auto;
    display: block;
}

.gp-img-text-content {
    flex: 1;
    min-width: 250px;
}

.gp-img-text-content .gp-h3 {
    margin-top: 0;
}

.gp-img-text-right .gp-img-text-content {
    text-align: right;
}

/* Image with Text 50/50 variant */
.gp-img-text-50 {
    flex-wrap: nowrap;
}

.gp-img-text-50 .gp-img-text-image {
    flex: 1 1 50%;
    min-width: 0;
}

.gp-img-text-50 .gp-img-text-content {
    flex: 1 1 50%;
    min-width: 0;
}

@media (max-width: 680px) {
    .gp-img-text {
        flex-direction: column;
        flex-wrap: wrap;
    }

    .gp-img-text-image {
        flex: 1 1 100%;
    }

    .gp-img-text-left .gp-img-text-image,
    .gp-img-text-right .gp-img-text-image {
        order: 1;
    }

    .gp-img-text-left .gp-img-text-content,
    .gp-img-text-right .gp-img-text-content {
        order: 2;
        text-align: left;
    }
}


/* ===================================
   IMAGE GRID (2 columns with titles)
   =================================== */
.gp-img-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
}

@media (max-width: 680px) {
    .gp-img-grid {
        grid-template-columns: 1fr;
    }
}

.gp-img-grid-item {
    text-align: center;
}

.gp-img-grid-image {
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--spacing-sm);
}

.gp-img-grid-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.gp-img-grid-item:hover .gp-img-grid-image img {
    transform: scale(1.05);
}

.gp-img-grid-title {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: var(--blog-primary);
    margin: var(--spacing-sm) 0 var(--spacing-xs);
}

.gp-img-grid-description {
    font-size: 0.95rem !important;
    color: var(--blog-text-light);
    line-height: 1.5;
}


/* ===================================
   PROS & CONS
   =================================== */
.gp-proscons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

@media (max-width: 680px) {
    .gp-proscons {
        grid-template-columns: 1fr;
    }
}

.gp-pros,
.gp-cons {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    backdrop-filter: brightness(0.98);
}

.gp-pros {
    background: rgba(40, 167, 69, 0.05);
    border: 1px solid rgba(40, 167, 69, 0.2);
}

.gp-cons {
    background: rgba(220, 53, 69, 0.05);
    border: 1px solid rgba(220, 53, 69, 0.2);
}

.gp-pros .gp-h3 {
    color: var(--blog-success);
    margin-top: 0;
}

.gp-cons .gp-h3 {
    color: var(--blog-danger);
    margin-top: 0;
}

.gp-pros .gp-h3::before {
    content: "\f633";
    font-family: "bootstrap-icons", sans-serif;
    margin-right: var(--spacing-xs);
}

.gp-cons .gp-h3::before {
    content: "\f62a";
    font-family: "bootstrap-icons", sans-serif;
    margin-right: var(--spacing-xs);
}

.gp-pros ul,
.gp-cons ul {
    list-style: none;
    padding-left: 0;
    margin: var(--spacing-sm) 0 0;
}

.gp-pros li,
.gp-cons li {
    padding-left: 24px;
    position: relative;
    margin: var(--spacing-xs) 0;
    font-size: 0.95rem !important;
}

.gp-pros li::before {
    content: "\f26b";
    font-family: "bootstrap-icons", sans-serif;
    color: var(--blog-success);
    position: absolute;
    left: 0;
    font-size: 0.9rem !important;
}

.gp-cons li::before {
    content: "\f623";
    font-family: "bootstrap-icons", sans-serif;
    color: var(--blog-danger);
    position: absolute;
    left: 0;
    font-size: 0.9rem !important;
}


/* ===================================
   DIVIDERS
   =================================== */
.gp-divider {
    margin: var(--spacing-xl) 0;
    border: none;
    height: 1px;
    background: var(--blog-border);
}

.gp-divider-thick {
    height: 2px;
    background: var(--blog-accent);
}

.gp-divider-dotted {
    background: transparent;
    border-top: 2px dotted var(--blog-border);
    height: 0;
}

.gp-divider-space {
    background: transparent;
    height: var(--spacing-xl);
}

.gp-divider-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--spacing-xl) 0;
    text-align: center;
}

.gp-divider-icon::before {
    content: "\f4ca";
    font-family: "bootstrap-icons", sans-serif;
    color: var(--blog-accent);
    font-size: 1.5rem !important;
}


/* ===================================
   ARTICLE NAVIGATION (PREV/NEXT)
   =================================== */
.gp-article-nav {
    display: flex;
    gap: var(--spacing-md);
    margin: var(--spacing-xl) 0;
    // border-top: 1px solid var(--blog-border);
    // border-bottom: 1px solid var(--blog-border);
    border: unset !important;
    padding: var(--spacing-lg) 0;
}

.gp-article-nav a {
	text-decoration: none !important;
}

@media (max-width: 680px) {
    .gp-article-nav {
        flex-direction: column;
    }
}

.gp-article-nav-prev,
.gp-article-nav-next {
    flex: 1;
    text-decoration: none;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: brightness(0.98);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
}

.gp-article-nav-prev:hover,
.gp-article-nav-next:hover {
    border-color: var(--blog-accent);
    transform: translateY(-2px);
}

.gp-article-nav-next {
    text-align: right;
}

.gp-article-nav-label {
    display: block;
    font-size: 0.85rem !important;
    color: var(--blog-text-muted);
    margin-bottom: 4px;
}

.gp-article-nav-prev .gp-article-nav-label::before {
    content: "\f285";
    font-family: "bootstrap-icons", sans-serif;
    margin-right: 6px;
    transform: rotate(180deg);
    display: inline-block;
}

.gp-article-nav-next .gp-article-nav-label::after {
    content: "\f285";
    font-family: "bootstrap-icons", sans-serif;
    margin-left: 6px;
}

.gp-article-nav-title {
    display: block;
    font-size: 1rem !important;
    font-weight: 600;
    color: var(--blog-primary);
}

/* Article Navigation with Thumbnails */
.gp-article-nav-thumbs {
    display: flex;
    gap: var(--spacing-md);
    margin: var(--spacing-xl) 0;
}

.gp-article-nav-thumbs a {
	text-decoration: none !important
}

@media (max-width: 680px) {
    .gp-article-nav-thumbs {
        flex-direction: column;
    }
}

.gp-article-nav-thumb-item {
    flex: 1;
    text-decoration: none;
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: brightness(0.98);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    align-items: center;
}

.gp-article-nav-thumb-item:hover {
    border-color: var(--blog-accent);
    transform: translateY(-2px);
}

.gp-article-nav-thumb-prev {
    flex-direction: row;
}

.gp-article-nav-thumb-next {
    flex-direction: row-reverse;
}

.gp-article-nav-thumb-image {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--blog-bg-light);
}

.gp-article-nav-thumb-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0 !important;
}

.gp-article-nav-thumb-content {
    flex: 1;
    min-width: 0;
}

.gp-article-nav-thumb-prev .gp-article-nav-thumb-content {
    text-align: left;
}

.gp-article-nav-thumb-next .gp-article-nav-thumb-content {
    text-align: right;
}

.gp-article-nav-thumb-label {
    display: block;
    font-size: 0.75rem;
    color: var(--blog-text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gp-article-nav-thumb-prev .gp-article-nav-thumb-label::before {
    content: "\f285";
    font-family: "bootstrap-icons", sans-serif;
    margin-right: 4px;
    transform: rotate(180deg);
    display: inline-block;
}

.gp-article-nav-thumb-next .gp-article-nav-thumb-label::after {
    content: "\f285";
    font-family: "bootstrap-icons", sans-serif;
    margin-left: 4px;
}

.gp-article-nav-thumb-title {
    display: block;
    font-size: 0.9rem !important;
    font-weight: 600;
    color: var(--blog-primary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


/* ===================================
   STATS / NUMBERS HIGHLIGHT
   =================================== */
.gp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-xl) 0;
}

.gp-stat-item {
    text-align: center;
    padding: var(--spacing-lg);
    background: rgba(151, 188, 98, 0.05);
    backdrop-filter: brightness(0.98);
    border-radius: var(--radius-md);
    border: 1px solid rgba(151, 188, 98, 0.2);
}

.gp-stat-number {
    display: block;
    font-size: 2.5rem !important;
    font-weight: 700;
    color: var(--blog-primary);
    line-height: 1.2;
    margin-bottom: var(--spacing-xs);
}

.gp-stat-label {
    display: block;
    font-size: 0.95rem !important;
    color: var(--blog-text-light);
}

.gp-stat-icon {
    font-size: 2rem !important;
    color: var(--blog-accent);
    margin-bottom: var(--spacing-xs);
}


/* ===================================
   ALERT / NOTICE BLOCKS
   =================================== */
.gp-alert {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin: var(--spacing-lg) 0;
    border-left: 4px solid;
    backdrop-filter: brightness(0.98);
}

.gp-alert-info {
    background: rgba(23, 162, 184, 0.08);
    border-left-color: var(--blog-info);
}

.gp-alert-success {
    background: rgba(40, 167, 69, 0.08);
    border-left-color: var(--blog-success);
}

.gp-alert-warning {
    background: rgba(255, 193, 7, 0.08);
    border-left-color: var(--blog-warning);
}

.gp-alert-error {
    background: rgba(220, 53, 69, 0.08);
    border-left-color: var(--blog-danger);
}

.gp-alert-title {
    font-weight: 600;
    font-size: 1rem !important; 
    margin: 0 0 var(--spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.gp-alert-info .gp-alert-title {
    color: var(--blog-info);
}

.gp-alert-success .gp-alert-title {
    color: var(--blog-success);
}

.gp-alert-warning .gp-alert-title {
    color: var(--blog-warning);
}

.gp-alert-error .gp-alert-title {
    color: var(--blog-danger);
}

.gp-alert-title::before {
    font-family: "bootstrap-icons", sans-serif;
    font-size: 1.1rem !important;
}

.gp-alert-info .gp-alert-title::before {
    content: "\f431";
}

.gp-alert-success .gp-alert-title::before {
    content: "\f26b";
}

.gp-alert-warning .gp-alert-title::before {
    content: "\f33a";
}

.gp-alert-error .gp-alert-title::before {
    content: "\f623";
}

.gp-alert-content {
    font-size: 0.95rem;
    color: var(--blog-text);
    line-height: 1.6;
}

.gp-alert-content p {
    margin: 0;
}


/* ===================================
   ACCORDION / COLLAPSE
   =================================== */
.gp-accordion {
    margin: var(--spacing-lg) 0;
}

.gp-accordion-item {
    margin-bottom: var(--spacing-md);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--blog-bg);
}

.gp-accordion-item:hover {
    border-color: rgba(151, 188, 98, 0.3);
}

.gp-accordion-item[open] {
    border-color: var(--blog-accent);
}

.gp-accordion-header {
    width: 100%;
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: brightness(0.98);
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 1rem !important;
    font-weight: 500;
    color: var(--blog-text);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    transition: all 0.2s ease;
    list-style: none;
}

.gp-accordion-header::-webkit-details-marker {
    display: none;
}

.gp-accordion-header::marker {
    content: "";
}

.gp-accordion-header:hover {
    color: var(--blog-primary);
}

.gp-accordion-item[open] .gp-accordion-header {
    background: rgba(151, 188, 98, 0.05);
    color: var(--blog-primary);
    border-bottom: 1px solid rgba(151, 188, 98, 0.2);
}

.gp-accordion-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: rgba(151, 188, 98, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "bootstrap-icons", sans-serif;
    font-size: 0.85rem !important;
    color: var(--blog-primary);
    transition: all 0.2s ease;
}

.gp-accordion-icon::before {
    content: "\f4fe";
}

.gp-accordion-item[open] .gp-accordion-icon {
    background: var(--blog-accent);
    color: var(--blog-bg);
    transform: rotate(45deg);
}

.gp-accordion-title {
    flex: 1;
}

.gp-accordion-content {
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: brightness(0.98);
    font-size: 0.95rem !important;
    color: var(--blog-text);
    line-height: 1.6 !important;
}

.gp-accordion-content p:first-child {
    margin-top: 0;
}

.gp-accordion-content p:last-child {
    margin-bottom: 0;
}


/* ===================================
   TESTIMONIALS / REVIEWS
   =================================== */
.gp-testimonials {
    margin: var(--spacing-xl) 0;
}

.gp-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

.gp-testimonial {
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: brightness(0.98);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.gp-testimonial:hover {
    border-color: var(--blog-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.gp-testimonial-stars {
    color: var(--blog-warning);
    font-size: 1rem !important;
    margin-bottom: var(--spacing-xs);
}

.gp-testimonial-text {
    font-size: 0.95rem !important;
    color: var(--blog-text);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
    font-style: italic;
}

.gp-testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.gp-testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.gp-testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gp-testimonial-info {
    flex: 1;
}

.gp-testimonial-name {
    font-weight: 600;
    color: var(--blog-primary);
    font-size: 0.95rem !important;
}

.gp-testimonial-role {
    font-size: 0.85rem !important;
    color: var(--blog-text-muted);
}


/* ===================================
   FEATURE LIST
   =================================== */
.gp-features {
    margin: var(--spacing-xl) 0;
}

.gp-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

.gp-feature {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: brightness(0.98);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.gp-feature:hover {
    border-color: var(--blog-accent);
    transform: translateY(-2px);
}

.gp-feature-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: rgba(151, 188, 98, 0.15);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--blog-primary);
}

.gp-feature-icon i {
    font-family: "bootstrap-icons", sans-serif;
}

.gp-feature-content {
    flex: 1;
    min-width: 0;
}

.gp-feature-title {
    font-weight: 600;
    color: var(--blog-primary) !important;
    font-size: 1rem !important;
    margin: 0 0 var(--spacing-xs) !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.gp-feature-description {
    font-size: 0.9rem !important;
    color: var(--blog-text-light);
    line-height: 1.5;
    margin: 0 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}


/* ===================================
   COMPARISON CARDS
   =================================== */
.gp-comparison {
    margin: var(--spacing-xl) 0;
}

.gp-comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

.gp-comparison-card {
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: brightness(0.98);
    border: 2px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    position: relative;
}

.gp-comparison-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.gp-comparison-card-best {
    border-color: var(--blog-primary);
    background: rgba(151, 188, 98, 0.05);
}

.gp-comparison-badge {
    position: absolute;
    top: -12px;
    right: var(--spacing-md);
    background: var(--blog-primary);
    color: var(--blog-bg);
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem !important;
    font-weight: 600 !important;
}

.gp-comparison-title {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: var(--blog-primary);
    margin: 0 0 var(--spacing-xs);
}

.gp-comparison-price {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: var(--blog-text);
    margin: var(--spacing-sm) 0;
}

.gp-comparison-price small {
    font-size: 1rem !important;
    font-weight: 400 !important;
    color: var(--blog-text-light);
}

.gp-comparison-features {
    list-style: none;
    padding: 0;
    margin: var(--spacing-md) 0;
}

.gp-comparison-features li {
    padding: var(--spacing-xs) 0;
    padding-left: 24px;
    position: relative;
    font-size: 0.9rem !important;
    color: var(--blog-text);
}

.gp-comparison-features li::before {
    content: "\f26b";
    font-family: "bootstrap-icons", sans-serif;
    color: var(--blog-success);
    position: absolute;
    left: 0;
}

.gp-comparison-features li.unavailable {
    color: var(--blog-text-muted);
    text-decoration: line-through;
}

.gp-comparison-features li.unavailable::before {
    content: "\f623";
    color: var(--blog-text-muted);
}


/* ===================================
   VIDEO EMBED
   =================================== */
.gp-video {
    margin: var(--spacing-lg) 0;
}

.gp-video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--blog-bg-light);
}

.gp-video-wrapper iframe,
.gp-video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.gp-video-caption {
    font-size: 0.9rem !important;
    color: var(--blog-text-light);
    text-align: center;
    margin-top: var(--spacing-xs);
    font-style: italic;
}


/* ===================================
   BUTTON VARIANTS
   =================================== */
/* Button sizes */
.gp-btn-small {
    padding: 8px 16px;
    font-size: 0.85rem !important;
    line-height: 1.2;
}

.gp-btn-large {
    padding: 16px 36px;
    font-size: 1.1rem !important;
    line-height: 1.2;
}

/* Button with icons */
.gp-btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.gp-btn-icon i,
.gp-btn-icon::before {
    font-family: "bootstrap-icons", sans-serif;
}

.gp-btn-icon-left::before {
    order: -1;
}


/* ===================================
   SIMPLE STYLED LISTS
   =================================== */
/* Basic bullet list */
.gp-list-bullet {
    padding-left: 20px;
    margin: var(--spacing-md) 0;
}

.gp-list-bullet li {
    margin: var(--spacing-xs) 0;
    line-height: 1.6;
    padding-left: 8px;
}

.gp-list-bullet li::marker {
    color: var(--blog-accent);
}

/* Nested bullet lists */
.gp-list-bullet ul {
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
    padding-left: 20px;
}

.gp-list-bullet ul li::marker {
    color: var(--blog-primary-light);
}

.gp-list-bullet ul ul li::marker {
    color: var(--blog-text-muted);
}

/* Basic numbered list */
.gp-list-numbered {
    padding-left: 20px;
    margin: var(--spacing-md) 0;
    list-style: decimal;
}

.gp-list-numbered li {
    margin: var(--spacing-xs) 0;
    line-height: 1.6;
    padding-left: 8px;
}

.gp-list-numbered li::marker {
    color: var(--blog-primary);
    font-weight: 600;
}

/* Nested numbered lists */
.gp-list-numbered ol {
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
    padding-left: 20px;
    list-style: lower-alpha;
}

.gp-list-numbered ol li::marker {
    color: var(--blog-primary-light);
    font-weight: 500;
}

.gp-list-numbered ol ol {
    list-style: lower-roman;
}

.gp-list-numbered ol ol li::marker {
    color: var(--blog-text-light);
    font-weight: 400;
}

/* Checkmark list */
.gp-list-check {
    list-style: none;
    padding-left: 0 !important;
}

.gp-list-check li {
    padding-left: 30px;
    position: relative;
    margin: var(--spacing-sm) 0;
    line-height: 1.6;
}

.gp-list-check li::before {
    content: "\f26b";
    font-family: "bootstrap-icons", sans-serif;
    position: absolute;
    left: 0;
    color: var(--blog-success);
    font-size: 1.1rem;
    top: 2px;
}

/* Arrow list */
.gp-list-arrow {
    list-style: none;
    padding-left: 0 !important;
}

.gp-list-arrow li {
    padding-left: 30px;
    position: relative;
    margin: var(--spacing-sm) 0;
    line-height: 1.6;
}

.gp-list-arrow li::before {
    content: "\f285";
    font-family: "bootstrap-icons", sans-serif;
    position: absolute;
    left: 0;
    color: var(--blog-primary);
    font-size: 1rem;
    top: 3px;
}

/* Circle dot list */
.gp-list-dot {
    list-style: none;
    padding-left: 0 !important;
}

.gp-list-dot li {
    padding-left: 30px;
    position: relative;
    margin: var(--spacing-sm) 0;
    line-height: 1.6;
}

.gp-list-dot li::before {
    content: "\f287";
    font-family: "bootstrap-icons", sans-serif;
    position: absolute;
    left: 0;
    color: var(--blog-accent);
    font-size: 0.8rem;
    top: 6px;
}

/* Star list */
.gp-list-star {
    list-style: none;
    padding-left: 0 !important;
}

.gp-list-star li {
    padding-left: 30px;
    position: relative;
    margin: var(--spacing-sm) 0;
    line-height: 1.6;
}

.gp-list-star li::before {
    content: "\f586";
    font-family: "bootstrap-icons", sans-serif;
    position: absolute;
    left: 0;
    color: var(--blog-warning);
    font-size: 1rem;
    top: 2px;
}


/* ===================================
   RESPONSIVE DESIGN
   =================================== */
@media (max-width: 680px) {
    .gp-title {
        font-size: 2rem;
    }

    .gp-h2 {
        font-size: 1.5rem;
    }

    .gp-h3 {
        font-size: 1.1rem;
    }

    .gp-btn {
        width: 100%;
        text-align: center;
    }
}
i {}