/* worship-plus.css — คู่มือไหว้ and ไหว้ของบ้าน tabs (worship-plus.js), in the app's lacquer-and-paper world. */
.wp-intro h3 { margin: 4px 0 4px; font: 600 22px/1.3 'Kanit', sans-serif; color: #7A2927; }
.wp-intro p { margin: 0 0 12px; font: 14px/1.65 'Sarabun', sans-serif; color: #5E4A3D; }
.wp-fests { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 12px; padding: 2px 16px 6px; scrollbar-width: none; }
.wp-fests::-webkit-scrollbar { display: none; }
.wp-fests button { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 54px; padding: 8px 14px; border: 1px solid #E2D2B4; border-radius: 10px; background: #FFFDF8; color: #5B3A2E; cursor: pointer; text-align: left; }
.wp-fests button b { font: 600 15px 'Kanit', sans-serif; }
.wp-fests button small { font: 12px 'Sarabun', sans-serif; color: #8F7A66; }
.wp-fests button[aria-selected="true"] { background: #8B1922; border-color: #8B1922; color: #F8EACD; }
.wp-fests button[aria-selected="true"] small { color: #EBCFA0; }
.wp-card { padding: 18px 16px; border: 1px solid #E4D7BE; border-radius: 10px; background: #FFFDFA; box-shadow: 0 4px 14px #5E381007; }
.wp-card header { position: relative; padding-bottom: 12px; border-bottom: 1px solid #EADCC2; }
.wp-cn { position: absolute; right: 0; top: -2px; font: 600 26px serif; color: #C7A766; }
.wp-card h4 { margin: 0; font: 600 25px/1.3 'Kanit', sans-serif; color: #7A2927; }
.wp-when { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 0; font: 14px 'Sarabun', sans-serif; color: #5E4A3D; }
.wp-when b { font: 600 14px 'Kanit', sans-serif; color: #8B1922; margin-right: 4px; }
.wp-count { display: inline-block; margin: 8px 0 0; padding: 3px 12px; border-radius: 999px; background: #F3E6CC; color: #7A5A22; font: 600 13px 'Kanit', sans-serif; }
.wp-sum { margin: 12px 0 0; font: 15px/1.7 'Sarabun', sans-serif; color: #3F332D; }
.wp-card h5 { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 8px; font: 600 17px 'Kanit', sans-serif; color: #75332C; }
.wp-card h5 small { font: 400 12px 'Sarabun', sans-serif; color: #9A8676; }
.wp-steps { margin: 0; padding: 0; list-style: none; counter-reset: st; }
.wp-steps li { position: relative; padding: 0 0 12px 38px; counter-increment: st; }
.wp-steps li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: #8B1922; color: #F8EACD; font: 600 14px/26px 'Kanit', sans-serif; text-align: center; }
.wp-st-h { font: 500 15px 'Kanit', sans-serif; color: #3A2A24; }
.wp-st-h b { color: #8B1922; font-weight: 600; margin-right: 4px; }
.wp-steps p { margin: 3px 0 0; font: 14px/1.6 'Sarabun', sans-serif; color: #5E4A3D; }
.wp-steps .wp-hr { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 8px; background: #E7F3E6; color: #2E5A2A; font: 500 13px 'Kanit', sans-serif; }
.wp-lay { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; border-radius: 8px; background: #FBF4E6; }
.wp-offer, .wp-greet, .wp-tips { margin: 0; padding: 0; list-style: none; }
.wp-offer li { border-bottom: 1px solid #F0E6D4; }
.wp-offer label { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; cursor: pointer; }
.wp-offer input { width: 20px; height: 20px; min-height: 0 !important; margin: 2px 0 0; padding: 0 !important; accent-color: #8B1922; flex: none; }
.wp-offer b { display: block; font: 500 15px 'Kanit', sans-serif; color: #3A2A24; }
.wp-offer small { display: block; font: 13px/1.5 'Sarabun', sans-serif; color: #7C6A5C; }
.wp-greet li { display: flex; flex-direction: column; padding: 8px 12px; margin-bottom: 6px; border-radius: 8px; background: #F8EEDC; }
.wp-greet b { font: 600 17px 'Kanit', sans-serif; color: #8B1922; }
.wp-greet span { font: 13px 'Sarabun', sans-serif; color: #6D5548; }
.wp-tips li { position: relative; padding: 0 0 6px 16px; font: 14px/1.6 'Sarabun', sans-serif; color: #4F4642; }
.wp-tips li::before { content: '•'; position: absolute; left: 2px; color: #B39150; }
.wp-note { margin: 14px 0 0; font: 12px/1.6 'Sarabun', sans-serif; color: #8F7A66; }
.wp-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; margin: 14px 0 0; padding: 10px 14px; border: 1px solid #8B1922; border-radius: 8px; background: #8B1922; color: #F8EACD; font: 500 15px 'Kanit', sans-serif; cursor: pointer; }
.wp-btn.is-ghost { background: #FFFDF8; color: #8B1922; border-color: #D9C3A0; }
.wp-btn.is-line { background: #06A94D; border-color: #06A94D; color: #fff; }

/* household */
.wp-in { margin: 0 0 14px; padding: 14px; border: 1px solid #9CCBAA; border-radius: 10px; background: #F1F9F3; font: 14px/1.6 'Sarabun', sans-serif; color: #2E5A3B; }
.wp-in b { font: 600 16px 'Kanit', sans-serif; }
.wp-in p { margin: 4px 0 0; }
.wp-in small { display: block; margin-top: 8px; color: #5E7A65; }
.wp-in-b { display: flex; gap: 8px; }
.wp-in-b .wp-btn { margin-top: 10px; }
.wp-house { padding: 14px; border: 1px solid #E4D7BE; border-radius: 10px; background: #FFFDFA; }
.wp-house label { display: block; font: 500 13px 'Kanit', sans-serif; color: #75332C; }
.wp-house input[type="text"] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
.wp-mem { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.wp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border-radius: 999px; background: #F3E6CC; color: #5B3A2E; font: 500 14px 'Kanit', sans-serif; }
.wp-chip button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: #8F6B3A; font: 18px/1 sans-serif; cursor: pointer; }
.wp-add { display: inline-flex; gap: 4px; }
.wp-add input { width: 120px !important; min-height: 36px !important; padding: 4px 10px !important; margin: 0 !important; font-size: 14px !important; border-radius: 999px !important; }
.wp-add button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: #8B1922; color: #F8EACD; font: 500 13px 'Kanit', sans-serif; cursor: pointer; }
.wp-plan-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 8px; }
.wp-plan-h h4 { margin: 0; font: 600 18px 'Kanit', sans-serif; color: #75332C; }
.wp-sw { display: inline-flex; align-items: center; gap: 6px; font: 13px 'Sarabun', sans-serif; color: #6D5548; }
.wp-sw input { width: 18px; height: 18px; min-height: 0 !important; padding: 0 !important; accent-color: #8B1922; }
.wp-plan { display: flex; flex-direction: column; gap: 8px; }
.wp-fest { border: 1px solid #E4D7BE; border-radius: 10px; background: #FFFDFA; overflow: hidden; }
.wp-fest.is-open { border-color: #C9A86C; box-shadow: 0 4px 14px #5E381010; }
.wp-fh { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; background: none; text-align: left; cursor: pointer; }
.wp-fd { display: flex; flex-direction: column; align-items: center; padding: 4px 0; border-radius: 8px; background: #8B1922; color: #F8EACD; }
.wp-fd b { font: 600 22px/1.1 'Oswald', sans-serif; }
.wp-fd small { font: 11px 'Kanit', sans-serif; }
.wp-ft b { display: block; font: 600 16px 'Kanit', sans-serif; color: #3A2A24; }
.wp-ft small { font: 13px 'Sarabun', sans-serif; color: #8F7A66; }
.wp-prog { padding: 3px 10px; border-radius: 999px; background: #F3E6CC; color: #7A5A22; font: 600 13px 'Kanit', sans-serif; }
.wp-items { margin: 0; padding: 0 12px 4px; list-style: none; border-top: 1px solid #F0E6D4; }
.wp-items li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #F5EDE0; }
.wp-done { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font: 14px 'Sarabun', sans-serif; color: #3A2A24; cursor: pointer; }
.wp-done input { width: 20px; height: 20px; min-height: 0 !important; padding: 0 !important; accent-color: #2E9E5B; flex: none; }
.wp-done input:checked + span { text-decoration: line-through; color: #9A8676; }
.wp-items select { flex: none; max-width: 42%; min-height: 36px !important; padding: 4px 8px !important; font-size: 13px !important; }
.wp-link { display: block; margin: 6px 12px 10px; padding: 0; border: 0; background: none; color: #8B1922; font: 500 14px 'Kanit', sans-serif; cursor: pointer; }
.wp-actions { display: flex; flex-direction: column; gap: 0; }
.wp-msg { margin: 8px 0 0; font: 13px 'Sarabun', sans-serif; color: #2E7D4A; overflow-wrap: anywhere; }

/* yearbook */
.wp-book { margin: 22px 0 0; padding: 16px; border: 1px solid #C9A86C; border-radius: 10px; background: linear-gradient(180deg, #FBF1DD, #FFFDF8); }
.wp-book-h { display: flex; gap: 12px; align-items: flex-start; }
.wp-book-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #B99656; outline: 1px solid #CFB984; outline-offset: -5px; color: #8B1922; font: 26px serif; background: #FFF9EB; }
.wp-book h4 { margin: 0; font: 600 19px 'Kanit', sans-serif; color: #75332C; }
.wp-book p { margin: 4px 0 0; font: 13.5px/1.6 'Sarabun', sans-serif; color: #5E4A3D; }
.wp-book-c { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; font: 13px 'Sarabun', sans-serif; color: #6D5548; }
.wp-book-c label { display: inline-flex; align-items: center; gap: 6px; font: 500 14px 'Kanit', sans-serif; color: #75332C; }
.wp-book-c select { min-height: 38px !important; padding: 4px 10px !important; font-size: 14px !important; }
.wp-pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.wp-pages a { position: relative; display: block; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 6px rgba(60, 30, 20, .18); }
.wp-pages img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.wp-pages span { position: absolute; right: 4px; bottom: 4px; padding: 0 6px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff; font: 600 11px/18px 'Kanit', sans-serif; }