/* in styles.css */
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #fff;
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.6s linear infinite;
vertical-align: middle;
margin-right: 8px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.framer-qr5yom-container ul {
display: flex;
}
.framer-z99kax-container ul {
display: flex;
}
@keyframes slide-left {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); } /* adjust based on width */
}
@keyframes slide-right {
0% { transform: translateX(-50%); }
100% { transform: translateX(0); }
}
.checkout-modal {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 2000;
}
.checkout-modal.show {
display: flex;
animation: fadeIn 0.3s ease;
}
.checkout-modal-content {
background: #fff;
padding: 35px 25px;
border-radius: 20px;
border: 2px solid #acace2;
max-width: 420px;
width: 90%;
text-align: center;
box-shadow: 0 10px 35px rgba(0,0,0,0.25);
animation: popIn 0.3s ease;
font-family: 'Inter', sans-serif;
}
.checkout-modal-content h2 {
margin-bottom: 15px;
font-size: 1.4rem;
color: #222;
}
.checkout-modal-content h2 i {
margin-right: 8px;
color: #3b82f6;
font-size: 1.3em;
vertical-align: middle;
}
.checkout-modal-content p {
color: #444;
font-size: 1rem;
line-height: 1.5;
}
.checkout-modal-content button {
margin-top: 25px;
padding: 12px 22px;
border: none;
background: #333;
color: #fff;
border-radius: 10px;
cursor: pointer;
font-size: 0.95rem;
transition: background 0.2s ease;
}
.checkout-modal-content button:hover {
background: #222;
}
.checkout-modal-content a {
color: #3b82f6;
text-decoration: none;
}
.checkout-modal-content a:hover {
text-decoration: underline;
}
@keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }
@keyframes popIn { from {transform: scale(0.9);} to {transform: scale(1);} }
/* Modal Background */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
font-family: Inter, sans-serif;
}
/* Modal container */
#checkoutModal {
display: none; /* hidden by default */
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 1000;
}
/* Show state */
#checkoutModal.show {
display: flex;
opacity: 1;
pointer-events: auto;
}
/* Modal content pop animation */
.modal-content {
background: #fff;
padding: 40px 30px;
border-radius: 24px;
border: 2px solid #a296e2;
max-width: 450px;
width: 90%;
text-align: center;
position: relative;
box-shadow: 0 8px 30px rgba(0,0,0,0.25);
transform: scale(0.9);
opacity: 0;
transition: transform 0.25s ease, opacity 0.25s ease;
}
#checkoutModal.show .modal-content {
transform: scale(1);
opacity: 1;
}
/* Title */
.modal-content h2 {
margin-top: 0;
margin-bottom: 25px;
font-size: 26px;
color: #222;
letter-spacing: -1px; /* closer letters */
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); /* subtle shadow */
}
/* Subtitle / description */
.modal-content p {
font-size: 16px;
color: #555;
margin: 0 0 20px 0;
line-height: 1.4em;
}
/* Input */
.modal-content input {
width: 100%;
padding: 14px;
margin: 15px 0;
border: 2px solid #ccc;
border-radius: 8px;
font-size: 16px;
background: #efe9e9;
outline: none;
transition: border-color 0.2s;
}
.button-row {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 10px;
align-items: center; /* center both buttons */
}
.modal-content .paypaltext {
margin: 0 auto;
font-size: 12px;
}
#continueBtn,
#paypalBtn {
width: 60%; /* make them equal width and centered */
max-width: 250px;
padding: 8px 12px;
font-size: 14px;
border-radius: 6px;
cursor: pointer;
}
#paypalBtn {
background-color: #ffc439;
color: #111;
border: none;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
#paypalBtn i {
font-size: 16px;
}
.modal-content input:focus {
border-color: #007bff;
}
/* Continue Button */
.modal-content button#continueBtn {
padding: 12px 20px;
background: #292929;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 800;
cursor: pointer;
margin-top: 10px;
width: 100%;
transition: background 0.2s;
}
.modal-content button#continueBtn:hover {
background: #1a1a1a;
}
/* Close Button */
.close-btn {
position: absolute;
top: 12px;
right: 14px;
background: #ff4d4d;
color: white;
font-size: 22px;
font-weight: bold;
border: none;
border-radius: 50%;
width: 32px;
height: 32px;
cursor: pointer;
line-height: 0;
}
@media(min-width: 4000px){
.hidden-7ef9o7{
display:none!important
}
}
@media(min-width: 1740px) and (max-width: 3999px){
.hidden-ckvpr6{
display:none!important
}
}
@media(min-width: 1200px) and (max-width: 1739px){
.hidden-1rj28av{
display:none!important
}
}
@media(min-width: 1024px) and (max-width: 1199px){
.hidden-jgey1u{
display:none!important
}
}
@media(min-width: 766px) and (max-width: 1023px){
.hidden-6hrefa{
display:none!important
}
}
@media(max-width: 765px){
.hidden-19utrlt{
display:none!important
}
}