/* --- GENERAL STYLE FOR ELECTRICITY CARDS --- */
      .el-products-container {
          --brand-primary: #E03A2D;
          --brand-secondary: #8EBBDB;
          --bg-light: #F5F8FF;
          --medium-gray: #e9ecef;
          --dark-gray: #333;
          --text-color: #555;
          --border-radius: 8px;
          --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
          
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          justify-content: center;
          gap: 20px;
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
          padding: 0 15px;
          box-sizing: border-box;
      }
      .el-products-container * { box-sizing: border-box; }
      
      .el-products-container .card {
          background-color: #fff;
          border: 1px solid var(--brand-secondary);
          border-radius: var(--border-radius);
          box-shadow: var(--card-shadow);
          padding: 16px;
          display: flex;
          flex-direction: column;
          gap: 12px;
          position: relative;
      }
      .el-products-container .card-header { display: flex; align-items: flex-start; gap: 12px; }
      .el-products-container .card-logo {
          width: 50px; height: 50px; object-fit: contain; border: 1px solid #eee;
          border-radius: var(--border-radius); padding: 5px; flex-shrink: 0;
      }
      .el-products-container .card-title-section .card-provider-name { font-size: 13px; color: #888; margin: 0 0 2px 0; }
      .el-products-container .card-title-section .card-title-text {
          font-size: 18px; color: var(--dark-gray); margin: 0 0 4px 0; font-weight: bold; line-height: 1.2;
      }

      /* --- TRUSTPILOT STARS --- */
      .rating-stars { display: inline-flex; gap: 2px; margin-right: 4px; }
      .rating-stars .star-icon { width: 14px; height: 14px; fill: #FDB913; flex-shrink: 0; }

      .el-products-container .card-rating { font-size: 14px; color: var(--text-color); display: flex; align-items: center; gap: 4px; margin-top: 2px; flex-wrap: wrap; }
      .el-products-container .card-rating-score { font-weight: 600; }

      /* --- UPDATED + DATASOURCE (TOOLTIP) --- */
      .card-updated-row { margin-top: 6px; font-size: 12px; color: #777; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
      .card-updated-row strong { color:#666; font-weight: 600; }

      .source-tooltip { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
      .source-tooltip .info-dot {
          width: 18px; height: 18px; border-radius: 50%; background: var(--bg-light); border: 1px solid var(--brand-secondary);
          color: var(--brand-primary); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1;
      }
      .source-tooltip .tooltip-bubble {
          position: absolute; left: 0; top: 26px; min-width: 220px; max-width: 320px; background: #111; color: #fff;
          padding: 10px 12px; border-radius: 10px; font-size: 12px; line-height: 1.35; box-shadow: 0 10px 24px rgba(0,0,0,0.18);
          opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease; z-index: 9999;
      }
      .source-tooltip .tooltip-bubble::before { content:""; position:absolute; top:-6px; left: 12px; width: 12px; height: 12px; background:#111; transform: rotate(45deg); }
      .source-tooltip:hover .tooltip-bubble, .source-tooltip:focus-within .tooltip-bubble { opacity: 1; visibility: visible; transform: translateY(0); }
      @media (max-width: 767px){ .source-tooltip .tooltip-bubble{ left: auto; right: 0; } .source-tooltip .tooltip-bubble::before{ left: auto; right: 12px; } }

      .el-products-container .card-price-block { background-color: var(--bg-light); border-radius: var(--border-radius); padding: 12px; text-align: center; }
      .el-products-container .card-price { font-size: 20px; font-weight: bold; color: var(--dark-gray); }
      .el-products-container .card-price-sub { font-size: 13px; color: var(--text-color); margin-top: 2px; }
      
      .el-products-container .card-features {
          list-style: none; padding: 0 !important; margin: 0 !important; text-indent: 0 !important; font-size: 14px; display: flex; flex-direction: column; gap: 8px;
      }
      .el-products-container .card-features li { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; border-bottom: 1px dashed #eee; padding-bottom: 4px; margin-left: 0 !important; padding-left: 0 !important; }
      .el-products-container .card-features li:last-child { border-bottom: none; }
      
      .el-products-container .feature-label { color: #666; display: flex; align-items: center; gap: 6px; }
      .el-products-container .feature-value { font-weight: 500; text-align: right; color: var(--dark-gray); }
      
      /* --- INTRO OFFER CARD --- */
      .intro-card {
          background-color: var(--bg-light); border: 1px solid var(--brand-secondary); color: var(--dark-gray); padding: 10px;
          border-radius: 6px; font-size: 13px; margin-top: 5px; display: flex; align-items: center; gap: 8px; line-height: 1.4;
      }
      .intro-card strong { color: var(--brand-primary); display: block; font-size: 12px; text-transform: uppercase; margin-bottom: 2px; }
      .intro-icon { color: var(--brand-primary); flex-shrink: 0; }

      .el-products-container .card-tags { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }
      .el-products-container .info-tag {
          background-color: var(--bg-light); border-radius: 4px; padding: 4px 8px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--brand-secondary); color: var(--dark-gray);
      }
      
      /* --- CTA BUTTON --- */
      .el-products-container .card-cta-button {
          margin-top: auto; display: block; width: 100%; background-color: var(--brand-primary); color: #fff;
          text-align: center; padding: 12px 0; border-radius: var(--border-radius); font-weight: bold; font-size: 17px; 
          text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; transition: opacity 0.2s; box-sizing: border-box;
      }
      .el-products-container .card-cta-button:hover { opacity: 0.85; color: #fff; }

      /* --- FILTER UI --- */
      :root {
          --filter-brand-color: #E03A2D;
          --filter-primary-text: #333;
          --filter-secondary-text: #555;
          --filter-border-color: #e0e0e0;
          --filter-background-light: #F5F8FF;
          --filter-overlay-bg: rgba(0, 0, 0, 0.5);
      }

      .filter-sticky-header {
          background-color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
          position: sticky; top: 0; z-index: 10; padding: 10px 15px; border-bottom: 1px solid var(--filter-border-color);
          margin-bottom: 20px; display: flex; justify-content: center; flex-direction: column; gap: 8px; align-items: center;
      }

      .filter-trigger-btn {
          display: inline-flex; align-items: center; gap: 8px; background-color: var(--filter-background-light); border: 1px solid var(--brand-secondary);
          padding: 10px 16px; border-radius: 50px; font-size: 15px; font-weight: 600; color: var(--filter-primary-text); cursor: pointer; transition: background-color 0.2s, box-shadow 0.2s;
      }
      .filter-trigger-btn:hover { background-color: #e6f0ff; }
      .filter-count-badge {
          background-color: var(--filter-brand-color); color: white; font-size: 12px; font-weight: bold; border-radius: 50%;
          width: 22px; height: 22px; display: inline-flex; justify-content: center; align-items: center; margin-left: 4px;
      }

      .last-updated-global{ font-size: 12px; color: #666; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
      .last-updated-global strong{ color:#555; }

      #filter-modal-overlay {
          position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--filter-overlay-bg);
          z-index: 99999; display: flex; justify-content: center; align-items: flex-end; opacity: 0; visibility: hidden; transition: opacity 0.3s ease;
      }
      #filter-modal-overlay.hidden { display: none; }
      #filter-modal-overlay.active { opacity: 1; visibility: visible; }

      #filter-modal-content {
          background: #fff; width: 100%; max-width: 100%; max-height: 90vh; display: flex; flex-direction: column;
          border-top-left-radius: 16px; border-top-right-radius: 16px; transform: translateY(100%); transition: transform 0.3s ease-out; box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
      }
      #filter-modal-overlay.active #filter-modal-content { transform: translateY(0); }

      .filter-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--filter-border-color); flex-shrink: 0; }
      .filter-modal-header h3 { margin: 0; font-size: 18px; color: var(--filter-primary-text); }
      .close-btn { background: none; border: none; cursor: pointer; padding: 4px; color: var(--filter-secondary-text); }
      .close-btn:hover { color: var(--filter-primary-text); }

      .filter-modal-body { overflow-y: auto; padding: 20px; }
      .filter-section { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #f0f0f0; }
      .filter-section:last-child { border-bottom: none; margin-bottom: 0; }
      .filter-section-title { font-weight: bold; margin-bottom: 12px; font-size: 16px; display: block; }

      .filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
      .filter-list { display: flex; flex-direction: column; gap: 10px; }
      .filter-grid label, .filter-list label {
          display: flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; padding: 8px; border-radius: 6px; transition: background-color 0.2s;
      }
      .filter-grid label:hover, .filter-list label:hover { background-color: var(--filter-background-light); }
      input[type="checkbox"] { width: 1.2em; height: 1.2em; accent-color: var(--filter-brand-color); }

      .select-wrapper { position: relative; }
      .select-wrapper::after { content: '▼'; font-size: 12px; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #888; }
      .sort-control select { width: 100%; padding: 12px 15px; font-size: 16px; border-radius: 8px; border: 1px solid var(--filter-border-color); background-color: #fff; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

      .filter-modal-footer { display: flex; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--filter-border-color); background-color: #fff; flex-shrink: 0; }
      .filter-modal-footer button { flex-grow: 1; padding: 14px; font-size: 16px; font-weight: bold; border-radius: 8px; border: none; cursor: pointer; transition: background-color 0.2s; }
      .primary-btn { background-color: var(--filter-brand-color); color: white; }
      .primary-btn:hover { background-color: #bc2d21; }
      .secondary-btn { background-color: var(--filter-background-light); color: var(--filter-primary-text); border: 1px solid #8EBBDB; }
      .secondary-btn:hover { background-color: #e1ebff; }

      @media (min-width: 768px) {
          .el-products-container { padding: 0 25px; }
          #filter-modal-overlay { align-items: center; }
          #filter-modal-content { transform: translateY(0) scale(0.9); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; border-radius: 12px; max-width: 600px; max-height: 80vh; }
          #filter-modal-overlay.active #filter-modal-content { transform: translateY(0) scale(1); opacity: 1; }
      }
    

        /* --- TABLE STYLING --- */
        .el-table-container {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            margin-bottom: 20px;
            --brand-primary: #E03A2D;
            --bg-light: #F5F8FF;
            --table-row-hover: #f9f9f9;
            --text-dark: #333;
            --text-light: #666;
            --border-color: #eee;
        }
        .el-table-wrapper {
            overflow-x: auto; 
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            border: 1px solid var(--border-color);
            background: #fff;
        }
        .el-comparison-table {
            width: 100%; border-collapse: collapse; font-size: 13px; min-width: 1000px; 
        }
        .el-comparison-table th {
            background-color: var(--brand-primary); color: #fff; text-align: left;
            padding: 12px 10px; font-weight: 600; white-space: nowrap; font-size: 14px;
        }
        .el-comparison-table td {
            padding: 12px 10px; border-bottom: 1px solid var(--border-color);
            vertical-align: top; color: var(--text-dark);
        }
        .el-comparison-table tr:last-child td { border-bottom: none; }
        .el-comparison-table tr:hover { background-color: var(--table-row-hover); }

        .col-logo img { width: 35px; height: 35px; object-fit: contain; display:block; }
        
        .prod-link { color: var(--brand-primary); font-weight: 700; text-decoration: none; font-size: 14px; }
        .prod-link:hover { text-decoration: underline; }
        .prod-meta { font-size: 11px; color: var(--text-light); margin-top: 3px; display: block;}
        
        .price-val { font-weight: 700; color: var(--text-dark); font-size: 14px; }
        .price-sub { font-size: 11px; color: var(--text-light); }

        .fee-item { display: block; white-space: nowrap; }
        
        .intro-badge { 
            display: inline-block; background: var(--bg-light); color: var(--brand-primary); 
            border: 1px solid #8EBBDB; padding: 4px 8px; border-radius: 4px; 
            font-size: 12px; font-weight: 500; line-height: 1.3; max-width: 220px;
        }

        .table-footer {
            margin-top: 8px; font-size: 11px; color: var(--text-light); text-align: right;
            display: flex; justify-content: flex-end; align-items: center; gap: 6px;
        }