.pcg-container {
background: #eee;
padding: 15px;
border: 1px solid #ddd;
width: auto;
margin: 20px auto;
text-align: left; box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1);
border-radius: 8px;
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
} .pcg-settings-container {
flex: 1 1 45%; margin-right: 20px;
} #promo-codes-result {
flex: 1 1 45%; padding-left: 0px;
text-align: center
}
#promo-codes-result h3 {
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
} .pcg-settings-container h3 {
margin-bottom: 15px;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
} #pcg-form {
text-align: left; } #pcg-form label {
display: block;
margin-bottom: 8px;
font-weight: bold;
} input[type="range"] {
width: 100%;
} .pcg-container #promo-codes-result ul {
list-style-type: none;
padding: 0;
}
.pcg-container #promo-codes-result li {
font-size: 16px;
margin-bottom: 10px;
background-color: #f9f9f9;
padding: 10px;
border-radius: 8px; border: 1px solid #ddd; transition: background-color 0.3s ease;
}
.pcg-container #promo-codes-result li:hover {
background-color: #f0f0f0; } .pcg-container #pcg-form button {
width: 100%; padding: 10px;
margin-bottom: 10px;
font-weight: bold;
font-size: 16px;
cursor: pointer;
border-radius: 3px;
transition: background 0.3s ease;
} #generate-button {
background: #0073aa;
color: white;
border: none;
}
#generate-button:hover {
background: #005177;
}
#generate-button:active {
transform: scale(0.95);
} #copy-all-button {
background: #28a745; color: white;
border: none;
display: none; }
#copy-all-button:hover {
background: #1e7e34;
}
#copy-all-button:active {
transform: scale(0.95);
} @media (max-width: 600px) { .pcg-container #generate-button, .pcg-container #copy-all-button {
width: 100%;
} .pcg-container #copy-all-button {
margin-top: 10px; }
}