/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 5,700+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.11.8.1754859959
Updated: 2025-08-10 22:05:59

*/

/* =================================
   SCRIMPR CUSTOM COMPONENTS
   ================================= */

/* Logo and title container */
.logo-title-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.logo-title-container h2 {
    margin: 0;
    font-weight: 700;
}

.scrimpr-logo {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.scrimpr-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Stats box styling */
.stats {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
    font-size: 16px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.stats strong {
    color: #2C5282;
}

/* Highlight box styling */
.highlight {
    background: #eff6ff;
    border-left: 4px solid #2C5282;
    padding: 16px 20px;
    margin: 20px 0;
    border-radius: 0 8px 8px 0;
}

.highlight strong {
    color: #1a365d;
}

/* FAQ Section Styling - mimicking accordion appearance */
.faq-section {
  margin: 30px 0;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  padding: 30px;
  position: relative;
  overflow: hidden;
}

/* FAQ Items - styled like accordion items */
.faq-item {
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  overflow: hidden;
}

/* FAQ Questions - styled like accordion headers */
.faq-item h3 {
  background-color: #f8fafc;
  padding: 15px 20px;
  margin: 0;
  color: #2c5282;
  font-weight: 600;
  border-bottom: 1px solid #e0e0e0;
  position: relative;
}

.faq-item h3:before {
  content: "−";
  color: #3498db;
  margin-right: 10px;
  font-weight: bold;
}

/* FAQ Answers - styled like accordion content */
.faq-item p {
  padding: 20px;
  color: #4a5568;
  line-height: 1.7;
  margin: 0;
  background-color: #fff;
}

/* FAQ Links */
.faq-section a {
  color: #2C5282;
  font-weight: bold;
  text-decoration: underline;
  transition: color 0.2s;
}

.faq-section a:hover {
  color: #1a365d;
}

/* Mobile Styles */
@media (max-width: 768px) {
  .faq-section {
    padding: 20px;
    margin: 20px 0;
  }
  
  .faq-item h3 {
    padding: 20px 15px;
  }
  
  .faq-item p {
    padding: 25px 15px;
  }
  
  .faq-item {
    margin-bottom: 20px;
  }
}

/* Grid Layouts */
.review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 30px;
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

/* Base Card Styling */
.card {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
}

.card-link {
    text-decoration: none;
    color: inherit;
}

.card-link:hover {
    text-decoration: none;
    color: inherit;
}

/* Accent Dots */
.accent-dot {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.tools-grid .accent-dot {
    top: -10px;
    right: -10px;
    width: 40px;
    height: 40px;
    opacity: 0.1;
}

/* Card Headers */
.header {
    margin-bottom: 24px;
}

/* Badges (tools only) */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Titles */
.title {
    font-size: 20px;
    color: #1a1a1a;
    margin-bottom: 10px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Descriptions */
.description {
    color: #666;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}

/* Search Container (tools only) */
.search-container {
    position: relative;
    margin: 20px 0;
}

.search-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    background: #f8f9fa;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.search-placeholder {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: #999;
    font-size: 14px;
    pointer-events: none;
}

/* Stats for cards */
.tools-grid .stats {
    display: flex;
    justify-content: space-between;
    margin: 25px 0;
    gap: 15px;
    background: none;
    border: none;
    padding: 0;
}

.tools-grid .stat {
    background: none;
    padding: 0;
    flex: 1;
    text-align: center;
    border-radius: 0;
}

.stat-number {
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
    font-size: 18px;
}

.stat-label {
    color: #64748b;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Brands (tools only) */
.brands {
    display: flex;
    gap: 8px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.brand {
    background: #f1f5f9;
    color: #475569;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

/* CTA Buttons */
.cta {
    background: #1F6A95;
    color: white !important;
    border: none;
    padding: 14px 20px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: all 0.2s ease;
    font-size: 16px;
    text-decoration: none !important;
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
    margin: 20px 0 15px 0;
}

.cta:hover {
    background: #034063;
    color: white !important;
    text-decoration: none !important;
}

/* Security Note */
.security-note {
    text-align: center;
    margin-top: 16px;
    color: #059669;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
}

/* Color Schemes */
.supermarket-card .accent-dot {
    background: #2D7D56;
}

.supermarket-card .badge {
    background: #2D7D56;
}

.supermarket-card .cta {
    background: #2D7D56;
}

.supermarket-card .cta:hover {
    background: #1F5F42;
}

.cashback-card .accent-dot {
    background: #1F6A95;
}

.cashback-card .badge {
    background: #1F6A95;
}

.gpt-card .accent-dot {
    background: #6B5B95;
}

.gpt-card .badge {
    background: #6B5B95;
}

.gpt-card .cta {
    background: #6B5B95;
}

.gpt-card .cta:hover {
    background: #4F4373;
}

/* =================================
   CASHBACK COMPARISON TABLE
   ================================= */

.cashback-comparison-container {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #3A3A3A;
    margin: 20px 0;
}

.cashback-comparison-container .desktop-table {
    width: 100%;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 32px;
    border-collapse: collapse;
}

.cashback-comparison-container .desktop-table th {
    padding: 12px;
    text-align: left;
    background-color: #1F6A95;
    font-weight: bold;
    color: white;
    border: none;
}

.cashback-comparison-container .desktop-table td {
    padding: 16px 12px;
    border-right: 1px solid #F0F0F0;
    border-bottom: 1px solid #F0F0F0;
}

.cashback-comparison-container .desktop-table td:last-child {
    border-right: none;
}

.cashback-comparison-container .desktop-table tr:last-child td {
    border-bottom: none;
}

.cashback-comparison-container .quick-summary {
    background: #F8FBFE;
    border-radius: 8px;
    padding: 20px;
    margin-top: 24px;
    border-left: 4px solid #1F6A95;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.cashback-comparison-container .quick-summary p {
    margin: 0;
    color: #3A3A3A;
    font-size: 16px;
    line-height: 1.5;
}

/* Mobile - hide table on small screens */
@media (max-width: 768px) {
    .cashback-comparison-container .desktop-table {
        display: none;
    }
}

/* =================================
   DIRECT DEBIT OPTIONS
   ================================= */

.direct-debit-options {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #3A3A3A;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.direct-debit-options .important-note {
    grid-column: 1 / -1;
    background: #f0f8ff;
    border: 1px solid #1F6A95;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

.direct-debit-options .section {
    width: 100%;
}

.direct-debit-options h3 {
    color: #034063;
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0.5rem;
    border-bottom: 2px solid #1F6A95;
    padding-bottom: 0.25rem;
}

.direct-debit-options ul {
    margin: 0 0 1rem 0;
    padding-left: 1.5rem;
}

.direct-debit-options li {
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

/* =================================
   ARTICLE HEADER & AUTHOR
   ================================= */

.article-title {
    margin: 0 0 10px 0;
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
}

.article-subtitle {
    color: #666;
    margin: 0 0 15px 0;
    font-size: 1.1rem;
}

.article-tagline {
    color: #888;
    font-size: 14px;
    margin: 0 0 20px 0;
}

.author-info {
    background: #f0f8ff;
    border: 1px solid #1F6A95;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.author-details {
    display: flex;
    align-items: center;
    gap: 10px;
}

.author-logo {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.author-text .author-name {
    font-weight: 500;
    color: #333;
    margin-bottom: 2px;
}

.author-text .author-date {
    font-size: 13px;
    color: #666;
}

.social-share {
    display: flex;
    gap: 8px;
}

.share-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    color: white !important;
    transition: opacity 0.2s !important;
}

.share-button:hover {
    opacity: 0.8 !important;
    color: white !important;
    text-decoration: none !important;
}

.share-facebook {
    background-color: #1877f2 !important;
}

.share-twitter {
    background-color: #1da1f2 !important;
}

.share-linkedin {
    background-color: #0077b5 !important;
}

.share-whatsapp {
    background-color: #25d366 !important;
}

.content-separator {
    border: none;
    border-top: 1px solid #ccc;
    margin: 0 0 30px 0;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .author-info {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .author-details {
        justify-content: center;
    }
    
    .social-share {
        justify-content: center;
    }
    
    .article-title {
        font-size: 1.5rem;
    }
}

/* Clean Platform Cards */
.platform-results {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #3A3A3A;
}

.platform-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px; /* Add this line */
}

.platform-card {
    background: linear-gradient(135deg, #f0f8ff 0%, #ffffff 100%);
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
    transition: all 0.2s;
    position: relative;
}

.platform-card:hover,
.platform-card:hover .btn-primary {
    border-color: #1F6A95;
    box-shadow: 0 4px 12px rgba(31, 106, 149, 0.1);
    transform: translateY(-1px);
}

/* Ensure card stays hovered when hovering button */
.platform-card:has(.btn-primary:hover) {
    border-color: #1F6A95;
    box-shadow: 0 4px 12px rgba(31, 106, 149, 0.1);
    transform: translateY(-1px);
}

.platform-main {
    display: grid;
    grid-template-columns: auto 1fr 140px;
    gap: 12px;
    align-items: center;
}

.platform-logo {
    width: 60px;
    height: 60px;
    border-radius: 20%;
    background: #F8FBFE;
    border: 1px solid #F0F0F0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.platform-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.platform-info {
    min-width: 0;
}

.platform-name {
    font-size: 1rem;
    font-weight: 600;
    color: #034063;
    margin-bottom: 2px;
}

.platform-tagline {
    font-size: 0.75rem;
    color: #3A3A3A;
}

.i-use-for {
    color: #1F6A95;
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 2px;
    font-style: italic;
}

.button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 140px;
}

.btn-primary,
.btn-primary:link,
.btn-primary:visited,
a.btn-primary,
a.btn-primary:link,
a.btn-primary:visited {
    background: #1F6A95 !important;
    color: white !important;
    border: 2px solid #1F6A95 !important;
    background-color: #1F6A95 !important;
    border-color: #1F6A95 !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
    text-align: center !important;
    font-size: 0.8rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

.btn-primary:hover,
.btn-primary:hover *,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:visited:hover,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:active,
a.btn-primary:visited:hover {
    background: #034063 !important;
    border-color: #034063 !important;
    background-color: #034063 !important;
    text-decoration: none !important;
    color: white !important;
}

/* Extra strong override for Elementor themes */
.platform-card a.btn-primary:hover,
.platform-card .btn-primary:hover,
.btn-primary:hover:not(.elementor-button) {
    color: #ffffff !important;
    background-color: #034063 !important;
}

.capital-risk-warning {
    font-size: 0.7rem;
    color: #64748b;
    font-style: italic;
    margin-top: 0.15rem;
    text-align: center;
    word-break: break-word;
    line-height: 1.2;
    width: 140px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .tools-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .card {
        padding: 25px;
    }

    .tools-grid .stats {
        gap: 10px;
    }

    .direct-debit-options {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .direct-debit-options {
        font-size: 0.9rem;
    }
    
    .direct-debit-options h3 {
        font-size: 1rem;
    }
    
    .direct-debit-options .important-note {
        padding: 0.75rem;
        font-size: 0.85rem;
    }

    .platform-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    
    .platform-card {
        padding: 8px;
    }
    
    .platform-main {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
    }
    
    .platform-logo {
        width: 32px;
        height: 32px;
    }
    
    .platform-name {
        font-size: 0.8rem;
        margin-bottom: 2px;
        line-height: 1.1;
    }
    
    .platform-tagline {
        font-size: 0.6rem;
        line-height: 1.1;
        margin-bottom: 2px;
    }
    
    .i-use-for {
        display: none;
    }
    
    .button-container {
        width: 100%;
    }
    
    .btn-primary {
        padding: 4px 8px !important;
        font-size: 0.65rem !important;
        width: 100% !important;
    }
    
    .capital-risk-warning {
        font-size: 0.55rem;
        margin-top: 2px;
        width: 100%;
        word-break: break-word;
    }
    
    .recommended-badge {
        font-size: 0.5rem;
        padding: 0px 4px;
        top: -10px;
    }
}

/* Global heading spacing and purple underline */
h2 {
    margin-bottom: 1.2em;
    padding-bottom: 0.5em;
    border-bottom: none;
}

h2.underline {
    border-bottom: 3px solid #6B5B95;
}


h3 {
    margin-bottom: 1.2em;

}

h3 {
    margin-bottom: 1em;

}

.important-note {
    background: #f0f8ff;
    border: 1px solid #1F6A95;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

.elementor-widget-html p a {
    text-decoration: underline !important;
}