/* --- NEW RULE TO INCREASE FONT SIZE AND CHANGE COLOR --- */
/* This rule finds the default size, then adds 2px to it and sets the color to black */
.re-blog-container p,
.re-blog-container ul,
.re-blog-container ol,
.re-blog-container blockquote,
.re-blog-container .re_pricing_table {
    font-size: calc(1em + 2px);
    color: #000;
}
/* --- End of New Rule --- */


/* --- Main Blog Container Style --- */
/* UPDATED: Removed all white-box styles. */
/* This class now ONLY styles the content inside it. */
.re-blog-container {
    font-family: Arial, sans-serif; /* Or whatever your images's font is */
    line-height: 1.6;
    /* All padding, margin, max-width, background, and shadow removed to prevent conflicts. */
}

/* --- NEW: only use when requested --- */
/* Add this class to your TPL to get the white box layout */
.blog-post-card {
    max-width: 1100px; 
    margin: 2rem auto;
    padding: 2rem;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Horizontal line for separating sections */
.re-blog-hr {
    border: 0;
    height: 1px;
    background: #e0e0e0;
    margin: 2.5rem 0;
}

/* --- ADDED: STYLES FOR CONSISTENT HEADERS --- */
.re-blog-container h1 {
    font-size: 2.5rem; /* 40px */
    color: #111;
    margin: 0;
    text-align: center;
    padding-bottom: 1.5rem;
}

.re-blog-container .subtitle {
    font-size: 1.25rem; /* 20px */
    color: #555;
    margin: 0.5rem 0 0;
    font-weight: 400;
    text-align: center;
    border-bottom: 2px solid #eee;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}

.re-blog-container h2 {
    font-size: 1.75rem; /* 28px */
    color: #111;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.re-blog-container h3 {
    font-size: 1.25rem; /* 20px */
    color: #111;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}
/* --- END: ADDED HEADER STYLES --- */


/* --- Unique Styles for the Pricing Table --- */

.re_pricing_table {
    width: 100%;
    margin: 2rem auto;
    border-collapse: collapse; /* Cleans up table borders */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    overflow: hidden; /* Important for border-radius */
}

.re_pricing_table th,
.re_pricing_table td {
    padding: 12px 15px;
    border: 1px solid #ddd;
    text-align: left;
    vertical-align: middle;
}

.re_pricing_table th {
    background-color: #f4f4f4; /* A light grey for the header */
    font-weight: bold;
    color: #555;
}

/* Alternating row colors for readability */
.re_pricing_table tbody tr:nth-of-type(even) {
    background-color: #fcfcfc;
}

/* Special cell for the bonus */
.re_pricing_bonus_cell {
    color: #28a745; /* Green text for the bonus */
    font-weight: bold;
    text-align: center;
}

/* Special cell for the "Includes" section */
.re_pricing_includes_cell {
    font-size: 0.9em; /* This will now be 0.9em of the NEW, larger size */
    color: #444; /* Keeping this specific grey for the small text */
}

.re_pricing_includes_cell small {
    color: #777;
}

/* Text for the coupon */
.re_pricing_coupon_text {
    text-align: center;
    font-size: 0.9em; /* This will also be 0.9em of the NEW, larger size */
    color: #666; /* Keeping this specific grey for the small text */
    margin-top: -1rem;
}

/* --- Styles for ALL Lists --- */

.re-blog-container ul {
  list-style-type: disc;
  margin-left: 20px;
  padding-left: 10px;
}

.re-blog-container ol {
  list-style-type: decimal;
  margin-left: 20px;
  padding-left: 10px;
}

.re-blog-container ul li,
.re-blog-container ol li {
  margin-bottom: 1.5rem; /* Spacing for list items */
}

/* --- ADDED: Style for Blockquotes --- */
.re-blog-container blockquote {
    border-left: 4px solid #007bff;
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    background-color: #f8f9fa;
    border-radius: 4px;
}

/* --- NEW STYLES FOR PROS & CONS --- */
        
.pro {
    color: #28a745; /* A clear, readable green */
    font-weight: 700;
}
        
.con {
    color: #dc3545; /* A clear, readable red */
    font-weight: 700;
}

/* * ---------------------------------------------------
 * --- Mobile Responsive Fix ---
 * ---------------------------------------------------
 * This now targets the NEW .blog-post-card class.
*/
@media (max-width: 767px) {
  
  .blog-post-card {
    /* Remove the "box" visuals */
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;

    /* Remove the padding that causes squeezing */
    padding: 0;
    
    /* Adjust margin for a tighter mobile feel */
    margin: 1rem 0; 
  }
  
  /* Optional: Also remove box-shadow from the pricing table on mobile */
  .re_pricing_table {
      box-shadow: none;
  }
}

/* ******************************************************************* --- NEW ADDITIONS FOR SEO & TRAFFIC (Video, Images, Tabs, CTAs) --- 
   ******************************************************************* */

/* --- 1. Responsive Video Wrapper (Essential for YouTube/Vimeo) --- */
/* Wrap your iframe in a div with class "re-video-wrapper" */
.re-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    margin: 2rem 0;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

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

/* --- 2. SEO Optimized Image Figures & Captions --- */
/* Use <figure> for the image and <figcaption> for the text */
.re-blog-container figure {
    margin: 2rem 0;
    display: block;
    width: 100%;
}

.re-blog-container img.re-blog-img-fluid {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.re-blog-container figcaption {
    font-size: 0.9rem;
    color: #666;
    text-align: center;
    margin-top: 0.5rem;
    font-style: italic;
}

/* --- 3. Table of Contents (TOC) Box --- */
/* Great for Google Imageslinks. Structure: <div class="re-toc-box">...</div> */
.re-toc-box {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem 0;
    display: inline-block; /* Shrinks to fit content, change to block for full width */
    min-width: 50%;
}

.re-toc-box p.toc-title {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: #333;
    border-bottom: 2px solid #007bff;
    display: inline-block;
    padding-bottom: 5px;
}

.re-toc-box ul {
    margin: 0 !important;
    list-style-type: none !important;
    padding-left: 0 !important;
}

.re-toc-box ul li {
    margin-bottom: 0.5rem !important;
    font-size: 1rem !important;
}

.re-toc-box ul li a {
    text-decoration: none;
    color: #007bff;
    transition: color 0.2s ease;
}

.re-toc-box ul li a:hover {
    text-decoration: underline;
    color: #0056b3;
}

/* --- 4. Alert / Info Boxes --- */
/* Use <div class="re-alert re-alert-info">...</div> */
.re-alert {
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    border-left: 5px solid;
    border-radius: 4px;
}

/* Blue Note */
.re-alert-info {
    background-color: #e7f3fe;
    border-color: #2196F3;
    color: #0c5460;
}

/* Yellow Warning */
.re-alert-warning {
    background-color: #fff3cd;
    border-color: #ffc107;
    color: #856404;
}

/* Green Tip */
.re-alert-success {
    background-color: #d4edda;
    border-color: #28a745;
    color: #155724;
}

/* --- 5. Call to Action (CTA) Button --- */
/* Use <a href="#" class="re-blog-cta">Get It Now</a> */
.re-blog-cta {
    display: inline-block;
    background-color: #007bff; /* Change to your brand color */
    color: #ffffff !important;
    padding: 12px 25px;
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 30px;
    transition: background 0.3s ease, transform 0.2s ease;
    margin: 1.5rem 0;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3);
}

.re-blog-cta:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
    text-decoration: none;
}

/* --- 6. Accordion / Tabs (Using HTML5 Details) --- */
/* Excellent for FAQs to keep users on page. Use <details class="re-details"><summary>Question?</summary>Answer...</details> */
details.re-details {
    margin-bottom: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

details.re-details summary {
    padding: 1rem;
    font-weight: bold;
    cursor: pointer;
    background-color: #fcfcfc;
    list-style: none; /* Hides default arrow in some browsers */
    position: relative;
    padding-right: 2.5rem;
    transition: background-color 0.2s;
}

details.re-details summary:hover {
    background-color: #f0f0f0;
}

/* Custom arrow for summary */
details.re-details summary::after {
    content: '+'; 
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 300;
    color: #007bff;
}

details.re-details[open] summary::after {
    content: '-';
}

/* The content inside the accordion */
details.re-details div.re-details-content {
    padding: 1rem;
    border-top: 1px solid #e0e0e0;
    color: #333;
}

/* --- 7. Author Box (E-E-A-T Signal) --- */
.re-author-box {
    display: flex;
    align-items: center;
    background: #f9f9f9;
    padding: 1.5rem;
    margin-top: 3rem;
    border-radius: 8px;
    border: 1px solid #eee;
}

.re-author-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 1.5rem;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.re-author-info h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.2rem;
    color: #111;
}

.re-author-info p {
    margin: 0;
    font-size: 0.95rem;
    color: #555;
}

/* Mobile adjustment for Author box */
@media (max-width: 600px) {
    .re-author-box {
        flex-direction: column;
        text-align: center;
    }
    .re-author-img {
        margin-right: 0;
        margin-bottom: 1rem;
    }
}