/*
/* Ensure widget max width is 750px and responsive */
#celebratix .max-w-\(--breakpoint-sm\) {
max-width: 750px !important; /* Desktop limit */
width: 100% !important; /* Full width on smaller screens */
margin: 0 auto; /* Center */
}
/* Set text colors */
#celebratix .text-\[\#FFFFFFCC\] {
color: #a21e24 !important; /* Red */
}
/* Adjust background colors for light mode (lighter gray) */
#celebratix .bg-\[\#FFFFFF14\] {
background-color: #e5e5e5 !important; /* Lighter gray */
}
#celebratix .bg-white {
background-color: var(--color-white) !important; /* Ensure proper contrast */
}
/* Define only THREE font sizes */
#celebratix p {
font-size: 1.25rem !important; /* Default text size - 20px */
color: #a21e24 !important; /* Red */
}
/* Medium size for important sections */
#celebratix p.text-base,
#celebratix button p {
font-size: 1.5rem !important; /* 24px */
color: #a21e24 !important;
}
/* Large size for key titles */
#celebratix p.text-2xl,
#celebratix p.text-base.font-medium,
#celebratix button[data-testid="order-button"] p {
font-size: 2rem !important; /* 32px */
color: #a21e24 !important; /* Red */
}
/* Order button text should be white */
#celebratix button[data-testid="order-button"] p {
color: white !important;
}
/* Adjust button colors */
#celebratix button {
background-color: #e0e0e0 !important; /* Even lighter gray */
color: white !important; /* White text for contrast */
border-radius: 8px !important;
padding: 10px 15px !important;
}
/* Make button hover effect more visible */
#celebratix button:hover {
background-color: #d6d6d6 !important; /* Slightly darker gray */
}
/* Inputs and text boxes should have a light background */
#celebratix input,
#celebratix textarea {
background-color: #f9f9f9 !important;
color: #a21e24 !important;
border: 1px solid #a21e24 !important;
padding: 8px !important;
}
/* Adjust the widget's overall background */
#celebratix {
background-color: white !important;
}
/* Adjust card elements */
#celebratix .rounded-xl {
background-color: #f2f2f2 !important; /* Light gray to stand out */
border-radius: 10px !important;
}
/* Ensure contrast for disabled buttons */
#celebratix button:disabled {
background-color: #eeeeee !important; /* Lighter disabled button */
color: #a21e24 !important;
}
/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
#celebratix .max-w-\(--breakpoint-sm\) {
max-width: 90% !important; /* Adjust for smaller screens */
}
#celebratix p {
font-size: 1.1rem !important; /* Default size slightly smaller */
}
#celebratix p.text-base,
#celebratix button p {
font-size: 1.3rem !important; /* Adjusted medium size */
}
#celebratix p.text-2xl,
#celebratix p.text-base.font-medium,
#celebratix button[data-testid="order-button"] p {
font-size: 1.75rem !important; /* Slightly smaller large text */
}
}
/* Override ultra-small text */
#celebratix p.text-\[8px\] {
font-size: 1rem !important; /* Force it to match the global size */
color: #a21e24 !important;
}