/* page-tabs.css — illustrated two-tab switcher for the ไหว้เจ้า and หาฤกษ์ pages.
   Same premium mooncake-box world: ivory paper tile with gold inner frame (inactive),
   lacquer-red tile with gold type (active), notch pointing into the panel below. */

.wt-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }

.wt-tab {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  min-height: 158px; padding: 14px 14px 14px;
  background: #FFF9EB; border: 1px solid #D9C8A8; border-radius: 8px;
  color: #951A22; font: inherit; cursor: pointer;
  box-shadow: 0 1px 0 rgba(120, 80, 30, .06);
  transition: transform .16s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease, background-color .22s ease;
  -webkit-tap-highlight-color: transparent;
}
.wt-tab::before { content: ""; position: absolute; inset: 5px; border: 1px solid #E4D2A9; border-radius: 5px; pointer-events: none; z-index: -1; }
.wt-tab:active { transform: scale(.97); }
.wt-tab:focus-visible { outline: 2px solid #951A22; outline-offset: 3px; }

.wt-art { width: 54px; height: 54px; display: block; margin: 0 0 8px -3px; overflow: visible; }
.wt-ink { stroke: currentColor; }
.wt-acc { fill: #B99B60; }
.wt-glow { fill: #D8452F; }
.wt-smoke { stroke: #B99B60; stroke-width: 1.4; opacity: .75; }
.wt-glyph { font: 700 9px serif; fill: #B99B60; }
.wt-pin { fill: #951A22; stroke: #FFF9EB; stroke-width: 1.6; }

.wt-k { font: 500 13px/1.3 'Kanit', sans-serif; color: #86715E; }
.wt-t { font: 600 20px/1.2 'Kanit', sans-serif; color: #7A2927; }
.wt-s { margin-top: auto; padding-top: 7px; font: 12.5px/1.45 'Sarabun', sans-serif; color: #86715E; }

/* active = lacquer box lid */
.wt-tab.on {
  background: radial-gradient(120% 90% at 85% 0%, #B3303A 0%, rgba(179, 48, 58, 0) 55%), linear-gradient(160deg, #9E1C25 0%, #7A1219 100%);
  border-color: #BDA167; color: #F3D9A0;
  box-shadow: 0 8px 18px -6px rgba(122, 18, 25, .45);
}
.wt-tab.on::before { border-color: rgba(215, 184, 124, .55); }
.wt-tab.on::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; width: 13px; height: 13px;
  background: #7A1219; border-right: 1px solid #BDA167; border-bottom: 1px solid #BDA167;
  transform: translateX(-50%) rotate(45deg);
}
.wt-tab.on .wt-acc, .wt-tab.on .wt-glyph { fill: #E1C07F; }
.wt-tab.on .wt-glow { fill: #FFB26B; }
.wt-tab.on .wt-smoke { stroke: #E9CFA4; }
.wt-tab.on .wt-pin { fill: #F8E5B6; stroke: #7A1219; }
.wt-tab.on .wt-k, .wt-tab.on .wt-s { color: #E9CFA4; }
.wt-tab.on .wt-t { color: #FFF3D6; }

/* "ใหม่" badge until the shrine tab is opened once */
.wt-new {
  position: absolute; top: 12px; right: 12px;
  padding: 2px 9px; border-radius: 999px;
  background: #951A22; color: #FFF3D6; font: 600 11px/1.5 'Kanit', sans-serif; letter-spacing: .3px;
  box-shadow: 0 0 0 2px #FFF9EB;
  animation: wt-pulse 2.4s ease-out infinite;
}

/* idle motion: smoke rises, lanterns sway */
.wt-smoke path { animation: wt-rise 3.2s ease-in-out infinite alternate; }
.wt-smoke path:nth-child(2) { animation-delay: -1.1s; }
.wt-smoke path:nth-child(3) { animation-delay: -2.2s; }
.wt-lantern { transform-box: fill-box; transform-origin: 50% 0; animation: wt-sway 3.6s ease-in-out infinite alternate; }
.wt-l2 { animation-delay: -1.8s; }

@keyframes wt-rise { from { transform: translateY(1px); opacity: .45; } to { transform: translateY(-2px); opacity: 1; } }
@keyframes wt-sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes wt-pulse { 0% { box-shadow: 0 0 0 2px #FFF9EB, 0 0 0 2px rgba(149, 26, 34, .45); } 70%, 100% { box-shadow: 0 0 0 2px #FFF9EB, 0 0 0 10px rgba(149, 26, 34, 0); } }

/* panels */
.wt-panel[hidden] { display: none !important; }
.wt-in { animation: wt-fade .26s cubic-bezier(.2, .8, .2, 1); }
@keyframes wt-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wt-panel > .card:first-child, .wt-panel > .worship-today { margin-top: 0; }

/* cross-link at the foot of tab A */
.wt-jump {
  position: relative; width: 100%; margin: 18px 0 6px;
  display: flex; align-items: center; gap: 13px; text-align: left;
  padding: 14px 16px; background: #FFF9EB; border: 1px solid #D9C8A8; border-radius: 8px;
  color: #951A22; font: inherit; cursor: pointer; transition: transform .16s cubic-bezier(.2, .8, .2, 1);
}
.wt-jump::before { content: ""; position: absolute; inset: 4px; border: 1px solid #E4D2A9; border-radius: 5px; pointer-events: none; }
.wt-jump:active { transform: scale(.98); }
.wt-jump-ic { flex: none; width: 50px; height: 50px; border-radius: 50%; background: #F1E6CF; display: grid; place-items: center; }
.wt-jump-ic .wt-art { width: 38px; height: 38px; margin: 0; }
.wt-jump-tx { flex: 1; min-width: 0; }
.wt-jump b { display: block; font: 600 16px/1.35 'Kanit', sans-serif; color: #7A2927; }
.wt-jump small { display: block; font: 12.5px/1.5 'Sarabun', sans-serif; color: #86715E; }
.wt-jump-go { font: 400 30px/1 Georgia, serif; color: #B99B60; }

/* tab B: stats strip */
.wt-stats {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  background: #FFFDF8; border: 1px solid #D9C8A8; border-radius: 8px; padding: 14px 6px 12px; margin: 0 0 12px;
}
.wt-stats::before { content: ""; position: absolute; inset: 5px; border: 1px solid #E4D2A9; border-radius: 5px; pointer-events: none; }
.wt-stats > div { text-align: center; line-height: 1.1; }
.wt-stats > div + div { border-left: 1px solid #E4D2A9; }
.wt-stats b { display: block; font: 600 30px/1.1 'Oswald', sans-serif; color: #951A22; }
.wt-stats span { font: 500 12px 'Kanit', sans-serif; color: #86715E; }

/* the finder card no longer needs its own big heading — the tab names it */
.wt-finder { margin-top: 0; }
.wt-finder > .intro-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.wt-finder > .note:first-of-type { margin-top: 0; }

@media (max-width: 359px) {
  .wt-tab { min-height: 146px; padding: 12px 11px; }
  .wt-art { width: 46px; height: 46px; }
  .wt-t { font-size: 17px; }
  .wt-s { font-size: 11.5px; }
}
@media (min-width: 720px) {
  .wt-tab { min-height: 132px; display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto 1fr; column-gap: 14px; align-items: start; }
  .wt-art { grid-row: 1 / 4; width: 62px; height: 62px; margin: 2px 0 0; }
  .wt-t { font-size: 22px; }
}
/* ---------- หาฤกษ์ icons ---------- */
.wt-seal { font: 700 17px serif; fill: #951A22; }
.wt-dot { fill: currentColor; opacity: .35; }
.wt-lens { fill: #FFF9EB; }
.wt-spark { fill: #B99B60; transform-box: fill-box; transform-origin: center; animation: wt-twinkle 2.6s ease-in-out infinite; }
.wt-s2 { animation-delay: -.9s; }
.wt-s3 { animation-delay: -1.7s; }
.wt-tassel { transform-box: view-box; transform-origin: 32px 41px; animation: wt-sway-sm 3.4s ease-in-out infinite alternate; }
.wt-mag { animation: wt-bob 3s ease-in-out infinite; }
.wt-tab.on .wt-seal { fill: #7A1219; }
.wt-tab.on .wt-spark { fill: #F3D9A0; }
.wt-tab.on .wt-lens { fill: #8C1720; }
.wt-tab.on .wt-dot { opacity: .5; }
@keyframes wt-twinkle { 0%, 100% { transform: scale(.55); opacity: .35; } 50% { transform: scale(1); opacity: 1; } }
@keyframes wt-sway-sm { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes wt-bob { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-1.5px, -1.5px); } }

/* ---------- หาฤกษ์ popular tab ---------- */
.pk-hint { margin: 0 0 4px; text-align: center; font: 13px/1.6 'Sarabun', sans-serif; color: #86715E; }
.rk-card.pk-sel { outline: 2px solid #951A22; outline-offset: 2px; }
.pk-slot:empty { display: none; }
.pk-slot { margin: 14px 0 0; }
.pk-slot .pk-head { font: 600 17px/1.4 'Kanit', sans-serif; color: #7A2927; padding: 0 2px; }
.pk-slot .picker-result { background: #FFFDF8; border: 1px solid #D9C8A8; border-radius: 8px; padding: 2px 14px 10px; }
.pk-slot .picker-result:empty { display: none; }
.pk-slot .pk-head[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .wt-smoke path, .wt-lantern, .wt-new, .wt-in, .wt-spark, .wt-tassel, .wt-mag { animation: none; }
  .wt-tab, .wt-jump { transition: none; }
}