/* Add this to your Squarespace Custom CSS */
/* Style the quantity container */
.acuity-quantity-container,
[class*="quantity"] {
background: #f0f8f0 !important;
border: 3px solid #6b8e6b !important;
border-radius: 8px !important;
padding: 20px !important;
margin: 20px 0 !important;
box-shadow: 0 4px 12px rgba(107, 142, 107, 0.3) !important;
}
/* Style the quantity label */
.acuity-quantity-container label,
[class*="quantity"] label {
font-size: 18px !important;
font-weight: bold !important;
color: #4a6b4a !important;
display: block !important;
margin-bottom: 10px !important;
}
/* Add an attention-grabbing element before quantity */
.acuity-quantity-container::before,
[class*="quantity"]::before {
content: "👥 HOW MANY PEOPLE?" !important;
display: block !important;
font-size: 16px !important;
font-weight: bold !important;
color: #6b8e6b !important;
margin-bottom: 10px !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
}
/* Make the input field more prominent */
.acuity-quantity-container input,
[class*="quantity"] input[type="number"] {
font-size: 24px !important;
padding: 12px !important;
border: 2px solid #6b8e6b !important;
border-radius: 6px !important;
width: 100px !important;
text-align: center !important;
font-weight: bold !important;
}
/* Add a subtle pulse animation */
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.02); }
}
.acuity-quantity-container,
[class*="quantity"] {
animation: pulse 2s infinite !important;
}
