<style>
.checkout {
border: 3px solid #FF7F50;
border-radius: 15px;
margin: 0 0 20px;
box-shadow: 0px 0px 15px rgba(255, 127, 80, 0.5), 0px 0px 25px rgba(255, 127, 80, 0.7);
transition: all 0.3s ease-in-out;
background: #FFF5EE;
}
.checkout:hover {
transform: scale(1.03);
box-shadow: 0px 0px 30px rgba(255, 127, 80, 0.6), 0px 0px 40px rgba(255, 127, 80, 0.8);
}
.checkout-heading {
animation: pulse 2s infinite ease-in-out;
text-align: center;
font-weight: bold;
font-size: 2.2rem;
color: #FF4500;
text-transform: uppercase;
letter-spacing: 3px;
text-shadow: 2px 2px 6px rgba(255, 69, 0, 0.5);
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.8;
}
}
.checkout-form {
padding: 25px;
border-radius: 10px;
background-color: #FFFAF0;
box-shadow: 0px 0px 30px rgba(255, 165, 0, 0.4);
transition: box-shadow 4s ease;
}
.checkout-form:hover {
box-shadow: 0px 0px 40px rgba(255, 165, 0, 0.5);
}
.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form input[type="url"],
.checkout-form input[type="search"],
.checkout-form input[type="number"],
.checkout-form input[type="tel"],
.checkout-form input[type="password"],
.checkout-form textarea {
border-color: #FF7F50 !important;
border-radius: 12px;
padding: 15px;
background-color: #fff;
border: 2px solid;
transition: all 4s ease;
}
.checkout-form input:focus,
.checkout-form textarea:focus {
border-color: #FF7F50 !important;
transform: scale(1.05);
box-shadow: 0px 0px 15px rgba(255, 127, 80, 0.6);
}
@media (max-width: 768px) {
.checkout {
transform: none;
}
.checkout:hover {
transform: none;
box-shadow: 0px 0px 30px rgba(255, 127, 80, 0.5);
}
.checkout-heading {
font-size: 1.8rem;
}
.checkout-form {
padding: 18px;
}
.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form input[type="url"],
.checkout-form input[type="search"],
.checkout-form input[type="number"],
.checkout-form input[type="tel"],
.checkout-form input[type="password"],
.checkout-form textarea {
padding: 12px 15px;
}
}
</style>
<style>
.product-section.add-to-cart-section {
background-color: #FF7F50;
padding: 20px;
border-radius: 15px;
box-shadow: 0px 0px 20px rgba(255, 127, 80, 0.4);
transition: all 4s ease;
}
.product-section.add-to-cart-section:hover {
transform: scale(1.05);
box-shadow: 0px 0px 30px rgba(255, 127, 80, 0.6);
}
.quantity {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.quantity-handler {
cursor: pointer;
padding: 10px;
background-color: #fff;
border-radius: 50%;
margin: 0 10px;
transition: background-color 4s ease, transform 4s ease;
}
.quantity-handler:hover {
background-color: #FF4500;
transform: scale(1.1);
}
.quantity-handler i {
font-size: 1.5rem;
color: #FF7F50;
}
.single-quantity {
width: 50px;
text-align: center;
padding: 8px;
font-size: 1rem;
border: 2px solid #FF7F50;
border-radius: 5px;
margin: 0 10px;
transition: border-color 0.6s ease, box-shadow 0.6s ease;
}
.single-quantity:focus {
border-color: #FF7F50;
box-shadow: 0px 0px 10px rgba(255, 127, 80, 0.6);
}
.button.single-submit {
background-color: #FF7F50;
color: #fff;
padding: 12px 30px;
border: none;
border-radius: 25px;
font-size: 1.1rem;
cursor: pointer;
transition: transform 4s ease, box-shadow 4s ease;
box-shadow: 0px 0px 10px rgba(255, 127, 80, 0.4);
}
.button.single-submit:hover {
background-color: #FF7F50;
transform: scale(1.05);
box-shadow: 0px 0px 20px rgba(255, 127, 80, 0.6);
}
.button.single-submit:focus {
background-color: #FF7F50;
box-shadow: 0px 0px 20px rgba(255, 127, 80, 0.6);
}
@media (max-width: 768px) {
.product-section.add-to-cart-section {
padding: 15px;
}
.single-quantity {
width: 40px;
}
.button.single-submit {
padding: 10px 25px;
}
}
</style>