/*
 Theme Name:   Rondayvoo Bricks Child Theme
 Theme URI:    https://rondayvoo.com
 Description:  Use this child theme to extend Rondayvoo Bricks.
 Author:       Event Engine
 Author URI:   https://rondayvoo.com
 Template:     bricks
 Version:      1.1
 Text Domain:  rondayvoo
*/

/* Root */

:root {
  /* Excellent */
  --excellent-bg: #d1fae5;
  --excellent-text: #065f46;
  --excellent-border: #6ee7b7;

  /* Good */
  --good-bg: #fef3c7;
  --good-text: #92400e;
  --good-border: #fcd34d;

  /* Some */
  --some-bg: #e0f2fe;
  --some-text: #075985;
  --some-border: #7dd3fc;
}

/* Styling */


.ee-alink {
	color:#ec008c;
	text-decoration:underline;
}

/* Filter */


.ee-filter.active {
	border:solid 1px black;
}

/* Badges */
.badge {
  display: block;
  padding: 3px 16px;
  border-radius: 5px;
  margin-bottom: 15px;
  position: relative;
  text-align: center;
}

.badge.excellent {
  background: var(--excellent-bg);
  color: var(--excellent-text);
  border: 2px solid var(--excellent-border);
}

.badge.excellent::before {
  content: "★★★ ";
  margin-right: 4px;
}

.badge.good {
  background: var(--good-bg);
  color: var(--good-text);
  border: 2px solid var(--good-border);
}

.badge.good::before {
  content: "★★ ";
  margin-right: 4px;
}

.badge.some {
  background: var(--some-bg);
  color: var(--some-text);
  border: 2px solid var(--some-border);
}

.badge.some::before {
  content: "★ ";
  margin-right: 4px;
}

/* Score Card */

  .supplier-match-wrapper {
            margin: 2rem 0;
        }
        
        .overall-score {
            background: #ebfaff;
            border-radius: 12px;
            padding: 32px;
            text-align: center;
            margin-bottom: 32px;
        }

        	.overall-score.excellent {
        		background: var(--excellent-bg);
        	}
        	.overall-score.good {
        		background: var(--good-bg);
        	}
        	.overall-score.some {
        		background: var(--some-bg);
        	}
        
        .overall-score-label {
            font-size: 18px;
            font-weight: 600;
  
            margin-bottom: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .overall-score-value {
            font-size: 56px;
            font-weight: 700;
  
        }
        
        .supplier-match-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }
        
        .match-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .match-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        .match-header {
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 2px solid #f3f4f6;
        }
        
        .match-title {
            margin: 0 0 16px 0;
            font-size: 22px;
            font-weight: 600;
            color: #1f2937;
            text-transform: capitalize;
        }
        
        .match-score {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        
        .score-fraction {
            font-size: 24px;
            font-weight: 700;
            color: #059669;
        }
        
        .score-percentage {
            font-size: 18px;
            font-weight: 600;
            color: #047857;
            background: #d1fae5;
            padding: 6px 16px;
            border-radius: 50px;
        }
        
        .match-details {
            margin-top: 20px;
        }
        
        .details-label {
            font-size: 16px;
            font-weight: 600;
            color: #6b7280;
            margin-bottom: 12px;
        }
        
        .match-list {
            margin: 0;
            padding-left: 24px;
            list-style-type: disc;
        }
        
        .match-list li {
            font-size: 16px;
            color: #4b5563;
            margin-bottom: 8px;
            line-height: 1.6;
        }
        
        /* Responsive breakpoints */
        @media (max-width: 1024px) {
            .supplier-match-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 24px;
            }
            
            .overall-score-value {
                font-size: 48px;
            }
        }
        
        @media (max-width: 640px) {
            .supplier-match-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .match-card {
                padding: 20px;
            }
            
            .match-title {
                font-size: 20px;
            }
            
            .score-fraction {
                font-size: 22px;
            }
            
            .overall-score {
                padding: 24px;
            }
            
            .overall-score-value {
                font-size: 40px;
            }
        }