/* Referral Program Page CSS */
.ref-wrap { max-width: 800px; margin: 0 auto; padding: 24px 20px; font-family: 'Lato', sans-serif; line-height: 1.7; color: #333; }
.ref-wrap h1 { font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 700; color: #0f2940; margin-bottom: 24px; text-align: center; }
.ref-wrap h2 { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 600; color: #0f2940; margin: 32px 0 16px; border-bottom: 2px solid #f5c842; padding-bottom: 8px; }
.ref-wrap h3 { font-size: 1.15rem; font-weight: 600; color: #0f2940; margin: 24px 0 12px; }
.ref-wrap p { margin-bottom: 16px; }
.ref-wrap ul, .ref-wrap ol { margin: 0 0 16px 24px; padding: 0; }
.ref-wrap li { margin-bottom: 8px; }
.ref-steps { background: #f8f9fa; border-radius: 12px; padding: 24px; margin: 24px 0; }
.ref-steps ol { margin: 0; padding: 0 0 0 24px; }
.ref-steps li { margin-bottom: 16px; padding-left: 8px; }
.ref-steps li:last-child { margin-bottom: 0; }
.ref-reward { background: linear-gradient(135deg, #0f2940 0%, #1a3a5c 100%); color: #fff; border-radius: 12px; padding: 24px; margin: 24px 0; text-align: center; }
.ref-reward h2 { color: #fff; border-bottom-color: rgba(255,255,255,0.3); }
.ref-reward p { margin-bottom: 12px; }
.ref-reward strong { color: #f5c842; font-size: 1.2rem; }
.ref-disclaimer { background: #fff3cd; border-left: 4px solid #ffc107; padding: 16px; margin: 24px 0; border-radius: 0 8px 8px 0; }
.ref-disclaimer p { margin: 0; font-size: 0.95rem; }
.ref-pdpa { background: #e8f5e9; border-radius: 12px; padding: 20px; margin: 24px 0; }
.ref-pdpa h3 { margin-top: 0; color: #155c38; }
.ref-pdpa p { font-size: 0.95rem; margin-bottom: 12px; }
.ref-faq { margin-top: 32px; }
.ref-faq summary { cursor: pointer; font-weight: 600; padding: 14px 16px; background: #f8f9fa; border-radius: 8px; margin-bottom: 8px; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.ref-faq summary::-webkit-details-marker { display: none; }
.ref-faq summary::after { content: '+'; font-size: 1.3rem; font-weight: 700; color: #0f2940; }
.ref-faq details[open] summary::after { content: '-'; }
.ref-faq-answer { padding: 16px; background: #fff; border: 1px solid #e0e0e0; border-top: none; border-radius: 0 0 8px 8px; margin-bottom: 16px; }
.ref-faq-answer p { margin: 0; }
.ref-cta { text-align: center; margin: 40px 0; padding: 32px 20px; background: linear-gradient(135deg, #0f2940 0%, #1a3a5c 100%); border-radius: 16px; color: #fff; }
.ref-cta h2 { color: #fff; border: none; margin-top: 0; }
.ref-cta p { font-size: 1.05rem; opacity: 0.95; margin-bottom: 24px; }
.ref-cta-btn { display: inline-block; background: #25D366; color: #fff !important; font-weight: 600; padding: 14px 32px; border-radius: 50px; text-decoration: none !important; font-size: 1.05rem; transition: all 0.3s ease; box-shadow: 0 4px 14px rgba(37,211,102,0.35); }
.ref-cta-btn:hover { background: #20b35c; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37,211,102,0.45); }
.ref-contact { text-align: center; padding: 24px; background: #f8f9fa; border-radius: 12px; margin: 24px 0; }
.ref-contact p { margin: 0; }
.lang-en { display: block; }
.lang-zh { display: none; }
.lang-btn { display: block; margin: 0 auto 24px; background: #0f2940; color: #fff; font-weight: 600; padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer; font-size: 0.95rem; }
.lang-btn:hover { background: #1a3a5c; }
@media (max-width: 600px) { .ref-wrap h1 { font-size: 1.7rem; } .ref-wrap h2 { font-size: 1.3rem; } .ref-wrap { padding: 16px 16px; } .ref-cta-btn { width: 100%; box-sizing: border-box; } }