/* Chùa Online v1.2 — scoped under .chua-online so theme button styles cannot
   turn the place cards into ovals or dark-on-dark text. Card rules use
   higher specificity and !important only for background / colour / radius,
   because WP themes commonly style every <button> as a pill. */
.chua-online { max-width: 960px; margin: 0 auto; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #3b2a1a; line-height: 1.6; box-sizing: border-box; }
.chua-online *, .chua-online *::before, .chua-online *::after { box-sizing: border-box; }
.chua-online-header { text-align: center; background: linear-gradient(160deg, #8f1d1d, #b8860b); color: #fff; padding: 28px 20px; border-radius: 16px; }
.chua-online-title { margin: 0; font-size: 2rem; color: #fff; }
.chua-online-subtitle { margin: 8px 0; color: #fff; }
.chua-online-note { font-size: .9rem; color: #6b5a49; }
.chua-online-header .chua-online-note { color: #ffe9c2; }
.chua-online button, .chua-online select, .chua-online input, .chua-online textarea { font: inherit; }
/* Base button: RECTANGULAR (12px), never a full pill. */
.chua-online button { cursor: pointer; border: 0; border-radius: 12px; padding: 12px 18px; background: #8f1d1d; color: #fff; margin: 4px; line-height: 1.5; height: auto; min-height: 44px; white-space: normal; text-align: center; }
.chua-online button:hover { background: #6d1414; }
.chua-online button.done { background: #2e7d32; }
.chua-online button.next { outline: 3px solid #ffb703; }
.chua-online-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0 8px; }
.chua-online button.chua-online-track-btn { font-size: 1.15rem; font-weight: 700; padding: 18px 12px; border-radius: 12px; background: #f3e6c8; color: #5b3a12; border: 2px solid #d8b96a; }
.chua-online button.chua-online-track-btn.is-active { background: #8f1d1d; color: #fff; border-color: #8f1d1d; }
.chua-online-track-desc, .chua-online-progress { text-align: center; font-weight: 600; }
.chua-online-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 16px 0; }
/* Place cards: RECTANGULAR with 14px corners, generous padding, text never
   clipped. Unselected = dark red with CREAM text; selected = light cream
   with DARK text. This rule must beat the generic button rule above. */
.chua-online .chua-online-grid button.chua-online-card {
  display: block; width: 100%; height: auto; min-height: 118px;
  text-align: left; padding: 16px 18px !important; margin: 0 !important;
  border-radius: 14px !important; border: 2px solid #7a1818 !important;
  background: #8f1d1d !important; color: #fff8e7 !important;
  line-height: 1.5; white-space: normal; overflow: visible; word-wrap: break-word;
}
.chua-online .chua-online-grid button.chua-online-card strong { display: block; font-size: 1.08rem; color: #fff8e7 !important; margin-bottom: 4px; }
.chua-online .chua-online-grid button.chua-online-card small { color: #ffe9c2 !important; font-size: .92rem; }
.chua-online .chua-online-grid button.chua-online-card.is-active { background: #fff0d6 !important; color: #3b2a1a !important; border-color: #8f1d1d !important; }
.chua-online .chua-online-grid button.chua-online-card.is-active strong { color: #5b1a1a !important; }
.chua-online .chua-online-grid button.chua-online-card.is-active small { color: #6b5a49 !important; }
.chua-online-altar, .chua-online-section { background: #fffaf0; border: 1px solid #e3cfa5; border-radius: 16px; padding: 20px; margin: 20px 0; overflow: hidden; }
.chua-online-altar h3 { font-size: 1.4rem; margin: 0 0 8px; }
/* Altar visual: inline SVG temple roof + lotus + burner, no external image. */
.chua-online-altar-visual { background: linear-gradient(180deg, #f7e3b0 0%, #f3d9a0 55%, #e8c47e 100%); border: 2px solid #b8860b; border-radius: 14px; padding: 12px 12px 0; margin: 14px 0; text-align: center; }
.chua-online-altar-visual svg { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
.chua-online-altar-caption { margin: 2px 0 10px; font-size: .9rem; color: #5b3a12; }
.chua-online-altar blockquote { border-left: 4px solid #b8860b; margin: 12px 0; padding: 8px 14px; background: #fff; font-style: italic; }
.chua-online-incense { text-align: center; background: #2b1a12; border-radius: 14px; padding: 12px; color: #ffe9c2; }
.chua-online-incense canvas { max-width: 100%; }
.chua-online-sticks { display: flex; justify-content: center; gap: 14px; margin-top: -46px; }
.chua-online-sticks span { display: block; width: 5px; height: 52px; background: #c98a3a; border-radius: 3px; }
.chua-online-sticks span.lit { background: linear-gradient(#ff5722, #c98a3a); box-shadow: 0 0 10px #ff7043; }
.chua-online-ritual { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 16px; }
.chua-online-section label { display: block; margin: 8px 0; }
.chua-online-section input[type="text"], .chua-online-section textarea, .chua-online-section select { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #d8c2a0; border-radius: 10px; background: #fff; color: #3b2a1a; }
.chua-online-wish-card { background: #fff; border: 1px solid #b8860b; border-radius: 12px; padding: 16px; margin: 12px 0; text-align: center; white-space: pre-line; }
.chua-online-sutra { white-space: pre-line; background: #fff; border-radius: 12px; padding: 16px; margin-top: 12px; }
.chua-online-breath { font-size: 64px; text-align: center; transition: transform 2s ease; }
.chua-online-breath.in { transform: scale(1.4); }
.chua-online-breath.out { transform: scale(0.9); }
.chua-online-deeds { list-style: none; padding: 0; }
.chua-online-deeds li { margin: 6px 0; }
@media (max-width: 600px) {
  .chua-online-tracks { grid-template-columns: 1fr; }
  .chua-online-title { font-size: 1.6rem; }
  .chua-online-grid { grid-template-columns: 1fr 1fr; }
  .chua-online .chua-online-grid button.chua-online-card { padding: 14px 12px !important; }
}

/* v2.0 community platform */
.chua-online .chua-platform-section{margin-top:24px}
.chua-online .co-account-state{padding:12px 14px;background:#f5ebd6;border:1px solid #ddc99f;border-radius:10px;margin:12px 0;color:#4a3219;font-weight:650}
.chua-online .co-account-state.is-error{background:#fff0ed;border-color:#d9a49a;color:#8f1d1d}
.chua-online .co-auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.chua-online .co-auth-grid form{background:#fff;border:1px solid #e3cfa5;border-radius:13px;padding:16px}
.chua-online .co-auth-grid h4{margin:0 0 10px;color:#762020;font-size:1.1rem}
.chua-online .co-auth-grid label{display:block;font-size:.92rem;font-weight:600;margin:8px 0}
.chua-online .co-auth-grid input{display:block;width:100%;padding:10px;border:1px solid #d8c2a0;border-radius:9px;margin-top:5px;background:#fff;color:#33251a}
.chua-online .co-hall-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.chua-online .co-hall{background:#fffaf0;border:1px solid #dfc99d;border-radius:15px;padding:16px;min-width:0}
.chua-online .co-hall h4{font-family:Georgia,serif;font-size:1.25rem;margin:8px 0 2px;color:#652019}
.chua-online .co-hall p{margin:4px 0 10px;color:#705d49;font-size:.92rem}
.chua-online .co-hall-art{height:116px;border-radius:10px;display:grid;place-items:center;font-family:serif;font-size:62px;color:#f8df9e;background:radial-gradient(circle at 50% 30%,#a94b35,#4d1712);border:2px solid #c59b4d}
.chua-online .co-art-lotus{background:radial-gradient(circle at 50% 30%,#d58b9d,#762c46)}.chua-online .co-art-gold{background:radial-gradient(circle at 50% 30%,#d6b35c,#61431b)}.chua-online .co-art-red{background:radial-gradient(circle at 50% 30%,#c45b44,#541811)}
.chua-online .co-capacity{display:flex;gap:6px;align-items:center;font-size:.88rem;color:#685640}.chua-online .co-capacity b{color:#8f1d1d;font-size:1.05rem}
.chua-online button.co-join{width:100%;margin:10px 0 0;background:#8f1d1d;color:#fff8e7}.chua-online button.co-join.is-joined{background:#37633b}
.chua-online .co-seat-status{font-size:.9rem;color:#67563f;margin:8px 0 0;min-height:1.4em}
.chua-online .co-my-seat{padding:12px;background:#e9f2df;border:1px solid #a9c39b;border-radius:10px;margin-top:12px;color:#31552f;font-weight:650}
.chua-online .co-release-scene{height:240px;position:relative;overflow:hidden;border-radius:14px;border:2px solid #b8860b;background:linear-gradient(#b9d9e5 0%,#e8e2bd 60%,#a9c78b 61%,#668c58 100%);margin:14px 0}
.chua-online .co-sun{position:absolute;right:12%;top:22px;width:48px;height:48px;border-radius:50%;background:#f7d47d;box-shadow:0 0 28px #f7d47d}
.chua-online .co-mountain{position:absolute;left:-5%;right:-5%;bottom:78px;height:100px;background:#779b76;clip-path:polygon(0 75%,20% 15%,36% 65%,55% 5%,78% 70%,92% 25%,100% 65%,100% 100%,0 100%)}
.chua-online .co-water{position:absolute;left:0;right:0;bottom:0;height:94px;background:linear-gradient(180deg,#74b6c1,#397d91);clip-path:polygon(0 18%,20% 0,42% 22%,64% 4%,82% 18%,100% 0,100% 100%,0 100%)}
.chua-online .co-shore{position:absolute;left:0;right:0;bottom:0;height:45px;background:#c9b17c;clip-path:polygon(0 30%,20% 5%,44% 42%,65% 8%,100% 30%,100% 100%,0 100%)}
.chua-online .co-scene-label{position:absolute;left:12px;bottom:10px;color:#fff;font-size:.8rem;text-shadow:0 1px 4px #203b35;z-index:4}
.chua-online .co-animals{position:absolute;inset:0;z-index:3;pointer-events:none}
.chua-online .co-animal{position:absolute;left:8%;bottom:50px;font-size:36px;animation:co-release 5.8s ease-out forwards;filter:drop-shadow(0 2px 2px #3335)}
.chua-online .co-bird{bottom:75px;animation-name:co-bird}
.chua-online .co-fish{bottom:25px;animation-name:co-fish}
.chua-online .co-turtle{bottom:30px;animation-name:co-turtle}
@keyframes co-release{to{transform:translate(75vw,-80px);opacity:0}}
@keyframes co-bird{to{transform:translate(75vw,-170px) rotate(-8deg);opacity:0}}
@keyframes co-fish{to{transform:translate(75vw,-8px);opacity:0}}
@keyframes co-turtle{to{transform:translate(65vw,8px);opacity:0}}
.chua-online .co-release-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:600px){.chua-online .co-auth-grid,.chua-online .co-hall-grid{grid-template-columns:1fr}.chua-online .co-hall-art{height:95px}}
@media(prefers-reduced-motion:reduce){.chua-online .co-animal{animation-duration:.01ms}}