Body {
Background-color: #ffe4e1;
Font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
Margin: 0;
Padding: 40px 20px;
Display: flex;
Justify-content: center;
Align-items: center;
Min-height: 100vh;
}
.pink-menu-box {
Background-color: #ffffff;
Border: 4px solid #ffb6c1;
Border-radius: 28px;
Padding: 35px;
Max-width: 600px;
Width: 100%;
Box-shadow: 0 10px 25px rgba(255, 182, 193, 0.4);
Box-sizing: border-box;
}
.header-container {
Text-align: center;
Margin-bottom: 25px;
Border-bottom: 3px dashed #ffb6c1;
Padding-bottom: 20px;
}
.main-title {
Color: #ff69b4;
Font-size: 32px;
Margin: 0 0 10px 0;
}
.welcome-message {
Font-size: 18px;
Color: #d1518b;
Font-weight: bold;
Margin: 0;
}
.sub-title {
Color: #777777;
Font-size: 14px;
Margin: 0;
}
.section-title {
Color: #ff69b4;
Font-size: 20px;
Font-weight: bold;
Margin: 30px 0 15px 0;
Border-right: 4px solid #ff69b4;
Padding-right: 10px;
}
.menu-item { display: flex; align-items: flex-start; margin-bottom: 20px; background-color: #fff9fa; padding: 12px; border-radius: 12px; } .item-selection { display: flex; align-items: center; gap: 8px; margin-left: 15px; } .item-checkbox { width: 18px; height: 18px; accent-color: #ff69b4; cursor: pointer; }
.item-qty {
Width: 45px;
Padding: 3px;
Border: 1px solid #ffb6c1;
Border-radius: 6px;
Text-align: center;
}
.menu-details {
Flex-grow: 1;
}
.item-header {
Display: flex;
Justify-content: space-between;
Font-weight: bold;
Color: #4a4a4a;
Font-size: 16px;
Margin-bottom: 5px;
Text-align: right;
}
.item-price {
Color: #ff69b4;
}
.item-desc { color: #777777; font-size: 13px; margin: 0; line-height: 1.5; text-align: right; } .intro-page { text-align: center; padding: 50px30px; } .about-section-box { background-color: #fff0f5; border: 1px dashed #ffb6c1; border-radius: 16px; padding: 25px; font-size: 15px; color: #555555; line-height: 1.7; text-align: justify; margin: 30px0; direction: ltr; }
.enter-menu-btn { display: inline-block; background-color: #ff69b4; color: white; text-decoration: none; padding: 15px40px; font-size: 18px; font-weight: bold; border-radius: 50px; box-shadow: 04px15pxrgba(255, 105, 180, 0.4); cursor: pointer; } .enter-menu-btn:hover { background-color: #ff4500; } .order-summary-box { margin-top: 35px; background-color: #fff0f5; border: 2px dashed #ffb6c1; border-radius: 16px; padding: 20px; }
.order-summary-boxh3 { color: #ff69b4; margin-top: 0; font-size: 18px; } .summary-item-row { display: flex; justify-content: space-between; font-size: 14px; color: #555; margin-bottom: 8px; } .summary-divider { border: 0; border-top: 1px dashed #ffb6c1; margin: 15px0; } .total-price-row { display: flex; justify-content: space-between; font-size: 18px; font-weight: bold; color: #ff69b4; margin-bottom: 15px; }
#order-submit-btn { width: 100%; background-color: #ff69b4; color: white; border: none; padding: 12px; font-size: 16px; font-weight: bold; border-radius: 12px; cursor: pointer; } #order-submit-btn:hover { background-color: #ff4500; } #order-submit-btn:disabled { background-color: #cccccc; cursor: not-allowed; } .hidden-message { display: none; }
#success-message {
Margin-top: 20px;
Background-color: #e6f7ed;
Border: 2px solid #b7ebc6;
Color: #14532d;
Border-radius: 12px;
Padding: 15px;
Font-size: 15px;
Font-weight: bold;
Line-height: 1.6;
Text-align: center;
}
.back-link {
Color: #ff69b4;
Text-decoration: none;
Font-size: 16px;
Font-weight: bold;
}