/* Tokens extracted to tap-tokens.css (Phase 4) */
.tap-root{font-family:var(--tap-font-body);
font-size:var(--tap-fs-base); line-height:1.6; color:var(--tap-ink);
background:var(--tap-bg); -webkit-font-smoothing:antialiased;
overflow-x:visible;}
.tap-root *{box-sizing:border-box; margin:0; padding:0}
.tap-root h1, .tap-root h2, .tap-root h3, .tap-root .tap-serif{font-family:var(--tap-font-heading); font-weight:700;
letter-spacing:-.02em; line-height:1.25;}
.tap-root .tap-devanagari{font-family:var(--tap-font-hindi)}
:where(body:not(.tap-canvas)) > .tap-container{max-width:1120px; margin:0 auto; padding:0 16px}
.tap-section-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px}
.tap-section-head h2{font-size:clamp(20px,3vw,26px)}
.tap-view-all{color:var(--tap-purple); font-weight:700; font-size:calc(0.875 * var(--tap-fs)); text-decoration:none}
.tap-display{font-size:clamp(28px,5vw,52px); font-family:var(--tap-font-heading); font-weight:900; line-height:1.1}
.tap-title{font-size:clamp(16px,2.5vw,22px); font-weight:700}
.tap-small{font-size:calc(0.8125 * var(--tap-fs)); color:var(--tap-muted)}
.tap-caption{font-size:calc(0.6875 * var(--tap-fs)); color:var(--tap-muted); letter-spacing:.05em; text-transform:uppercase; font-weight:700}
.tap-btn-sacred{background:var(--grad-sacred); color:#fff}
.tap-ticker{background:var(--tap-ink); color:#fff; overflow:hidden; height:36px; display:flex; align-items:center}
.tap-ticker-track{display:flex; gap:64px; white-space:nowrap; animation:tapTicker 40s linear infinite}
.tap-ticker-track:hover{animation-play-state:paused}
.tap-ticker-item{font-size:calc(0.8125 * var(--tap-fs)); font-weight:500; flex-shrink:0; padding:0 8px}
.tap-ticker-dot{display:inline-block; width:6px; height:6px; background:var(--tap-saffron); border-radius:50%; margin-right:8px; animation:tapTickerPulse 1.5s ease-in-out infinite}
@keyframes tapTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes tapTickerPulse{0%,100%{opacity:1}50%{opacity:.4}}
.tap-tithi-bar{background:linear-gradient(90deg,#fff8e7,#fff); border-bottom:1px solid #f5e8c0; padding:10px 16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.tap-tithi-tag{display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid #f5e8c0; border-radius:var(--tap-r-full); padding:4px 12px; font-size:calc(0.8125 * var(--tap-fs)); font-weight:600; color:var(--tap-chocolate)}
.tap-festival-chip{display:inline-flex; align-items:center; gap:6px; background:var(--grad-gold); color:var(--tap-gold-dark); border-radius:var(--tap-r-full); padding:4px 12px; font-size:calc(0.75 * var(--tap-fs)); font-weight:700; text-decoration:none; animation:tapGlow 2s ease-in-out infinite}
@keyframes tapGlow{0%,100%{box-shadow:0 0 0 0 rgba(249,144,0,0)}50%{box-shadow:0 0 12px rgba(249,144,0,.5)}}
.tap-problem-search{padding:48px 0; background:var(--tap-bg)}
.tap-search-box{background:#fff; border:2px solid var(--tap-line); border-radius:var(--tap-radius-xl); padding:8px 8px 8px 24px; display:flex; align-items:center; gap:12px; box-shadow:var(--tap-shadow); transition:border-color var(--dur-std),box-shadow var(--dur-std); max-width:680px; margin:0 auto}
.tap-search-box:focus-within{border-color:var(--tap-purple); box-shadow:0 0 0 4px rgba(97,9,190,.10),var(--tap-shadow)}
.tap-search-box input{flex:1; border:none; outline:none; font:inherit; font-size:calc(1.0625 * var(--tap-fs)); color:var(--tap-ink); background:transparent}
.tap-search-box input::placeholder{color:var(--tap-muted)}
.tap-search-submit{flex-shrink:0; background:var(--tap-purple); color:var(--tap-primary-text,#000); border:none; border-radius:var(--tap-radius); padding:12px 20px; font:inherit; font-weight:700; font-size:calc(0.9375 * var(--tap-fs)); cursor:pointer; display:flex; align-items:center; gap:8px; transition:background var(--dur-fast)}
.tap-search-submit:hover{background:var(--tap-purple-deep)}
.tap-deity-grid{display:flex; gap:16px; overflow-x:auto; padding:4px 16px 8px; scrollbar-width:none; justify-content:center; flex-wrap:wrap}
.tap-deity-grid::-webkit-scrollbar{display:none}
.tap-deity-icon{width:64px; height:64px; border-radius:50%; background:var(--grad-gold); display:flex; align-items:center; justify-content:center; font-size:calc(1.75 * var(--tap-fs)); box-shadow:0 4px 16px rgba(249,144,0,.30); transition:transform var(--dur-std) var(--ease-spring),box-shadow var(--dur-std); border:3px solid #fff}
.tap-deity-item:hover .tap-deity-icon, .tap-deity-item.active .tap-deity-icon{transform:translateY(-4px) scale(1.08); box-shadow:0 8px 24px rgba(249,144,0,.45)}
.tap-deity-item.active .tap-deity-icon{background:var(--grad-sacred)}
.tap-deity-name{font-size:calc(0.75 * var(--tap-fs)); font-weight:700; color:var(--tap-chocolate); text-align:center; line-height:1.3; font-family:var(--tap-font-hindi)}
.tap-hscroll{display:flex; gap:16px; overflow-x:auto; padding:4px 16px 8px; scrollbar-width:none}
.tap-hscroll::-webkit-scrollbar{display:none}
.tap-slot-urgent{position:absolute; bottom:10px; right:10px; background:rgba(224,59,59,.85); color:#fff; backdrop-filter:blur(8px); border-radius:var(--tap-r-full); padding:3px 9px; font-size:calc(0.625 * var(--tap-fs)); font-weight:800}
.tap-price-strike{font-size:calc(0.8125 * var(--tap-fs)); text-decoration:line-through; color:var(--tap-muted)}
.tap-filter-bar{display:flex; gap:8px; overflow-x:auto; padding:0 16px 4px; scrollbar-width:none; margin-bottom:16px}
.tap-filter-bar::-webkit-scrollbar{display:none}
.tap-chip{flex-shrink:0; padding:8px 16px; border-radius:var(--tap-r-full); border:1.5px solid var(--tap-line); background:#fff; color:var(--tap-muted); font:inherit; font-size:calc(0.8125 * var(--tap-fs)); font-weight:600; cursor:pointer; transition:all var(--dur-fast); white-space:nowrap}
.tap-chip.is-active, .tap-chip:hover{background:var(--tap-purple); border-color:var(--tap-purple); color:var(--tap-primary-text,#000)}
.tap-filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.tap-detail-hero video, .tap-detail-hero img{width:100%; height:100%; object-fit:cover; opacity:.7}
@media(max-width:1023.98px){.tap-detail-layout{grid-template-columns:1fr}}
.tap-trust-card .tap-price-from{font-size:calc(1.625 * var(--tap-fs))}
.tap-trust-signals li:last-child{border-bottom:none}
.tap-trust-signals li b{color:var(--tap-ok)}
.tap-live-watchers{display:inline-flex; align-items:center; gap:6px; background:#fff0f0; border-radius:var(--tap-r-full); padding:4px 12px; font-size:calc(0.75 * var(--tap-fs)); font-weight:700; color:var(--tap-sindoor); margin-bottom:14px}
.tap-detail-tabs{display:flex; gap:0; border-bottom:2px solid var(--tap-line); margin-bottom:20px; overflow-x:auto; scrollbar-width:none}
.tap-detail-tabs::-webkit-scrollbar{display:none}
.tap-dtab{padding:10px 18px; border:none; background:none; font:inherit; font-size:calc(0.875 * var(--tap-fs)); font-weight:700; color:var(--tap-muted); cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; white-space:nowrap; transition:all var(--dur-fast)}
.tap-dtab.active{color:var(--tap-purple); border-bottom-color:var(--tap-purple)}
.tap-watch-btn{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.2); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.3); border-radius:var(--tap-r-full); padding:8px 16px; color:#fff; font-size:calc(0.8125 * var(--tap-fs)); font-weight:700; cursor:pointer; transition:all var(--dur-fast)}
.tap-watch-btn:hover{background:rgba(255,255,255,.35)}
.tap-video-intro{display:inline-flex; align-items:center; gap:6px; margin-top:10px; color:var(--tap-purple); font-size:calc(0.8125 * var(--tap-fs)); font-weight:700; cursor:pointer}
.tap-muhurat-cal{border-radius:var(--tap-radius); overflow:hidden; border:1px solid var(--tap-line)}
.tap-muhurat-header{background:var(--tap-ink); color:#fff; padding:12px 16px; display:flex; align-items:center; justify-content:space-between}
.tap-muhurat-header h3{font-size:calc(0.9375 * var(--tap-fs)); font-weight:700; color:#fff}
.tap-muhurat-legend{display:flex; gap:12px; padding:10px 16px; background:#fff; border-bottom:1px solid var(--tap-line); flex-wrap:wrap}
.tap-muhurat-leg-item{display:flex; align-items:center; gap:5px; font-size:calc(0.6875 * var(--tap-fs)); font-weight:700; color:var(--tap-muted)}
.tap-muhurat-dot{width:10px; height:10px; border-radius:50%}
.tap-cal-grid{display:grid; grid-template-columns:repeat(7,1fr); background:#fff; padding:4px}
.tap-cal-day:hover{background:var(--tap-purple-pale); color:var(--tap-purple)}
.tap-cal-day.selected{background:var(--tap-purple); color:var(--tap-primary-text,#000)}
.tap-cal-day.auspicious{color:var(--tap-marigold-deep)}
.tap-cal-day.auspicious::after{content:""; position:absolute; bottom:2px; left:50%; transform:translateX(-50%); width:4px; height:4px; background:var(--tap-marigold); border-radius:50%}
.tap-cal-day.ekadashi{font-weight:900; color:var(--tap-warn-fg)}
.tap-cal-day.disabled{opacity:.3; cursor:not-allowed; pointer-events:none}
.tap-cal-day-hdr{aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:calc(0.6875 * var(--tap-fs)); font-weight:800; color:var(--tap-muted); letter-spacing:.05em}
.tap-step-bar{display:flex; align-items:center; margin-bottom:28px; overflow-x:auto; scrollbar-width:none; padding:4px 0}
.tap-step-bar::-webkit-scrollbar{display:none}
.tap-step{display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; min-width:60px}
.tap-step-circle{width:36px; height:36px; border-radius:50%; border:2px solid var(--tap-line); background:#fff; display:flex; align-items:center; justify-content:center; font-size:calc(0.8125 * var(--tap-fs)); font-weight:800; color:var(--tap-muted); transition:all var(--dur-std); position:relative; z-index:1}
.tap-step.done .tap-step-circle{background:var(--tap-ok); border-color:var(--tap-ok); color:#fff}
.tap-step.active .tap-step-circle{background:var(--tap-purple); border-color:var(--tap-purple); color:var(--tap-primary-text,#000); box-shadow:0 0 0 4px rgba(97,9,190,.2)}
.tap-step-label{font-size:calc(0.6875 * var(--tap-fs)); font-weight:700; color:var(--tap-muted); white-space:nowrap}
.tap-step.active .tap-step-label{color:var(--tap-purple)}
.tap-step-line{flex:1; height:2px; background:var(--tap-line); margin:0 -4px; margin-bottom:18px; transition:background var(--dur-std)}
.tap-step.done + .tap-step-line{background:var(--tap-ok)}
.tap-sankalp-sacred{background:linear-gradient(135deg,#fff8e7 0%,#faf6ff 100%); border:1.5px solid #f5e8c0; border-radius:var(--tap-radius); padding:20px; position:relative}
/* v6.9.13: the hardcoded π badge over the Sankalp box was removed at the owner's request. */
.tap-sankalp-sacred textarea{width:100%; border:none; background:transparent; outline:none; font:inherit; font-size:calc(0.9375 * var(--tap-fs)); resize:none; min-height:80px; color:var(--tap-ink); line-height:1.7}
.tap-sankalp-sacred textarea::placeholder{color:var(--tap-muted); font-style:italic}
.tap-review{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--tap-line)}
.tap-review:last-child{border-bottom:none}
.tap-review-avatar{width:44px; height:44px; border-radius:50%; flex-shrink:0; background:var(--grad-dawn); display:flex; align-items:center; justify-content:center; font-size:calc(1.125 * var(--tap-fs)); font-weight:700; color:#fff}
.tap-review-bubble{background:#e7f4e7; border-radius:0 14px 14px 14px; padding:10px 14px; flex:1}
.tap-review-meta{font-size:calc(0.75 * var(--tap-fs)); font-weight:700; color:var(--tap-ok); margin-bottom:4px}
.tap-review-text{font-size:calc(0.875 * var(--tap-fs)); line-height:1.6; color:var(--tap-ink)}
.tap-review-time{font-size:calc(0.6875 * var(--tap-fs)); color:var(--tap-muted); margin-top:4px; text-align:right}
.tap-spiritual-header{background:var(--grad-night); border-radius:var(--tap-radius-xl); padding:24px 20px; color:#fff; margin-bottom:20px; position:relative; overflow:hidden}
.tap-spiritual-header::before{content:""; position:absolute; top:-40px; right:-40px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle,rgba(249,144,0,.2) 0%,transparent 70%)}
.tap-spiritual-uid{font-size:calc(0.8125 * var(--tap-fs)); opacity:.7; margin-bottom:4px; font-weight:600}
.tap-spiritual-name{font-size:calc(1.5 * var(--tap-fs)); font-weight:900; font-family:var(--tap-font-heading); margin-bottom:8px}
.tap-spiritual-stats{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:14px}
.tap-spiritual-stat{font-size:calc(0.8125 * var(--tap-fs)); opacity:.85}
.tap-spiritual-stat strong{font-size:calc(1.125 * var(--tap-fs)); display:block; font-weight:800; font-family:var(--tap-font-heading)}
.tap-level-bar{background:rgba(255,255,255,.2); border-radius:var(--tap-r-full); height:6px; margin-top:6px; overflow:hidden}
.tap-level-fill{height:100%; background:var(--grad-gold); border-radius:var(--tap-r-full); transition:width 1s var(--ease-out)}
.tap-level-label{font-size:calc(0.6875 * var(--tap-fs)); opacity:.7; margin-top:4px}
.tap-level-badge{display:inline-flex; align-items:center; gap:6px; background:var(--grad-gold); color:var(--tap-gold-dark); border-radius:var(--tap-r-full); padding:4px 12px; font-size:calc(0.75 * var(--tap-fs)); font-weight:800}
.tap-timeline{padding:4px 0}
.tap-timeline-item{display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--tap-line); position:relative}
.tap-timeline-item:last-child{border-bottom:none}
.tap-tl-left{display:flex; flex-direction:column; align-items:center; gap:4px; width:48px; flex-shrink:0}
.tap-tl-date{font-size:calc(0.6875 * var(--tap-fs)); font-weight:800; color:var(--tap-muted); text-align:center; line-height:1.2}
.tap-tl-icon{width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:calc(1.25 * var(--tap-fs)); flex-shrink:0}
.tap-tl-icon.completed{background:var(--tap-ok-pale)}
.tap-tl-icon.upcoming{background:var(--tap-warn-bg)}
.tap-tl-icon.cancelled{background:#f5f5f5}
.tap-tl-content{flex:1}
.tap-tl-title{font-weight:700; font-size:calc(0.9375 * var(--tap-fs)); margin-bottom:2px}
.tap-tl-meta{font-size:calc(0.75 * var(--tap-fs)); color:var(--tap-muted)}
.tap-tl-thumb{width:56px; height:56px; border-radius:var(--tap-r-sm); object-fit:cover; flex-shrink:0; background:var(--tap-line)}
.tap-tl-status{display:inline-flex; align-items:center; gap:4px; font-size:calc(0.6875 * var(--tap-fs)); font-weight:800; border-radius:var(--tap-r-full); padding:2px 10px; margin-top:6px}
.tap-tl-status.completed{background:var(--tap-ok-pale); color:var(--tap-ok)}
.tap-tl-status.upcoming{background:var(--tap-warn-bg); color:var(--tap-warn-fg)}
.tap-tl-status.cancelled{background:#f5f5f5; color:var(--tap-muted)}
.tap-mem-card-v2{border-radius:var(--tap-radius-xl); padding:24px 22px; color:#fff; position:relative; overflow:hidden; background:linear-gradient(135deg,var(--tap-purple) 0%,var(--tap-purple-deep) 100%)}
.tap-mem-card-v2.gold{background:linear-gradient(135deg,#c8860a 0%,var(--tap-turmeric) 100%); color:var(--tap-gold-dark)}
.tap-mem-card-v2.saffron{background:linear-gradient(135deg,var(--tap-terracotta) 0%,var(--tap-marigold) 100%); color:var(--tap-gold-dark)}
.tap-mem-card-v2::after{
content:""; position:absolute; bottom:-15px; right:-5px; width:120px; height:120px;
opacity:.12; pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23ffffff'%3E%3Cpath d='M50 5 C55 25 75 35 95 35 C75 50 80 75 50 95 C20 75 25 50 5 35 C25 35 45 25 50 5 Z M50 20 C40 35 30 45 50 75 C70 45 60 35 50 20 Z'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:center; background-size:contain;
}
.tap-mem-card-chip{font-size:calc(0.6875 * var(--tap-fs)); font-weight:800; text-transform:uppercase; letter-spacing:.1em; opacity:.75; margin-bottom:6px}
.tap-mem-plan-name{font-size:calc(1.625 * var(--tap-fs)); font-weight:900; font-family:var(--tap-font-heading); margin-bottom:12px}
.tap-mem-uid{font-size:calc(1 * var(--tap-fs)); font-weight:700; letter-spacing:.08em; font-family:monospace; margin-bottom:4px}
.tap-mem-expiry{font-size:calc(0.75 * var(--tap-fs)); opacity:.7}
.tap-mem-benefits-row{display:flex; gap:12px; margin-top:16px; flex-wrap:wrap}
.tap-mem-benefit-chip{background:rgba(255,255,255,.2); border-radius:var(--tap-r-full); padding:4px 12px; font-size:calc(0.75 * var(--tap-fs)); font-weight:700}
.tap-gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:4px; border-radius:var(--tap-radius); overflow:hidden}
.tap-gallery-item{aspect-ratio:1; position:relative; cursor:pointer; overflow:hidden; background:var(--tap-line)}
.tap-gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow)}
.tap-gallery-item:hover img{transform:scale(1.08)}
.tap-pandit-strip{display:flex; gap:16px; overflow-x:auto; padding:4px 16px 8px; scrollbar-width:none}
.tap-pandit-strip::-webkit-scrollbar{display:none}
.tap-pandit-mini{flex-shrink:0; width:140px; text-align:center; cursor:pointer}
.tap-pandit-mini-avatar{width:80px; height:80px; border-radius:50%; border:3px solid var(--tap-marigold); margin:0 auto 8px; background:var(--grad-gold); display:flex; align-items:center; justify-content:center; font-size:calc(2 * var(--tap-fs)); transition:transform var(--dur-std) var(--ease-spring)}
.tap-pandit-mini-name{font-size:calc(0.8125 * var(--tap-fs)); font-weight:700; color:var(--tap-ink)}
.tap-pandit-mini-spec{font-size:calc(0.6875 * var(--tap-fs)); color:var(--tap-muted)}
.tap-pandit-mini-rating{font-size:calc(0.75 * var(--tap-fs)); color:var(--tap-marigold-deep); font-weight:700; margin-top:2px}
.tap-testimonials{display:flex; gap:14px; overflow-x:auto; padding:4px 16px 8px; scrollbar-width:none}
.tap-testimonials::-webkit-scrollbar{display:none}
.tap-testi-card{flex-shrink:0; width:280px; background:#fff; border-radius:var(--tap-radius); padding:16px; box-shadow:var(--tap-shadow)}
.tap-testi-head{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.tap-testi-avatar{width:40px; height:40px; border-radius:50%; background:var(--grad-dawn); display:flex; align-items:center; justify-content:center; font-size:calc(1 * var(--tap-fs)); font-weight:700; color:#fff; flex-shrink:0}
.tap-testi-name{font-weight:700; font-size:calc(0.875 * var(--tap-fs))}
.tap-testi-loc{font-size:calc(0.75 * var(--tap-fs)); color:var(--tap-muted)}
.tap-testi-bubble{background:#e7f4e7; border-radius:0 12px 12px 12px; padding:10px 12px; font-size:calc(0.875 * var(--tap-fs)); line-height:1.6; color:var(--tap-ink)}
.tap-family-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin-bottom:18px}
.tap-family-card{background:#fff; border:1.5px solid var(--tap-line); border-radius:var(--tap-radius); padding:14px 16px; position:relative; transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.tap-family-card:hover{border-color:var(--tap-purple); box-shadow:var(--tap-glow)}
.tap-family-card.primary{border-color:var(--tap-marigold)}
.tap-family-icon{font-size:calc(1.75 * var(--tap-fs)); margin-bottom:8px}
.tap-family-name{font-weight:700; font-size:calc(0.9375 * var(--tap-fs)); color:var(--tap-ink); margin-bottom:2px}
.tap-family-rel{font-size:calc(0.75 * var(--tap-fs)); color:var(--tap-purple); font-weight:700}
.tap-family-meta{font-size:calc(0.6875 * var(--tap-fs)); color:var(--tap-muted); margin-top:3px}
.tap-family-card .tap-rm{position:absolute; top:8px; right:10px; background:none; border:none; font-size:calc(1 * var(--tap-fs)); color:#ddd; cursor:pointer; transition:color var(--dur-fast)}
.tap-family-card .tap-rm:hover{color:var(--tap-err)}
.tap-family-form{background:var(--tap-purple-pale); border-radius:var(--tap-radius); padding:16px; max-width:480px}
.tap-plans-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px}
.tap-plan-card{border:2px solid var(--tap-line); border-radius:var(--tap-radius); overflow:hidden; background:#fff; transition:transform var(--dur-std),box-shadow var(--dur-std)}
.tap-plan-card:hover{transform:translateY(-4px); box-shadow:var(--tap-shadow-xl)}
.tap-plan-card.current{border-color:var(--tap-purple); box-shadow:0 0 0 3px rgba(97,9,190,.15)}
.tap-plan-name-bar{font-weight:800; font-size:calc(1 * var(--tap-fs)); color:#fff; padding:14px 18px}
.tap-plan-price{font-size:calc(1.75 * var(--tap-fs)); font-weight:900; padding:12px 18px 4px; color:var(--tap-ink); font-family:var(--tap-font-heading)}
.tap-plan-period{font-size:calc(0.8125 * var(--tap-fs)); color:var(--tap-muted); padding:0 18px 12px}
.tap-plan-benefits{list-style:none; padding:0 18px 14px; font-size:calc(0.8125 * var(--tap-fs)); color:var(--tap-muted)}
.tap-plan-benefits li{padding:4px 0; border-top:1px solid var(--tap-line); display:flex; align-items:center; gap:7px}
.tap-plan-benefits li:first-child{border-top:none}
.tap-plan-benefits li::before{content:"β"; color:var(--tap-ok); font-weight:800}
.tap-plan-card .tap-btn{margin:0 18px 18px; width:calc(100% - 36px); box-sizing:border-box; min-height:44px; height:auto; white-space:normal; line-height:1.25; padding:11px 14px}
.tap-plan-current-tag{text-align:center; padding:10px; color:var(--tap-purple); font-weight:700; font-size:calc(0.875 * var(--tap-fs))}
/* v6.9.14: the plan cards must be equal-height so the Subscribe button sits at the
same baseline and never looks cut. Benefits push down; the CTA stays put. */
.tap-plan-card{display:flex; flex-direction:column}
.tap-plan-benefits{flex:1 1 auto}
/* v6.9.14 (#5): the family "Add another member" and "Save" buttons were touching. */
.tap-family-form .tap-addmember{display:block; width:100%; margin:6px 0 14px}
.tap-family-form > .tap-btn-primary{margin-top:6px}
.tap-spinner-om{font-size:calc(2 * var(--tap-fs)); animation:tapOmSpin 1.5s ease-in-out infinite; display:flex; align-items:center; justify-content:center; padding:32px}
@keyframes tapOmSpin{0%{transform:rotate(0) scale(1);opacity:1}50%{transform:rotate(180deg) scale(.8);opacity:.6}100%{transform:rotate(360deg) scale(1);opacity:1}}
.tap-loading{display:flex; flex-direction:column; align-items:center; gap:12px; padding:40px 20px; color:var(--tap-muted)}
@keyframes tapShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.tap-skel-text.w40{width:40%}
@keyframes tapDiyaFlicker{from{transform:scale(1) rotate(-2deg)}to{transform:scale(1.15) rotate(2deg) translateY(-4px)}}
.tap-toast.err{background:var(--tap-err)}
.tap-toast.ok{background:var(--tap-ok)}
@keyframes tapToastIn{from{transform:translateX(-50%) translateY(12px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
@keyframes tapModalBg{from{opacity:0}to{opacity:1}}
@keyframes tapModalSlide{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}
.tap-x{position:absolute; top:14px; right:16px; background:var(--tap-line); border:none; border-radius:50%; width:32px; height:32px; font-size:calc(1.125 * var(--tap-fs)); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--tap-muted); transition:background var(--dur-fast)}
.tap-x:hover{background:var(--tap-err); color:#fff}
.tap-auth-tabs{display:grid; grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); gap:8px; margin-bottom:20px}
.tap-auth-tab{padding:10px 8px; border:2px solid var(--tap-line); background:var(--tap-card); border-radius:var(--tap-radius-sm); font:inherit; font-weight:700; color:var(--tap-muted); cursor:pointer; transition:all var(--dur-fast); font-size:calc(0.8125 * var(--tap-fs)); display:flex; align-items:center; justify-content:center; gap:6px; line-height:1.15}
.tap-auth-tab.active{background:var(--tap-purple); color:var(--tap-primary-text,#000); border-color:var(--tap-purple)}
.tap-auth-hint{color:var(--tap-muted); font-size:calc(0.875 * var(--tap-fs)); margin-bottom:14px}
.tap-input{width:100%; padding:12px 16px; border-radius:var(--tap-radius-sm); border:1.5px solid var(--tap-line); font:inherit; font-size:calc(0.9375 * var(--tap-fs)); color:var(--tap-ink); background:#fff; outline:none; transition:border-color var(--dur-fast),box-shadow var(--dur-fast); margin-bottom:12px; display:block}
.tap-input::placeholder{color:var(--tap-muted)}
.tap-label{font-size:calc(0.8125 * var(--tap-fs)); font-weight:700; color:var(--tap-muted); display:block; margin-bottom:4px}
.tap-field-label{font-size:calc(0.8125 * var(--tap-fs)); font-weight:600; color:var(--tap-muted); margin:8px 0 4px}
.tap-otp-boxes{display:flex; gap:10px; justify-content:center; margin-bottom:16px}
.tap-otp-boxes input{width:48px; height:56px; text-align:center; font-size:calc(1.375 * var(--tap-fs)); font-weight:800; border:2px solid var(--tap-line); border-radius:var(--tap-radius-sm); outline:none; transition:border-color var(--dur-fast); background:#fff; color:var(--tap-ink)}
.tap-otp-boxes input:focus{border-color:var(--tap-purple); box-shadow:0 0 0 3px rgba(97,9,190,.10)}
.tap-uid-badge{background:var(--grad-sacred); color:#fff; border-radius:var(--tap-r-lg); padding:12px 16px; text-align:center}
.tap-uid-label{font-size:calc(0.625 * var(--tap-fs)); text-transform:uppercase; letter-spacing:.1em; opacity:.8; margin-bottom:4px}
.tap-uid-value{font-size:calc(1.375 * var(--tap-fs)); font-weight:900; letter-spacing:.06em; font-family:monospace}
.tap-uid-segment{font-size:calc(0.6875 * var(--tap-fs)); background:rgba(255,255,255,.2); border-radius:var(--tap-r-3xl); padding:3px 10px; display:inline-block; margin-top:4px}
.tap-profile{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:20px; padding:18px; background:#fff; border-radius:var(--tap-radius); box-shadow:var(--tap-shadow)}
.tap-avatar{width:52px; height:52px; border-radius:50%; background:var(--grad-dawn); color:#fff; display:flex; align-items:center; justify-content:center; font-size:calc(1.375 * var(--tap-fs)); font-weight:800; flex-shrink:0; font-family:var(--tap-font-heading); border:3px solid var(--tap-marigold)}
.tap-pname{font-size:calc(1.125 * var(--tap-fs)); font-weight:800; color:var(--tap-ink)}
.tap-pmeta{font-size:calc(0.8125 * var(--tap-fs)); color:var(--tap-muted); margin-top:2px}
.tap-logout{font-size:calc(0.8125 * var(--tap-fs)); padding:8px 14px; margin-left:auto}
.tap-tabs::-webkit-scrollbar{display:none}
.tap-tab:hover{color:var(--tap-purple)}
.tap-ticket-new{background:var(--tap-purple-pale); border-radius:var(--tap-radius); padding:18px; margin-bottom:20px}
.tap-ticket-new h3{margin:0 0 12px; color:var(--tap-chocolate)}
.tap-ticket-card{background:#fff; border:1.5px solid var(--tap-line); border-radius:var(--tap-radius); padding:14px 16px; cursor:pointer; margin-bottom:10px; transition:box-shadow var(--dur-fast),border-color var(--dur-fast)}
.tap-ticket-card:hover{box-shadow:var(--tap-shadow); border-color:var(--tap-purple)}
.tap-ticket-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:4px}
.tap-ticket-code{font-family:monospace; font-size:calc(0.8125 * var(--tap-fs)); color:var(--tap-purple); font-weight:700}
.tap-ticket-status{font-size:calc(0.6875 * var(--tap-fs)); text-transform:capitalize; font-weight:800; padding:3px 11px; border-radius:var(--tap-r-full); letter-spacing:.02em; white-space:nowrap}
.tap-ticket-sub{font-weight:700; font-size:calc(0.9375 * var(--tap-fs)); color:var(--tap-ink)}
.tap-ticket-meta{font-size:calc(0.75 * var(--tap-fs)); color:var(--tap-muted); margin-top:4px; text-transform:capitalize}
.tap-ticket-thread{padding-top:8px}
.tap-ticket-msg{background:#f7f2fd; border-radius:var(--tap-r-sm); padding:10px 14px; margin-bottom:8px}
.tap-ticket-msg.admin{background:var(--tap-purple-pale)}
.tap-msg-sender{font-size:calc(0.75 * var(--tap-fs)); color:var(--tap-muted); margin-bottom:4px; font-weight:700}
.tap-msg-body{font-size:calc(0.875 * var(--tap-fs)); white-space:pre-wrap; line-height:1.6}
.tap-celebrate{position:fixed; inset:0; z-index:10000; pointer-events:none; display:flex; flex-direction:column; align-items:center; justify-content:center}
/* v6.9.13: bloom THEN fade out (was holding opacity:1 until JS removed it at 2.5s,
so the π sat opaque over the confirmation text β the reported overlap). */
.tap-celebrate-mandala{font-size:calc(5 * var(--tap-fs)); animation:tapMandalaBloom 2.2s var(--ease-spring) forwards}
@keyframes tapMandalaBloom{0%{transform:scale(0) rotate(-45deg);opacity:0}25%{transform:scale(1.2) rotate(10deg);opacity:1}45%{transform:scale(1) rotate(0);opacity:1}75%{opacity:1}100%{transform:scale(1) rotate(0);opacity:0}}
.tap-confetti-particle{position:fixed; width:8px; height:8px; border-radius:2px; animation:tapConfettiFall 2s ease-out forwards; pointer-events:none}
@keyframes tapConfettiFall{0%{transform:translateY(-20px) rotate(0);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}
.tap-lotus-bloom{font-size:calc(3 * var(--tap-fs)); animation:tapLotusBloom 0.8s var(--ease-spring); display:inline-block}
@keyframes tapLotusBloom{0%{transform:scale(.2);opacity:0}100%{transform:scale(1);opacity:1}}
.tap-reveal.visible{opacity:1; transform:translateY(0)}
.tap-view-enter{animation:tapViewSlideIn var(--dur-std) var(--ease-out)}
@keyframes tapViewSlideIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
@keyframes tapTickPop{0%{transform:scale(0)}80%{transform:scale(1.15)}100%{transform:scale(1)}}
.tap-err-inline{background:#fff0f0; border:1px solid #f5c6cb; border-radius:var(--tap-radius-sm); padding:10px 14px; font-size:calc(0.8125 * var(--tap-fs)); color:var(--tap-err); margin-bottom:10px}
.tap-notice-ok{color:var(--tap-ok); font-size:calc(0.875 * var(--tap-fs)); padding:8px 0; font-weight:700}
.tap-empty{text-align:center; padding:40px 20px; color:var(--tap-muted); font-size:calc(0.9375 * var(--tap-fs)); line-height:1.8}
.tap-home-section:nth-child(even){background:#fff}
.tap-occasion-bar{background:linear-gradient(90deg,var(--tap-chocolate) 0%,var(--tap-terracotta) 100%); padding:16px; text-align:center; color:#fff}
.tap-root .tap-occasion-bar :is(h2,h3){color:inherit; font-size:calc(1.125 * var(--tap-fs)); margin-bottom:4px}
.tap-occasion-bar p{font-size:calc(0.875 * var(--tap-fs)); opacity:.85; margin-bottom:12px}
.tap-home-astro-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 0 8px}
.tap-home-astro-card{flex:0 0 min(82vw,300px);scroll-snap-align:start;display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--tap-border);border-radius:var(--tap-radius-lg,18px);background:var(--tap-surface);color:var(--tap-ink);text-decoration:none;box-shadow:var(--tap-shadow-sm,0 8px 24px rgba(17,22,37,.07))}
.tap-home-astro-card img,.tap-home-astro-avatar{width:68px;height:68px;flex:0 0 68px;border-radius:50%;object-fit:cover;background:var(--tap-purple-pale,#f6effd);display:grid;place-items:center}
.tap-home-astro-copy{display:flex;flex-direction:column;gap:3px;min-width:0}.tap-home-astro-copy strong{font-family:var(--tap-font-heading);font-size:calc(1.0625 * var(--tap-fs));color:var(--tap-ink)}.tap-home-astro-copy small,.tap-home-astro-copy>span{font-size:calc(.75 * var(--tap-fs));color:var(--tap-muted);overflow-wrap:anywhere}
@media(min-width:768px){.tap-home-astro-card{flex-basis:300px}}
@media(max-width:420px){.tap-home-root .tap-hero-compact-search{gap:6px;padding-left:12px}.tap-home-root .tap-hero-compact-search button{padding-left:13px;padding-right:13px}.tap-home-root .tap-hero-compact-search input{font-size:calc(.8125 * var(--tap-fs))}}
.tap-divider {
display: flex; align-items: center; justify-content: center;
height: 24px; margin: 28px 0; background: transparent; position: relative; border: none;
}
.tap-divider::before {
content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--tap-marigold) 25%, var(--tap-purple) 50%, var(--tap-marigold) 75%, transparent 100%);
}
.tap-divider::after {
content: ""; position: relative; z-index: 1; width: 32px; height: 24px;
background-color: var(--tap-bg);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f99000'%3E%3Cpath d='M12 2C12 2 10 7 6 9C2 11 2 15 6 15C10 15 12 22 12 22C12 22 14 15 18 15C22 15 22 11 18 9C14 7 12 2 12 2Z'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: center; background-size: 20px 20px;
padding: 0 8px;
}
.tap-badge-alt{background:var(--tap-purple-pale); color:var(--tap-purple); font-size:calc(0.6875 * var(--tap-fs)); font-weight:800; padding:3px 10px; border-radius:var(--tap-r-full)}
.tap-devhint{background:#fffbe6; border:1px solid var(--tap-turmeric); border-radius:var(--tap-r-xs); padding:8px 12px; font-size:calc(0.8125 * var(--tap-fs)); margin-bottom:12px; color:#6b5b00}
.tap-resend{background:none; border:none; color:var(--tap-purple); font:inherit; font-size:calc(0.875 * var(--tap-fs)); cursor:pointer; font-weight:700; text-decoration:underline}
.tap-optin{display:flex; align-items:center; gap:10px; padding:12px 0; font-size:calc(0.875 * var(--tap-fs)); cursor:pointer}
.tap-blist{display:flex; flex-direction:column; gap:12px}
.tap-bcard{background:#fff; border-radius:var(--tap-radius); border:1.5px solid var(--tap-line); padding:16px; transition:box-shadow var(--dur-fast)}
.tap-bcard:hover{box-shadow:var(--tap-shadow)}
.tap-bcard-title{font-weight:700; font-size:calc(0.9375 * var(--tap-fs)); margin-bottom:2px}
.tap-bcard-meta{font-size:calc(0.75 * var(--tap-fs)); color:var(--tap-muted)}
.tap-bcard-amount{font-size:calc(1 * var(--tap-fs)); font-weight:800; color:var(--tap-purple); font-family:var(--tap-font-heading)}
.tap-bactions{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}
@media(min-width:768px){.tap-wa-fab{bottom:20px}}
.tap-ref-card{background:linear-gradient(135deg,var(--tap-purple-pale),#fff); border:1px solid var(--tap-line); border-radius:var(--tap-radius-xl); padding:22px}
.tap-ref-title{font-weight:800; font-size:calc(1.125 * var(--tap-fs)); color:var(--tap-chocolate); margin-bottom:6px}
.tap-ref-desc{font-size:calc(0.875 * var(--tap-fs)); color:var(--tap-muted); margin-bottom:14px}
.tap-ref-code-row{display:flex; gap:8px; align-items:center; margin-bottom:16px; flex-wrap:wrap}
.tap-ref-code{font-family:monospace; font-size:calc(1.5 * var(--tap-fs)); font-weight:900; color:var(--tap-purple); background:var(--tap-purple-pale); border-radius:var(--tap-radius-sm); padding:10px 18px; flex:1; text-align:center; letter-spacing:.1em}
.tap-ref-stats{display:flex; gap:20px}
.tap-ref-stat{text-align:center; font-size:calc(0.8125 * var(--tap-fs)); color:var(--tap-muted)}
.tap-ref-num{font-size:calc(1.625 * var(--tap-fs)); font-weight:800; color:var(--tap-purple); font-family:var(--tap-font-heading)}
.tap-push-card{background:#f8f5ff; border-radius:var(--tap-radius); padding:14px 18px; margin-top:16px; display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.tap-push-card p{margin:0; flex:1; font-size:calc(0.875 * var(--tap-fs))}
.tap-suggestion .tap-btn{margin-top:10px; width:100%}
.tap-sec-lead{color:var(--tap-muted); font-size:calc(0.875 * var(--tap-fs)); margin-bottom:14px}
.tap-profile-form{max-width:480px}
/* ββ v6.9.15: modern Profile tab β grouped cards + floating-label fields ββ */
.tap-prof{max-width:480px; margin:0 auto}
.tap-prof-intro{display:flex; align-items:center; gap:14px; margin:2px 0 20px}
.tap-prof-av{width:56px; height:56px; flex-shrink:0; border-radius:var(--tap-r-2xl); background:var(--grad-sacred); color:#fff; display:grid; place-items:center; font-size:calc(1.5 * var(--tap-fs)); font-weight:800; font-family:var(--tap-font-heading); box-shadow:0 6px 18px rgba(97,9,190,.28)}
.tap-prof-intro-h{font-size:calc(1.1875 * var(--tap-fs)); font-weight:800; color:var(--tap-ink); font-family:var(--tap-font-heading); line-height:1.2}
.tap-prof-intro-s{font-size:calc(0.8125 * var(--tap-fs)); color:var(--tap-muted); margin-top:2px}
/* v7.6.4: the .tap-prof-card box moved to the shared CONTENT primitive in
the merged premium layer so the profile groups, booking cards and listing cards
agree on one radius, border and shadow. Only its inner parts live here. */
.tap-prof-card-hd{display:flex; align-items:center; gap:11px; margin:0 0 16px}
.tap-prof-card-ic{width:36px; height:36px; flex-shrink:0; border-radius:11px; background:var(--tap-purple-pale); display:grid; place-items:center; font-size:calc(1.125 * var(--tap-fs))}
.tap-prof-card-tt{font-size:calc(0.9375 * var(--tap-fs)); font-weight:800; color:var(--tap-ink); line-height:1.2}
.tap-prof-card-sub{font-size:calc(0.75 * var(--tap-fs)); color:var(--tap-muted); margin-top:2px}
/* Floating-label field: input carries placeholder=" " so :placeholder-shown drives the label. */
.tap-fld{position:relative; margin-bottom:12px}
.tap-fld-in{width:100%; box-sizing:border-box; padding:22px 15px 8px; border:1.5px solid var(--tap-line); border-radius:var(--tap-r-lg); font:inherit; font-size:calc(0.9375 * var(--tap-fs)); color:var(--tap-ink); background:#fff; outline:none; transition:border-color .15s ease, box-shadow .15s ease}
.tap-fld-lb{position:absolute; left:15px; top:16px; font-size:calc(0.9375 * var(--tap-fs)); color:var(--tap-muted); pointer-events:none; transform-origin:left top; transition:transform .15s ease, color .15s ease}
.tap-fld-in:focus{border-color:var(--tap-purple); box-shadow:0 0 0 3px rgba(97,9,190,.10)}
.tap-fld-in:focus + .tap-fld-lb,
.tap-fld-in:not(:placeholder-shown) + .tap-fld-lb{transform:translateY(-11px) scale(.72); font-weight:700; letter-spacing:.02em; color:var(--tap-purple)}
.tap-prof-save{margin-top:4px}
.tap-prof-logout{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:12px; padding:13px; border-radius:var(--tap-r-lg); border:1.5px solid #f3d6d2; background:#fff; color:var(--tap-err); font:inherit; font-weight:700; font-size:calc(0.875 * var(--tap-fs)); cursor:pointer; transition:background .15s ease, border-color .15s ease}
.tap-prof-logout:hover{background:#fdf1f0; border-color:#e9b8b1}
.tap-sum-row{display:flex; justify-content:space-between; padding:6px 0; font-size:calc(0.875 * var(--tap-fs)); border-bottom:1px solid var(--tap-line)}
.tap-sum-row:last-child{border-bottom:none; font-weight:800; font-size:calc(1 * var(--tap-fs)); color:var(--tap-purple)}
.tap-member-row{display:flex; gap:8px; margin-bottom:8px}
.tap-addmember{background:none; border:1.5px dashed var(--tap-line); border-radius:var(--tap-radius-sm); padding:8px; width:100%; color:var(--tap-purple); font:inherit; font-weight:700; cursor:pointer; transition:all var(--dur-fast)}
.tap-addmember:hover{border-color:var(--tap-purple); background:var(--tap-purple-pale)}
.tap-rm{background:#f7f2fd; border:none; border-radius:50%; width:30px; height:30px; font-size:calc(1 * var(--tap-fs)); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--tap-muted); flex-shrink:0; transition:all var(--dur-fast)}
.tap-rm:hover{background:var(--tap-err); color:#fff}
.tap-hero .tap-hero-img{aspect-ratio:4/3; border-radius:var(--tap-radius); background:linear-gradient(135deg,#efe3ff,#ffe8cc); background-size:cover; background-position:center; box-shadow:var(--tap-shadow)}
.tap-hero .tap-sub{color:var(--tap-muted); margin:0 0 10px}
.tap-opt.is-sel{border-color:var(--tap-purple); background:#faf5ff; box-shadow:0 0 0 3px rgba(97,9,190,.08)}
.tap-addon{display:flex; gap:12px; align-items:flex-start; border:1.5px solid var(--tap-line); border-radius:var(--tap-r-lg); padding:13px; cursor:pointer; background:#fff}
.tap-addon.is-on{border-color:var(--tap-marigold); background:#fffaf1}
.tap-addon .tap-addon-name .tap-tag{font-size:calc(0.625 * var(--tap-fs)); font-weight:800; color:var(--tap-gold-dark); background:var(--tap-marigold); padding:2px 7px; border-radius:var(--tap-r-full); margin-left:6px; vertical-align:middle}
.tap-summary{background:#fff; border:1px solid var(--tap-line); border-radius:var(--tap-radius); padding:16px; box-shadow:var(--tap-shadow)}
.tap-addon-name{font-weight:700; font-size:calc(0.875 * var(--tap-fs))}
.tap-addon-price{font-size:calc(0.875 * var(--tap-fs)); font-weight:700; color:var(--tap-purple); white-space:nowrap}
@media(max-width:767.98px){.tap-detail-layout{grid-template-columns:1fr}
.tap-plans-grid{grid-template-columns:1fr}
.tap-ref-code-row{flex-direction:column}
.tap-hero{grid-template-columns:1fr}}
@media(max-width:400px){.tap-otp-boxes input{width:40px; height:48px; font-size:calc(1.125 * var(--tap-fs))}
.tap-otp-boxes{gap:6px}
.tap-step-circle{width:30px; height:30px; font-size:calc(0.6875 * var(--tap-fs))}}
.tap-grid .tap-reveal:nth-child(1){transition-delay:.05s}
.tap-grid .tap-reveal:nth-child(2){transition-delay:.10s}
.tap-grid .tap-reveal:nth-child(3){transition-delay:.15s}
.tap-grid .tap-reveal:nth-child(4){transition-delay:.20s}
.tap-grid .tap-reveal:nth-child(5){transition-delay:.25s}
.tap-grid .tap-reveal:nth-child(6){transition-delay:.30s}
.tap-hscroll .tap-reveal:nth-child(1){transition-delay:.06s}
.tap-hscroll .tap-reveal:nth-child(2){transition-delay:.12s}
.tap-hscroll .tap-reveal:nth-child(3){transition-delay:.18s}
.tap-pandit-mini:hover .tap-pandit-mini-avatar{transform:scale(1.08); box-shadow:0 0 0 4px rgba(249,144,0,.4)}
.tap-deity-item{display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; flex-shrink:0; width:72px; -webkit-tap-highlight-color:transparent; transition:transform var(--dur-std) var(--ease-spring)}
.tap-deity-item:active{transform:scale(.92)}
.tap-home-section{padding:48px 0; animation:tapSectionIn .6s var(--ease-out) both}
@keyframes tapSectionIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.tap-input:focus{border-color:var(--tap-purple); box-shadow:0 0 0 3px rgba(97,9,190,.10); animation:tapFocusPop .2s var(--ease-spring)}
@keyframes tapFocusPop{0%{transform:scale(1)}40%{transform:scale(1.01)}100%{transform:scale(1)}}
.tap-otp-boxes input:not(:placeholder-shown){border-color:var(--tap-purple);
background:var(--tap-purple-pale);
animation:tapOtpFill .15s var(--ease-spring);}
@keyframes tapOtpFill{0%{transform:scale(.9)}70%{transform:scale(1.05)}100%{transform:scale(1)}}
.tap-cal-day{aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:calc(0.8125 * var(--tap-fs)); font-weight:600; border-radius:50%; cursor:pointer; transition:all var(--dur-fast); margin:2px; position:relative}
.tap-cal-day::before{content:"";position:absolute;inset:0;border-radius:50%;
background:var(--tap-purple-pale);transform:scale(0);
transition:transform var(--dur-fast) var(--ease-spring);}
.tap-cal-day:hover::before{transform:scale(1)}
.tap-cal-day span{position:relative;z-index:1}
@keyframes tapSheetUp{
from{transform:translateY(100%);opacity:0}
to{transform:translateY(0);opacity:1}
}
.tap-timeline-item.tap-reveal{transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
transform:translateX(-16px);}
.tap-timeline-item.tap-reveal.visible{transform:translateX(0)}
.tap-trust-card:hover{border-color:var(--tap-purple);
box-shadow:var(--tap-glow);
transition:all var(--dur-std);}
.tap-mem-card-v2::before{content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
transform:skewX(-20deg);
animation:tapShine 3s ease-in-out infinite;}
@keyframes tapShine{0%,100%{left:-100%}50%{left:150%}}
@keyframes tapLivePulse{
0%{box-shadow:0 0 0 0 rgba(224,59,59,.4)}
70%{box-shadow:0 0 0 8px rgba(224,59,59,0)}
100%{box-shadow:0 0 0 0 rgba(224,59,59,0)}
}
.tap-wa-fab{position:fixed;z-index:var(--tap-layer-fab);border:0;border-radius:var(--tap-radius-full);background:var(--tap-ok);color:var(--tap-on-status,var(--tap-card));display:flex;align-items:center;justify-content:center;text-decoration:none;inline-size:50px;block-size:50px;padding:0;font-size:calc(1.375 * var(--tap-fs));cursor:pointer;transition:transform var(--dur-std) var(--ease-spring),box-shadow var(--dur-std);box-shadow:var(--tap-shadow-md)}
.tap-wa-fab:hover{transform:translateY(-2px) scale(1.04);box-shadow:var(--tap-shadow-lg)}
.tap-wa-fab::after{content:"Support";position:absolute;inset-inline-end:calc(100% + 8px);inset-block-start:50%;transform:translateY(-50%);background:var(--tap-ink);color:var(--tap-card);font-size:calc(.6875 * var(--tap-fs));font-weight:700;white-space:nowrap;padding:4px 10px;border-radius:var(--tap-radius-full);opacity:0;transition:opacity var(--dur-fast);pointer-events:none}
.tap-wa-fab:hover::after{opacity:1}
.tap-slot:hover:not(.is-full){border-color:var(--tap-purple);
background:var(--tap-purple-pale);
transform:translateY(-2px);
box-shadow:0 4px 12px rgba(97,9,190,.15);}
.tap-slot.is-full{opacity:.45;cursor:not-allowed}
.tap-level-bar .tap-level-fill{animation:tapBarFill 1.2s var(--ease-out) both .3s;}
@keyframes tapBarFill{from{width:0!important}to{}}
.tap-filter-bar, .tap-tabs, .tap-ptabs, .tap-hscroll{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);}
.tap-tick{width:64px; height:64px; background:var(--tap-ok); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:calc(1.75 * var(--tap-fs)); margin:0 auto 16px; animation:tapTickPop var(--dur-slow) var(--ease-spring); position:relative}
.tap-tick::after{content:"";
position:absolute;
inset:0;border-radius:50%;
background:rgba(26,125,60,.2);
animation:tapTickRing .6s var(--ease-spring) .3s both;
transform:scale(0);}
@keyframes tapTickRing{to{transform:scale(2);opacity:0}}
.tap-dtab, .tap-tab, .tap-ptab{position:relative;
overflow:hidden;}
.tap-dtab.active::after, .tap-tab.active::after, .tap-ptab.active::after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;
background:var(--tap-purple);
animation:tapTabSlide .2s var(--ease-spring);}
@keyframes tapTabSlide{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.tap-thumb, .tap-thumb img{transition:transform var(--dur-slow) var(--ease-out);}
/* v7.6.0: removed .tap-spiritual-header::after β a 60px Om emoji painted
through CSS `content:`. Dead code (the class is referenced by no template,
shortcode or JS), and the last emoji able to reach a devotee without any
source file mentioning it: the gate reads .js and .php, so a glyph living in
a stylesheet was invisible to it. The gate scans .css now too. */
.tap-catalogue-skeleton{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;padding:4px}
.tap-skel-card-wrap{background:#fff;border-radius:var(--tap-radius);overflow:hidden;box-shadow:var(--tap-shadow)}
.tap-skel-img{height:140px;background:linear-gradient(90deg,var(--tap-purple-pale) 25%,#e8d8fc 50%,var(--tap-purple-pale) 75%);background-size:200% 100%;animation:tapShimmer 1.5s ease-in-out infinite}
.tap-skel-body{padding:14px}
.tap-skel-line{height:14px;border-radius:var(--tap-r-2xs);margin-bottom:8px;background:linear-gradient(90deg,var(--tap-purple-pale) 25%,#e8d8fc 50%,var(--tap-purple-pale) 75%);background-size:200% 100%;animation:tapShimmer 1.5s ease-in-out infinite}
.tap-skel-line.s{width:60%}
.tap-skel-line.xs{width:40%}
.tap-sticky .tap-btn-gold{flex-shrink:0; font-size:calc(1 * var(--tap-fs)); padding:14px 24px;
box-shadow:0 4px 18px rgba(249,144,0,.4);}
.tap-login-required-note{background:var(--tap-warn-bg, var(--tap-warn-bg)); border:1px solid var(--tap-marigold);
border-radius:var(--tap-r-sm); padding:10px 16px;
font-size:calc(0.875 * var(--tap-fs)); font-weight:600; color:var(--tap-warn-fg, var(--tap-warn-fg));
text-align:center; margin-bottom:10px;
animation:tapViewIn .25s var(--ease-spring);}
.tap-test-mode-badge{background:var(--tap-turmeric); color:var(--tap-gold-dark, var(--tap-gold-dark));
font-size:calc(0.6875 * var(--tap-fs)); font-weight:800; padding:3px 10px;
border-radius:var(--tap-r-full); letter-spacing:.05em;
display:inline-flex; align-items:center; gap:5px;}
.tap-verified-badge::before{content:"β "}
.tap-unverified-badge{display:inline-flex;align-items:center;gap:5px;
background:#f5f5f5;color:#52566b;
font-size:calc(0.6875 * var(--tap-fs));font-weight:700;padding:3px 10px;border-radius:var(--tap-r-full);
border:1px solid #ddd;}
.tap-diya-loader{font-size:calc(2.25 * var(--tap-fs)); animation:tapDiyaFlicker 0.8s ease-in-out infinite alternate; display:none}
.tap-loading-spinner{width:32px;height:32px;border:3px solid var(--tap-line);
border-top-color:var(--tap-purple);border-radius:50%;
animation:tapSpinSimple .8s linear infinite;}
@keyframes tapSpinSimple{to{transform:rotate(360deg)}}
.tap-verified-admin{display:inline-flex;align-items:center;gap:4px;background:var(--tap-ok-pale, var(--tap-ok-pale));color:var(--tap-ok);padding:2px 8px;border-radius:var(--tap-r-full);font-size:calc(0.75 * var(--tap-fs));font-weight:800;border:1px solid #b8e6c8}
.tap-unverified-admin{display:inline-flex;align-items:center;gap:4px;background:#f5f5f5;color:#52566b;padding:2px 8px;border-radius:var(--tap-r-full);font-size:calc(0.75 * var(--tap-fs));font-weight:700;border:1px solid #ddd}
.tap-opt{border:1.5px solid var(--tap-line); border-radius:var(--tap-r-lg); cursor:pointer; background: var(--tap-card); transition:border-color .15s,background .15s; display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 10px}
.tap-opt-body{text-align:center;}
.tap-opt-name{font-weight:700; font-size:calc(0.875 * var(--tap-fs));}
.tap-opt-who{font-size:calc(0.6875 * var(--tap-fs)); color:#888; margin-top:2px;}
.tap-opt-price{font-size:calc(1 * var(--tap-fs)); font-weight:800; color:var(--tap-purple); margin-top:4px;}
.tap-opt.is-sel .tap-opt-price{color:var(--tap-marigold);}
@media (max-width: 767.98px){.tap-member-grid{grid-template-columns: 1fr 1fr; gap:6px;}
.tap-member-grid .tap-inp:nth-child(3), .tap-member-grid .tap-inp:nth-child(4){grid-column: span 1;}
.tap-member-rm{grid-column: span 2; width:100%;}}
/* Booking progress/selection/sticky styles moved to tap-booking.css (Phase 6). */
.tap-coupon{display:flex; gap:8px; align-items:center;}
.tap-coupon-inp{flex:1; border:2px solid var(--tap-line); border-radius:var(--tap-r-sm);
padding:10px 14px; font-size:calc(0.875 * var(--tap-fs)); font-weight:700;
font-family:monospace; letter-spacing:.08em; text-transform:uppercase;
transition:border-color var(--dur-std); background:#fff;
outline:none;}
.tap-coupon-inp:focus{border-color:var(--tap-purple); box-shadow:var(--tap-glow);}
.tap-coupon-msg{font-size:calc(0.8125 * var(--tap-fs)); margin-top:6px; min-height:20px;}
.tap-section-coupon{background:var(--tap-gold-light); border-radius:var(--tap-radius); padding:20px; margin:0;}
.tap-trust-strip{display:flex; flex-wrap:wrap; gap:8px 16px;
padding:12px 0; border-top:1px solid var(--tap-line);
border-bottom:1px solid var(--tap-line); margin:12px 0;}
.tap-trust-item{display:flex; align-items:center; gap:5px; font-size:calc(0.75 * var(--tap-fs)); color:var(--tap-muted); font-weight:700;}
.tap-section{padding:16px 0}
.tap-section h2{font-size:calc(1.0625 * var(--tap-fs)); font-weight:800; color:var(--tap-ink); margin-bottom:12px;}
.tap-section + .tap-section{border-top:1px solid var(--tap-line);}
.tap-family-panel{background:linear-gradient(135deg,#fdf6ff 0%,#fff8f0 100%); border:2px solid var(--tap-purple-pale); border-radius:var(--tap-r-xl); padding:18px; margin:0 0 8px}
.tap-family-hdr h3{margin:0 0 6px; font-size:calc(1 * var(--tap-fs)); color:var(--tap-ink); margin-bottom:4px}
.tap-fam-note{margin:0 0 14px; font-size:calc(0.8125 * var(--tap-fs)); color:var(--tap-muted); margin-bottom:14px}
.tap-member-list{display:flex; flex-direction:column; gap:10px; margin-bottom:12px}
.tap-member-card{background:#fff; border:1px solid var(--tap-line); border-radius:var(--tap-r-sm); padding:12px}
.tap-member-grid{display:grid; grid-template-columns:2fr 1.5fr 1.5fr 70px 32px; gap:8px; align-items:center}
@media(max-width:767.98px){.tap-member-grid{grid-template-columns:1fr 1fr;}}
.tap-member-grid .tap-inp{border:1px solid var(--tap-line); border-radius:var(--tap-r-xs); padding:7px 10px; font-size:calc(0.8125 * var(--tap-fs)); width:100%; outline:none}
.tap-member-grid .tap-inp:focus{border-color:var(--tap-purple);}
.tap-member-rm{background:#fff0f0; border:1px solid #f5c6c6; border-radius:var(--tap-r-xs); width:30px; height:30px; color:var(--tap-err); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:calc(1 * var(--tap-fs))}
.tap-add-member{font-size:calc(0.8125 * var(--tap-fs)); margin:6px 0}
.tap-extra-total{font-size:calc(0.875 * var(--tap-fs)); font-weight:700; color:var(--tap-purple); background:var(--tap-purple-pale); border-radius:var(--tap-r-xs); padding:8px 12px; margin-top:10px}
.tap-hero{grid-template-columns:1.1fr 1fr; gap:20px; align-items:start; padding:4px; position:relative; border-radius:var(--tap-radius); overflow:hidden; margin-bottom:0; min-height:220px; display:flex; flex-direction:column; justify-content:flex-end; background:var(--grad-sacred)}
.tap-hero-img{position:absolute; inset:0; background-size:cover; background-position:center;}
.tap-hero-img::after{content:""; position:absolute; inset:0;
background:linear-gradient(0deg, rgba(30,10,46,.85) 0%, rgba(30,10,46,.3) 60%, transparent 100%);}
.tap-hero > *:not(.tap-hero-img){position:relative; z-index:1; padding:20px;}
.tap-hero h1{font-size:clamp(22px,4vw,32px); color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.3); margin-bottom:6px}
.tap-sub{font-size:calc(0.875 * var(--tap-fs)); color:rgba(255,255,255,.85); margin-bottom:10px;}
.tap-pills{display:flex; flex-wrap:wrap; gap:6px;}
.tap-pill{background:rgba(255,255,255,.18); color:#fff; backdrop-filter:blur(8px); border-radius:var(--tap-r-3xl); padding:4px 10px; font-size:calc(0.75 * var(--tap-fs)); font-weight:700; border:1px solid rgba(255,255,255,.25)}
.tap-pill.gold{color:var(--tap-marigold-deep); background:rgba(249,144,0,.3); border-color:var(--tap-marigold)}
.tap-back{font:inherit; transition:gap var(--dur-fast),color var(--dur-fast); display:inline-flex; align-items:center; gap:6px; color:var(--tap-purple); font-weight:700; font-size:calc(0.875 * var(--tap-fs)); background:none; border:none; cursor:pointer; padding:12px 0 8px}
.tap-back:hover{color:var(--tap-purple-deep); gap:10px; text-decoration:underline}
.tap-notice-warn{background:#fff8e8; border:2px solid var(--tap-marigold);
border-radius:var(--tap-r-md); padding:14px 16px; font-size:calc(0.875 * var(--tap-fs));
display:flex; align-items:flex-start; gap:10px;}
.tap-empty-state{text-align:center; padding:40px 20px;
background:var(--tap-purple-pale); border-radius:var(--tap-radius);}
.tap-empty-icon{font-size:calc(2.5 * var(--tap-fs)); margin-bottom:12px;}
/* v6.9.15 FIX: was white-space:nowrap β a long error ("Online payment is
temporarily unavailableβ¦") could not wrap, so it spilled out both sides of
the fixed-width pill (half the text outside the box). Let it wrap. */
/* v6.9.15 FIX2: the success overlay is a transformed ancestor, so the fixed
toast's `width:calc(100% - 32px)` resolved against it and collapsed to a
sliver β then `word-break:break-word` stacked every letter vertically
("S a n k a l p"). Size to content (max-content), cap with viewport units
(vw, not %, so a transformed ancestor can't shrink it), and drop the
per-character break. */
.tap-toast{white-space:normal; overflow-wrap:break-word; word-break:normal; line-height:1.45; pointer-events:none; min-width:0; text-align:center; position:fixed; left:50%; transform:translateX(-50%) translateY(8px); z-index:var(--tap-layer-toast); width:max-content; max-width:min(340px, calc(100vw - 32px)); background:var(--tap-ink); color:#fff; border-radius:var(--tap-r-lg); padding:14px 20px; font-size:calc(0.875 * var(--tap-fs)); font-weight:600; box-shadow:0 8px 32px rgba(0,0,0,.3); animation:tapSlideUp .25s var(--ease-spring) forwards}
.tap-toast.tap-toast-err{background:var(--tap-err);}
@keyframes tapSlideUp{ from{opacity:0;transform:translateX(-50%) translateY(16px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
.tap-skeleton{background:linear-gradient(90deg,var(--tap-purple-pale) 0%,#e8e8f0 50%,var(--tap-purple-pale) 100%); background-size:200% 100%; animation:tapShimmer 1.4s ease infinite; border-radius:var(--tap-r-xs)}
.tap-skel-card{height:200px; border-radius:var(--tap-radius); margin-bottom:12px}
.tap-skel-text{margin-bottom:8px; height:14px; border-radius:var(--tap-r-2xs); margin:6px 0}
.tap-skel-text.w60{width:60%}
.tap-skel-text.w80{width:80%;}
.tap-grid{padding:4px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--tap-smart-card-min,148px)),1fr));gap:var(--tap-smart-gap,14px);min-width:0}
/* v6.9.83 β the ratio must GOVERN, so height is auto.
This rule used to declare aspect-ratio:16/10 AND an explicit height. An
explicit height wins, so the ratio was inert: measured 112x112 (1.000:1)
against the declared 1.600:1. Card thumbnails were therefore cropped to
whatever height the size preset imposed, and the crop changed with the
layout mode β inconsistent image proportions are the most visible "cheap"
signal in a catalogue.
The banner variant in the Universal Responsive Engine already did this correctly
(aspect-ratio + height:auto); the base rule now matches it.
--tap-card-aspect is emitted per-request from the admin Card image ratio
setting; --tap-card-thumb is kept ONLY as the min-height floor so a very
narrow column cannot collapse the image to nothing. */
.tap-thumb{aspect-ratio:var(--tap-card-aspect,16/10); background-size:cover; background-position:center; height:auto; min-height:0; background:var(--grad-sacred) center/cover; position:relative; overflow:hidden}
/* List rows are a different component: a fixed square thumb beside text is
deliberate there, so it opts out of the ratio. */
.tap-thumb-overlay{position:absolute; inset:0; background:linear-gradient(0deg,rgba(30,10,46,.6) 0%,transparent 60%)}
.tap-badge{position:absolute; top:8px; left:8px; background:rgba(30,10,46,.7); color:#fff; backdrop-filter:blur(8px); border-radius:var(--tap-r-3xl); padding:3px 10px; font-size:calc(0.6875 * var(--tap-fs)); font-weight:800; border:1px solid rgba(255,255,255,.2)}
.tap-badge-verified{position:absolute; top:8px; right:8px; background:var(--tap-ok); color:#fff; border-radius:var(--tap-r-3xl); padding:3px 8px; font-size:calc(0.625 * var(--tap-fs)); font-weight:800}
.tap-live-count{letter-spacing:.02em; position:absolute; bottom:8px; left:8px; display:flex; align-items:center; gap:5px; background:rgba(255,255,255,.15); backdrop-filter:blur(8px); border-radius:var(--tap-r-3xl); padding:3px 8px; font-size:calc(0.6875 * var(--tap-fs)); font-weight:700; color:#fff}
.tap-live-dot{box-shadow:0 0 0 0 rgba(224,59,59,.4); width:6px; height:6px; background:#ff3838; border-radius:50%; animation:tapPulse 1s infinite}
.tap-body{flex:1; display:flex; flex-direction:column; gap:6px; padding:12px}
.tap-body h3{font-size:calc(0.875 * var(--tap-fs)); font-weight:800; margin-bottom:4px; line-height:1.3;}
.tap-temple-tag{display:inline-flex; align-items:center; gap:4px; font-weight:600; font-size:calc(0.6875 * var(--tap-fs)); color:var(--tap-muted); margin-bottom:4px}
.tap-rating{display:inline-flex; align-items:center; gap:4px; font-size:calc(0.75 * var(--tap-fs)); color:var(--tap-marigold-deep); font-weight:700; margin-bottom:6px}
.tap-price-row{margin-top:4px; display:flex; align-items:baseline; gap:6px; margin-bottom:8px}
.tap-price-from small{font-size:calc(0.6875 * var(--tap-fs)); font-weight:600; color:var(--tap-muted); font-family:inherit;}
.tap-book-btn-sm{margin-top:10px; font:inherit; width:100%; padding:8px; border-radius:var(--tap-r-sm); background:var(--tap-purple); color:var(--tap-primary-text,#000); font-size:calc(0.8125 * var(--tap-fs)); font-weight:800; border:none; cursor:pointer; transition:all var(--dur-fast)}
.tap-book-btn-sm:hover{color:var(--tap-primary-text,#000); background:var(--tap-purple-deep)}
.tap-gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); gap:8px; margin-top:10px;}
.tap-gthumb{border-radius:var(--tap-r-sm); overflow:hidden; aspect-ratio:1; display:block;}
.tap-gthumb img{width:100%; height:100%; object-fit:cover; transition:transform var(--dur-std);}
.tap-gthumb:hover img{transform:scale(1.08);}
.tap-temple-info{display:flex; gap:14px; align-items:flex-start;
background:var(--tap-gold-light); border-radius:var(--tap-r-lg);
padding:14px; border:1px solid rgba(249,144,0,.25);}
.tap-temple-thumb{width:56px; height:56px; border-radius:var(--tap-r-sm); background-size:cover; background-position:center; flex-shrink:0;}
.tap-temple-meta{flex:1;}
.tap-temple-name{font-size:calc(0.9375 * var(--tap-fs)); font-weight:800; margin-bottom:4px;}
.tap-temple-loc{font-size:calc(0.8125 * var(--tap-fs)); color:var(--tap-muted); margin-bottom:4px;}
.tap-success{text-align:center; padding:32px 20px}
.tap-success-icon{font-size:calc(3.5 * var(--tap-fs)); margin-bottom:16px; animation:tapBounce .6s var(--ease-spring);}
@keyframes tapBounce{ 0%{transform:scale(0)} 60%{transform:scale(1.2)} 100%{transform:scale(1)} }
.tap-success h2{font-size:calc(1.5 * var(--tap-fs)); margin-bottom:8px; color:var(--tap-ink);}
.tap-success-id{display:inline-block; background:var(--tap-purple-pale); color:var(--tap-purple);
border-radius:var(--tap-r-sm); padding:8px 18px; font-family:monospace;
font-size:calc(0.875 * var(--tap-fs)); font-weight:800; letter-spacing:.06em; margin:12px 0;}
.tap-success-actions{display:flex; flex-direction:column; gap:10px; margin-top:20px;}
.tap-pandit-card{display:flex; gap:12px; align-items:center; background:#fff; border-radius:var(--tap-r-lg); padding:14px; border:1px solid var(--tap-line); margin-bottom:0}
.tap-pandit-avatar{border:3px solid var(--tap-marigold); width:52px; height:52px; border-radius:50%; background:var(--grad-sacred); display:flex; align-items:center; justify-content:center; font-size:calc(1.25 * var(--tap-fs)); flex-shrink:0; object-fit:cover}
.tap-pandit-name{color:var(--tap-ink); margin-bottom:2px; font-weight:800; font-size:calc(0.9375 * var(--tap-fs))}
.tap-pandit-exp{margin-bottom:6px; font-size:calc(0.75 * var(--tap-fs)); color:var(--tap-muted); margin-top:2px}
.tap-pandit-tags{display:flex; flex-wrap:wrap; gap:4px; margin-top:6px}
.tap-pandit-tag{border:1px solid var(--tap-line); background:var(--tap-purple-pale); color:var(--tap-purple); border-radius:var(--tap-r-3xl); padding:2px 8px; font-size:calc(0.6875 * var(--tap-fs)); font-weight:700}
.tap-qty{display:flex; align-items:center; gap:0; border:2px solid var(--tap-line); border-radius:var(--tap-r-md); overflow:hidden; display:inline-flex;}
.tap-qty button{width:40px; height:40px; border:none; background:var(--tap-purple-pale); color:var(--tap-purple); font-size:calc(1.25 * var(--tap-fs)); font-weight:900; cursor:pointer; transition:background var(--dur-fast)}
.tap-qty button:hover{background:var(--tap-purple); color:var(--tap-primary-text,#000);}
.tap-qty input{width:48px; text-align:center; border:none; border-left:2px solid var(--tap-line); border-right:2px solid var(--tap-line); font-size:calc(1 * var(--tap-fs)); font-weight:800; background:#fff; padding:0; height:40px;}
.tap-search{position:relative; margin-bottom:12px;}
.tap-search input{width:100%; padding:14px 16px 14px 44px;
border:2px solid var(--tap-line); border-radius:var(--tap-r-lg);
font-size:calc(0.9375 * var(--tap-fs)); background:#fff; outline:none;
transition:border-color var(--dur-std), box-shadow var(--dur-std);}
.tap-search input:focus{border-color:var(--tap-purple); box-shadow:var(--tap-glow);}
.tap-search-icon{position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:calc(1.125 * var(--tap-fs)); pointer-events:none;}
.tap-search-suggestions{margin-top:14px; justify-content:center; display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.tap-search-sug{display:inline-block; text-decoration:none; background:#fff; border:1.5px solid var(--tap-line); border-radius:var(--tap-r-3xl); padding:6px 12px; font-size:calc(0.75 * var(--tap-fs)); font-weight:700; cursor:pointer; color:var(--tap-purple); transition:all var(--dur-fast)}
.tap-search-sug:hover{background:var(--tap-purple); color:var(--tap-primary-text,#000); border-color:var(--tap-purple)}
.tap-ptabs{border-bottom:2px solid var(--tap-line); display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; margin-bottom:16px; scrollbar-width:none}
.tap-ptabs::-webkit-scrollbar{display:none}
.tap-ptab{font:inherit; border-bottom:2px solid transparent; margin-bottom:-2px; flex-shrink:0; padding:7px 16px; border-radius:var(--tap-r-3xl); border:2px solid var(--tap-line); background:#fff; font-size:calc(0.8125 * var(--tap-fs)); font-weight:700; cursor:pointer; color:var(--tap-muted); transition:all var(--dur-fast); white-space:nowrap}
.tap-ptab.active{border-bottom-color:var(--tap-purple); background:var(--tap-purple); color:var(--tap-primary-text,#000); border-color:var(--tap-purple)}
@keyframes tapPulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.7;transform:scale(1.1)} }
@keyframes tapViewIn{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
@keyframes tapReveal{ from{opacity:0;transform:scale(.97)} to{opacity:1;transform:none} }
.tap-reveal{opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease-out),transform .6s var(--ease-out); animation:tapReveal .3s var(--ease-spring) both}
.tap-reveal:nth-child(2){animation-delay:.05s}
.tap-reveal:nth-child(3){animation-delay:.10s}
.tap-reveal:nth-child(4){animation-delay:.15s}
/* v6.9.15: dropped overflow:hidden β it clipped labels on any width-constrained
button (e.g. the "Add" pill in Enhance Your Puja). The only thing that needed
it was the ::before press overlay, which now clips itself via border-radius. */
.tap-ripple{position:absolute;border-radius:50%;
background:rgba(255,255,255,.4);
transform:scale(0);animation:tapRipple .5s linear;
pointer-events:none;}
@keyframes tapRipple{to{transform:scale(4);opacity:0}}
.tap-tier-card:focus-visible, .tap-slot:focus-visible, .tap-addon-card:focus-visible{outline:3px solid var(--tap-purple); outline-offset:2px;}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important; transition-duration:.01ms !important;}}
@media(max-width:767.98px){.tap-section h2{font-size:calc(0.9375 * var(--tap-fs));}
.tap-tiers{grid-template-columns:1fr;}
.tap-tier-card{flex-direction:row; align-items:center; padding:12px;}
.tap-tier-head{flex:1;}
.tap-tier-price-block{margin-left:auto; text-align:right;}
.tap-tier-badge{font-size:calc(0.5625 * var(--tap-fs));}
.tap-sticky-total{font-size:calc(1.25 * var(--tap-fs));}}
@media(min-width:768px){.tap-tiers{grid-template-columns:repeat(3,1fr);}
.tap-addons-grid{grid-template-columns:repeat(3,1fr);}
.tap-sticky{max-width:480px; left:50%; right:auto; transform:translateX(-50%); border-radius:var(--tap-radius) var(--tap-radius) 0 0;}}
.tap-verified-badge{border:1px solid #b8e6c8; letter-spacing:.03em; display:inline-flex; align-items:center; gap:4px; background:var(--tap-ok-pale); color:var(--tap-ok); border-radius:var(--tap-r-3xl); padding:3px 10px; font-size:calc(0.6875 * var(--tap-fs)); font-weight:800}
.tap-trust-card{box-shadow:var(--tap-shadow); margin-bottom:16px; background:var(--tap-gold-light); border-radius:var(--tap-r-lg); padding:14px; border:1px solid rgba(249,144,0,.25)}
.tap-trust-signals{margin:12px 0; list-style:none; display:flex; flex-direction:column; gap:6px; font-size:calc(0.8125 * var(--tap-fs)); margin-top:10px}
.tap-trust-signals li{font-size:calc(0.8125 * var(--tap-fs)); padding:5px 0; border-bottom:1px solid var(--tap-line); display:flex; align-items:center; gap:8px; color:var(--tap-muted)}
.tap-tabs{scrollbar-width:none; display:flex; gap:0; border-bottom:2px solid var(--tap-line); margin-bottom:20px; overflow-x:auto}
.tap-tab{padding:10px 20px; border:none; background:none; font:inherit; font-size:calc(0.875 * var(--tap-fs)); font-weight:700; color:var(--tap-muted); cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; white-space:nowrap; transition:all var(--dur-fast)}
.tap-tab.active{color:var(--tap-purple); border-bottom-color:var(--tap-purple)}
.tap-status-badge{display:inline-block; border-radius:var(--tap-r-3xl);
padding:3px 10px; font-size:calc(0.6875 * var(--tap-fs)); font-weight:800;}
.tap-desc{font-size:calc(0.9375 * var(--tap-fs)); line-height:1.8; color:var(--tap-ink);}
.tap-desc h2, .tap-desc h3{margin:16px 0 8px;}
.tap-desc ul{padding-left:18px;}
.tap-desc li{padding:3px 0;}
.tap-tag{background:var(--tap-purple-pale); color:var(--tap-purple);
border-radius:var(--tap-r-3xl); padding:2px 8px; font-size:calc(0.6875 * var(--tap-fs));
font-weight:700; display:inline-block;}
.tap-tag-gold{background:var(--tap-gold-light); color:var(--tap-chocolate);
border-radius:var(--tap-r-3xl); padding:2px 8px; font-size:calc(0.6875 * var(--tap-fs)); font-weight:700;}
.tap-stars{color:var(--tap-marigold); font-size:calc(0.875 * var(--tap-fs)); letter-spacing:1px}
.tap-detail-hero{aspect-ratio:21/9; min-height:240px; margin-bottom:20px; position:relative; border-radius:var(--tap-radius); overflow:hidden; background:var(--grad-sacred); display:flex; flex-direction:column; justify-content:flex-end; padding:24px}
@media(max-width:767.98px){.tap-detail-hero{min-height:200px; aspect-ratio:16/9;}}
.tap-detail-hero-overlay{position:absolute; inset:0; background:linear-gradient(0deg,rgba(30,10,46,.85) 0%,rgba(30,10,46,.1) 70%)}
.tap-detail-hero-info{bottom:20px; left:20px; right:20px; color:#fff; position:relative; z-index:1}
.tap-detail-hero img, .tap-detail-hero video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.85;}
.tap-detail-layout{align-items:start; display:grid; grid-template-columns:1fr; gap:20px; margin-top:20px}
@media(min-width:1024px){.tap-detail-layout{grid-template-columns:1fr 360px;}}
.tap-sticky-box{position:sticky; top:80px; align-self:start}
.tap-price-from{font-size:calc(1.75 * var(--tap-fs)); font-weight:900; color:var(--tap-purple); font-family:var(--tap-font-heading)}
.tap-root :focus-visible, .tap-slot:focus-visible, .tap-btn:focus-visible, .tap-addon-card:focus-visible, .tap-tier:focus-visible, .tap-chip:focus-visible, .tap-dtab:focus-visible, .tap-bnav-item:focus-visible{outline: 3px solid var(--tap-purple);
outline-offset: 2px;
border-radius: var(--tap-r-xs, 6px);}
.tap-slot[aria-disabled="true"]{cursor: not-allowed;
opacity: .55;}
.tap-slot[aria-pressed="true"]{border-color: var(--tap-purple);
box-shadow: 0 0 0 2px rgba(97, 9, 190, .25);}
@media (prefers-reduced-motion: reduce){.tap-root *, .tap-root *::before, .tap-root *::after{animation-duration: .001ms !important;
transition-duration: .001ms !important;}}
.tap-delivery-chips{display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 10px;}
.tap-delivery-chip{border: 1.5px solid #e7d9f5; background: #fff; color: #3a2a4a;
border-radius: var(--tap-r-sm); padding: 10px 8px; font-size:calc(0.8125 * var(--tap-fs)); font-weight: 600;
cursor: pointer; transition: border-color .12s ease, background .12s ease;}
.tap-delivery-chip:hover{border-color: #b98be6;}
.tap-delivery-chip.is-on{border-color: var(--tap-purple); background: #f3e9fd; color: var(--tap-purple-deep);}
.tap-delivery-chip:focus-visible{outline: 3px solid var(--tap-purple); outline-offset: 2px;}
.tap-gotra-help{display: inline-block; margin: -4px 0 8px; padding: 0;
background: none; border: none; cursor: pointer;
color: var(--tap-purple); font-size:calc(0.7813 * var(--tap-fs)); font-weight: 600; text-decoration: underline;}
.tap-gotra-help:hover{color: var(--tap-purple-deep);}
@media (prefers-reduced-motion: reduce){.tap-delivery-chip{transition: none;}}
.tap-sec-head2{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:26px 0 14px}
.tap-sec-eyebrow{font-size:calc(0.6875 * var(--tap-fs));font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tap-marigold);margin-bottom:3px}
.tap-sec-title{font-family:var(--tap-font-heading);font-size:clamp(19px,3vw,24px);font-weight:600;color:var(--tap-ink);margin:0;line-height:1.3}
.tap-sec-action{font-size:calc(0.8125 * var(--tap-fs));font-weight:700;color:var(--tap-purple);text-decoration:none;white-space:nowrap;padding-bottom:2px}
.tap-sec-action:hover{color:var(--tap-ink-accent)}
.tap-hscroll-snap{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tap-hscroll-snap::-webkit-scrollbar{display:none}
.tap-hscroll-snap>*{scroll-snap-align:start;flex-shrink:0}
.tap-mkb{margin:18px 0 4px}
.tap-mkb-item{position:relative;display:flex;flex-direction:column;justify-content:center;min-width:88%;aspect-ratio:3/1;border-radius:var(--tap-r-4xl);overflow:hidden;padding:0 20px;text-decoration:none;color:#fff}
@media(min-width:768px){.tap-mkb-item{min-width:560px}}
.tap-mkb-glyph{position:absolute;right:-8px;bottom:-18px;font-size:calc(5.5 * var(--tap-fs));opacity:.16;line-height:1;pointer-events:none}
.tap-mkb-body{position:relative;display:flex;flex-direction:column;align-items:flex-start;max-width:82%}
.tap-mkb-tag{font-size:calc(0.6563 * var(--tap-fs));font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:4px}
.tap-mkb-title{font-family:var(--tap-font-heading);font-size:clamp(16px,4vw,20px);font-weight:700;line-height:1.15;margin-bottom:9px;text-shadow:0 1px 6px rgba(0,0,0,.18)}
.tap-mkb-cta{display:inline-flex;align-items:center;gap:5px;background:#fff;font-size:calc(0.75 * var(--tap-fs));font-weight:700;padding:6px 14px;border-radius:var(--tap-r-full)}
.tap-resume-slot:empty{display:none}
.tap-resume-card{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid #EDE6DA;border-left:3px solid var(--tap-marigold);border-radius:var(--tap-r-xl);padding:14px 16px;margin:16px 0 4px;box-shadow:0 2px 12px rgba(66,7,127,.06);cursor:pointer;text-decoration:none}
.tap-resume-ic{width:44px;height:44px;border-radius:var(--tap-r-md);background:#FFF1DC;display:grid;place-items:center;font-size:calc(1.25 * var(--tap-fs));flex-shrink:0}
.tap-resume-mid{flex:1;min-width:0}
.tap-resume-ey{font-size:calc(0.7188 * var(--tap-fs));font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tap-marigold)}
.tap-resume-name{font-size:calc(0.9063 * var(--tap-fs));font-weight:700;color:var(--tap-ink);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tap-resume-meta{font-size:calc(0.7813 * var(--tap-fs));color:var(--tap-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tap-resume-go{font-size:calc(0.7813 * var(--tap-fs));font-weight:700;color:var(--tap-purple);flex-shrink:0}
.tap-fav-rail{margin:0 0 6px}
.tap-fav-card{position:relative;width:210px;background:#fff;border:1px solid #EDE6DA;border-radius:var(--tap-r-xl);overflow:hidden;box-shadow:0 2px 12px rgba(66,7,127,.06);text-decoration:none;display:block}
.tap-fav-art{height:104px;display:grid;place-items:center;background-size:cover;background-position:center;font-size:calc(2.125 * var(--tap-fs));color:#fff}
.tap-fav-kind{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.32);color:#fff;font-size:calc(0.625 * var(--tap-fs));font-weight:700;padding:3px 9px;border-radius:var(--tap-r-full)}
.tap-fav-un{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:var(--tap-r-full);background:rgba(255,255,255,.95);border:none;display:grid;place-items:center;box-shadow:0 2px 12px rgba(66,7,127,.10);cursor:pointer;font-size:calc(1 * var(--tap-fs));color:var(--tap-marigold);line-height:1}
.tap-fav-body{padding:12px}
.tap-fav-name{font-family:var(--tap-font-heading);font-size:calc(0.9063 * var(--tap-fs));font-weight:600;color:var(--tap-ink);line-height:1.2;display:block}
.tap-fav-temple{font-size:calc(0.7188 * var(--tap-fs));color:var(--tap-muted);margin-top:4px;display:block}
.tap-fav-price{font-family:var(--tap-font-heading);font-size:calc(0.9375 * var(--tap-fs));font-weight:700;color:var(--tap-purple);margin-top:8px;display:block}
.tap-hl-tile{position:relative;display:flex;align-items:flex-end;height:128px;border-radius:var(--tap-r-4xl);overflow:hidden;background:linear-gradient(135deg,var(--tap-marigold),#D4A017);padding:16px 18px;margin:22px 0 4px;text-decoration:none}
.tap-hl-glyph{position:absolute;right:6px;top:6px;font-size:calc(4 * var(--tap-fs));opacity:.22;line-height:1}
.tap-hl-label{position:relative;font-family:var(--tap-font-heading);font-size:clamp(15px,3.6vw,18px);font-weight:600;color:#fff;line-height:1.25;text-shadow:0 1px 6px rgba(0,0,0,.16);max-width:86%}
.tap-hl-vip{display:block;background:#fff;border:1px solid #EDE6DA;border-radius:var(--tap-r-xl);overflow:hidden;box-shadow:0 2px 12px rgba(66,7,127,.06);margin:0 0 10px;text-decoration:none}
/* v7.5.30: same fix as the hero. The gold second stop is kept deliberately β
VIP is a tier badge and gold is what signals it β but the base is now the
operator's brand rather than a hardcoded purple. */
.tap-hl-vip-art{display:grid;place-items:center;height:112px;background:linear-gradient(135deg,color-mix(in srgb,var(--tap-purple) 58%,#000),var(--tap-gold,#FF7900))}
.tap-hl-vip-glyph{font-size:calc(2.375 * var(--tap-fs))}
.tap-hl-vip-body{display:block;padding:14px 16px}
.tap-hl-vip-pill{display:inline-flex;align-items:center;gap:5px;background:var(--tap-bg);color:var(--tap-purple);font-size:calc(0.6875 * var(--tap-fs));font-weight:700;padding:3px 10px;border-radius:var(--tap-r-full);margin-bottom:8px;letter-spacing:.02em}
.tap-hl-vip-title{display:block;font-family:var(--tap-font-heading);font-size:calc(1.0625 * var(--tap-fs));font-weight:600;color:var(--tap-ink);line-height:1.25}
.tap-hl-vip-sub{display:block;font-size:calc(0.7813 * var(--tap-fs));color:var(--tap-muted);margin-top:4px}
.tap-trust3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0 6px}
.tap-trust3-item{text-align:center;background:#fff;border:1px solid #EDE6DA;border-radius:var(--tap-r-xl);padding:16px 8px}
.tap-trust3-num{font-family:var(--tap-font-heading);font-size:calc(1.375 * var(--tap-fs));font-weight:700;color:var(--tap-purple);line-height:1.1}
.tap-trust3-label{font-size:calc(0.7188 * var(--tap-fs));color:var(--tap-muted);margin-top:3px}
.tap-testi2-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:768px){.tap-testi2-grid{grid-template-columns:1fr 1fr}}
.tap-testi2{background:#fff;border:1px solid #EDE6DA;border-radius:var(--tap-r-xl);padding:16px;box-shadow:0 2px 12px rgba(66,7,127,.06)}
.tap-testi2-stars{color:var(--tap-marigold);font-size:calc(0.875 * var(--tap-fs));letter-spacing:2px;margin-bottom:8px}
.tap-testi2-quote{font-family:var(--tap-font-heading);font-size:calc(0.9375 * var(--tap-fs));font-style:italic;color:var(--tap-ink);margin:0 0 10px;line-height:1.5}
.tap-testi2-by{font-size:calc(0.7813 * var(--tap-fs));font-weight:600;color:var(--tap-muted)}
.tap-admin-note{display:flex;align-items:flex-start;gap:10px;background:var(--tap-bg);border-radius:var(--tap-r-4xl);padding:14px 16px;margin-top:18px;font-size:calc(0.75 * var(--tap-fs));color:var(--tap-muted);line-height:1.45}
.tap-admin-note strong{font-size:calc(0.8125 * var(--tap-fs));font-weight:700;color:var(--tap-ink-accent)}
.tap-admin-note-ic{width:34px;height:34px;border-radius:var(--tap-r-sm);background:#fff;display:grid;place-items:center;flex-shrink:0;color:var(--tap-purple);font-size:calc(1 * var(--tap-fs))}
/* ============================================================
v4.9.27 β Brand bar + JSX compact hero (replaces legacy hero-v2)
============================================================ */
.tap-brandbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0 12px}
.tap-brandbar-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.tap-brandbar-logo{height:34px;max-width:180px;width:auto;object-fit:contain;display:block}
.tap-brandbar-om{font-size:calc(1.375 * var(--tap-fs));color:var(--tap-purple);line-height:1}
.tap-brandbar-name{font-family:var(--tap-font-heading);font-size:calc(1.1875 * var(--tap-fs));font-weight:700;color:var(--tap-ink);letter-spacing:-.01em}
.tap-brandbar-eyebrow{font-size:calc(0.6875 * var(--tap-fs));font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tap-marigold-deep);white-space:nowrap}
@media (max-width:400px){.tap-brandbar-eyebrow{display:none}}
/* v7.5.30 β the home hero is the largest brand surface in the product, and two
of its three gradient stops were hardcoded purples (var(--tap-purple-deep), var(--tap-purple)) left
over from when DIVSA's own brand was purple. Only the middle stop honoured
--tap-purple, so on this tenant (#e24e12 orange) the hero rendered
purple β orange β violet: the operator's colour appeared as a band in the
middle of somebody else's palette, on the first screen a devotee sees. Same
white-label breach as the gold "Pay" button and the nav FAB.
All three stops are now derived from the operator's colour, so the ramp keeps
its depth (dark top-left β brand β lighter bottom-right) in any brand hue. */
.tap-hero-compact{position:relative;overflow:hidden;border-radius:var(--tap-radius-xl);background:linear-gradient(150deg,color-mix(in srgb,var(--tap-purple) 58%,#000) 0%,var(--tap-purple) 55%,color-mix(in srgb,var(--tap-purple) 82%,#fff) 100%);padding:22px 20px 24px;margin:0 0 20px}
.tap-hero-compact-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center;opacity:.9}
.tap-hero-compact.has-media::before{content:"";position:absolute;inset:0;background:linear-gradient(150deg,rgba(66,7,127,.78),rgba(97,9,190,.55));z-index:1}
.tap-hero-compact-glyph{position:absolute;right:-24px;top:-18px;font-size:calc(7.5 * var(--tap-fs));color:#fff;opacity:.12;line-height:1;pointer-events:none;z-index:1}
.tap-hero-compact-body{position:relative;z-index:2}
.tap-hero-compact-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);border-radius:var(--tap-r-full);padding:5px 12px;font-size:calc(0.75 * var(--tap-fs));font-weight:600;color:#fff;margin-bottom:14px}
.tap-root .tap-hero-compact-title{font-family:var(--tap-font-heading);font-size:clamp(24px,5.5vw,30px);font-weight:600;color:#fff;line-height:1.18;margin:0 0 8px}
.tap-hero-compact-sub{font-size:calc(0.875 * var(--tap-fs));color:rgba(255,255,255,.86);line-height:1.5;margin:0 0 18px;max-width:520px}
.tap-hero-compact-search{display:flex;align-items:center;gap:10px;background:#fff;padding:6px 6px 6px 16px;border-radius:var(--tap-r-full);box-shadow:0 6px 18px rgba(0,0,0,.14);max-width:560px}
.tap-hero-compact-search span{font-size:calc(1.0625 * var(--tap-fs))}
.tap-hero-compact-search input{flex:1;border:none;outline:none;font:inherit;font-size:calc(0.875 * var(--tap-fs));color:var(--tap-ink);background:transparent;min-width:0;min-height:40px}
.tap-hero-compact-search input::placeholder{color:var(--tap-muted)}
.tap-hero-compact-search button{flex-shrink:0;background:var(--tap-marigold);color:var(--tap-gold-dark);border:none;border-radius:var(--tap-r-full);padding:10px 20px;font:inherit;font-size:calc(0.875 * var(--tap-fs));font-weight:800;cursor:pointer;min-height:40px}
.tap-hero-compact-search button:hover{filter:brightness(1.05)}
@media (min-width:768px){.tap-hero-compact{padding:34px 32px 36px}}
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
v4.9.33 β Demo parity additions
Splash Β· Onboarding Β· Wishlist tab Β· Notifications tab
Tokens follow the JSX demo: Cosmic Violet var(--tap-purple) / deep var(--tap-purple-deep),
Saffron var(--tap-marigold), ivory ground #FBF7F0, Fraunces heads / Jakarta body.
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
html.tap-noscroll, html.tap-noscroll body { overflow: hidden; }
/* ---- Splash (2s brand intro) ---- */
.tap-splash {
position: fixed; inset: 0; z-index: var(--tap-layer-fullscreen);
display: grid; place-items: center;
/* v7.5.35 β the outer stop was a hardcoded var(--tap-purple-deep), so the splash faded from
the operator's brand into a fixed deep purple. Because the stop lands at
70%, that purple covered most of the screen: the FIRST thing a devotee
ever sees was predominantly a colour belonging to no tenant. Same breach
as the home hero, the bottom-nav FAB and the card-art palette; this was
the last one. Both stops are now derived from the brand, so the vignette
keeps its depth in any palette. */
background: radial-gradient(circle at 50% 40%, var(--tap-purple), color-mix(in srgb, var(--tap-purple) 42%, #000) 70%);
opacity: 1; transition: opacity .32s ease;
}
.tap-splash.is-out { opacity: 0; pointer-events: none; }
.tap-splash-inner { text-align: center; animation: tapSplashFade .6s ease; }
.tap-splash-logo {
width: 92px; height: 92px; margin: 0 auto 18px; border-radius: var(--tap-r-5xl);
background: rgba(255,255,255,.14); display: grid; place-items: center;
font-size:calc(2.875 * var(--tap-fs)); animation: tapSplashGlow 2s infinite ease-in-out;
}
.tap-splash-brand { font-family:var(--tap-font-heading); font-size:calc(1.875 * var(--tap-fs)); font-weight: 700; color: #fff; letter-spacing: -.01em; }
.tap-splash-tag { font-family:var(--tap-font-body); font-size:calc(0.8438 * var(--tap-fs)); color: rgba(255,255,255,.78); margin-top: 6px; }
@keyframes tapSplashFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tapSplashGlow { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.06); opacity: 1; } }
/* ---- Onboarding (one-time welcome) ---- */
.tap-onboard {
position: fixed; inset: 0; z-index: var(--tap-layer-fullscreen); background: #fbf7f0;
display: flex; flex-direction: column; overflow-y: auto;
opacity: 1; transition: opacity .28s ease;
}
.tap-onboard.is-out { opacity: 0; pointer-events: none; }
.tap-ob-hero { padding: 26px 22px 24px; background: linear-gradient(160deg, #f6e9cf, #ebd9b4); }
.tap-ob-brand { font-family:var(--tap-font-heading); font-size:calc(1.125 * var(--tap-fs)); font-weight: 700; color: var(--tap-purple); margin-bottom: 16px; }
.tap-ob-brand span { display: block; font-family:var(--tap-font-body); font-size:calc(0.5938 * var(--tap-fs)); font-weight: 600; color: var(--tap-gold,#FF7900); letter-spacing: .12em; }
.tap-ob-hero h1 { font-family:var(--tap-font-heading); font-size:calc(1.625 * var(--tap-fs)); font-weight: 700; color: var(--tap-ink); margin: 0 0 8px; line-height: 1.2; }
.tap-ob-hero h1 em { font-style: normal; color: var(--tap-marigold); }
.tap-ob-hero p { font-family:var(--tap-font-body); font-size:calc(0.8125 * var(--tap-fs)); color: var(--tap-muted); margin: 0; line-height: 1.5; max-width: 320px; }
.tap-ob-body { flex: 1; padding: 20px 20px 28px; max-width: 480px; margin: 0 auto; width: 100%; }
.tap-ob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.tap-ob-card {
background: #fff; border: 1px solid #ede6da; border-radius: var(--tap-r-4xl);
padding: 18px 12px; text-align: center; cursor: pointer;
box-shadow: 0 2px 12px rgba(66,7,127,.06); transition: transform .15s ease, box-shadow .15s ease;
}
.tap-ob-card:hover, .tap-ob-card:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(66,7,127,.12); }
.tap-ob-card-ic {
display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 12px;
border-radius: var(--tap-r-full); font-size:calc(1.625 * var(--tap-fs)); color: #fff;
}
/* v7.5.36 β the four onboarding icon circles were a hardcoded palette:
green #1ba87e, rose #e86a8e and a violet var(--tap-purple), measured at hues 162, 343
and 273 against a brand hue of 17. Three of the four service tiles on the
FIRST screen were therefore in colours belonging to no tenant. They stay
four visually distinct tiles \u2014 that is the point of them \u2014 but the family is
now derived from the brand and the gold accent, exactly like the home card
art, so it travels with whatever colour the operator picks. */
.tap-ob-card-ic.saffron { background: linear-gradient(140deg, var(--tap-gold), color-mix(in srgb,var(--tap-gold) 62%,#000)); box-shadow: 0 6px 16px rgba(249,144,0,.28); }
.tap-ob-card-ic.green { background: linear-gradient(140deg, color-mix(in srgb,var(--tap-purple) 78%,#fff), var(--tap-purple)); box-shadow: 0 6px 16px rgba(27,168,126,.28); }
.tap-ob-card-ic.violet { background: linear-gradient(140deg, var(--tap-purple), color-mix(in srgb,var(--tap-purple) 55%,#000)); box-shadow: 0 6px 16px rgba(97,9,190,.28); }
.tap-ob-card-ic.rose { background: linear-gradient(140deg, color-mix(in srgb,var(--tap-gold) 55%,var(--tap-purple)), color-mix(in srgb,var(--tap-purple) 70%,#000)); box-shadow: 0 6px 16px rgba(232,106,142,.28); }
.tap-ob-card-lb { display: block; font-family:var(--tap-font-heading); font-size:calc(1 * var(--tap-fs)); font-weight: 700; color: var(--tap-ink); }
.tap-ob-card-ds { display: block; font-family:var(--tap-font-body); font-size:calc(0.7813 * var(--tap-fs)); color: var(--tap-muted); margin-top: 3px; line-height: 1.35; min-height: 30px; }
.tap-ob-inner-circle {
border: none; font: inherit; text-align: left; cursor: pointer; width: 100%;
display: flex; gap: 12px; align-items: flex-start;
background: linear-gradient(120deg, color-mix(in srgb,var(--tap-purple) 52%,#000), var(--tap-purple)); /* v7.5.36: was a hardcoded var(--tap-purple-deep) */
border-radius: var(--tap-r-4xl); padding: 16px 18px; margin-bottom: 18px;
}
.tap-ob-ic-star { width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--tap-r-full); background: rgba(255,255,255,.16); display: grid; place-items: center; }
.tap-ob-inner-circle strong { display: block; font-family:var(--tap-font-heading); font-size:calc(0.9375 * var(--tap-fs)); color: var(--tap-gold,#FF7900); }
.tap-ob-inner-circle span { display: block; font-family:var(--tap-font-body); font-size:calc(0.7188 * var(--tap-fs)); color: rgba(255,255,255,.82); margin-top: 2px; line-height: 1.4; }
.tap-ob-cta {
display: block; width: 100%; padding: 14px; border: none; cursor: pointer;
background: var(--tap-purple); color: #fff; border-radius: var(--tap-r-full);
font-family:var(--tap-font-body); font-size:calc(0.9063 * var(--tap-fs)); font-weight: 700;
box-shadow: 0 8px 20px rgba(97,9,190,.24);
}
.tap-ob-cta:hover { background: var(--tap-purple-deep); }
/* ---- Wishlist tab ---- */
.tap-wl-grid { display: grid; gap: 14px; }
.tap-wl-card {
display: flex; background: #fff; border: 1px solid #ede6da; border-radius: var(--tap-r-xl);
overflow: hidden; box-shadow: 0 2px 12px rgba(66,7,127,.06);
}
.tap-wl-art { width: 96px; flex-shrink: 0; position: relative; }
.tap-wl-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tap-wl-art-grad { display: grid; place-items: center; font-size:calc(1.875 * var(--tap-fs)); background: linear-gradient(140deg, var(--tap-purple), #9d4edd); min-height: 96px; }
.tap-wl-body { flex: 1; padding: 13px 14px; }
.tap-wl-kind { display: inline-block; font-size:calc(0.625 * var(--tap-fs)); font-weight: 700; color: var(--tap-purple); background: var(--tap-bg); padding: 2px 8px; border-radius: var(--tap-r-full); }
.tap-wl-name { font-family:var(--tap-font-heading); font-size:calc(0.9688 * var(--tap-fs)); font-weight: 600; color: var(--tap-ink); margin-top: 7px; line-height: 1.2; }
.tap-wl-temple { font-size:calc(0.75 * var(--tap-fs)); color: var(--tap-muted); margin-top: 3px; }
.tap-wl-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.tap-wl-price { font-family:var(--tap-font-heading); font-size:calc(1 * var(--tap-fs)); font-weight: 700; color: var(--tap-purple); }
.tap-wl-rm { background: none; border: none; padding: 2px 4px; cursor: pointer; font-size:calc(1.125 * var(--tap-fs)); color: var(--tap-marigold); line-height: 1; }
/* ---- Notifications tab ---- */
.tap-notif-list { display: grid; gap: 12px; }
.tap-notif-card {
display: flex; gap: 12px; background: #fff; border: 1px solid #ede6da;
border-radius: var(--tap-r-xl); padding: 14px; box-shadow: 0 2px 12px rgba(66,7,127,.06);
}
.tap-notif-card.tap-tapable { cursor: pointer; }
.tap-notif-card.tap-tapable:hover { box-shadow: 0 8px 28px rgba(66,7,127,.12); }
.tap-notif-ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px; background: var(--tap-bg); display: grid; place-items: center; font-size:calc(1.125 * var(--tap-fs)); }
.tap-notif-body { flex: 1; min-width: 0; }
.tap-notif-title { font-size:calc(0.875 * var(--tap-fs)); font-weight: 700; color: var(--tap-ink); }
.tap-notif-txt { font-size:calc(0.7813 * var(--tap-fs)); color: var(--tap-muted); margin-top: 2px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tap-notif-time { font-size:calc(0.7188 * var(--tap-fs)); color: var(--tap-muted); margin-top: 5px; }
/* ββββββββββ v6.9.10 β QA round 3 ββββββββββ */
/* Alerts (QA #4): dismissible cards + unread accent. */
.tap-notif-card { position: relative; }
.tap-notif-card.is-unread { border-color: var(--tap-purple); background: linear-gradient(0deg, rgba(97,9,190,.03), rgba(97,9,190,.03)), #fff; }
.tap-notif-card.is-unread::before { content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--tap-purple); }
.tap-notif-x { position: absolute; top: 8px; right: 10px; background: none; border: none; font-size:calc(1.0625 * var(--tap-fs)); line-height: 1; color: #c9bfd6; cursor: pointer; padding: 4px; transition: color var(--dur-fast, .15s); }
.tap-notif-x:hover { color: var(--tap-err, var(--tap-err)); }
.tap-notif-card .tap-notif-body { padding-right: 18px; }
/* Booking page (QA #5): active concern chip. */
.tap-search-sug.is-on { background: var(--tap-purple); color: #fff; border-color: var(--tap-purple); }
/* Support tab (QA #1): two-channel helpdesk. */
.tap-sup-hero { display: flex; gap: 14px; align-items: center; background: var(--tap-purple-pale, var(--tap-purple-pale)); border-radius: var(--tap-radius, 16px); padding: 16px 18px; margin-bottom: 14px; }
.tap-sup-hero-ic { width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--tap-r-lg); background: #fff; display: grid; place-items: center; font-size:calc(1.5 * var(--tap-fs)); box-shadow: 0 2px 10px rgba(66,7,127,.10); }
.tap-sup-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 14px; }
/* v6.9.15: Support channel cards polished β icon chip, arrow affordance, lift. */
.tap-sup-chan { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; text-align: left; background: #fff; border: 1.5px solid var(--tap-line); border-radius: var(--tap-r-2xl); padding: 16px 46px 16px 16px; cursor: pointer; font: inherit; transition: transform var(--dur-fast, .15s), border-color var(--dur-fast, .15s), box-shadow var(--dur-fast, .15s); }
.tap-sup-chan:hover { transform: translateY(-2px); border-color: var(--tap-purple); box-shadow: 0 8px 24px rgba(97,9,190,.14); }
.tap-sup-chan.is-on { border-color: var(--tap-purple); background: var(--tap-purple-pale, var(--tap-purple-pale)); }
.tap-sup-chan::after { content: "β"; position: absolute; right: 15px; top: 16px; color: var(--tap-purple); font-weight: 800; font-size:calc(1 * var(--tap-fs)); opacity: .5; transition: transform var(--dur-fast, .15s), opacity var(--dur-fast, .15s); }
.tap-sup-chan:hover::after { transform: translateX(3px); opacity: 1; }
.tap-sup-chan-ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: 13px; background: var(--tap-purple-pale, var(--tap-purple-pale)); display: grid; place-items: center; font-size:calc(1.3125 * var(--tap-fs)); }
.tap-sup-chan-t { font-weight: 800; font-size:calc(0.9375 * var(--tap-fs)); color: var(--tap-ink); }
.tap-sup-chan-s { font-size:calc(0.7813 * var(--tap-fs)); color: var(--tap-muted); line-height: 1.4; }
/* v6.9.13 (#Support): Help Center + FAQ accordion, and a readable centred column
on desktop so the Support tab stops stretching the full width. --tap-support-maxw
is admin-overridable business logic; 720px reads well on a laptop. */
.tap-sup-help { margin-top: 22px; }
.tap-sup-help-h { margin: 0 0 4px; font-size:calc(1.125 * var(--tap-fs)); color: var(--tap-chocolate); }
.tap-sup-faq-h { font-weight: 800; font-size:calc(0.875 * var(--tap-fs)); color: var(--tap-ink); margin: 10px 0 8px; }
@media (min-width: 1024px) {
:root { --tap-support-maxw: 720px; }
.tap-sup-hero, .tap-sup-channels, .tap-ticket-new, .tap-sup-help,
.tap-dash-content .tap-empty { max-width: var(--tap-support-maxw, 720px); margin-left: auto; margin-right: auto; }
}
/* Family tab (QA #3): structured member cards. 180px columns forced every
name to wrap and stacked the action buttons β the card needs room for a
name line plus two side-by-side actions. */
.tap-family-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.tap-family-actions .tap-btn { padding: 7px 13px; font-size:calc(0.7813 * var(--tap-fs)); }
.tap-family-top { display: flex; gap: 12px; align-items: flex-start; }
.tap-family-avatar { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; background: var(--tap-purple-pale, var(--tap-purple-pale)); color: var(--tap-purple); display: grid; place-items: center; font-weight: 800; font-size:calc(1.0625 * var(--tap-fs)); font-family:var(--tap-font-heading); }
.tap-family-card.primary .tap-family-avatar { background: #fff4e0; color: var(--tap-marigold); }
.tap-family-id { flex: 1; min-width: 0; }
.tap-family-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--tap-line); }
.tap-family-card { padding-right: 34px; }
.tap-fam-addrow { display: grid; grid-template-columns: 1.3fr 1fr 1fr 32px; gap: 8px; align-items: center; margin-bottom: 8px; }
@media (max-width: 767.98px) {
.tap-fam-addrow { grid-template-columns: 1fr 1fr 28px; }
.tap-fam-addrow > input:first-child { grid-column: 1 / -1; }
}
/* v6.9.11 β extra-members quantity row (booking page, group pujas). */
.tap-xm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0; padding: 12px 14px; border: 1.5px solid var(--tap-line); border-radius: var(--tap-radius-sm, 12px); background: #fff; }
.tap-xm-lbl { font-size:calc(0.875 * var(--tap-fs)); font-weight: 700; color: var(--tap-ink); }
.tap-extra-total { font-size:calc(0.8438 * var(--tap-fs)); margin-top: 6px; color: var(--tap-ink); }
/* v6.9.11 β sankalp invitation card on the booking-success screen. */
.tap-snk-invite { text-align: left; background: var(--tap-purple-pale, var(--tap-purple-pale)); border: 1.5px solid rgba(97, 9, 190, .18); border-radius: var(--tap-radius, 16px); padding: 16px 18px; margin-top: 14px; }
.tap-snk-invite-t { font-weight: 800; font-size:calc(1 * var(--tap-fs)); color: var(--tap-ink); margin-bottom: 4px; }
.tap-snk-invite-p { font-size:calc(0.8438 * var(--tap-fs)); color: var(--tap-muted); margin: 0 0 4px; }
.tap-snk-invite-d { font-size:calc(0.7813 * var(--tap-fs)); color: var(--tap-muted); margin: 0 0 10px; }
/* Profile hub (dashboard architecture): stats are shortcuts now. */
@media (prefers-reduced-motion: reduce) {
.tap-splash, .tap-onboard, .tap-splash-inner, .tap-splash-logo { animation: none !important; transition: none !important; }
}
/* ---- Bottom sheet + Modify/Upgrade (demo parity: UpgradeSheet) ---- */
/* v6.9.15: modernised mobile bottom sheet β backdrop blur, safe-area inset,
stronger lift, bigger grip touch target. */
@keyframes tapSheetRise { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
.tap-sheet-note { font-size:calc(0.8125 * var(--tap-fs)); color: var(--tap-muted); margin: 0 0 16px; line-height: 1.5; }
.tap-sheet-fine {
display: flex; gap: 8px; align-items: flex-start; font-size:calc(0.75 * var(--tap-fs)); color: var(--tap-purple-deep);
background: var(--tap-bg); border-radius: var(--tap-r-lg); padding: 11px 13px; margin: 0 0 18px; line-height: 1.4;
}
.tap-upg-opts { display: grid; gap: 10px; margin-bottom: 16px; }
.tap-upg-opt {
display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
background: #fff; border: 1px solid #ede6da; border-radius: var(--tap-r-xl); padding: 13px 14px;
font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease;
}
.tap-upg-opt:hover { box-shadow: 0 2px 12px rgba(66,7,127,.08); }
.tap-upg-opt.is-sel { border: 1.5px solid var(--tap-purple); box-shadow: 0 2px 12px rgba(97,9,190,.12); }
.tap-upg-opt-ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px; background: var(--tap-bg); display: grid; place-items: center; font-size:calc(1.125 * var(--tap-fs)); }
.tap-upg-opt-body { flex: 1; min-width: 0; }
.tap-upg-opt-lb { display: block; font-size:calc(0.875 * var(--tap-fs)); font-weight: 700; color: var(--tap-ink); }
.tap-upg-opt-nt { display: block; font-size:calc(0.75 * var(--tap-fs)); color: var(--tap-muted); margin-top: 1px; }
.tap-upg-opt-pr { font-family:var(--tap-font-heading); font-size:calc(0.9375 * var(--tap-fs)); font-weight: 700; color: var(--tap-purple); flex-shrink: 0; }
/* ---- v4.9.34 QA fixes: inline checkout errors, coupon messages, footer ---- */
/* Toasts must sit above EVERY overlay (sheets are 99997/99998) so errors
are never hidden behind a modal β part of the BUG-01 silent-failure fix. */
.tap-toast { z-index: var(--tap-layer-toast); }
/* Inline dismissible error banner inside checkout (QA BUG-01). */
.tap-inline-error {
display: flex; align-items: flex-start; gap: 10px;
background: color-mix(in srgb,var(--tap-card,#fff) 90%,var(--tap-err,#6109BE)); border: 1px solid color-mix(in srgb,var(--tap-card,#fff) 65%,var(--tap-err,#6109BE)); color: var(--tap-err,#6109BE);
border-radius: var(--tap-r-lg); padding: 12px 14px; margin: 0 0 12px;
font-size:calc(0.8438 * var(--tap-fs)); font-weight: 600; line-height: 1.45;
animation: tapSlideUp .2s ease;
}
.tap-inline-error-txt { flex: 1; min-width: 0; }
.tap-inline-error-x {
background: none; border: none; cursor: pointer; padding: 0 2px;
color: var(--tap-err,#6109BE); font-size:calc(0.875 * var(--tap-fs)); line-height: 1; flex-shrink: 0;
}
/* Real coupon validation states (QA BUG-02). */
.tap-coupon-ok { color: var(--tap-ok); font-weight: 700; font-size:calc(0.8125 * var(--tap-fs)); margin-top: 6px; }
.tap-coupon-err { color: var(--tap-err); font-weight: 700; font-size:calc(0.8125 * var(--tap-fs)); margin-top: 6px; }
/* ---- Site footer (QA BUG-10) ---- */
.tap-site-footer {
background: var(--tap-ink); color: rgba(255,255,255,.82);
margin-top:40px;padding:30px 20px;
font-family:var(--tap-font-body);
}
@media (min-width: 1024px) { .tap-site-footer { padding-bottom: 34px; } }
.tap-footer-inner { max-width: 1024px; margin: 0 auto; display: grid; gap: 18px; }
.tap-footer-brand { display: flex; align-items: center; gap: 12px; }
.tap-footer-logo {
width: 44px; height: 44px; border-radius: var(--tap-r-lg); flex-shrink: 0;
background: rgba(255,255,255,.1); display: grid; place-items: center; font-size:calc(1.375 * var(--tap-fs));
}
.tap-footer-brand strong { display: block; font-family:var(--tap-font-heading); font-size:calc(1.0625 * var(--tap-fs)); color: #fff; }
.tap-footer-brand span { display: block; font-size:calc(0.75 * var(--tap-fs)); color: rgba(255,255,255,.6); margin-top: 2px; }
.tap-footer-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.tap-footer-links a { color: rgba(255,255,255,.78); text-decoration: none; font-size:calc(0.8125 * var(--tap-fs)); font-weight: 600; }
.tap-footer-links a:hover { color: var(--tap-marigold); }
.tap-footer-contact a { color: rgba(255,255,255,.78); text-decoration: none; font-size:calc(0.8125 * var(--tap-fs)); }
.tap-footer-contact a:hover { color: var(--tap-marigold); }
.tap-footer-copy { font-size:calc(0.75 * var(--tap-fs)); color: rgba(255,255,255,.5); border-top: 1px solid rgba(255,255,255,.12); padding-top: 14px; }
/* ---- v4.9.35: Global TOP STATUS STRIP (demo parity, mobile/tablet) ---- */
.tap-topstrip {
position: sticky; top: 0; z-index: var(--tap-layer-header);
display: flex; align-items: center; justify-content: space-between;
gap: 12px; padding: 10px 16px;
background: rgba(251,247,240,.92); backdrop-filter: blur(16px) saturate(160%);
border-bottom: 1px solid rgba(97,9,190,.08);
}
.admin-bar .tap-topstrip { top: 32px; }
@media (max-width: 782px) { .admin-bar .tap-topstrip { top: 46px; } }
.tap-topstrip-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; min-width: 0; }
.tap-topstrip-logo { height: 30px; width: auto; display: block; }
.tap-topstrip-om {
width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--tap-r-sm);
background: linear-gradient(140deg, var(--tap-purple), var(--tap-purple-deep)); color: #fff;
display: grid; place-items: center; font-size:calc(1.0625 * var(--tap-fs));
}
.tap-topstrip-name {
font-family:var(--tap-font-heading); font-size:calc(1.0313 * var(--tap-fs)); font-weight: 700;
color: var(--tap-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tap-topstrip-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tap-topstrip-btn {
position: relative; width: 38px; height: 38px; border-radius: var(--tap-r-md);
display: grid; place-items: center; color: var(--tap-purple-deep);
background: rgba(97,9,190,.07); text-decoration: none;
}
.tap-topstrip-btn svg { width: 19px; height: 19px; }
.tap-topstrip-btn:active { background: rgba(97,9,190,.14); }
.tap-topstrip-dot {
position: absolute; top: 7px; right: 8px; width: 8px; height: 8px;
border-radius: var(--tap-r-full); background: var(--tap-marigold); border: 1.5px solid #fbf7f0;
}
/* Desktop already has tap-topnav β hide the strip there. Also avoid a double
brand row on the homepage, where the hero brand bar plays this role. */
@media (min-width: 1024px) { .tap-topstrip { display: none; } }
body.tap-canvas:has(.tap-home-root) .tap-brandbar { display: none; }
/* βββββββββββββββ Phase 6 (v5.0.0): CONSULTATION βββββββββββββββ
Layout obeys the admin's design tokens (DIVSA β Astrologers β Profile
card design): photo position via .tap-cst-pp-*, photo size .tap-cst-ps-*,
alignment .tap-cst-al-*, spacing .tap-cst-dn-*, accent via the
--tap-cst-accent variable. */
.tap-cst-head { text-align: center; margin: 8px 0 18px; }
.tap-cst-title { font-size:calc(1.5 * var(--tap-fs)); font-weight: 800; color: var(--tap-ink); margin: 0 0 4px; }
.tap-cst-sub { color: var(--tap-muted); font-size:calc(0.8438 * var(--tap-fs)); margin: 0; }
.tap-cst-empty { text-align: center; color: var(--tap-muted); padding: 24px 8px; }
.tap-cst-skel { height: 140px; border-radius: var(--tap-r-lg); background: linear-gradient(90deg,#f2eef7 25%,#faf8fd 50%,#f2eef7 75%); background-size: 200% 100%; animation: tapcstsk 1.2s infinite; margin: 10px 0; }
.tap-cst-skel.s { height: 70px; }
@keyframes tapcstsk { from { background-position: 200% 0 } to { background-position: -200% 0 } }
/* Listing grid + cards */
.tap-cst-discovery { display:grid; grid-template-columns:minmax(220px,1.4fr) repeat(3,minmax(140px,.8fr)); gap:10px; margin:14px 0 18px; align-items:center; }
.tap-cst-discovery .tap-cst-input { width:100%; min-height:44px; margin:0; }
.tap-cst-next { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; color:var(--tap-ink-2); }
@media (max-width:767.98px){ .tap-cst-discovery { grid-template-columns:1fr; } .tap-cst-discovery .tap-cst-search { grid-column:auto; } }
.tap-cst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--tap-cst-gap); }
.tap-cst-card { background: #fff; border: 1px solid var(--tap-line); border-radius: var(--tap-r-xl); padding: var(--tap-cst-gap); cursor: pointer; transition: box-shadow .15s, transform .15s; display: flex; gap: 12px; }
.tap-cst-card:hover, .tap-cst-card:focus-visible { box-shadow: 0 6px 22px rgba(97, 9, 190, .12); transform: translateY(-2px); outline: none; }
/* Photo position tokens */
.tap-cst-pp-top .tap-cst-card, .tap-cst-pp-top .tap-cst-hero { flex-direction: column; align-items: center; }
.tap-cst-pp-left .tap-cst-card, .tap-cst-pp-left .tap-cst-hero { flex-direction: row; align-items: flex-start; }
.tap-cst-pp-right .tap-cst-card, .tap-cst-pp-right .tap-cst-hero { flex-direction: row-reverse; align-items: flex-start; }
/* Alignment tokens */
.tap-cst-al-center .tap-cst-body, .tap-cst-al-center .tap-cst-herobody { text-align: center; }
.tap-cst-al-center .tap-cst-meta, .tap-cst-al-center .tap-cst-chips { justify-content: center; }
.tap-cst-al-left .tap-cst-body, .tap-cst-al-left .tap-cst-herobody { text-align: left; }
/* Photo size tokens */
.tap-cst-photo { border-radius: 50%; overflow: hidden; background: #f2eef7; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; border: 3px solid #fff; box-shadow: 0 2px 10px rgba(30,10,46,.12); }
.tap-cst-ps-sm .tap-cst-photo { width: 56px; height: 56px; }
.tap-cst-ps-md .tap-cst-photo { width: 76px; height: 76px; }
.tap-cst-ps-lg .tap-cst-photo { width: 96px; height: 96px; }
.tap-cst-photo.lg { width: 110px !important; height: 110px !important; }
.tap-cst-photo img { width: 100%; height: 100%; object-fit: cover; }
.tap-cst-ph { font-size:calc(1.875 * var(--tap-fs)); }
.tap-cst-body { flex: 1; min-width: 0; }
.tap-cst-name { font-weight: 800; color: var(--tap-ink); font-size:calc(0.9688 * var(--tap-fs)); }
.tap-cst-name.lg { font-size:calc(1.3125 * var(--tap-fs)); margin: 0; }
.tap-cst-role { color: var(--tap-muted); font-size:calc(0.7813 * var(--tap-fs)); margin-top: 2px; }
.tap-cst-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size:calc(0.75 * var(--tap-fs)); }
.tap-cst-presence { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.tap-cst-presence i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.tap-cst-presence.on { color: #2e7d32; } .tap-cst-presence.on i { background: #2e7d32; box-shadow: 0 0 0 3px rgba(46,125,50,.15); }
.tap-cst-presence.busy { color: var(--tap-warn,#FF7900); } .tap-cst-presence.busy i { background: var(--tap-warn,#FF7900); }
.tap-cst-presence.brk { color: #c76b1e; } .tap-cst-presence.brk i { background: #c76b1e; }
.tap-cst-presence.dnd { color: #b02a37; } .tap-cst-presence.dnd i { background: #b02a37; box-shadow: 0 0 0 3px rgba(176,42,55,.12); }
.tap-cst-presence.off { color: #9a91a8; } .tap-cst-presence.off i { background: #9a91a8; }
.tap-cst-rating { color: var(--tap-gold,#FF7900); font-weight: 700; }
.tap-cst-newbadge { background: #f2eef7; color: var(--tap-muted); font-weight: 700; padding: 1px 8px; border-radius: var(--tap-r-full); font-size:calc(0.6875 * var(--tap-fs)); }
.tap-cst-exp { color: var(--tap-muted); }
.tap-cst-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tap-cst-chip { background: #f6f2fb; color: var(--tap-cst-accent); font-size:calc(0.6875 * var(--tap-fs)); font-weight: 700; padding: 3px 9px; border-radius: var(--tap-r-full); }
.tap-cst-from { margin-top: 8px; font-weight: 800; color: var(--tap-cst-accent); font-size:calc(0.875 * var(--tap-fs)); }
.tap-cst-from small { color: var(--tap-muted); font-weight: 500; }
.tap-cst-langs { margin-top: 8px; font-size:calc(0.7813 * var(--tap-fs)); color: var(--tap-muted); }
/* Profile */
.tap-cst-back { background: none; border: 0; color: var(--tap-cst-accent); font-weight: 700; cursor: pointer; padding: 6px 0; font-size:calc(0.8438 * var(--tap-fs)); }
.tap-cst-hero { display: flex; gap: 16px; background: #fff; border: 1px solid var(--tap-line); border-radius: var(--tap-r-2xl); padding: calc(var(--tap-cst-gap) + 4px); margin-top: 6px; }
.tap-cst-bio { background: #fff; border: 1px solid var(--tap-line); border-radius: var(--tap-r-lg); padding: var(--tap-cst-gap); margin-top: var(--tap-cst-gap); color: var(--tap-muted); font-size:calc(0.875 * var(--tap-fs)); line-height: 1.6; }
.tap-cst-ctas { display: flex; flex-direction: column; gap: 10px; margin-top: var(--tap-cst-gap); }
.tap-cst-cta { width: 100%; padding: 13px; border-radius: var(--tap-r-md); font-weight: 800; font-size:calc(0.9375 * var(--tap-fs)); }
.tap-cst-reviews { margin-top: 22px; }
.tap-cst-reviews h2 { font-size:calc(1 * var(--tap-fs)); color: var(--tap-ink); }
.tap-cst-review { background: #fff; border: 1px solid var(--tap-line); border-radius: var(--tap-r-md); padding: 12px 14px; margin-top: 8px; }
.tap-cst-review-top { font-size:calc(0.75 * var(--tap-fs)); color: var(--tap-gold,#FF7900); font-weight: 700; }
.tap-cst-review-body { font-size:calc(0.8438 * var(--tap-fs)); color: var(--tap-muted); margin-top: 4px; }
/* Bottom sheet (Zomato-style) */
.tap-cst-sheet { background: transparent; width: 100%; max-width: none; max-height: none; overflow: visible; border-radius: 0; animation: none; --tap-cst-accent: var(--tap-purple); --tap-cst-gap: 16px; }
.tap-cst-sheet-body { padding: 14px 18px 22px; }
.tap-cst-label { font-size:calc(0.75 * var(--tap-fs)); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--tap-muted); margin: 14px 0 8px; }
.tap-cst-chiprow { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.tap-cst-daychip { flex: 0 0 auto; background: #faf8fd; border: 1.5px solid var(--tap-line); border-radius: var(--tap-r-md); padding: 9px 14px; font-size:calc(0.8125 * var(--tap-fs)); font-weight: 700; color: var(--tap-muted); cursor: pointer; text-align: center; line-height: 1.35; }
.tap-cst-daychip b { color: var(--tap-cst-accent); }
.tap-cst-daychip.sel { border-color: var(--tap-cst-accent); background: #f6f0fd; color: var(--tap-cst-accent); }
.tap-cst-timegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.tap-cst-time { background: #faf8fd; border: 1.5px solid var(--tap-line); border-radius: var(--tap-r-sm); padding: 9px 4px; font-size:calc(0.8125 * var(--tap-fs)); font-weight: 700; color: var(--tap-muted); cursor: pointer; }
.tap-cst-time.sel { border-color: var(--tap-cst-accent); background: var(--tap-cst-accent); color: #fff; }
.tap-cst-confirm { width: 100%; margin-top: 18px; padding: 14px; border-radius: var(--tap-r-md); font-weight: 800; font-size:calc(0.9375 * var(--tap-fs)); }
.tap-cst-confirm:disabled { opacity: .5; cursor: not-allowed; }
.tap-cst-input { width: 100%; border: 1.5px solid var(--tap-line); border-radius: var(--tap-r-sm); padding: 11px 12px; font-size:calc(0.875 * var(--tap-fs)); margin-top: 8px; box-sizing: border-box; }
.tap-cst-input:focus { border-color: var(--tap-cst-accent); outline: none; }
.tap-cst-picked { background: #f6f0fd; color: var(--tap-cst-accent); font-weight: 800; border-radius: var(--tap-r-sm); padding: 10px 12px; font-size:calc(0.8438 * var(--tap-fs)); }
.tap-cst-fine { font-size:calc(0.75 * var(--tap-fs)); color: var(--tap-muted); text-align: center; margin-top: 10px; }
/* Post-payment */
.tap-cst-done { text-align: center; padding: 34px 16px; }
.tap-cst-done-icn { font-size:calc(2.75 * var(--tap-fs)); }
.tap-cst-done h2 { color: var(--tap-ink); margin: 10px 0 6px; }
.tap-cst-done-sub { color: var(--tap-muted); font-size:calc(0.875 * var(--tap-fs)); max-width: 420px; margin: 0 auto 18px; }
@media (min-width: 768px) { .tap-cst-ctas { flex-direction: row; } }
/* βββββββββββββββ v5.0.1 (frontend audit): DESKTOP LAYOUT βββββββββββββββ
Fix: the app rendered as one phone-width column on laptops. On β₯1024px
the booking + consult surfaces now use a proper desktop canvas: wide
centered container, comfortable reading column for detail sections,
multi-column catalogue (the grid was already fluid β it just needed
room), app-style centered sticky bar, and centered dialogs. Purely
additive: nothing below 1024px changes. */
@media (min-width: 1024px) {
/* Detail-page sections read best in a centered column; the catalogue
grid, brand bar and promo sliders keep the full canvas. */
.tap-booking-root > .tap-section,
.tap-booking-root > .tap-family-panel,
.tap-booking-root > .tap-guest-note,
.tap-booking-root > .tap-coupon-row { max-width: 840px; margin-left: auto; margin-right: auto; }
/* Hero media: cinematic, not phone-tall. */
.tap-booking-root .tap-hero-img,
.tap-booking-root .tap-hero img { max-height: 420px; object-fit: cover; border-radius: var(--tap-r-4xl); }
/* Sticky CTA becomes an app-style centered dock instead of an
edge-to-edge phone bar. */
.tap-sticky { left: 50%; right: auto; transform: translateX(-50%); width: 100%; max-width: 880px; border-radius: 18px 18px 0 0; padding: 12px 22px 14px; }
/* Dialogs center on desktop (they are bottom sheets on phones). */
/* Consult: roomier grid + hero on big screens. */
.tap-consult-root .tap-cst-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tap-cst-hero { padding: 26px; }
.tap-cst-ctas { max-width: 640px; }
}
@keyframes tapModalIn { from { transform: translateY(16px); opacity: .7; } to { transform: none; opacity: 1; } }
/* ββ v6.5.0 β single-date bar + admin-placed closing countdown ββββββββ
Every colour below resolves to a brand custom property, so the admin's
customizer still owns the palette. Nothing here is a fixed hex. */
.tap-datebar{background:var(--tap-gold-light);border-radius:var(--tap-radius);padding:16px 18px;border:1px solid var(--tap-line)}
.tap-datebar h2{margin-bottom:10px}
.tap-datebar-row{display:flex;align-items:center;gap:10px}
.tap-datebar-ic{font-size:calc(1.25 * var(--tap-fs));line-height:1;flex-shrink:0}
.tap-datebar-txt{font-size:calc(0.9688 * var(--tap-fs));font-weight:800;color:var(--tap-ink);font-family:var(--tap-font-heading);letter-spacing:-.01em}
.tap-datebar-seats{margin-top:6px;font-size:calc(0.7813 * var(--tap-fs));font-weight:700;color:var(--tap-ok)}
.tap-datebar .tap-countdown-live{margin-top:10px}
.tap-cd-hero{padding:10px 2px 0;display:flex;justify-content:center}
.tap-countdown-long{font-family:inherit;font-size:calc(0.875 * var(--tap-fs));font-weight:800;letter-spacing:.01em;padding:7px 14px;border-radius:var(--tap-radius-sm);display:inline-flex;align-items:center;gap:6px}
.tap-sticky .tap-countdown-long{align-self:center;margin:0 0 6px;font-size:calc(0.7813 * var(--tap-fs));padding:4px 10px}
@media (max-width:400px){.tap-countdown-long{font-size:calc(0.7813 * var(--tap-fs));padding:6px 10px}}
/* ββ v6.5.0 Phase 2 β semantic tokens ββββββββββββββββββββββββββββββββ
These values used to sit as raw hex inside inline styles in the SPA,
which meant the brand customizer could never reach them. They are now
real custom properties: the defaults below reproduce the shipped look
exactly, and anything the admin sets later simply overrides them. */
:root{
--tap-notice-bg:color-mix(in srgb,#FF7900 10%,#FFFFFF); --tap-notice-fg:#000000; --tap-notice-fg2:color-mix(in srgb,#000000 68%,#FFFFFF);
--tap-ok-bg:color-mix(in srgb,#42D674 10%,#FFFFFF); --tap-star:#FF7900;
--tap-prompt-fg:color-mix(in srgb,#000000 62%,#FFFFFF); --tap-wa:#42D674;
--tap-soft-bg:color-mix(in srgb,#6109BE 4%,#FFFFFF); --tap-soft-bg2:color-mix(in srgb,#6109BE 6%,#FFFFFF); --tap-soft-bg3:color-mix(in srgb,#6109BE 8%,#FFFFFF);
--tap-grey:color-mix(in srgb,#000000 58%,#FFFFFF); --tap-grey-dark:color-mix(in srgb,#000000 82%,#FFFFFF);
}
/* ==========================================================================
v6.9.27 β ACCESSIBILITY (TAP-M-010)
Applied at the design-system level so every screen inherits them rather
than each component remembering. Scoped under .tap-root / .tap-app so
nothing outside a DIVSA surface is touched (the v6.6.4 lesson: three rules
that targeted bare `html` once restyled the host theme site-wide).
========================================================================== */
/* --- WCAG 2.2 SC 2.5.8 Target Size (Minimum) ------------------------------
Interactive controls must be at least 24x24 CSS px. The app is used one-
handed, on a phone, often by older devotees, so the floor here is the
24px the spec requires β reached via min-height/width rather than padding
so it cannot be undone by a component's own padding reset. Icon-only
controls (the sheet β, steppers, chips) were the ones actually below it. */
/* Primary actions get the comfortable 44px touch target (iOS HIG / Android
48dp), which is what the money-path buttons should have been all along. */
/* --- Skip link (WCAG 2.4.1 Bypass Blocks) ---------------------------------
Keyboard and screen-reader devotees had to tab through the entire header
and nav on every page before reaching the booking flow. Visually hidden
until focused, then pinned top-left. */
.tap-skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 100000;
padding: 12px 18px;
background: var(--tap-purple);
color: #fff;
font-weight: 700;
border-radius: 0 0 10px 0;
text-decoration: none;
}
.tap-skip-link:focus,
.tap-skip-link:focus-visible {
left: 0;
outline: 3px solid #fff;
outline-offset: -6px;
}
/* --- Focus visibility on the disclosure triggers --------------------------
These carry aria-expanded now, so they must also LOOK focused. */
.tap-root .tap-sheet-trigger:focus-visible {
outline: 3px solid var(--tap-purple);
outline-offset: 2px;
}
/* A dialog focused programmatically (no focusable child) must not show a
stray outline β the trap gives it tabindex="-1" purely to receive focus. */
.tap-root [role="dialog"][tabindex="-1"]:focus {
outline: none;
}
/* --- Reduced motion ------------------------------------------------------
The app already honours this in several places; make it the default for
anything that animates, so a new component cannot regress it. */
@media (prefers-reduced-motion: reduce) {
.tap-root *,
.tap-root *::before,
.tap-root *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
/* v6.9.84 β itemised bill lines + the savings row.
Sub-rows are add-on line items under the add-ons total: indented and muted
so they read as detail, not as separate charges competing with the main
amounts. The savings row is the only positive number on the bill, so it
uses the OK tone rather than the accent (which every CTA already owns). */
.tap-sumrow-sub{padding-left:12px}
.tap-sumrow-sub .tap-summeta{font-size:calc(0.7813 * var(--tap-fs))}
.tap-sumsaved{color:var(--tap-ok); font-weight:700}
@media (max-width: 360px) {
.tap-member-grid,
.tap-sankalp-grid { grid-template-columns: 1fr; }
}
/* ======================================================================
* v7.3.0 β Scheduled consultation profile + same-page review/payment.
* This extends the existing consultation design system; it does not add
* realtime chat, per-minute billing or a second frontend framework.
* ====================================================================== */
.tap-cst-eyebrow { display:inline-flex; align-items:center; gap:6px; margin-bottom:7px; color:var(--tap-cst-accent); font-size:calc(0.6875 * var(--tap-fs)); font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.tap-cst-badge-row { display:flex; flex-wrap:wrap; gap:5px; margin:5px 0; }
.tap-cst-methods { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.tap-cst-method-chip { display:inline-flex; align-items:center; min-height:28px; padding:4px 9px; border:1px solid var(--tap-line); border-radius:999px; background:#fff; color:var(--tap-muted); font-size:calc(0.6875 * var(--tap-fs)); font-weight:700; }
.tap-cst-card-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:13px; }
.tap-cst-card-actions > :only-child { grid-column:1/-1; }
.tap-cst-card-action { min-height:42px; padding:9px 10px; white-space:normal; line-height:1.2; }
.tap-cst-state-card { max-width:560px; margin:24px auto; padding:30px 20px; border:1px solid var(--tap-line); border-radius:var(--tap-r-xl); background:#fff; text-align:center; }
.tap-cst-state-card h2 { margin:7px 0; font-size:calc(1.125 * var(--tap-fs)); }
.tap-cst-state-card p { color:var(--tap-muted); }
.tap-cst-state-icon { font-size:calc(2.375 * var(--tap-fs)); }
.tap-cst-profile-hero { align-items:center; background:linear-gradient(145deg,#fff 0%,#fbf8ff 100%); }
.tap-cst-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:14px; }
.tap-cst-stat { min-width:0; padding:13px 8px; border:1px solid var(--tap-line); border-radius:var(--tap-r-md); background:#fff; text-align:center; }
.tap-cst-stat strong,.tap-cst-stat span { display:block; }
.tap-cst-stat strong { color:var(--tap-cst-accent); font-size:calc(1.125 * var(--tap-fs)); line-height:1.15; }
.tap-cst-stat span { margin-top:4px; color:var(--tap-muted); font-size:calc(0.6563 * var(--tap-fs)); line-height:1.25; }
.tap-cst-profile-sections { display:grid; gap:13px; margin-top:14px; }
.tap-cst-profile-section,.tap-cst-profile-sections > .tap-cst-gallery { margin:0; padding:17px; border:1px solid var(--tap-line); border-radius:var(--tap-r-lg); background:#fff; }
.tap-cst-profile-section h2 { margin:0 0 9px; color:var(--tap-ink); font-size:calc(1 * var(--tap-fs)); }
.tap-cst-profile-section p,.tap-cst-richtext { margin:0; color:var(--tap-muted); font-size:calc(0.875 * var(--tap-fs)); line-height:1.65; }
.tap-cst-credential-list { margin:0; padding-left:20px; color:var(--tap-muted); }
.tap-cst-credential-list li + li { margin-top:5px; }
.tap-cst-section-note { color:var(--tap-muted)!important; font-size:calc(0.7813 * var(--tap-fs))!important; }
.tap-cst-package-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:9px; margin-top:13px; }
.tap-cst-package-card { position:relative; display:grid; gap:4px; min-height:82px; padding:14px 10px; border:1.5px solid var(--tap-line); border-radius:var(--tap-r-md); background:#fff; color:var(--tap-ink); cursor:pointer; text-align:left; }
.tap-cst-package-card strong { font-size:calc(0.9375 * var(--tap-fs)); }
.tap-cst-package-card > span:not(.tap-cst-recommended) { color:var(--tap-cst-accent); font-size:calc(0.9375 * var(--tap-fs)); font-weight:800; }
.tap-cst-package-card:hover,.tap-cst-package-card:focus-visible { border-color:var(--tap-cst-accent); outline:3px solid color-mix(in srgb,var(--tap-cst-accent) 18%,transparent); }
.tap-cst-package-card.recommended { border-color:color-mix(in srgb,var(--tap-cst-accent) 50%,var(--tap-line)); background:#fbf8ff; }
.tap-cst-recommended { position:absolute; top:-9px; right:8px; padding:2px 7px; border-radius:999px; background:var(--tap-cst-accent); color:#fff; font-size:calc(0.5625 * var(--tap-fs)); font-weight:800; text-transform:uppercase; }
.tap-cst-profile-actions { position:relative; z-index:1; padding:10px; border:1px solid var(--tap-line); border-radius:var(--tap-r-lg); background:#fff; box-shadow:0 8px 22px rgba(30,10,46,.08); }
.tap-cst-mini-profile { display:flex; align-items:center; gap:11px; padding:11px; border:1px solid #ebe4f3; border-radius:var(--tap-r-md); background:#fbf9fd; }
.tap-cst-mini-profile img,.tap-cst-mini-avatar { width:48px; height:48px; flex:0 0 48px; border-radius:50%; object-fit:cover; display:flex; align-items:center; justify-content:center; background:#f0eaf6; }
.tap-cst-mini-profile strong,.tap-cst-mini-profile span { display:block; }
.tap-cst-mini-profile > div > span { color:var(--tap-muted); font-size:calc(0.75 * var(--tap-fs)); margin-top:2px; }
.tap-cst-option-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.tap-cst-option-card { display:grid; gap:4px; min-height:76px; padding:12px; border:1.5px solid var(--tap-line); border-radius:var(--tap-r-md); background:#fff; color:var(--tap-muted); cursor:pointer; text-align:left; }
.tap-cst-option-card strong { color:var(--tap-ink); font-size:calc(0.8125 * var(--tap-fs)); }
.tap-cst-option-card span { font-size:calc(0.6875 * var(--tap-fs)); line-height:1.35; }
.tap-cst-option-card.sel { border-color:var(--tap-cst-accent); background:#f8f2ff; box-shadow:0 0 0 2px color-mix(in srgb,var(--tap-cst-accent) 12%,transparent); }
.tap-cst-inline-state { width:100%; padding:12px; border:1px dashed #d9cee4; border-radius:var(--tap-r-sm); color:var(--tap-muted); background:#faf8fc; font-size:calc(0.7813 * var(--tap-fs)); text-align:center; }
.tap-cst-inline-state.error { border-color:#eab8b3; color:#a23d34; background:#fff5f4; }
.tap-cst-review-body { padding-bottom:calc(26px + env(safe-area-inset-bottom)); }
.tap-cst-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.tap-cst-field { display:grid; gap:5px; min-width:0; color:#5f5269; font-size:calc(0.75 * var(--tap-fs)); font-weight:700; }
.tap-cst-field .tap-cst-input { margin:0; min-height:44px; font-size:calc(1 * var(--tap-fs)); }
.tap-cst-review-card { margin-top:14px; padding:14px; border:1px solid #e7dfed; border-radius:var(--tap-r-lg); background:#fff; box-shadow:0 4px 15px rgba(42,20,54,.04); }
.tap-cst-review-card-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:11px; }
.tap-cst-review-card-head strong,.tap-cst-review-card-head span { display:block; }
.tap-cst-review-card-head strong { color:var(--tap-ink); font-size:calc(0.875 * var(--tap-fs)); }
.tap-cst-review-card-head span { margin-top:2px; color:#74677d; font-size:calc(0.7188 * var(--tap-fs)); }
.tap-cst-coupon-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.tap-cst-coupon-row .tap-cst-input { margin:0; min-height:44px; text-transform:uppercase; }
.tap-cst-offer-list { display:grid; gap:7px; margin-top:10px; }
.tap-cst-offer-chip { display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; padding:9px 10px; border:1px dashed #cdbbe0; border-radius:var(--tap-r-sm); background:#fbf7ff; color:var(--tap-muted); cursor:pointer; text-align:left; }
.tap-cst-offer-chip strong { color:var(--tap-cst-accent); }
.tap-cst-offer-chip span { font-size:calc(0.6875 * var(--tap-fs)); }
.tap-cst-coupon-status { min-height:18px; margin-top:8px; font-size:calc(0.75 * var(--tap-fs)); }
.tap-cst-coupon-status.success { color:#287a3d; }
.tap-cst-coupon-status.error { color:#b43d35; }
.tap-cst-summary { display:grid; gap:9px; }
.tap-cst-summary-row { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; color:#6a5d73; font-size:calc(0.8125 * var(--tap-fs)); }
.tap-cst-summary-row strong { color:#2c2032; text-align:right; font-weight:700; }
.tap-cst-summary-row.discount strong { color:#23823b; }
.tap-cst-summary-row.total { margin-top:3px; padding-top:11px; border-top:1px solid #e9e2ee; font-size:calc(1 * var(--tap-fs)); }
.tap-cst-summary-row.total span,.tap-cst-summary-row.total strong { color:var(--tap-ink); font-weight:900; }
.tap-cst-wallet-balance { display:flex; justify-content:space-between; gap:12px; margin-bottom:9px; padding:10px 11px; border-radius:var(--tap-r-sm); background:#f6f1fa; color:var(--tap-muted); font-size:calc(0.75 * var(--tap-fs)); }
.tap-cst-wallet-balance strong { color:var(--tap-cst-accent); font-size:calc(0.875 * var(--tap-fs)); }
.tap-cst-payment-methods { display:grid; gap:8px; }
.tap-cst-payment-choice { display:flex; align-items:flex-start; gap:10px; padding:11px; border:1px solid #e7dfed; border-radius:var(--tap-r-sm); cursor:pointer; }
.tap-cst-payment-choice input { width:18px; height:18px; margin:1px 0 0; accent-color:var(--tap-cst-accent); }
.tap-cst-payment-choice strong,.tap-cst-payment-choice span { display:block; }
.tap-cst-payment-choice strong { color:var(--tap-ink); font-size:calc(0.8125 * var(--tap-fs)); }
.tap-cst-payment-choice span { margin-top:2px; color:#756a7c; font-size:calc(0.7188 * var(--tap-fs)); }
.tap-cst-payment-choice.disabled { opacity:.55; cursor:not-allowed; }
.tap-cst-add-money { justify-self:start; }
.tap-cst-pay-now { position:sticky; bottom:0; z-index:3; margin-top:14px; box-shadow:0 8px 24px rgba(97,9,190,.22); }
.tap-cst-trust-note { display:flex; align-items:flex-start; gap:8px; margin-top:10px; padding:10px; border-radius:var(--tap-r-sm); background:#f5faf7; color:#52635a; font-size:calc(0.7188 * var(--tap-fs)); line-height:1.45; }
.tap-cst-trust-note p { margin:0; }
.tap-cst-confirm-summary { display:grid; gap:8px; max-width:520px; margin:18px auto; padding:15px; border:1px solid #e7dfed; border-radius:var(--tap-r-lg); background:#fff; text-align:left; }
.tap-cst-done-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:9px; }
@media (max-width:767.98px) {
.tap-cst-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.tap-cst-form-grid,.tap-cst-option-grid { grid-template-columns:1fr; }
.tap-cst-card-actions { grid-template-columns:1fr 1fr; }
.tap-cst-card-actions > :nth-child(3) { grid-column:1/-1; }
}
@media (max-width:360px) {
.tap-cst-card { padding:12px; gap:10px; }
.tap-cst-card-actions,.tap-cst-coupon-row { grid-template-columns:1fr; }
.tap-cst-option-card { min-height:68px; }
.tap-cst-sheet-body { padding-left:13px; padding-right:13px; }
}
@media (prefers-reduced-motion:reduce) {
}
/* v7.3.0 profile information architecture: accessible focused panels. */
.tap-cst-profile-tabs { display:flex; gap:6px; margin-top:15px; padding:5px; overflow-x:auto; border:1px solid #e7dfed; border-radius:var(--tap-r-lg); background:#fff; scrollbar-width:none; }
.tap-cst-profile-tabs::-webkit-scrollbar { display:none; }
.tap-cst-profile-tab { flex:1 0 auto; min-height:42px; padding:8px 14px; border:0; border-radius:var(--tap-r-md); background:transparent; color:#6b5e73; font-weight:750; cursor:pointer; }
.tap-cst-profile-tab.is-active { background:var(--tap-cst-accent); color:#fff; box-shadow:0 4px 12px color-mix(in srgb,var(--tap-cst-accent) 24%,transparent); }
.tap-cst-profile-tab:focus-visible { outline:3px solid color-mix(in srgb,var(--tap-cst-accent) 28%,transparent); outline-offset:2px; }
.tap-cst-profile-panels { margin-top:12px; }
.tap-cst-profile-panel { display:grid; gap:13px; }
.tap-cst-profile-panel[hidden] { display:none!important; }
@media(max-width:360px){.tap-cst-profile-tab{padding:8px 11px;font-size:calc(0.75 * var(--tap-fs))}}
/* v7.3.0 β fixed-duration consultation fulfilment and review states. */
.tap-cst-contact-card{display:grid;gap:12px}
.tap-cst-contact-state{display:flex;align-items:center;gap:8px;min-height:44px;padding:11px 13px;border:1px solid var(--tap-border);border-radius:12px;background:var(--tap-surface-soft,#faf7fb);color:var(--tap-muted);font-size:calc(0.8125 * var(--tap-fs));line-height:1.45}
.tap-cst-contact-state.ready{border-color:color-mix(in srgb,var(--tap-success,#42D674) 30%,transparent);background:color-mix(in srgb,var(--tap-success,#42D674) 8%,white);color:color-mix(in srgb,var(--tap-success,#42D674) 55%,#000)}
.tap-cst-contact-state.error{border-color:color-mix(in srgb,var(--tap-danger,#6109BE) 28%,transparent);background:color-mix(in srgb,var(--tap-danger,#6109BE) 7%,white);color:var(--tap-danger,#6109BE)}
.tap-cst-summary-row.savings{margin-top:2px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--tap-success,#42D674) 8%,white);color:color-mix(in srgb,var(--tap-success,#42D674) 55%,#000)}
.tap-astro-contact{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;padding:10px 11px;border:1px solid var(--tap-border);border-radius:10px;background:var(--tap-surface-soft,#faf7fb);font-size:calc(0.75 * var(--tap-fs));color:var(--tap-muted)}
.tap-astro-contact.available{border-color:color-mix(in srgb,var(--tap-success,#42D674) 28%,transparent);background:color-mix(in srgb,var(--tap-success,#42D674) 7%,white);color:color-mix(in srgb,var(--tap-success,#42D674) 55%,#000)}
.tap-astro-contact.missing{border-color:color-mix(in srgb,var(--tap-danger,#6109BE) 24%,transparent);background:color-mix(in srgb,var(--tap-danger,#6109BE) 6%,white);color:var(--tap-danger,#6109BE)}
.tap-astro-contact small{display:block;flex-basis:100%;color:inherit;opacity:.82}
.tap-astro-contact .tap-btn{margin-left:auto;text-decoration:none}
@media(max-width:767.98px){.tap-astro-contact{align-items:stretch}.tap-astro-contact .tap-btn{width:100%;margin-left:0;justify-content:center}.tap-cst-contact-state{align-items:flex-start}}
/* v7.3.0 β consultation review: mobile-first single flow, desktop commerce split. */
.tap-cst-review-layout {
display:grid;
grid-template-columns:minmax(0,1fr);
gap:14px;
min-width:0;
}
.tap-cst-review-main,
.tap-cst-review-aside { min-width:0; }
.tap-cst-review-main > :first-child,
.tap-cst-review-aside > :first-child { margin-top:0; }
@media (min-width:1024px) {
.tap-cst-review-sheet { max-width:960px; }
.tap-cst-review-layout {
grid-template-columns:minmax(0,1.35fr) minmax(300px,.85fr);
gap:22px;
align-items:start;
}
.tap-cst-review-aside {
position:sticky;
top:68px;
align-self:start;
}
.tap-cst-review-aside .tap-cst-pay-now { position:static; }
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
* v7.3.1 β scheduled consultation decision experience
* One primary action on listing/profile, desktop inline scheduler, mobile
* bottom sheet with quick dates, available-day calendar, grouped slots and
* a persistent selection summary. Backend availability and payment contracts
* are unchanged.
* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.tap-cst-card[role="link"] { cursor:pointer; }
.tap-cst-card[role="link"] .tap-cst-card-actions { width:100%; }
.tap-cst-card-actions { grid-template-columns:minmax(0,1fr); }
.tap-cst-card-actions .tap-cst-card-action { width:100%; min-height:44px; }
.tap-cst-next-availability { display:flex; align-items:center; min-height:24px; color:var(--tap-muted); font-size:calc(0.7813 * var(--tap-fs)); font-weight:700; }
.tap-cst-inline-link { appearance:none; border:0; background:transparent; color:var(--tap-cst-accent); padding:6px 4px; font:inherit; font-size:calc(0.7813 * var(--tap-fs)); font-weight:750; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.tap-cst-inline-link:focus-visible { outline:3px solid color-mix(in srgb,var(--tap-cst-accent) 28%,transparent); outline-offset:2px; border-radius:8px; }
.tap-cst-desktop-scheduler { display:none; margin-top:18px; padding:20px; border:1px solid #e6deec; border-radius:var(--tap-r-2xl); background:#fff; box-shadow:0 12px 32px rgba(42,20,54,.06); }
.tap-cst-inline-scheduler-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:4px; }
.tap-cst-inline-scheduler-head h2 { margin:0; color:var(--tap-ink); font-size:calc(1.25 * var(--tap-fs)); }
.tap-cst-inline-scheduler-head p { margin:5px 0 0; color:var(--tap-muted); font-size:calc(0.8125 * var(--tap-fs)); }
.tap-cst-secure-note { flex:0 0 auto; color:#52635a; font-size:calc(0.75 * var(--tap-fs)); font-weight:750; }
.tap-cst-scheduler { min-width:0; }
.tap-cst-scheduler.is-inline { display:grid; grid-template-columns:minmax(0,1fr); }
.tap-cst-package-selector { display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:9px; }
.tap-cst-duration-card { position:relative; display:grid; gap:3px; min-height:96px; padding:13px 12px; border:1.5px solid #e5ddec; border-radius:var(--tap-r-md); background:#fff; color:var(--tap-muted); text-align:center; cursor:pointer; }
.tap-cst-duration-card strong { color:var(--tap-ink); font-size:calc(0.875 * var(--tap-fs)); }
.tap-cst-duration-card span { color:var(--tap-cst-accent); font-size:calc(1.1875 * var(--tap-fs)); font-weight:900; }
.tap-cst-duration-card small { color:var(--tap-muted); font-size:calc(0.6563 * var(--tap-fs)); }
.tap-cst-duration-card.sel { border-color:var(--tap-cst-accent); background:color-mix(in srgb,var(--tap-cst-accent) 7%,white); box-shadow:0 0 0 2px color-mix(in srgb,var(--tap-cst-accent) 11%,transparent); }
.tap-cst-duration-card:focus-visible,.tap-cst-calendar-toggle:focus-visible,.tap-cst-calendar-day:focus-visible { outline:3px solid color-mix(in srgb,var(--tap-cst-accent) 28%,transparent); outline-offset:2px; }
.tap-cst-date-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:5px; }
.tap-cst-date-head .tap-cst-label { margin-bottom:8px; }
.tap-cst-date-tools { display:flex; justify-content:flex-end; }
.tap-cst-calendar-toggle { appearance:none; border:0; background:transparent; color:var(--tap-cst-accent); padding:8px 2px; font:inherit; font-size:calc(0.75 * var(--tap-fs)); font-weight:800; cursor:pointer; }
.tap-cst-quick-dates .tap-cst-daychip { white-space:pre-line; min-width:92px; min-height:58px; }
.tap-cst-calendar[hidden] { display:none!important; }
.tap-cst-calendar { display:grid; gap:13px; margin:10px 0 4px; padding:13px; border:1px solid #e7dfed; border-radius:var(--tap-r-lg); background:#fbf9fd; }
.tap-cst-calendar-month h3 { margin:0 0 9px; color:var(--tap-ink); font-size:calc(0.8125 * var(--tap-fs)); }
.tap-cst-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(38px,1fr)); gap:6px; }
.tap-cst-calendar-day { display:grid; place-items:center; gap:2px; min-height:52px; padding:6px 3px; border:1px solid #e2daea; border-radius:10px; background:#fff; color:var(--tap-muted); cursor:pointer; }
.tap-cst-calendar-day small { font-size:calc(0.5625 * var(--tap-fs)); color:#796d82; }
.tap-cst-calendar-day strong { font-size:calc(0.875 * var(--tap-fs)); }
.tap-cst-calendar-day.sel { border-color:var(--tap-cst-accent); background:var(--tap-cst-accent); color:#fff; }
.tap-cst-calendar-day.sel small { color:#fff; }
.tap-cst-timewrap { display:grid; gap:13px; }
.tap-cst-time-group { display:grid; gap:7px; }
.tap-cst-time-group h3 { margin:0; color:#6a5d73; font-size:calc(0.7188 * var(--tap-fs)); text-transform:uppercase; letter-spacing:.05em; }
.tap-cst-time-group .tap-cst-timegrid { grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); }
.tap-cst-time { min-height:44px; }
.tap-cst-inline-state strong,.tap-cst-inline-state span { display:block; }
.tap-cst-inline-state span { margin-top:3px; font-size:calc(0.7188 * var(--tap-fs)); }
.tap-cst-schedule-footer { position:sticky; bottom:0; z-index:4; display:grid; grid-template-columns:minmax(0,1fr) minmax(150px,.9fr); align-items:center; gap:12px; margin:18px -18px -6px; padding:12px 18px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid #e9e2ee; background:rgba(255,255,255,.96); box-shadow:0 -10px 28px rgba(31,13,42,.08); backdrop-filter:blur(14px); }
.tap-cst-schedule-summary { display:grid; gap:3px; min-width:0; }
.tap-cst-schedule-summary span { overflow:hidden; color:var(--tap-muted); font-size:calc(0.7188 * var(--tap-fs)); text-overflow:ellipsis; white-space:nowrap; }
.tap-cst-schedule-summary strong { color:var(--tap-ink); font-size:calc(1.125 * var(--tap-fs)); }
.tap-cst-schedule-footer .tap-cst-confirm { margin:0; min-height:48px; }
.tap-cst-schedule-sheet { max-height:min(92dvh,920px); }
.tap-cst-schedule-sheet-body { padding-bottom:8px; }
@media (min-width:1024px) {
.tap-cst-desktop-scheduler { display:block; }
.tap-cst-profile-actions.has-desktop-scheduler { display:none; }
.tap-cst-scheduler.is-inline { grid-template-columns:minmax(0,1fr); }
.tap-cst-scheduler.is-inline .tap-cst-option-grid { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:720px; }
.tap-cst-scheduler.is-inline .tap-cst-package-selector { max-width:720px; }
.tap-cst-scheduler.is-inline .tap-cst-quick-dates { overflow:visible; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.tap-cst-scheduler.is-inline .tap-cst-quick-dates .tap-cst-daychip { min-width:0; }
.tap-cst-scheduler.is-inline .tap-cst-timewrap { max-width:850px; }
.tap-cst-scheduler.is-inline .tap-cst-schedule-footer { position:static; grid-template-columns:minmax(0,1fr) 280px; margin:20px 0 0; padding:14px; border:1px solid #e6deec; border-radius:var(--tap-r-lg); box-shadow:none; background:#faf8fc; }
.tap-cst-scheduler.is-inline .tap-cst-fine { text-align:left; }
}
@media (max-width:1023.98px) {
.tap-cst-profile-actions { position:sticky; bottom:calc(var(--tap-bottom-nav-h) + var(--tap-fixed-gap)); z-index:8; margin-left:-4px; margin-right:-4px; padding:10px; }
}
@media (max-width:767.98px) {
.tap-cst-schedule-sheet { width:100%; max-width:none; height:min(92dvh,880px); max-height:min(92dvh,880px); display:flex; flex-direction:column; overflow:hidden; }
.tap-cst-schedule-sheet > .tap-cst-sheet-body { flex:1 1 auto; min-height:0; overflow:auto; }
.tap-cst-package-selector { grid-template-columns:repeat(3,minmax(92px,1fr)); overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:4px; }
.tap-cst-duration-card { min-width:104px; min-height:91px; scroll-snap-align:start; }
.tap-cst-calendar-grid { grid-template-columns:repeat(7,minmax(34px,1fr)); gap:4px; }
.tap-cst-calendar-day { min-height:48px; }
.tap-cst-schedule-footer { grid-template-columns:minmax(0,1fr) minmax(138px,.9fr); }
}
@media (max-width:360px) {
.tap-cst-schedule-footer { grid-template-columns:1fr; }
.tap-cst-schedule-summary { grid-template-columns:1fr auto; align-items:center; }
.tap-cst-schedule-summary span { white-space:normal; }
.tap-cst-schedule-footer .tap-cst-confirm { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
.tap-cst-duration-card,.tap-cst-calendar-day,.tap-cst-calendar-toggle,.tap-cst-schedule-footer { transition:none!important; animation:none!important; }
}
/* Checkout summary density is owned by tap-booking.css. */
/* v7.8.0 β support ticket states use white-label semantic brand tokens. */
.tap-ticket-status{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;font-weight:800;font-size:calc(.6875 * var(--tap-fs));}
.tap-ticket-status-open{color:var(--tap-sindoor);background:color-mix(in srgb,var(--tap-sindoor) 10%,transparent)}
.tap-ticket-status-in_progress{color:var(--tap-marigold);background:color-mix(in srgb,var(--tap-marigold) 10%,transparent)}
.tap-ticket-status-waiting_on_user{color:var(--tap-purple);background:color-mix(in srgb,var(--tap-purple) 9%,transparent)}
.tap-ticket-status-resolved{color:var(--tap-ok);background:color-mix(in srgb,var(--tap-ok) 10%,transparent)}
.tap-ticket-status-closed{color:var(--tap-muted);background:color-mix(in srgb,var(--tap-muted) 10%,transparent)}
/* Checkout review presentation is owned by tap-booking.css. */
/* v7.10.1 mobile stability: the booking stepper belongs in document flow on
* phones. Sticky positioning over the hero caused PACKAGE/REVIEW/PAY to cover
* the service creative on initial load. */
/* v7.26.0 β curated Puja β Samagri bridge. White-label tokens only. */
.tap-puja-samagri-rail{gap:12px}
.tap-puja-samagri-card{box-sizing:border-box;display:grid;grid-template-columns:76px minmax(0,1fr);gap:11px;align-items:center;min-width:min(290px,82vw);max-width:320px;padding:10px;border:1px solid var(--tap-line);border-radius:var(--tap-radius,18px);background:var(--tap-card);color:var(--tap-ink);text-decoration:none;scroll-snap-align:start}
.tap-puja-samagri-img{display:block;width:76px;aspect-ratio:1;border-radius:calc(var(--tap-radius,18px) * .7);background:var(--tap-bg) center/cover no-repeat}
.tap-puja-samagri-meta{display:grid;gap:5px;min-width:0}
.tap-puja-samagri-meta strong{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;line-height:1.3}
.tap-puja-samagri-meta>span{font-weight:700;color:var(--tap-purple)}
@media (min-width: 1024px){.tap-puja-samagri-rail{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible!important}.tap-puja-samagri-card{min-width:0;max-width:none;grid-template-columns:1fr}.tap-puja-samagri-img{width:100%;aspect-ratio:4/3}}
/* ==========================================================================
DIVSA OS β UI enhancement layer (the merged UI layer)
Additive polish on top of the original core rules. Loaded AFTER it.
Covers: accessible toast region, global keyboard focus, touch targets,
reduced-motion, mobile feel, skeleton + dialog primitives.
Nothing here overrides existing component styling destructively.
========================================================================== */
/* ---- Accessible toast region (replaces per-toast inline positioning) ---- */
.tap-toast-region {
position: fixed;
left: 50%;
bottom: 90px;
transform: translateX(-50%);
z-index: var(--tap-layer-toast);
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
pointer-events: none;
width: max-content;
max-width: min(92vw, 460px);
}
.tap-toast-region .tap-toast { pointer-events: auto; }
/* ---- Global keyboard focus (WCAG 2.4.7) β only for keyboard users ---- */
/* Don't show focus ring on mouse click (browsers that lack :focus-visible). */
.tap-root :focus:not(:focus-visible) { outline: none; }
/* ---- Touch targets: 44β48px minimum on touch devices (WCAG 2.5.5) ---- */
@media (pointer: coarse) {
.tap-root button,
.tap-root .tap-btn,
.tap-root a.tap-btn,
.tap-delivery-chip,
.tap-intent-chip,
.tap-dtab,
.tap-rm,
.tap-addmember {
min-height: 44px;
}
.tap-root input,
.tap-root textarea,
.tap-root select {
min-height: 44px;
font-size:calc(1 * var(--tap-fs)); /* prevents iOS zoom-on-focus */
}
}
/* ---- Skeleton utility (consistent, reduced-motion aware) ---- */
.tap-skel {
background: linear-gradient(90deg, rgba(240, 232, 253, 0.6) 0%, rgba(255, 248, 231, 0.9) 25%, rgba(245, 200, 66, 0.4) 50%, rgba(255, 248, 231, 0.9) 75%, rgba(240, 232, 253, 0.6) 100%);
background-size: 300% 100%;
animation: tapMetallicShimmer 2s cubic-bezier(0.4, 0, 0.2, 1) infinite, tapPulseWave 2.5s ease-in-out infinite;
border-radius: var(--tap-radius-sm, 10px);
position: relative;
overflow: hidden;
}
.tap-skel::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.7) 50%, transparent 70%);
animation: tapPassSweep 1.8s ease-in-out infinite;
}
.tap-skel--line { height: 12px; margin: 8px 0; }
.tap-skel--title { height: 22px; width: 60%; margin: 10px 0; }
.tap-skel--card { height: 180px; }
/* Multi-Pass Metallic Shimmer & Sweep Keyframes */
@keyframes tapMetallicShimmer {
0% { background-position: 300% 0; }
100% { background-position: -300% 0; }
}
@keyframes tapPassSweep {
0% { transform: translateX(-100%); }
100% { transform: translateX(200%); }
}
@keyframes tapPulseWave {
0%, 100% { opacity: 1; }
50% { opacity: 0.65; }
}
/* ---- Dialog / modal polish (pair with role="dialog" aria-modal="true") ---- */
/* ---- Mobile feel ---- */
/* v6.6.4: was bare `html`, which forced smooth scrolling on every page of
the site including WooCommerce. Scoped to DIVSA screens; scroll-behavior
set on body still propagates to the viewport. */
body.tap-app { scroll-behavior: smooth; }
.tap-root { -webkit-tap-highlight-color: rgba(97, 9, 190, .12); overscroll-behavior-y: contain; }
.tap-root img { max-width: 100%; height: auto; }
.tap-root button { touch-action: manipulation; }
/* UX-017: Active/touch press visual feedback */
/* ---- Empty / error state primitives ---- */
.tap-state {
text-align: center;
padding: 40px 20px;
color: var(--tap-muted);
}
.tap-state__icon { font-size:calc(2.5 * var(--tap-fs)); margin-bottom: 10px; }
.tap-state__title { font-weight: 800; color: var(--tap-ink); margin-bottom: 6px; }
.tap-state__cta {
display: inline-block; margin-top: 14px;
background: var(--tap-purple); color: #fff; text-decoration: none;
font-weight: 700; padding: var(--tap-space-3, 12px) var(--tap-space-6, 24px); border-radius: var(--tap-radius-full, 999px);
}
/* ---- Respect reduced-motion globally (covers shimmer, confetti, transitions) ---- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.tap-root *,
.tap-root *::before,
.tap-root *::after,
.tap-skel,
.tap-skeleton,
.tap-confetti-particle,
.tap-celebrate-mandala {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}
/* ---- WhatsApp escape-hatch button (no-dates state) ---- */
.tap-btn-wa {
display: inline-flex; align-items: center; gap: 8px;
background: var(--tap-ok,#42D674); color: #fff; text-decoration: none;
font-weight: 700; padding: var(--tap-space-3, 12px) var(--tap-space-5, 20px); border-radius: var(--tap-radius-full, 999px);
border: none; cursor: pointer;
}
.tap-btn-wa:hover { background: #1ebe5d; }
/* ---- Disabled primary CTA (e.g. no bookable date) ---- */
.tap-btn-cta.is-disabled,
.tap-btn-cta:disabled {
opacity: .55;
cursor: not-allowed;
filter: grayscale(.3);
box-shadow: none;
}
/* ---- UX-024: Smooth view transitions ---- */
.tap-view-enter {
animation: tapViewEnter 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes tapViewEnter {
from {
opacity: 0;
transform: translateY(8px) scale(0.99);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Progress line metallic fill */
.tap-step-line-fill,
.tap-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--tap-purple) 0%, var(--tap-marigold) 50%, var(--tap-turmeric, var(--tap-turmeric)) 100%);
background-size: 200% 100%;
animation: tapProgressGlow 3s ease infinite;
border-radius: var(--tap-radius-full, 999px);
transition: width var(--dur-slow, 400ms) var(--ease-out, cubic-bezier(0.4, 0, 0.2, 1));
}
/* Step bounce keyframes */
@keyframes tapStepBounce {
0% { transform: scale(0.8); }
50% { transform: scale(1.18); }
70% { transform: scale(0.95); }
100% { transform: scale(1); }
}
.tap-step.active .tap-step-circle {
animation: tapStepBounce 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Golden Aura Pulse Ring & 3D Blessing Particle Keyframes */
.tap-golden-aura-pulse {
position: absolute; width: 140px; height: 140px; border-radius: 50%;
background: radial-gradient(circle, rgba(255,215,0,0.6) 0%, rgba(249,144,0,0.3) 45%, rgba(97,9,190,0) 75%);
animation: tapAuraPulse 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes tapAuraPulse {
0% { transform: scale(0.2); opacity: 0; }
40% { opacity: 0.95; }
100% { transform: scale(4.5); opacity: 0; }
}
@keyframes tapBlessingParticle3D {
0% { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) scale(0.5); opacity: 0; }
20% { opacity: 1; }
80% { opacity: 0.8; }
100% { transform: translate3d(var(--tx, 40px), var(--ty, -120px), var(--tz, 100px)) rotateX(360deg) rotateY(180deg) scale(1.2); opacity: 0; }
}
.tap-blessing-particle-3d {
position: fixed; z-index: var(--tap-layer-celebration); pointer-events: none; will-change: transform, opacity;
animation: tapBlessingParticle3D 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
/* ============================================================
DIVSA OS β Premium overlay (loaded LAST)
Scoped under .tap-root so it cannot leak into the WP theme.
Uses only the design tokens that the Brand Customizer drives,
so admin colour/font/logo changes flow through automatically.
Additive polish β does not change existing layout dimensions.
============================================================ */
/* ---------- Brand logo bar (from window.TAP_BRAND.logo) ---------- */
.tap-root .tap-brandbar{
display:flex;align-items:center;gap:10px;padding:4px 0 16px;margin-bottom:4px;
}
.tap-root .tap-brandbar-logo{
height:44px;max-width:220px;object-fit:contain;display:block;
}
/* ---------- Promo banner above catalogue (from tap_banners) ---------- */
.tap-root .tap-promo:not(.tap-engagement){
position:relative;overflow:hidden;border-radius:var(--tap-radius-xl,26px);
margin:0 0 22px;min-height:150px;display:flex;align-items:center;
box-shadow:var(--tap-shadow,0 4px 20px rgba(97,9,190,.10));isolation:isolate;
}
.tap-root .tap-promo-bg{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
}
.tap-root .tap-promo:not(.tap-engagement)::after{
content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(90deg,rgba(26,6,42,.90) 0%,rgba(26,6,42,.55) 55%,rgba(26,6,42,.20) 100%);
}
.tap-root .tap-promo-in{padding:24px 28px;color:#fff;max-width:640px}
.tap-root .tap-promo-ey{
font-size:calc(0.6875 * var(--tap-fs));font-weight:800;letter-spacing:.09em;text-transform:uppercase;
color:var(--tap-marigold);margin-bottom:8px;
}
.tap-root .tap-promo-title{
font-family:var(--tap-font-heading),Georgia,serif;font-weight:600;
font-size:clamp(19px,2.6vw,27px);line-height:1.15;margin-bottom:7px;letter-spacing:-.01em;
}
.tap-root .tap-promo-sub{
font-size:calc(0.875 * var(--tap-fs));color:rgba(255,255,255,.9);line-height:1.45;margin-bottom:15px;max-width:54ch;
}
.tap-root .tap-promo-cta{display:inline-flex;align-items:center;gap:7px;width:auto}
@media(max-width:767.98px){
.tap-root .tap-promo:not(.tap-engagement){min-height:auto}
.tap-root .tap-promo-in{padding:20px 18px}
}
/* ---------- Premium polish: cards ---------- */
.tap-root .tap-grid{gap:var(--tap-smart-gap,14px)}
/* ---------- Premium polish: headline ---------- */
.tap-root .tap-headline{
font-family:var(--tap-font-heading),Georgia,serif;
font-weight:600;letter-spacing:-.02em;line-height:1.1;
}
/* ---------- Premium polish: inputs ---------- */
.tap-root .tap-inp,
.tap-root .tap-input,
.tap-root .tap-coupon-inp{
border-radius:var(--tap-radius-sm,12px);
border:1px solid var(--tap-line);
transition:border-color .18s ease, box-shadow .18s ease;
}
.tap-root .tap-inp:focus,
.tap-root .tap-input:focus,
.tap-root .tap-coupon-inp:focus{
outline:none;
border-color:var(--tap-purple);
box-shadow:0 0 0 3px rgba(97,9,190,.14);
}
/* ---------- Premium polish: pills / chips ---------- */
.tap-root .tap-pill,
.tap-root .tap-chip{
border-radius:var(--tap-radius-full,999px);
transition:transform .15s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.tap-root .tap-pill:hover,
.tap-root .tap-chip:hover{transform:translateY(-1px)}
/* ---------- Premium polish: sankalp / family cards ---------- */
/* ---------- Accessible focus ring everywhere ---------- */
.tap-root :focus-visible{
outline:3px solid var(--tap-purple);
outline-offset:2px;border-radius:var(--tap-r-3xs);
}
/* ---------- Respect reduced motion ---------- */
/* ================= HOME: banner slider + category sections ================= */
.tap-root .tap-slider{position:relative;margin:0 0 22px;border-radius:var(--tap-radius-xl,26px);overflow:hidden;box-shadow:var(--tap-shadow,0 4px 20px rgba(97,9,190,.10))}
.tap-root .tap-slides{display:flex;transition:transform .5s var(--ease-out,cubic-bezier(.4,0,.2,1))}
.tap-root .tap-slide{min-width:100%;position:relative;aspect-ratio:var(--tap-banner-ratio,3/1);display:flex;align-items:center}
@media(max-width:767.98px){.tap-root .tap-slide{aspect-ratio:var(--tap-banner-ratio-m,var(--tap-banner-ratio,16/10))}}
.tap-root .tap-slide-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--tap-banner-fit,cover);z-index:-2}
.tap-root .tap-slide::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(26,6,42,.9),rgba(26,6,42,.5) 55%,rgba(26,6,42,.15))}
.tap-root .tap-slide-in{padding:0 clamp(22px,5vw,56px);color:#fff;max-width:640px}
.tap-root .tap-slide-ey{font-size:calc(0.75 * var(--tap-fs));font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--tap-marigold);margin-bottom:9px}
.tap-root .tap-slide-title{font-family:var(--tap-font-heading),Georgia,serif;font-weight:600;font-size:clamp(20px,3.4vw,34px);line-height:1.12;margin-bottom:9px;letter-spacing:-.01em}
.tap-root .tap-slide-sub{font-size:calc(0.9063 * var(--tap-fs));color:rgba(255,255,255,.9);margin-bottom:16px;max-width:48ch;line-height:1.45}
.tap-root .tap-slide-cta{display:inline-flex;align-items:center;gap:7px;width:auto}
.tap-root .tap-slide-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:3}
.tap-root .tap-slide-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);border:none;cursor:pointer;padding:0;transition:.2s}
.tap-root .tap-slide-dot.on{background:#fff;width:24px;border-radius:5px}
.tap-root .tap-slide-pause{margin-left:5px;border:1px solid rgba(255,255,255,.62);border-radius:999px;background:rgba(20,7,29,.52);color:#fff;padding:2px 8px;min-height:24px;font-size:12px;font-weight:700;line-height:1;cursor:pointer}
/* Section rhythm owns only the block axis. Inline centring/width belongs to
the App Shell or to an explicit component reading-width rule. */
.tap-root .tap-section{margin-block:26px}
.tap-root .tap-section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:13px}
.tap-root .tap-section-title{font-family:var(--tap-font-heading),Georgia,serif;font-weight:600;font-size:clamp(19px,2.4vw,24px);letter-spacing:-.01em;display:flex;align-items:center;gap:9px;margin:0}
.tap-root .tap-section-em{font-size:calc(1.25 * var(--tap-fs))}
.tap-root .tap-section-scroller{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none}
.tap-root .tap-section-scroller::-webkit-scrollbar{display:none}
.tap-root .tap-scard-hot{border-color:#ffe2b8 !important;box-shadow:0 2px 12px rgba(249,144,0,.12)}
/* Booking-flow presentation is owned by tap-booking.css. */
/* ================= CHADHAVA β item list (devotional marketplace reference style) ================= */
.tap-root .tap-chad-list{display:flex;flex-direction:column;margin-bottom:20px}
.tap-root .tap-chad-item{display:flex;gap:16px;justify-content:space-between;padding:20px 0;border-bottom:1px solid var(--tap-line)}
.tap-root .tap-chad-item:first-child{padding-top:4px}
.tap-root .tap-chad-info{flex:1;min-width:0}
.tap-root .tap-chad-name{font-family:var(--tap-font-heading),Georgia,serif;font-weight:700;font-size:calc(1.125 * var(--tap-fs));color:var(--tap-ink);line-height:1.3;margin-bottom:7px}
.tap-root .tap-chad-desc{font-size:calc(0.875 * var(--tap-fs));color:var(--tap-muted);line-height:1.55;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tap-root .tap-chad-price{font-weight:800;font-size:calc(1.1875 * var(--tap-fs));color:var(--tap-ok)}
.tap-root .tap-chad-right{position:relative;width:132px;flex:none;display:flex;flex-direction:column;align-items:center}
.tap-root .tap-chad-img{width:132px;height:106px;border-radius:var(--tap-r-xl);overflow:hidden;background:linear-gradient(135deg,#fff8e7,var(--tap-purple-pale));display:flex;align-items:center;justify-content:center;font-size:calc(2.125 * var(--tap-fs))}
.tap-root .tap-chad-img img{width:100%;height:100%;object-fit:cover;display:block}
.tap-root .tap-chad-step{position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;width:112px;height:40px;background:var(--tap-marigold);border-radius:11px;box-shadow:0 6px 16px rgba(249,144,0,.36)}
.tap-root .tap-chad-step button{border:none;background:none;color:#fff;font-size:calc(1.375 * var(--tap-fs));font-weight:700;width:40px;height:40px;cursor:pointer;line-height:1;-webkit-tap-highlight-color:transparent}
.tap-root .tap-chad-step button:active{transform:scale(.9)}
.tap-root .tap-chad-qty{color:#fff;font-weight:800;font-size:calc(1.0625 * var(--tap-fs));min-width:20px;text-align:center}
/* v6.9.11: the same stepper, used inline by the extra-members quantity row β
the chadhava rule above absolutely positions it onto the item card. */
.tap-root .tap-xm-row .tap-chad-step{position:static;transform:none;flex:none}
.tap-root .tap-chad-item.is-on .tap-chad-img{outline:2.5px solid var(--tap-marigold);outline-offset:1px}
/*
* v7.5.5 β the Chadhava bar was `background: var(--tap-ok) !important` β a
* solid green bar with a translucent-white ghost button, while Puja, VIP Puja
* and Healing each used a different treatment again. Four verticals, one
* action, three looks, and the green came from the SEMANTIC success token, so
* on a white-label install the operator's brand colour never reached the
* booking button and "confirmed" and "buy now" were the same green.
*
* The bar is now the shared white/blurred surface every other vertical uses;
* only the offerings-count layout is Chadhava-specific and that is kept.
*/
/* The Chadhava bar appends [total, CTA] straight onto .tap-sticky with no
.tap-sticky-inner wrapper, so it relied on the old green block's own layout.
Give it the same row the standard bar has: total on the left, one dominant
action on the right, action never shrinking below a comfortable tap width. */
/* flex-direction is stated explicitly: the merged layout layer sets `.tap-sticky {
flex-direction: column }` for the narrow two-line bars, and without naming
the property here that column wins and the CTA drops under the total. */
.tap-root .tap-chad-sticky{border-top:1px solid var(--tap-line);display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
.tap-root .tap-chad-sticky .tap-btn{flex:0 0 auto;min-width:min(58%,220px)}
.tap-root .tap-chad-sticky .tap-sticky-price{flex:1 1 auto;min-width:0}
/* The running total sits on the shared light bar now, so it takes the normal
ink colour β it was forced to #fff for the old green background, which would
otherwise render white-on-white. */
.tap-root .tap-chad-sticky .tap-sticky-price{background:transparent;border-top:none;box-shadow:none;backdrop-filter:none}
.tap-root .tap-chad-sticky .tap-chad-stickylbl{display:flex;align-items:center;gap:12px;color:var(--tap-ink)}
.tap-root .tap-chad-stickycnt{font-weight:700;font-size:calc(0.8125 * var(--tap-fs));color:var(--tap-muted)}
.tap-root .tap-chad-stickyamt{font-weight:800;font-size:calc(1.25 * var(--tap-fs));font-family:var(--tap-font-heading),Georgia,serif;color:var(--tap-ink)}
/* ================= RESPONSIVE: phone = app, tablet = touch, laptop = website ================= */
/* Tablet (768β1023): comfortable padding, touch scrollers stay */
/* Laptop/desktop (β₯1024): centered container + section rows become grids (no sideways scroll) */
/* Phone (<768): app polish */
@media(max-width:767.98px){
.tap-root{padding-left:14px;padding-right:14px}
.tap-root .tap-slider{margin-left:-2px;margin-right:-2px}
}
/* ================= MEMBERSHIP marketing strip (home) + guest note ================= */
.tap-root .tap-mem-strip{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:22px 0;
padding:18px 20px;border-radius:var(--tap-radius,18px);color:var(--tap-gold-dark);
background:var(--grad-gold,linear-gradient(135deg,#ffe9c4,#ffd98f));border:1px solid #ffd98f;
box-shadow:0 6px 18px rgba(249,144,0,.18)}
.tap-root .tap-mem-strip-t{font-family:var(--tap-font-heading),Georgia,serif;font-weight:700;font-size:calc(1.0625 * var(--tap-fs));margin-bottom:3px}
.tap-root .tap-mem-strip-s{font-size:calc(0.8125 * var(--tap-fs));opacity:.85;line-height:1.45}
.tap-root .tap-mem-strip .tap-btn{white-space:nowrap;flex:none}
@media(max-width:767.98px){.tap-root .tap-mem-strip{flex-direction:column;align-items:flex-start}.tap-root .tap-mem-strip .tap-btn{width:100%;text-align:center}}
/* ================= A Β· HOME HERO (mockup match) ================= */
.tap-home-root .tap-hero-cta-row{margin:20px 0 14px}
.tap-home-root .tap-hero-cta{display:inline-flex;align-items:center;gap:8px;
background:var(--grad-gold,linear-gradient(135deg,var(--tap-marigold),var(--tap-turmeric)));color:var(--tap-gold-dark);
font-weight:800;font-size:calc(1 * var(--tap-fs));padding:15px 32px;border-radius:var(--tap-radius-full,999px);
box-shadow:0 12px 28px rgba(249,144,0,.42);transition:transform .2s var(--ease-out,cubic-bezier(.4,0,.2,1))}
.tap-home-root .tap-hero-cta:hover{transform:translateY(-2px)}
.tap-home-root .tap-hero-trust{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:8px}
.tap-home-root .tap-hero-trust-i{display:inline-flex;align-items:center;gap:6px;font-size:calc(0.8125 * var(--tap-fs));font-weight:600;color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(0,0,0,.3)}
@media(max-width:767.98px){.tap-home-root .tap-hero-trust{gap:8px 14px}.tap-home-root .tap-hero-trust-i{font-size:calc(0.75 * var(--tap-fs))}}
/* ================= B Β· POOJA DETAIL β info chips + panels (mockup) ================= */
.tap-root .tap-info-chips{display:flex;gap:9px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none;margin-bottom:6px}
.tap-root .tap-info-chips::-webkit-scrollbar{display:none}
.tap-root .tap-info-chip{flex:none;display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--tap-line);background:#fff;color:var(--tap-muted);
font-family:var(--tap-font-b,inherit);font-weight:700;font-size:calc(0.8125 * var(--tap-fs));padding:9px 15px;border-radius:var(--tap-radius-full,999px);cursor:pointer;transition:.18s;-webkit-tap-highlight-color:transparent}
.tap-root .tap-info-chip.is-on{border-color:var(--tap-purple);background:var(--tap-purple);color:var(--tap-primary-text,#000);box-shadow:0 6px 16px rgba(97,9,190,.28)}
.tap-root .tap-info-panel{display:none;animation:tapFade .25s ease}
.tap-root .tap-info-panel.is-on{display:block}
@keyframes tapFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.tap-root .tap-info-lead{font-weight:700;font-size:calc(0.9375 * var(--tap-fs));color:var(--tap-ink);margin-bottom:8px}
/* process steps */
.tap-root .tap-steps{display:flex;flex-direction:column;gap:14px}
.tap-root .tap-step-row{display:flex;gap:13px;align-items:flex-start}
.tap-root .tap-step-n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--tap-purple-pale);color:var(--tap-purple);font-weight:800;font-size:calc(0.875 * var(--tap-fs));display:flex;align-items:center;justify-content:center}
.tap-root .tap-step-t{font-weight:700;font-size:calc(0.9063 * var(--tap-fs));color:var(--tap-ink)}
.tap-root .tap-step-d{font-size:calc(0.8125 * var(--tap-fs));color:var(--tap-muted);line-height:1.5;margin-top:2px}
/* inclusions */
.tap-root .tap-incl{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.tap-root .tap-incl li{position:relative;padding-left:30px;font-size:calc(0.9063 * var(--tap-fs));color:var(--tap-ink);line-height:1.4}
.tap-root .tap-incl li::before{content:"β";position:absolute;left:0;top:-1px;width:21px;height:21px;border-radius:50%;background:var(--tap-ok);color:#fff;font-size:calc(0.75 * var(--tap-fs));font-weight:800;display:flex;align-items:center;justify-content:center}
/* reviews */
.tap-root .tap-rev{text-align:center;padding:10px 0}
.tap-root .tap-rev-score{font-family:var(--tap-font-heading),Georgia,serif;font-weight:700;font-size:calc(2.75 * var(--tap-fs));color:var(--tap-ink);line-height:1}
.tap-root .tap-rev-stars{color:var(--tap-marigold);font-size:calc(1.25 * var(--tap-fs));letter-spacing:2px;margin:6px 0}
.tap-root .tap-rev-note{font-size:calc(0.8125 * var(--tap-fs));color:var(--tap-muted)}
/* faq */
.tap-root .tap-faq{display:flex;flex-direction:column;gap:9px}
.tap-root .tap-faq-item{border:1px solid var(--tap-line);border-radius:var(--tap-r-md);padding:2px 14px;background:#fff}
.tap-root .tap-faq-item summary,.tap-root .tap-faq-q{cursor:pointer;font-weight:700;font-size:calc(0.875 * var(--tap-fs));color:var(--tap-ink);padding:12px 0;list-style:none}
.tap-root .tap-faq-item summary::-webkit-details-marker,.tap-root .tap-faq-q::-webkit-details-marker{display:none}
.tap-root .tap-faq-item summary::after,.tap-root .tap-faq-q::after{content:"+";float:right;color:var(--tap-purple);font-weight:800;font-size:calc(1.125 * var(--tap-fs))}
.tap-root .tap-faq-item[open] summary::after,.tap-root .tap-faq-item[open] .tap-faq-q::after{content:"β"}
.tap-root .tap-faq-a{font-size:calc(0.8438 * var(--tap-fs));color:var(--tap-muted);line-height:1.55;padding:0 0 13px}
/* ================= C Β· PROFILE DASHBOARD (mockup premium) ================= */
.tap-root .tap-spiritual-header{background:linear-gradient(140deg,var(--tap-purple),#43067f);color:#fff;border-radius:var(--tap-radius-xl,24px);padding:22px 20px;margin-bottom:18px;box-shadow:0 12px 30px rgba(97,9,190,.3);position:relative;overflow:hidden}
.tap-root .tap-spiritual-header::after{content:"";position:absolute;top:-40px;right:-40px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.08)}
.tap-root .tap-spiritual-uid{font-size:calc(0.75 * var(--tap-fs));font-weight:700;letter-spacing:.03em;color:rgba(255,255,255,.85);margin-bottom:5px;position:relative}
.tap-root .tap-spiritual-name{font-family:var(--tap-font-heading),Georgia,serif;font-weight:600;font-size:calc(1.625 * var(--tap-fs));line-height:1.1;margin-bottom:16px;position:relative}
.tap-root .tap-spiritual-stats{display:flex;gap:10px;margin-bottom:16px;position:relative}
.tap-root .tap-spiritual-stat{flex:1;background:rgba(255,255,255,.13);border-radius:var(--tap-r-lg);padding:11px 8px;text-align:center;font-size:calc(0.6875 * var(--tap-fs));color:rgba(255,255,255,.85)}
.tap-root .tap-spiritual-stat strong{display:block;font-family:var(--tap-font-heading),Georgia,serif;font-weight:700;font-size:calc(1.125 * var(--tap-fs));color:#fff;margin-bottom:2px}
.tap-root .tap-level-label{font-size:calc(0.75 * var(--tap-fs));color:rgba(255,255,255,.85);margin-bottom:6px;font-weight:600;position:relative}
.tap-root .tap-level-bar{height:8px;background:rgba(255,255,255,.2);border-radius:var(--tap-r-full);overflow:hidden;position:relative}
.tap-root .tap-level-fill{height:100%;background:linear-gradient(90deg,var(--tap-marigold),var(--tap-turmeric));border-radius:var(--tap-r-full);transition:width 1s cubic-bezier(.4,0,.2,1)}
.tap-root .tap-level-badge{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:calc(0.75 * var(--tap-fs));color:var(--tap-gold-dark);padding:6px 14px;border-radius:var(--tap-r-full);position:relative}
.tap-root .tap-uid-badge{background:rgba(255,255,255,.1);border:1px dashed rgba(255,255,255,.35);border-radius:var(--tap-r-md);padding:10px 14px;display:flex;justify-content:space-between;align-items:center;position:relative}
.tap-root .tap-uid-label{font-size:calc(0.6875 * var(--tap-fs));color:rgba(255,255,255,.7);font-weight:600}
.tap-root .tap-uid-value{font-family:monospace;font-weight:800;font-size:calc(0.875 * var(--tap-fs));color:#fff;letter-spacing:.05em}
.tap-root .tap-logout{margin-top:14px !important;width:100%;background:rgba(255,255,255,.15) !important;color:#fff !important;border:none !important;position:relative}
.tap-root .tap-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin-bottom:14px;scrollbar-width:none}
.tap-root .tap-tabs::-webkit-scrollbar{display:none}
.tap-root .tap-tab{flex:none;border:1.5px solid var(--tap-line);background:#fff;color:var(--tap-muted);font-weight:700;font-size:calc(0.8125 * var(--tap-fs));padding:9px 16px;border-radius:var(--tap-r-full);cursor:pointer;transition:.18s;-webkit-tap-highlight-color:transparent}
.tap-root .tap-tab.is-on,.tap-root .tap-tab.active{border-color:var(--tap-purple);background:var(--tap-purple);color:var(--tap-primary-text,#000);box-shadow:0 6px 16px rgba(97,9,190,.26)}
.tap-root .tap-ref-card{background:var(--grad-gold,linear-gradient(135deg,#ffe9c4,#ffd98f));border-radius:var(--tap-radius,18px);padding:18px;color:var(--tap-gold-dark);box-shadow:0 6px 18px rgba(249,144,0,.2)}
.tap-root .tap-ref-title{font-family:var(--tap-font-heading),Georgia,serif;font-weight:700;font-size:calc(1.0625 * var(--tap-fs));margin-bottom:4px}
.tap-root .tap-ref-desc{font-size:calc(0.8125 * var(--tap-fs));opacity:.85;line-height:1.45;margin-bottom:12px}
.tap-root .tap-ref-code{font-family:monospace;font-weight:800;font-size:calc(1.125 * var(--tap-fs));letter-spacing:.1em;background:rgba(255,255,255,.6);border-radius:var(--tap-r-sm);padding:11px;text-align:center;margin-bottom:10px}
/* ================= PHASE 3 Β· Accessibility (WCAG) + perceived performance ================= */
/* Keyboard focus rings β visible for keyboard users, hidden for mouse (a11y without visual noise) */
.tap-root a:focus-visible,
.tap-root button:focus-visible,
.tap-root input:focus-visible,
.tap-root select:focus-visible,
.tap-root textarea:focus-visible,
.tap-root summary:focus-visible,
.tap-root [tabindex]:focus-visible{outline:3px solid var(--tap-purple);outline-offset:2px;border-radius:var(--tap-r-3xs)}
.tap-root :focus:not(:focus-visible){outline:none}
/* Minimum 44px touch targets on mobile (WCAG 2.5.5 / one-thumb use) */
@media(max-width:767.98px){
.tap-root button,.tap-root .tap-btn,.tap-root a.tap-btn,.tap-root .tap-bnav-item{min-height:44px}
.tap-root .tap-info-chip,.tap-root .tap-tab,.tap-root .tap-slot,.tap-root .tap-delivery-chip{min-height:40px}
.tap-root .tap-chad-step button,.tap-root .tap-qty button{min-width:40px;min-height:40px}
}
/* Respect reduced-motion preference (vestibular safety) */
@media(prefers-reduced-motion:reduce){
.tap-root *,.tap-root *::before,.tap-root *::after{
animation-duration:.001ms !important;animation-iteration-count:1 !important;
transition-duration:.001ms !important;scroll-behavior:auto !important}
}
/* Skeleton shimmer utility for loading states (perceived performance) */
.tap-root .tap-skeleton{background:linear-gradient(100deg,var(--tap-line) 30%,#f6f2fb 50%,var(--tap-line) 70%);background-size:200% 100%;animation:tapShimmer 1.2s ease-in-out infinite;border-radius:var(--tap-r-sm);min-height:12px}
.tap-root .tap-skeleton-card{height:220px;border-radius:var(--tap-radius,18px)}
.tap-root .tap-skeleton-line{height:12px;margin:8px 0}
/* Screen-reader-only text (labels for icon-only controls) */
.tap-root .tap-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Smooth in-page scroll (info chips / anchors) unless reduced-motion */
@media(prefers-reduced-motion:no-preference){.tap-root{scroll-behavior:smooth}}
/* ================= SPIRITUAL PREMIUM REFINEMENT ================= */
/* Signature β a soft divine gold glow at the top of the hero, like aarti light.
Low-opacity overlay, never interferes with content or layout.
v4.9.27: retargeted from the removed .tap-hero-v2 to the compact hero. */
.tap-home-root .tap-hero-compact{position:relative}
.tap-home-root .tap-hero-compact::after{content:"";position:absolute;left:0;right:0;top:0;height:55%;pointer-events:none;
background:radial-gradient(ellipse 70% 100% at 50% 0%, rgba(249,144,0,.16), rgba(249,144,0,0) 70%);z-index:1}
.tap-home-root .tap-hero-compact-body{position:relative;z-index:2}
/* Serene layered elevation on package/tier cards β calm depth, not a hard drop shadow */
/* Typographic polish β Fraunces serif reads more refined a touch tighter */
.tap-root h1,.tap-root h2,.tap-root .tap-hero-title,.tap-root .tap-hero-card-title,.tap-root .tap-tier-name{letter-spacing:-.012em}
.tap-root .tap-hero-title{line-height:1.06}
/* Sticky checkout bar β a hair more depth so it reads as elevated above content */
.tap-root .tap-sticky-cta,.tap-root .tap-chad-sticky{box-shadow:0 -6px 24px -8px rgba(30,10,46,.16)}
/* ============ RESPONSIVE POLISH + MOCKUP ALIGNMENT (v4.9.10) ============ */
/* Legacy .tap-hscroll rows: match section-scroller β become a wrapped grid on laptop
instead of a sideways scroll, so any older row stays consistent on wide screens. */
/* Airier vertical rhythm on tablet/laptop (phones stay tight & app-like) β closer to the
generous whitespace in the reference mockups. */
@media(min-width:768px){
.tap-root .tap-section{margin-top:34px}
.tap-root .tap-section-head{margin-bottom:16px}
}
/* Keep long prose readable on ultra-wide screens (detail descriptions, benefits). */
@media(min-width:1024px){
.tap-root .tap-detail-main .tap-desc,
.tap-root .tap-detail-main .tap-prose{max-width:72ch}
}
/* Card polish to match the clean, elevated cards in the mockups (consistent on every card). */
/* ============ SCREENSHOT FIXES: title wrap, modal overflow, width ============ */
/* Hero/detail title must wrap inside its banner instead of clipping on the right. */
.tap-root .tap-detail-hero-info h1,.tap-root .tap-detail-hero-info h2{overflow-wrap:break-word;word-break:break-word;white-space:normal;max-width:100%}
/* Give the detail hero room so a two-line title is never cut by the fixed aspect ratio. */
.tap-root .tap-detail-hero{aspect-ratio:auto;min-height:200px}
.tap-root .tap-detail-hero-info{padding:16px}
/* Modal must never scroll sideways; inputs stay inside. */
/* Plugin fills whatever width the theme gives it (best with a full-width page template). */
.tap-root{width:100%}
/* Transactional participation/date/add-on styles moved to tap-booking.css (Phase 8). */
/* ============================================================
SINGLE PUJA (CPT) v3 β JSX PujaDetail parity
============================================================ */
.tap-root .tap-pdp-hero{position:relative;border-radius:var(--tap-r-4xl);overflow:hidden;min-height:230px;display:flex;align-items:flex-end;margin-bottom:22px;box-shadow:0 14px 34px rgba(66,7,127,.22)}
.tap-root .tap-pdp-hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tap-root .tap-pdp-hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,24,50,0) 30%,rgba(36,24,50,.72) 100%)}
.tap-root .tap-pdp-hero-info{position:relative;padding:24px;color:#fff;width:100%}
.tap-root .tap-pdp-hero-eyebrow{font-size:calc(0.75 * var(--tap-fs));text-transform:uppercase;letter-spacing:.09em;opacity:.85;margin-bottom:7px;font-weight:600}
.tap-root .tap-pdp-hero-title{font-family:var(--tap-font-heading);font-size:clamp(26px,4.5vw,42px);font-weight:700;line-height:1.15;margin:0 0 10px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.25)}
.tap-root .tap-pdp-hero-rating{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.tap-root .tap-pdp-stars{color:var(--tap-marigold);font-size:calc(0.9375 * var(--tap-fs));letter-spacing:2px}
.tap-root .tap-pdp-rating-num{font-weight:700;font-size:calc(0.875 * var(--tap-fs))}
.tap-root .tap-pdp-rating-count{font-size:calc(0.8125 * var(--tap-fs));color:rgba(255,255,255,.75)}
.tap-root .tap-pdp-watch{position:absolute;top:18px;right:18px;background:rgba(255,255,255,.92);color:var(--tap-purple-deep);border:none;border-radius:var(--tap-r-full);padding:8px 16px;font-size:calc(0.8125 * var(--tap-fs));font-weight:700;cursor:pointer}
/* Buy card */
.tap-root .tap-pdp-buy{background:#FBF7F0;border:1px solid #F0E7D6;border-radius:var(--tap-r-2xl);padding:18px}
.tap-root .tap-pdp-from{margin-bottom:12px}
.tap-root .tap-pdp-from-lbl{font-size:calc(0.6875 * var(--tap-fs));color:var(--tap-muted);text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.tap-root .tap-pdp-from-price{font-family:var(--tap-font-heading);font-size:calc(1.875 * var(--tap-fs));font-weight:700;color:var(--tap-purple);line-height:1.1;margin-top:2px}
.tap-root .tap-pdp-tiers{margin-bottom:16px}
.tap-root .tap-pdp-tier-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid #EDE4D3;font-size:calc(0.875 * var(--tap-fs))}
.tap-root .tap-pdp-tier-row:last-child{border-bottom:none}
.tap-root .tap-pdp-tier-name{font-weight:600;text-transform:capitalize;color:var(--tap-ink)}
.tap-root .tap-pdp-tier-price strong{color:var(--tap-purple);font-size:calc(0.9063 * var(--tap-fs))}
.tap-root .tap-pdp-tier-price del{font-size:calc(0.75 * var(--tap-fs));color:var(--tap-muted);margin-left:5px}
.tap-root .tap-pdp-book{text-align:center;text-decoration:none;display:block;padding:15px;border-radius:var(--tap-r-lg);font-family:var(--tap-font-heading);font-size:calc(1 * var(--tap-fs))}
.tap-root .tap-pdp-signals{margin-top:16px;list-style:none;padding:0;display:grid;gap:9px}
.tap-root .tap-pdp-signals li{display:flex;align-items:center;gap:9px;font-size:calc(0.8125 * var(--tap-fs));color:#4A3D57}
.tap-root .tap-pdp-signals b{color:var(--tap-ink);font-weight:700}
.tap-root .tap-pdp-sig-ic{width:22px;height:22px;border-radius:7px;background:var(--tap-bg);display:grid;place-items:center;font-size:calc(0.75 * var(--tap-fs));flex-shrink:0}
/* =====================================================================
* v7.9.0 β White-label premium dashboard modules
* These surfaces previously depended on inline literal colours. They now
* inherit Brand Customizer tokens and remain hidden unless App Controls has
* real operator-authored content for them.
* =================================================================== */
.tap-live-sankalp-banner{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin:14px 0 18px;
padding:12px 14px;
border:1px solid color-mix(in srgb,var(--tap-purple) 22%,var(--tap-line));
border-radius:var(--tap-card-radius,14px);
background:color-mix(in srgb,var(--tap-purple-pale) 58%,var(--tap-card));
color:var(--tap-ink);
box-shadow:var(--tap-shadow-sm);
font-size:13px;
}
.tap-live-sankalp-copy{display:flex;align-items:center;gap:9px;min-width:0}
.tap-live-sankalp-copy strong{overflow-wrap:anywhere}
.tap-live-sankalp-badge{
flex:0 0 auto;
padding:4px 9px;
border-radius:999px;
background:var(--tap-purple);
color:var(--tap-cta-text);
font-size:12px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
}
.tap-live-sankalp-banner .tap-pulse-dot{
width:9px;height:9px;border-radius:50%;flex:0 0 9px;
background:var(--tap-purple);
box-shadow:0 0 0 0 color-mix(in srgb,var(--tap-purple) 45%,transparent);
animation:tapPulse 1.6s ease-out infinite;
}
.tap-devotee-trust-strip{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:10px;
margin:14px 0 18px;
padding:12px;
background:var(--tap-card);
border:1px solid var(--tap-line);
border-radius:var(--tap-card-radius,14px);
box-shadow:var(--tap-shadow-sm);
}
.tap-devotee-trust-item{display:flex;align-items:center;gap:9px;min-width:0}
.tap-devotee-trust-icon{display:inline-flex;color:var(--tap-purple);flex:0 0 auto}
.tap-devotee-trust-title{font-size:12px;font-weight:800;color:var(--tap-ink);line-height:1.25}
.tap-devotee-trust-desc{margin-top:2px;font-size:12px;color:var(--tap-muted);line-height:1.3}
.tap-seva-matrix{
width:100%;
border-collapse:separate;
border-spacing:0;
margin:12px 0 16px;
overflow:hidden;
border:1px solid var(--tap-line);
border-radius:12px;
background:var(--tap-card);
font-size:12px;
}
.tap-seva-matrix th,
.tap-seva-matrix td{padding:9px 10px;border-bottom:1px solid var(--tap-line);text-align:left}
.tap-seva-matrix th{background:var(--tap-purple-pale);color:var(--tap-ink);font-weight:800}
.tap-seva-matrix tr:last-child td{border-bottom:0}
.tap-seva-matrix .is-center{text-align:center}
.tap-seva-matrix td.is-center{font-weight:800;color:var(--tap-purple)}
@media(max-width:767.98px){
.tap-live-sankalp-banner{align-items:flex-start;padding:11px 12px}
.tap-devotee-trust-strip{grid-template-columns:1fr 1fr;padding:10px}
.tap-seva-matrix{font-size:12px}
.tap-seva-matrix th,.tap-seva-matrix td{padding:8px 6px}
}
@media(max-width:380px){.tap-devotee-trust-strip{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.tap-live-sankalp-banner .tap-pulse-dot{animation:none}}
/* =====================================================================
Responsive presentation foundation. Layout follows CSS/container width only:
mobile <768 Β· tablet 768β1023 Β· desktop β₯1024. No UA/device JS participates.
===================================================================== */
/* ---------------------------------------------------------------------
2. DESKTOP LAYOUT β stop the app reading as a stretched phone column.
The content column gets a real desktop width; horizontal rails become
multi-column grids (reuses patterns already present in premium.css).
--------------------------------------------------------------------- */
@media (min-width: 1024px) {
/* Home hero reads as a banner, not a full-bleed phone card. */
.tap-hero-compact { padding: 40px 44px 44px; }
.tap-hero-compact-title { font-size:calc(2.125 * var(--tap-fs)); max-width: 18ch; }
/* Card rails β responsive grids on desktop (no awkward side-scroll).
These MUST stay inside the β₯1024 query: at phone widths the rails are
deliberately swipeable, and a grid here collapses them into a stack. */
.tap-home-root .tap-hscroll-snap,
.tap-fcard-rail,
.tap-testimonials {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 18px; overflow: visible;
}
.tap-fcard, .tap-fav-card, .tap-testi-card { width: auto !important; }
/* Deity row centered rather than left-scrolling. */
.tap-deity-grid { justify-content: center; }
}
/* Tablet: hybrid β a touch of extra breathing room, keep touch nav. */
@media (min-width: 768px) and (max-width: 1023.98px) {
.tap-hero-compact { padding: 30px 30px 32px; }
}
/* ---------------------------------------------------------------------
3. INTERACTION PATTERN β hover only where a real pointer exists.
Touch devices should not get sticky :hover states after a tap.
--------------------------------------------------------------------- */
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
v4.9.34 β QA BUG-06:/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
v4.9.34 β QA BUG-06: horizontal overflow at ~1024β1279px viewports.
Root causes: the 1160px desktop container could exceed viewports just
under it (e.g. 1150px), and the sticky bottom bar / add-on grid used
fixed tracks with non-shrinkable flex children. Guarantee gutters,
let flex children shrink (min-width:0) and let rows wrap instead of
clipping prices and trust badges.
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
body.tap-canvas { overflow-x: clip; }
@media (min-width: 1024px) {
.tap-addons-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.tap-addon-card { min-width: 0; }
.tap-addon-bottom { flex-wrap: wrap; gap: 6px; }
.tap-addon-price-tag { white-space: nowrap; }
}
/* Sticky checkout bar: shrink + wrap, never clip (all widths). */
.tap-sticky { flex-wrap: wrap; }
.tap-sticky-inner { flex-wrap: wrap; min-width: 0; }
.tap-sticky-price { min-width: 0; }
.tap-sticky-trust { flex-wrap: wrap; row-gap: 4px; }
.tap-sticky .tap-btn-gold,
.tap-sticky .tap-btn-cta { max-width: 100%; }
/* Detail participation configuration moved to tap-booking.css (Phase 8). */
/* βββ v6.9.12 β BOTTOM-SHEET CARD NORMALISATION (overlap fix) βββββββββββββββ
The participation & add-on sheets are a FIXED ~520px panel at every
viewport, but they mount on and so inherit the admin's PAGE-level
tier-column setting (e.g. tap-tiercols-d3 β three 153px columns). Crammed
into 520px, the tick, the "Most Popular" badge and the add-on "Add" button
all collide with the card text (reported on desktop-width sheets).
A sheet is intrinsically narrow, so its cards ALWAYS stack as one-column
rows with the tick and Add button in normal flow β never absolutely
dropped onto the title. !important + the body-scoped selector beat both the
inherited grid variable and the .tap-tiercols-d3 column rule. */
/* Add-on rows: one per line, so the price + "Add" pill get the full sheet
width and never clip against the panel edge. */
/* ---- #3/#9 Booking-page sticky CTA bar: style + alignment ------------- */
/* pill β floating rounded dock (the app look), full β edge-to-edge bar.
auto (default) keeps the shipped behaviour: bar on phones, dock β₯1024. */
.tap-ctabar-pill .tap-sticky {
left: 50%; right: auto; transform: translateX(-50%);
width: calc(100% - 24px); max-width: 640px;
bottom: 10px; border-radius: var(--tap-r-2xl);
border: 1px solid var(--tap-line);
}
.tap-ctabar-pill.tap-ctabar-left .tap-sticky { left: 12px; transform: none; }
.tap-ctabar-pill.tap-ctabar-right .tap-sticky { left: auto; right: 12px; transform: none; }
.tap-ctabar-full .tap-sticky {
left: 0; right: 0; transform: none; max-width: none; width: auto;
border-radius: 0; bottom: 0;
}
@media (min-width: 1024px) {
/* full mode must also beat the desktop dock rule in the original core rules */
.tap-ctabar-full .tap-sticky { left: 0; right: 0; transform: none; max-width: none; border-radius: 0; }
.tap-ctabar-pill.tap-ctabar-left .tap-sticky { left: 24px; }
.tap-ctabar-pill.tap-ctabar-right .tap-sticky { right: 24px; }
}
/* Profile style variants moved to tap-account.css (Phase 6). */
/* ---- #6 PDP gallery: give the server-rendered gallery the same
comfortable sizing the SPA one gets, before Layout Studio
upgrades it into carousel/slider/lightbox. ------------------------ */
.tap-root .tap-gallery { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.tap-root .tap-gallery .tap-gthumb img { width: 100%; height: 100%; aspect-ratio: var(--tap-gal-ratio, 4/3); object-fit: cover; display: block; }
/* ---- #1 Responsive corrections (v5.6.0 testing feedback) -------------- */
/* Nothing here invents a new layout β it repairs the places where the
phone layout leaked onto desktop or the desktop layout crushed phones. */
/* Phones: the root must never allow sideways scroll, media never overflows. */
.tap-root img, .tap-root video { max-width: 100%; height: auto; }
.tap-root { overflow-x: clip; }
@media (max-width: 767.98px) {
/* PDP hero: phone-appropriate height (it inherited the desktop 230px+scrim). */
.tap-root .tap-pdp-hero { min-height: 190px; }
.tap-root .tap-pdp-hero-title { font-size: clamp(22px, 6.5vw, 30px); }
/* Progress bar: three steps must fit a 360px screen without clipping. */
.tap-root .tap-progress-bar { gap: 6px; }
.tap-root .tap-ps-lbl { font-size:calc(0.6563 * var(--tap-fs)); }
/* Detail sidebar stacks under content (belt-and-braces with tap-frontend). */
.tap-root .tap-detail-layout { grid-template-columns: 1fr; }
.tap-root .tap-sticky-box { position: static; }
/* Floating PDP CTA bar: keep the button tappable, price readable. */
.tap-pdp-floatbar { flex-wrap: wrap; gap: 8px; }
.tap-pdp-floatbar .tap-pdp-book { min-width: 0 !important; flex: 1; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
/* Tablets: two-column tier grid reads better than one long stack
when the admin chose auto β but ONLY when they opted into columns. */
.tap-tiercols-d2 .tap-root .tap-tiers,
.tap-tiercols-d3 .tap-root .tap-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Participation, sticky CTA and Sankalp responsive corrections moved to tap-booking.css (Phase 8). */
/* Astrologer console tabs moved to tap-consultation.css (Phase 8). */
/* ββ v7.6.4 Payment method chooser ββββββββββββββββββββββββββββββββββββββββ/* ββ v7.6.4 Payment method chooser ββββββββββββββββββββββββββββββββββββββββ
Replaces the v5.8.0 `.tap-wpay` cards. Those sat AFTER the Pay button
behind an "β or β" divider and each carried its own CTA, so the checkout
showed two competing primary buttons. The wallet is now a radio option
inside the bill: one breakdown, one button.
Native is kept in the flow (not display:none) so it
stays focusable and reachable by assistive tech; it is visually sized
rather than replaced by a drawn pseudo-element. */
.tap-root .tap-paymethods { margin-top: 14px; }
.tap-root .tap-paymethods-hd {
font-weight: 800; color: var(--tap-ink);
font-size:calc(0.8125 * var(--tap-fs));
letter-spacing: .04em; text-transform: uppercase;
margin-bottom: 8px;
}
.tap-root .tap-paymethod {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center; gap: 12px;
min-height: 44px; /* touch target */
padding: 12px 14px;
border: 1px solid var(--tap-line);
border-radius: var(--tap-r-lg, 14px);
background: var(--tap-card);
cursor: pointer;
margin-bottom: 8px;
}
.tap-root .tap-paymethod:last-child { margin-bottom: 0; }
.tap-root .tap-paymethod:has(.tap-paymethod-in:checked) {
border-color: var(--tap-purple);
background: var(--tap-purple-pale, var(--tap-purple-pale));
box-shadow: 0 0 0 1px var(--tap-purple) inset;
}
/* :has() is unsupported on older Safari/Firefox β the row still works there,
it just loses the selected tint. The radio dot remains the state cue. */
.tap-root .tap-paymethod-in { width: 20px; height: 20px; margin: 0; accent-color: var(--tap-purple); flex: none; }
.tap-root .tap-paymethod-in:focus-visible { outline: 2px solid var(--tap-purple); outline-offset: 2px; }
.tap-root .tap-paymethod-body { display: grid; gap: 2px; min-width: 0; }
.tap-root .tap-paymethod-t { font-weight: 800; color: var(--tap-ink); font-size:calc(0.9375 * var(--tap-fs)); }
.tap-root .tap-paymethod-n { color: var(--tap-muted); font-size:calc(0.7813 * var(--tap-fs)); line-height: 1.4; }
.tap-root .tap-paymethod-amt {
font-weight: 800; color: var(--tap-ink);
font-size:calc(0.9375 * var(--tap-fs));
font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Wallet lines injected into the bill itself when a wallet method is chosen. */
.tap-root .tap-sumrow-wallet.is-debit span:last-child { color: #1a7f4e; font-weight: 700; }
.tap-root .tap-sumrow-wallet.is-due { border-top: 1px dashed var(--tap-line); font-weight: 800; }
/* Balance present but too small, and split payment is switched off: an
explanation, never a second CTA (v7.5.10 behaviour, restyled). */
.tap-root .tap-wshort {
margin-top: 14px; padding: 13px 15px;
background: var(--tap-sunk, #f4f1f7);
border: 1px solid var(--tap-line);
border-radius: var(--tap-r-lg, 14px);
}
.tap-root .tap-wshort-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tap-root .tap-wshort-t { font-weight: 800; font-size:calc(0.875 * var(--tap-fs)); color: var(--tap-ink); }
.tap-root .tap-wshort-bal { font-weight: 800; font-size:calc(0.9375 * var(--tap-fs)); font-variant-numeric: tabular-nums; color: var(--tap-ink); }
.tap-root .tap-wshort-note { margin: 7px 0 0; font-size:calc(0.8125 * var(--tap-fs)); line-height: 1.5; color: var(--tap-muted); }
.tap-root .tap-wshort-topup { display: inline-block; margin-top: 9px; min-height: 44px; line-height: 44px; font-size:calc(0.8438 * var(--tap-fs)); font-weight: 800; color: var(--tap-purple); text-decoration: underline; text-underline-offset: 3px; }
/* ββ #6 De-hardcoded UI: cards, buttons, banners, grid/list βββββββββββββ */
.tap-root .tap-btn, .tap-root .tap-btn-cta, .tap-root .tap-book-btn-sm, .tap-root .tap-delivery-chip {
border-radius: var(--tap-btn-radius, 999px);
}
.tap-root .tap-banner, .tap-root .tap-hero-banner, .tap-root .tap-poster img {
height: var(--tap-banner-h-m, auto); object-fit: var(--tap-banner-fit, cover); max-width: 100%;
}
@media (min-width: 1024px) {
.tap-root .tap-banner, .tap-root .tap-hero-banner, .tap-root .tap-poster img {
height: var(--tap-banner-h-d, var(--tap-banner-h-m, auto));
}
}
body.tap-listview-list .tap-root .tap-grid,
body.tap-listview-list .tap-home-root .tap-grid { grid-template-columns: 1fr !important; }
/* ββ #8 General mobile hygiene: nothing exceeds the viewport ββββββββββββ */
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
v6.3.0 β marketplace-pattern detail UI (brand-variable driven, NO hardcoded
theme colors; every hue resolves from the Brand Customizer variables
with neutral fallbacks). Mobile-first, tablet + desktop tuned below.
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* Puja detail hero presentation moved to tap-booking.css (Phase 6). */
/* ββ Style 3: Banner listing cards ββ */
.tap-listview-banner .tap-root .tap-grid { display: flex; flex-direction: column; gap: 16px; }
.tap-root .tap-date-badge { position: absolute; left: 12px; top: 12px; background: #fff; border-radius: var(--tap-r-md); padding: 6px 10px 5px; text-align: center; line-height: 1; box-shadow: 0 3px 10px rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 2px; }
.tap-root .tap-db-day { font-size:calc(1.125 * var(--tap-fs)); font-weight: 900; color: var(--tap-purple); }
.tap-root .tap-db-mon { font-size:calc(0.625 * var(--tap-fs)); font-weight: 800; letter-spacing: .08em; color: var(--tap-ink); opacity: .7; }
/* ββ Featured chadhava item ββ */
.tap-root .tap-chad-item.is-featured { border: 2px solid var(--tap-gold, var(--tap-marigold)); background: color-mix(in srgb, var(--tap-gold, var(--tap-marigold)) 6%, #fff); border-radius: var(--tap-r-lg); }
.tap-root .tap-chad-feat-badge { display: inline-block; background: var(--tap-gold, var(--tap-marigold)); color: #fff; font-size:calc(0.6875 * var(--tap-fs)); font-weight: 800; letter-spacing: .04em; padding: 3px 9px; border-radius: var(--tap-r-full); margin-bottom: 4px; }
/* ββ Splash / onboarding polish (desktop centering + consistency) ββ */
.tap-splash, .tap-onboard { padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); }
.tap-ob-sheet { width: min(560px, 94vw); margin: 0 auto; }
/* ββ Responsive: tablet ββ */
@media (min-width: 768px) {
.tap-listview-banner .tap-root .tap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
}
/* ββ Responsive: laptop/desktop ββ */
/* color-mix fallbacks for older browsers */
@supports not (background: color-mix(in srgb, red 10%, #fff)) {
.tap-root .tap-chad-item.is-featured { background: #fffaf2; }
}
/* v6.3.1 β fullscreen photo grid (hero "All Photos" lightbox) */
.tap-pg-ov { position: fixed; inset: 0; z-index: var(--tap-layer-fullscreen); background: rgba(20,10,30,.94); display: flex; flex-direction: column; overscroll-behavior: contain; }
.tap-pg-bar { display: flex; align-items: center; justify-content: space-between; padding: max(14px, env(safe-area-inset-top)) 18px 12px; color: #fff; }
.tap-pg-ttl { font-family:var(--tap-font-heading); font-size:calc(1.0625 * var(--tap-fs)); font-weight: 700; }
.tap-pg-x { background: rgba(255,255,255,.14); color: #fff; border: 0; width: 36px; height: 36px; border-radius: 50%; font-size:calc(1 * var(--tap-fs)); cursor: pointer; }
.tap-pg-grid { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; display: grid; grid-template-columns: 1fr; gap: 10px; padding: 4px 14px max(18px, env(safe-area-inset-bottom)); }
.tap-pg-cell { width: 100%; aspect-ratio: 4/3; background-size: cover; background-position: center; border-radius: var(--tap-r-md); }
@media (min-width: 768px) { .tap-pg-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .tap-pg-grid { grid-template-columns: 1fr 1fr 1fr; max-width: 1100px; margin: 0 auto; width: 100%; } }
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
v6.4.0 β Booking-screen UX fixes (reported from staging)
1. Coupon (and any last section) was hidden behind the fixed bottom
bar on laptops: the padding compensation only existed below
1024px. Now every breakpoint reserves room.
2. The sticky bar's price text could not shrink (flex child without
min-width), so long labels pushed the row wider than the viewport
and clipped the first characters on the left.
3. Add-on "β Added" pill could overflow its card on narrow columns.
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* 1 ββ Never let the fixed bar cover the last section (all breakpoints) */
/* The coupon block is usually last β guarantee clearance and visibility. */
.tap-root .tap-section-coupon { position: relative; z-index: 1; scroll-margin-bottom: 160px; }
.tap-root .tap-section:last-of-type { margin-bottom: 8px; }
/* Sticky/add-on overflow handling moved to tap-booking.css (Phase 8). */
/* 4 ββ Nothing on the booking screen may exceed the viewport, any size */
.tap-root img, .tap-root video { max-width: 100%; height: auto; }
/* ββ v6.4.0 Phase 2: participation / add-on bottom sheets ββββββββββββββ */
.tap-root .tap-sheet-trigger {
display: flex; align-items: center; gap: 12px; width: 100%;
background: #fff; border: 1.5px solid var(--tap-line); border-radius: var(--tap-r-lg);
padding: 13px 14px; cursor: pointer; font: inherit; text-align: left;
transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.tap-root .tap-sheet-trigger:hover { border-color: var(--tap-purple); box-shadow: var(--tap-glow); }
.tap-root .tap-st-ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--tap-r-md); background: var(--tap-purple-pale); display: grid; place-items: center; font-size:calc(1.1875 * var(--tap-fs)); }
.tap-root .tap-st-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tap-root .tap-st-title { font-size:calc(0.8125 * var(--tap-fs)); font-weight: 800; color: var(--tap-ink); }
.tap-root .tap-st-value { font-size:calc(0.7813 * var(--tap-fs)); color: var(--tap-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tap-root .tap-st-go { flex-shrink: 0; font-size:calc(0.7813 * var(--tap-fs)); font-weight: 800; color: var(--tap-purple); }
/**
* DIVSA Phase-2 β customer polish pass (v6.9.85)
* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
* Deliberately a separate, LAST-loaded sheet: every rule here is a
* correction to an existing rule, so keeping them together makes the pass
* reviewable and revertible in one move. See docs/PHASE2-CUSTOMER-AUDIT.md.
*
* Nothing here introduces new visual language β it only fixes geometry,
* input sizing and viewport units that were measurably wrong on mobile.
*/
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
P0-1 Β· The sticky booking CTA completely covered the bottom navigation.
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
MEASURED at 403px on a puja detail page (v6.9.84):
.tap-sticky top 768 bottom 873 height 104 z-index 500
.tap-bottomnav top 800 bottom 873 height 73 z-index 90
73px of overlap β the whole nav. elementFromPoint() at the nav's centre
returned .tap-sticky-trust, so every nav item was unclickable and the
only way off a detail page was browser-back.
Both bars are `position:fixed; bottom:0` and neither knew about the
other. the Universal Responsive Engine's "#13 Bottom navigation overlap" block reserved
page padding for the pair but never actually separated them.
Fix: dock the CTA immediately ABOVE the nav whenever the nav is on
screen. z-index is left alone β once they no longer intersect there is
nothing to win by reordering, and raising the nav above a payment CTA
would be the wrong precedence if a future layout does overlap them.
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* Auth sheets and full-screen creative cannot be wider than the layout
viewport. This is intentionally width:100%, never 100vw. */
.tap-auth-tab { overflow-wrap: normal; word-break: normal; }
.tap-auth-tab span { white-space: nowrap; }
.tap-splash,
.tap-onboard {
width: 100%;
left: 0;
right: 0;
padding-left: max(20px, env(safe-area-inset-left, 0px));
padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.tap-ob-body { width: 100%; }
.tap-ob-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
.tap-ob-card { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 767.98px) {
.tap-ob-grid .tap-ob-card:last-child:nth-child(odd) {
grid-column: 1 / -1;
justify-self: center;
width: calc(50% - 6px);
}
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
P1-2 Β· The admin border-radius control was mostly inert.
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
MEASURED on the listing page: driving the Brand Customizer's radius
slider from 18px to 4px changed **3 of 56** rounded elements. 53 ignored
it β 31 stuck at 12px (the cards) and 22 at 20px (badges and pills).
Cause: class-tap-customizer.php:298-299 emits only `--tap-radius` and
`--tap-radius-xl`. The other 256 border-radius declarations in the CSS
are hardcoded px, so an operator drags the slider and the cards β the
most visible rounded thing on the page β do not move.
Fix: one proportional scale, all derived from the admin value. Each
ratio is chosen so that at the shipped default (18px) the computed
result is the value that is hardcoded today, to within a thousandth of
a pixel. So this changes NOTHING at the default β it only makes the
slider reach the rest of the UI, which is what it always claimed to do.
ratio Γ 18px = the value it replaces
0.2222 β 4px 0.7778 β 14px 1.1111 β 20px
0.3333 β 6px 0.8889 β 16px 1.2222 β 22px
0.4444 β 8px 1.0000 β 18px 1.5556 β 28px
0.5556 β 10px
0.6667 β 12px
--tap-r-full stays a literal: a pill must remain a pill at every slider
position, and scaling 999px would make it stop being one.
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
:root {
--tap-r-2xs: calc(var(--tap-radius, 18px) * 0.2222);
--tap-r-3xs: calc(var(--tap-radius, 18px) * 0.3333);
--tap-r-xs: calc(var(--tap-radius, 18px) * 0.4444);
--tap-r-sm: calc(var(--tap-radius, 18px) * 0.5556);
--tap-r-md: calc(var(--tap-radius, 18px) * 0.6667);
--tap-r-lg: calc(var(--tap-radius, 18px) * 0.7778);
--tap-r-xl: calc(var(--tap-radius, 18px) * 0.8889);
--tap-r-2xl: var(--tap-radius, 18px);
--tap-r-3xl: calc(var(--tap-radius, 18px) * 1.1111);
--tap-r-4xl: calc(var(--tap-radius, 18px) * 1.2222);
--tap-r-5xl: calc(var(--tap-radius, 18px) * 1.5556);
--tap-r-full: 999px;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
P0-2 Β· Form controls under 16px made mobile browsers zoom the viewport.
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Mobile Safari (always) and Android Chrome (in several common configs)
zoom the layout viewport when a focused control has font-size < 16px.
The page correctly does NOT set maximum-scale β disabling zoom would be
a WCAG 1.4.4 failure β so the viewport STAYS zoomed after blur, and the
next refresh renders at that scale. That is the reported "refresh auto
zooms / layout shifts / viewport unstable" behaviour in Bug 1.
MEASURED live: .tap-inp.tap-coupon-inp = 14px, inside checkout.
STATIC: .tap-input 15px, .tap-hero-compact-search input 14px,
.tap-cst-input 14px, .tap-sankalp-sacred textarea 15px.
16px is a browser threshold, not a design choice β it is read from the
computed style regardless of how the field looks. Padding is trimmed
slightly on the compact fields so the control's box does not grow.
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
@media (max-width: 1023.98px) {
.tap-root input[type="text"],
.tap-root input[type="tel"],
.tap-root input[type="email"],
.tap-root input[type="number"],
.tap-root input[type="search"],
.tap-root input[type="password"],
.tap-root input:not([type]),
.tap-root select,
.tap-root textarea,
.tap-input,
.tap-inp,
.tap-cst-input,
.tap-search-box input,
.tap-hero-compact-search input,
.tap-sankalp-sacred textarea {
font-size:calc(1 * var(--tap-fs));
}
/* Keep the compact fields visually compact despite the larger text. */
.tap-hero-compact-search input { padding-top: 0; padding-bottom: 0; }
.tap-cst-input { padding: 10px 12px; }
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
P1-3 Β· `vh` on sheets vs Android Chrome's dynamic toolbar.
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
REASONED, not measured β the desktop-Chrome preview has no retracting
toolbar, so this needs a real device to confirm.
`vh` resolves against the LARGE viewport (toolbar retracted). While the
toolbar is shown, a 92vh sheet is taller than the visible area and its
primary action is pushed below the fold. `dvh` tracks the live viewport.
min() keeps the original value wherever `dvh` is unsupported, so this
can only ever shrink an over-tall sheet β never grow one.
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
@media (min-width: 768px) {
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
P0-3 Β· Install prompt bar (TAP_PWA::boot_script).
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
The install prompt is positioned by the canonical fixed-surface coordinator,
so it cannot collide with navigation or a transaction CTA. Only visible
when the browser has fired beforeinstallprompt.
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.tap-pwa-bar {
position: fixed;
left: 12px;
right: 12px;
z-index: var(--tap-layer-fab);
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 12px 14px;
border-radius: var(--tap-radius, 18px);
background: var(--tap-card);
color: var(--tap-ink);
border: 1px solid var(--tap-line);
box-shadow: 0 10px 34px rgba(30, 10, 46, .16);
animation: tapPwaRise var(--dur-slow, 400ms) var(--ease-spring, cubic-bezier(.34,1.56,.64,1)) both;
}
@media (min-width: 768px) {
.tap-pwa-bar { left:auto; right:20px; max-width:26rem; }
}
.tap-pwa-bar-txt {
flex: 1 1 12rem;
min-width: 0;
margin: 0;
font-size:calc(0.875 * var(--tap-fs));
font-weight: 700;
line-height: 1.4;
}
.tap-pwa-bar-acts { display: flex; gap: 8px; margin-left: auto; }
.tap-pwa-bar-no,
.tap-pwa-bar-yes {
font: inherit;
font-size:calc(0.875 * var(--tap-fs));
font-weight: 700;
min-height: 44px;
padding: 0 18px;
border-radius: var(--tap-r-full, 999px);
cursor: pointer;
transition: transform var(--dur-fast, 150ms) var(--ease-out, cubic-bezier(.4,0,.2,1)),
background var(--dur-fast, 150ms) var(--ease-out, cubic-bezier(.4,0,.2,1));
}
.tap-pwa-bar-no {
border: 1px solid var(--tap-line);
background: transparent;
color: var(--tap-muted);
}
.tap-pwa-bar-yes {
border: 0;
background: var(--tap-purple);
color: var(--tap-cta-text);
}
.tap-pwa-bar-no:active,
.tap-pwa-bar-yes:active { transform: scale(.97); }
@keyframes tapPwaRise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.tap-pwa-bar { animation: none; }
.tap-pwa-bar-no:active,
.tap-pwa-bar-yes:active { transform: none; }
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
P1-5 Β· The "No dates available" CTA could not be tapped at all.
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
.is-disabled sets pointer-events:none, and 50-detail.js also set the
`disabled` attribute. Between them the sticky CTA swallowed every tap:
elementFromPoint at its centre returned .tap-sticky-inner, and the
toast_no_dates guard behind it was unreachable dead code. The devotee
tapped the biggest control on screen and nothing happened.
The JS no longer sets `disabled`; this restores pointer events for that
one case so the handler can explain itself and scroll to the notice.
Everything else about the disabled look is untouched, and the booking
guard still returns early, so no booking can be created from this state.
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.tap-root .tap-sticky .tap-btn-cta.is-disabled[aria-disabled="true"] {
pointer-events: auto;
cursor: not-allowed;
}
/* Booking-card anatomy and actions moved to tap-account.css (Phase 6). */
/* Bottom-nav SVG icons (v6.9.91). `.tap-bn-ic` was sized with font-size for
emoji; an SVG needs explicit box dimensions. Emoji configs still work β the
font-size rule underneath is untouched and applies when no SVG is present. */
.tap-root .tap-bn-ic svg,
.tap-bn-ic svg {
width: 22px;
height: 22px;
display: block;
}
.tap-bn-item.is-center .tap-bn-ic svg { width: 25px; height: 25px; }
/* Icon sizing is shared by both layouts. */
.tap-root .tap-tab-ic {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
}
.tap-root .tap-tab-ic svg { width: 22px; height: 22px; display: block; }
/* Desktop keeps the familiar horizontal row, icon beside the label. */
@media (min-width: 1024px) {
.tap-root .tap-tabs > .tap-tab {
display: inline-flex;
align-items: center;
gap: 7px;
}
.tap-root .tap-tab-ic svg { width: 17px; height: 17px; }
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
v6.9.91 Β· The WhatsApp opt-in was a bare checkbox floating on the page.
Give it the same card treatment every other control already has.
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.tap-root .tap-optin {
display: flex;
align-items: center;
gap: 10px;
margin: 14px 0;
padding: 12px 14px;
min-height: 44px;
border-radius: var(--tap-r-md, 12px);
background: var(--tap-card);
border: 1px solid var(--tap-line);
font-size:calc(0.875 * var(--tap-fs));
cursor: pointer;
}
.tap-root .tap-optin input[type="checkbox"] { width: 20px; height: 20px; flex: none; cursor: pointer; }
/* Account contrast and primary action states moved to tap-account.css (Phase 6). */
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
v6.9.92 Β· The customer density control barely reached the UI.
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
MEASURED by driving --tap-section-gap and --tap-card-pad and counting
which elements moved:
/book/ 15 of 151 spaced elements responded (10%)
/my-bookings/ 0 of 215 spaced elements responded ( 0%)
Cause: tap-layout.css targets `.tap-section`, `.tap-card` and `.tap-pkg`.
The catalogue cards are `.tap-pcard` and the dashboard cards are
`.tap-bkcard` β neither is `.tap-card`, so the padding rule matched
nothing and only section margins moved. Same shape as the radius
slider: a real setting wired to selectors that are not on the page.
Rather than tokenising 288 literals into an 18-step "scale" that would
only document the drift, the existing control is extended to the
containers it always meant to cover. Every ratio below is chosen so the
default values (--tap-card-pad 10px, --tap-section-gap 20px) reproduce
TODAY'S measured pixels exactly, so nothing moves until an operator
changes the setting:
.tap-pcard padding 10 = pad Γ 1 .tap-body padding 12 = pad Γ 1.2
.tap-pcard gap 14 = pad Γ 1.4 .tap-body gap 6 = pad Γ 0.6
.tap-section mb 26 = gap Γ 1.3 .tap-section-scroller gap 16 = gap Γ 0.8
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* v7.6.4: the ratio maths multiplies --tap-card-pad-s, the SCALAR companion
to --tap-card-pad. --tap-card-pad itself is emitted as a two-value shorthand
("12px 14px"), and calc() on a shorthand is invalid at computed-value time β
the declaration resets to the property's initial value (0) instead of
falling back down the cascade, silently and with no console error.
Direct `padding:` use of the shorthand is correct and stays. */
.tap-root .tap-section { margin-bottom: calc(var(--tap-section-gap, 20px) * 1.3); }
.tap-root .tap-section-scroller { gap: calc(var(--tap-section-gap, 20px) * 0.8); }
/* The dashboard was at 0% β its cards are .tap-bkcard, which the shipped
rules never mentioned. the merged premium layer:637 sets padding:16px, so the ratio
is Γ 1.6. (An earlier draft here guessed Γ 1.4 from memory and would have
quietly shaved 2px off every booking card β checked against the source
rather than shipped.) */
/* v7.6.4: .tap-prof-card joins its sibling CONTENT card here, so the density
control moves both together instead of leaving the profile groups pinned at
16px while the booking cards breathed. Its bottom padding is still trimmed
in the merged premium layer β the fields inside carry their own bottom margin. */
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
P1-4 Β· Section tabs were below the 44Γ44 minimum touch target.
MEASURED: Benefits / Process / Inclusions / Reviews = 40px high.
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.tap-root .tap-info-chip,
.tap-root .tap-ptab,
.tap-root .tap-tabs > button,
.tap-root .tap-ptabs > button,
.tap-root .tap-filter-bar > button {
min-height: 44px;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
UX-023 Β· Print stylesheet (@media print).
Hide fixed bars, floating CTAs, and popups during browser printing.
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
@media print {
.tap-bottomnav,
.tap-topstrip,
.tap-sticky,
.tap-wa-fab,
.tap-pwa-bar,
.tap-toast-region {
display: none !important;
}
body {
background: #fff !important;
color: #000 !important;
}
.tap-root {
padding-bottom: 0 !important;
}
}
/* v6.9.99 UX pass: listing context, keyboard focus and account hub layout. */
.tap-root .tap-book-btn-sm:focus-visible {
outline: 3px solid var(--tap-focus);
outline-offset: 3px;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
v7.2.0 β UI/UX SYSTEM STABILIZATION
Measured fixed-layer geometry, compact transaction actions, responsive
containment, explicit consultation actions and shared interaction states.
This layer intentionally enhances existing components/settings rather
than replacing the white-label system.
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
:root {
--tap-motion-instant: 100ms;
--tap-motion-quick: 160ms;
--tap-motion-standard: 220ms;
--tap-motion-emphasized: 320ms;
--tap-ease-standard: cubic-bezier(.2,0,0,1);
--tap-ease-enter: cubic-bezier(0,0,0,1);
--tap-ease-exit: cubic-bezier(.3,0,1,1);
}
/* Root/document containment: horizontal product rails may scroll internally,
but may never widen the page itself at 320px or browser zoom. */
body.tap-app { max-width:100%; }
.tap-section-scroller,
.tap-hscroll,
.tap-hscroll-snap,
.tap-filter-bar,
.tap-deity-grid,
.tap-tabs,
.tap-ptabs,
.tap-cst-chiprow {
overscroll-behavior-inline: contain;
-webkit-overflow-scrolling: touch;
}
/* Compact, bounded mobile transaction dock. Trust messages already exist in
the page; repeating them in the fixed viewport created a 193px bar. */
.tap-sticky {
box-sizing: border-box;
width: 100%;
max-width: 100%;
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.tap-sticky-inner {
width: 100%;
min-width: 0;
justify-content: space-between;
}
.tap-sticky-price {
min-width: 0;
max-width: 52%;
}
.tap-sticky-price > * {
max-width: 100% !important;
overflow-wrap: anywhere;
}
.tap-sticky .tap-btn,
.tap-sticky .tap-btn-cta {
min-height: 48px;
max-width: 58%;
white-space: normal;
line-height: 1.18;
text-align: center;
}
@media (max-width: 767.98px) {
.tap-sticky {
padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
}
.tap-sticky-trust,
.tap-sticky > .tap-countdown-long { display: none !important; }
.tap-sticky-price { font-size:calc(1.0625 * var(--tap-fs)); }
.tap-sticky-total { font-size:calc(1.125 * var(--tap-fs)); }
.tap-sticky .tap-btn,
.tap-sticky .tap-btn-cta { min-width: 132px; padding: 11px 14px; font-size:calc(0.875 * var(--tap-fs)); }
.tap-chad-sticky .tap-sticky-price { max-width: 56%; }
}
@media (max-width: 340px) {
.tap-sticky-inner { gap: 8px; }
.tap-sticky-price { max-width: 48%; }
.tap-sticky .tap-btn,
.tap-sticky .tap-btn-cta { min-width: 0; max-width: 52%; padding-left: 10px; padding-right: 10px; }
.tap-cta-lock { display: none; }
}
/* Consistent frequent touch targets. */
.tap-topstrip-btn,
.tap-cst-sheet-x,
.tap-x,
.tap-chad-minus,
.tap-chad-plus,
.tap-pf-step button,
.tap-member-step button,
.tap-extra-step button {
min-width: 44px !important;
min-height: 44px !important;
}
.tap-check-row { min-height: 44px; }
.tap-check-row input[type="checkbox"],
.tap-check-row input[type="radio"] { width: 22px !important; height: 22px !important; }
/* Stable card rhythm and readable metadata. */
.tap-root .tap-caption,
.tap-root .tap-cst-chip,
.tap-root .tap-ticket-status,
.tap-root .tap-badge { font-size: max(12px, .75rem); }
/* Explicit consultation actions: preserve admin-controlled card/photo/alignment
tokens while making the available action visible at listing level. */
.tap-cst-card { cursor: default; align-items: flex-start; }
.tap-cst-card:hover { transform: translateY(-1px); }
.tap-cst-card-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 12px;
}
.tap-cst-card-action {
width: 100%;
min-width: 0;
min-height: 44px;
padding: 9px 10px;
font-size:calc(0.7813 * var(--tap-fs));
white-space: normal;
line-height: 1.2;
}
.tap-cst-name { margin: 0; }
@media (max-width: 380px) {
.tap-cst-card { padding: 12px; gap: 10px; }
.tap-cst-card-actions { grid-template-columns: 1fr; }
}
/* Button system polish using existing white-label semantic tokens. */
@media (prefers-reduced-motion: reduce) {
.tap-cst-card:hover,
.tap-wa-fab:hover { transform: none !important; }
}
/* Final narrow-viewport containment. The base bundle deliberately exposes
booking overflow for legacy overlays; constrain only the inline axis here
so internal rails remain scrollable without widening the document. */
.tap-section-scroller,
.tap-hscroll,
.tap-hscroll-snap,
.tap-filter-bar,
.tap-deity-grid,
.tap-tabs,
.tap-ptabs,
.tap-cst-chiprow {
contain: inline-size;
overflow-y: hidden;
}
/* v7.26.0 β compact Samagri preparation / courier state in My Orders. */
.tap-sam-return-sheet{display:grid;gap:12px;padding:16px 18px 22px}.tap-sam-return-sheet p{margin:0;color:var(--tap-muted);line-height:1.5}.tap-sam-return-sheet textarea{box-sizing:border-box;width:100%;min-height:112px;padding:12px;border:1px solid var(--tap-line);border-radius:var(--tap-r-md,12px);background:var(--tap-card);color:var(--tap-ink);font:inherit;resize:vertical}.tap-sam-return-sheet textarea:focus{outline:3px solid color-mix(in srgb,var(--tap-purple) 18%,transparent);border-color:var(--tap-purple)}
/* DIVSA OS v7.4.0 β final additive frontend design layer. */
.tap-app .tap-root h1,.tap-app .tap-root h2,.tap-app .tap-home-root h1,.tap-app .tap-home-root h2{text-wrap:balance}.tap-app .tap-root p,.tap-app .tap-home-root p{text-wrap:pretty}
.tap-app [data-primary-action=true],.tap-app .tap-sticky>.tap-btn,.tap-app .tap-sticky .tap-btn-cta,.tap-app .tap-ob-cta{min-height:48px;font-weight:800;letter-spacing:-.01em}.tap-app button:focus-visible,.tap-app a:focus-visible,.tap-app [role=link]:focus-visible{outline:3px solid color-mix(in srgb,var(--tap-purple) 36%,transparent);outline-offset:3px}
.tap-splash{isolation:isolate;min-height:100dvh}.tap-splash-inner{max-width:min(86vw,520px)}.tap-splash-logo{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);box-shadow:0 16px 50px rgba(0,0,0,.18)}
.tap-onboard{align-items:center;justify-content:center;background:radial-gradient(circle at 12% 4%,color-mix(in srgb,var(--tap-gold) 17%,transparent),transparent 36%),linear-gradient(180deg,#fff 0%,var(--tap-ui-soft,#f7f1fc) 100%);overflow-y:auto}.tap-onboard:before{content:none}.tap-ob-skip{position:fixed;top:max(14px,env(safe-area-inset-top));right:16px;z-index:2;min-width:62px;min-height:40px;border:1px solid var(--tap-ui-line,#e9dff1);border-radius:999px;background:rgba(255,255,255,.92);color:var(--tap-muted);font-weight:750;box-shadow:var(--tap-ui-shadow-sm)}.tap-ob-hero,.tap-ob-body{width:min(100%,620px)}.tap-ob-hero{padding-top:18px}.tap-ob-brand{color:var(--tap-purple)}.tap-ob-hero h1{max-width:18ch;margin-inline:auto;font-size:clamp(30px,8vw,48px)}.tap-ob-hero p{max-width:46ch;margin-inline:auto}.tap-ob-grid{gap:12px}.tap-ob-card{position:relative;min-height:132px;text-align:left;padding:15px;border:1px solid var(--tap-ui-line,#e8def0);border-radius:18px;background:rgba(255,255,255,.94);box-shadow:var(--tap-ui-shadow-sm)}.tap-ob-card:after{content:"βΊ";position:absolute;right:13px;top:14px;color:var(--tap-purple);font-size:calc(1.375 * var(--tap-fs));font-weight:800}.tap-ob-card-ic{margin-bottom:12px}.tap-ob-card-lb{padding-right:24px}.tap-ob-card-ds{min-height:0}.tap-ob-inner-circle{border-radius:18px}.tap-ob-cta{border-radius:var(--tap-btn-radius);box-shadow:0 12px 28px color-mix(in srgb,var(--tap-purple) 28%,transparent)}
.tap-root.tap-view-chadhava .tap-chad-list{display:grid;gap:12px}.tap-root.tap-view-chadhava .tap-chad-item{min-height:132px;border:1px solid var(--tap-ui-line);border-radius:18px;padding:14px;background:var(--tap-card);box-shadow:var(--tap-ui-shadow-sm);align-items:center}.tap-root.tap-view-chadhava .tap-chad-item.is-on{border-color:var(--tap-purple);background:var(--tap-ui-soft)}.tap-root.tap-view-chadhava .tap-chad-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.tap-root.tap-view-chadhava .tap-chad-img{width:86px;height:78px;border-radius:13px;overflow:hidden;background:var(--tap-ui-warm)}.tap-root.tap-view-chadhava .tap-chad-img img{width:100%;height:100%;object-fit:cover}.tap-root.tap-view-chadhava .tap-chad-step{min-height:36px;border:1px solid var(--tap-purple);border-radius:10px;background:var(--tap-card);overflow:hidden}.tap-root.tap-view-chadhava .tap-chad-step button{min-width:36px;min-height:36px}.tap-root.tap-view-healing .tap-slot{min-height:58px;border-radius:13px}
@media(min-width:768px){.tap-ob-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.tap-root.tap-view-chadhava .tap-chad-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* βββ v7.5.8 β Chadhava offering card βββββββββββββββββββββββββββββββββββββ
The quantity stepper is position:absolute inside .tap-chad-right, designed
to overhang a product photo the way a grocery app's ADD button does. With
no photo uploaded the "image" falls back to a single emoji glyph in an 82px
box, so the stepper overhung it by 82px β measured β and the card read as
two broken outlines stacked on each other.
Stacked instead of overlapped: image on top, stepper directly beneath,
both centred in the same column. Works identically whether the operator has
uploaded a real photo or not, which is the actual variable here. */
.tap-root.tap-view-chadhava .tap-chad-right{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;position:static}
.tap-root.tap-view-chadhava .tap-chad-step{position:static;transform:none;margin:0;background:#fff;border:1.5px solid var(--tap-purple);border-radius:10px;overflow:hidden;display:inline-flex;align-items:center}
.tap-root.tap-view-chadhava .tap-chad-step button{min-width:36px;min-height:36px;background:transparent;border:0;color:var(--tap-purple);font-weight:800;font-size:calc(1 * var(--tap-fs));cursor:pointer}
.tap-root.tap-view-chadhava .tap-chad-img{width:74px;height:74px;border-radius:14px;display:grid;place-items:center;font-size:calc(1.875 * var(--tap-fs));line-height:1;flex:0 0 auto}
.tap-root.tap-view-chadhava .tap-chad-img img{width:100%;height:100%;object-fit:cover;border-radius:14px}
.tap-root.tap-view-chadhava .tap-chad-item{align-items:center;gap:14px}
/* REGRESSION FIX (mine, v7.5.8βv7.5.10). the merged premium layer sets
`.tap-chad-qty { color:#fff }` β correct when the stepper sat on the solid
green Chadhava bar. v7.5.8 made the stepper white to unify the CTA colour
and left the count white on white: the number was in the DOM, 20px wide,
and completely invisible. Exactly the failure the old green-bar comment in
the merged premium layer warned about, reintroduced from the other direction. */
.tap-root.tap-view-chadhava .tap-chad-qty{color:var(--tap-ink);font-weight:800;font-size:calc(1.0625 * var(--tap-fs));min-width:26px;text-align:center;font-variant-numeric:tabular-nums}
/* The selected count is the number the devotee is tracking, so it gets the
brand colour and a soft chip once it is above zero β countable at a glance
rather than a grey digit between two buttons. */
.tap-root.tap-view-chadhava .tap-chad-item.is-on .tap-chad-qty,
.tap-root.tap-view-chadhava .tap-chad-item.has-selection .tap-chad-qty{color:var(--tap-purple)}
/* Dashboard presentation moved to tap-account.css (Phase 6). */
/* Meta chips: inline SVG sits on the text baseline without shifting it. */
/* "Add Extra Members" is a label β one line, and NOT truncated.
Measured at 390px: the label needs 136px but the middle column was handed
only 125px, so nowrap alone just turned the wrap into "Add Extra Memβ¦".
Reclaim the difference from the two fixed columns instead of clipping the
text: the leading icon is decorative (36px is ample now that the card has
no second line) and the gaps tighten. 36 + 136 + 134 + 20 = 326 inside a
334px content box, so it fits with room to spare.
flex-basis:auto so the middle column asks for its CONTENT width rather than
starting at 0 and being squeezed. The ellipsis stays as the last-resort
fallback for a longer translation β it should never be reached in English. */
.tap-pf-card{gap:10px}
.tap-pf-family .tap-pf-ic{width:36px;height:36px;flex:0 0 36px;font-size:calc(1.0625 * var(--tap-fs))}
.tap-pf-family .tap-pf-mid{flex:1 1 auto;min-width:0}
.tap-pf-name-1line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.005em}
/* Measured at 390px: card content box 330px = icon 36 + mid 135 + step 132 +
2Γ13 gap. The step spent 20px of that on internal gaps between its own three
parts (44 + 24 + 44 + 10 + 10), which is also why it read as three floating
controls rather than one. Closing that gap returns the 20px to the label β
which needs 137 and now gets 155 β and turns the stepper into a single
segmented pill, matching the offering-card stepper on the same screen.
Selectors are .tap-root-prefixed because the merged premium layer owns these at
".tap-root .tap-pf-step" (0,2,0) β a bare ".tap-pf-step" (0,1,0) silently
loses and the gap stays 10px. */
.tap-pf-step-plus[aria-disabled="true"]{opacity:.55}
/* Optional short description under an offering title (admin-configurable).
Clamped to two lines so a long one cannot push the card out of rhythm. */
.tap-root.tap-view-chadhava .tap-chad-desc{margin-top:3px;font-size:calc(0.7813 * var(--tap-fs));line-height:1.45;color:var(--tap-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* βββ v7.5.1 β detail-page content: Benefits / Process / Inclusions βββββββ
These three read as generic paragraphs. Each now gets the shape its content
actually has: a tab strip that looks selectable, a numbered rail for a real
sequence, and a tick list for "what you get". */
/* Tab strip β a scroll rail with an edge fade so it is obvious more exists,
and a selected state carried by weight + fill, not colour alone. */
/* Process β a numbered rail. The connector is what turns four separate rows
into one visible sequence; ::before is drawn behind the numerals so it never
crosses a digit. Numbering is kept because the order is real information. */
.tap-root:is(.tap-view-puja,.tap-view-chadhava,.tap-view-healing) .tap-steps-rail{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:0}
.tap-root:is(.tap-view-puja,.tap-view-chadhava,.tap-view-healing) .tap-steps-rail .tap-step-row{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;padding:0 0 20px;align-items:start}
.tap-root:is(.tap-view-puja,.tap-view-chadhava,.tap-view-healing) .tap-steps-rail .tap-step-row:last-child{padding-bottom:0}
.tap-root:is(.tap-view-puja,.tap-view-chadhava,.tap-view-healing) .tap-steps-rail .tap-step-row:not(:last-child):before{content:"";position:absolute;left:17px;top:34px;bottom:2px;width:2px;background:linear-gradient(180deg,color-mix(in srgb,var(--tap-purple) 34%,#fff),var(--tap-ui-line));border-radius:2px}
.tap-root:is(.tap-view-puja,.tap-view-chadhava,.tap-view-healing) .tap-steps-rail .tap-step-n{position:relative;z-index:1;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--tap-ui-soft);border:1.5px solid color-mix(in srgb,var(--tap-purple) 30%,#fff);color:var(--tap-purple);font-weight:800;font-size:calc(0.875 * var(--tap-fs));font-variant-numeric:tabular-nums}
.tap-root:is(.tap-view-puja,.tap-view-chadhava,.tap-view-healing) .tap-steps-rail .tap-step-t{font-weight:750;font-size:calc(0.9375 * var(--tap-fs));line-height:1.35;color:var(--tap-ink)}
.tap-root:is(.tap-view-puja,.tap-view-chadhava,.tap-view-healing) .tap-steps-rail .tap-step-d{margin-top:3px;font-size:calc(0.8438 * var(--tap-fs));line-height:1.55;color:var(--tap-muted)}
/* Inclusions β a tick list. The mark is a filled disc so it reads as
"confirmed included" at a glance rather than a bullet. */
.tap-root:is(.tap-view-puja,.tap-view-chadhava,.tap-view-healing) .tap-incl-check{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tap-root:is(.tap-view-puja,.tap-view-chadhava,.tap-view-healing) .tap-incl-check li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:11px;align-items:start;font-size:calc(0.9063 * var(--tap-fs));line-height:1.5;color:var(--tap-ink)}
.tap-root:is(.tap-view-puja,.tap-view-chadhava,.tap-view-healing) .tap-incl-tick{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,#fff 90%,var(--tap-ok,#42D674));color:color-mix(in srgb,var(--tap-ok,#42D674) 55%,#000);margin-top:1px}
.tap-root:is(.tap-view-puja,.tap-view-chadhava,.tap-view-healing) .tap-incl-tick .tap-i{width:13px;height:13px;stroke-width:2.4}
@media(min-width:768px){.tap-root:is(.tap-view-puja,.tap-view-chadhava,.tap-view-healing) .tap-incl-check{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px}}
/* Countdown β segmented tiles. Tabular figures in a fixed-width box stop the
line reflowing every second, which the single-run-of-text version did. */
.tap-cd-hero .tap-countdown-long{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:center}
.tap-cd-label{font-size:calc(0.6875 * var(--tap-fs));font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--tap-muted)}
.tap-cd-tiles{display:inline-flex;align-items:flex-start;gap:4px}
.tap-cd-seg{display:grid;justify-items:center;gap:2px;min-width:46px;padding:6px 6px 5px;border-radius:11px;background:var(--tap-ui-soft);border:1px solid var(--tap-ui-line)}
.tap-cd-num{font-size:calc(1.1875 * var(--tap-fs));font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--tap-ink);font-style:normal}
.tap-cd-unit{font-size:calc(0.5938 * var(--tap-fs));font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tap-muted);font-style:normal}
.tap-cd-sep{align-self:center;margin-top:-8px;color:var(--tap-ui-line);font-weight:800}
.tap-countdown-long.urgent .tap-cd-seg{background:color-mix(in srgb,var(--tap-gold) 14%,#fff);border-color:color-mix(in srgb,var(--tap-gold) 40%,#fff)}
.tap-countdown-long.urgent .tap-cd-num{color:#8a4b00}
/* Chadhava / Healing CTA styling remains here; Puja transactional CTA lives in tap-booking.css. */
.tap-root.tap-view-chadhava .tap-sticky .tap-btn-cta,.tap-root.tap-view-healing .tap-sticky .tap-btn-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 20px;border:0;border-radius:var(--tap-btn-radius);background:var(--tap-cta-bg);color:var(--tap-cta-text);font-size:calc(.9688 * var(--tap-fs));font-weight:800}
/* Reveal β everything is visible by default; JS arms the hidden state only
when it can also guarantee the reveal. Never hide content behind an
animation that might not run. */
.tap-reveal-armed{opacity:0;transform:translateY(9px)}
.tap-reveal-armed.tap-reveal-in{opacity:1;transform:none;transition:opacity .3s cubic-bezier(.25,.46,.45,.94) var(--tap-reveal-d,0ms),transform .3s cubic-bezier(.25,.46,.45,.94) var(--tap-reveal-d,0ms)}
@media(prefers-reduced-motion:reduce){.tap-reveal-armed{opacity:1!important;transform:none!important;transition:none!important}}
/* Staging-only OTP notice. It is a status, not an error, so it reads in the
gold accent rather than borrowing the red error box and overriding it inline. */
.tap-test-otp{margin-bottom:10px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--tap-gold) 42%,#fff);border-radius:var(--tap-radius-sm,10px);background:color-mix(in srgb,var(--tap-gold) 12%,#fff);color:#6d5200;font-size:calc(0.8125 * var(--tap-fs));font-weight:800;text-align:center;letter-spacing:.02em;font-variant-numeric:tabular-nums}
/* 44x44 minimum on every OTP box, and a focus ring that survives the custom
border β six 1-character inputs are the easiest place to miss both. */
.tap-otp-boxes input{min-width:44px;min-height:48px;font-variant-numeric:tabular-nums}
.tap-otp-boxes input:focus-visible{outline:3px solid color-mix(in srgb,var(--tap-purple) 40%,transparent);outline-offset:2px}
@media(max-width:360px){.tap-ob-grid{grid-template-columns:1fr}.tap-root.tap-view-catalogue .tap-pcard{grid-template-columns:108px minmax(0,1fr)}.tap-otp-boxes input{min-width:38px}}@media(prefers-reduced-motion:reduce){.tap-root.tap-view-catalogue .tap-pcard,.tap-ob-card,.tap-ob-cta{transition:none!important;animation:none!important}}
/* Phase 9: generic button paint/geometry moved to tap-components.css.
* tap-core.css retains only vertical-specific placement and branded-channel
* exceptions; this prevents an older late cascade from silently overriding
* the Visual Editor/Layout Studio button contract. */
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
v7.5.30 β DESKTOP tier for splash + onboarding.
Both screens were authored mobile-first and then simply centred on desktop:
at 1440px the onboarding hero and body were still capped at 620px, so the
four choice cards computed to 136px each. A 136px card holding a serif
title and a two-line description is a phone card being shown on a monitor β
it reads as unfinished rather than focused, and it is the FIRST screen a
devotee sees.
This does not stretch the mobile layout; it gives the cards a desktop size
and lets the copy breathe, while keeping the composition centred and well
inside the audit's 1200β1280px content ceiling.
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
@media (min-width:1024px){
.tap-onboard .tap-ob-hero,
.tap-onboard .tap-ob-body{width:min(100%,880px)}
.tap-onboard .tap-ob-grid{gap:18px}
.tap-onboard .tap-ob-card{min-height:164px;padding:20px}
.tap-onboard .tap-ob-card-lb{font-size:calc(1.125 * var(--tap-fs))}
.tap-onboard .tap-ob-card-ds{font-size:calc(0.8438 * var(--tap-fs));line-height:1.45}
.tap-onboard .tap-ob-card-ic{margin-bottom:14px}
/* The hero headline is clamped to 8vw, which at 1440px resolves far larger
than the 48px ceiling was ever meant to allow on a wide screen. */
.tap-onboard .tap-ob-hero h1{font-size:clamp(32px,3.4vw,44px);max-width:22ch}
.tap-onboard .tap-ob-hero p{max-width:58ch}
/* Splash: the mark is sized for a phone; on a monitor it is a speck. */
.tap-splash-logo{width:104px;height:104px;font-size:calc(3.25 * var(--tap-fs))}
.tap-splash-brand{font-size:calc(2.125 * var(--tap-fs))}
.tap-splash-tag{font-size:calc(1 * var(--tap-fs))}
}
/* Phase 9: portalled auth buttons inherit the canonical `.tap-app .tap-btn`
* contract from tap-components.css. Auth-only controls below remain local. */
/* The sign-in screen's own brand-filled controls were outside the system too.
Tabs measured 3.94:1, channel chips 3.94:1 β both white-on-raw-brand. */
.tap-app .tap-auth-tab.active,
.tap-app .tap-chip.is-active{
background:var(--tap-cta-bg);
color:var(--tap-cta-text);
}
/* Brand-coloured TEXT on white: "Continue as Guest" was 3.31:1. */
.tap-app .tap-resend{color:var(--tap-brand-ink)}
/* Touch targets on the sign-in screen (WCAG 2.5.5). Measured: tabs 43px,
channel chips 36px, "Continue as Guest" 23px. */
.tap-app .tap-auth-tab{min-height:44px}
.tap-app .tap-resend{min-height:44px;display:inline-flex;align-items:center}
/* iOS zooms the page when a focused input is under 16px. This project has
already shipped one bug from exactly that (sub-16px inputs); the sign-in
fields were still at 15px. */
/* v7.5.36 β --tap-muted resolves to rgb(138,106,79) on this brand, which is
2.98:1 on white: it fails 1.4.3 wherever it carries real text rather than
decoration. Scoped to the sign-in hint, which is instructional copy telling
a devotee what "Continue as Guest" costs them β the one place on that screen
where being hard to read has a consequence. Left as a targeted fix, not a
global --tap-muted change, because that token is used decoratively in many
places and re-tuning it globally needs its own measured pass. */
.tap-app .tap-auth-hint{color:color-mix(in srgb,var(--tap-muted) 62%,#000)}
/* v7.5.36 β the guest-note copy was a hardcoded #888 at 12px: 2.98:1 on white.
It is the line that explains what a devotee gives up by continuing as a
guest, so it is exactly the wrong sentence to make hard to read. #6b6b6b
clears 4.5:1 at this size while staying visibly secondary to the body copy. */
.tap-app .tap-guest-note p{color:#666}
/* v7.5.37 β inline stroke icons sitting beside a text label.
Emoji carried their own baseline and spacing; an inline SVG does not, so
without this the icon sat on the text baseline and the label lost its gap.
flex + a shared gap keeps icon and label optically centred at any size. */
.tap-app .tap-auth-tab,
.tap-app .tap-temple-loc{display:inline-flex;align-items:center;gap:6px}
.tap-app .tap-auth-tab{justify-content:center}
.tap-app .tap-i{flex:0 0 auto;vertical-align:middle}
/* ββ Icon system (v7.6.0) ββββββββββββββββββββββββββββββββββββββββββββββββββ
The emoji sweep replaced 276 OS-painted glyphs with one registry. Three
shapes can now come out of a single icon slot β an inline SVG, an operator's
uploaded image, or a literal text glyph β and all three have to sit on the
same optical line beside a label, or the replacement looks worse than what
it replaced.
`.tap-ilbl` is the wrapper the renderers emit so callers stop hand-rolling
the icon+label concatenation (half of them used to forget it, which is why
some icons sat on the text baseline and others did not). */
.tap-app .tap-i,
.tap-root .tap-i,
.tap-home-root .tap-i{flex:0 0 auto;vertical-align:middle}
.tap-i-img{object-fit:contain;display:inline-block}
/* A text glyph has font metrics an SVG does not: line-height:1 stops it
inflating the row it sits in, and the flex box re-centres it. */
.tap-i-text{display:inline-flex;align-items:center;justify-content:center;line-height:1;font-style:normal;font-weight:400}
.tap-ilbl{display:inline-flex;align-items:center;gap:6px;min-width:0}
.tap-ilbl>span{min-width:0}
/* Bottom navigation and card art size icons from a variable so an operator's
uploaded PNG lands at exactly the size the shipped SVG occupies. */
/* Section geometry is responsive by container width; no device-only wrappers remain. */
/* v7.6.0 REGRESSION FIX. The emoji sweep replaced the live indicator's red
circle emoji with an empty carrying only an
animation β and no rule ever gave that class a size, colour or shape, so the
"Live Seva Preparation" strip lost its indicator entirely. An emoji brings
its own glyph; a span brings nothing. Every emoji-to-element swap has to add
the box the glyph used to be.
Sized and coloured to match .tap-live-dot, the equivalent indicator
elsewhere in the product, rather than inventing a third look. */
.tap-pulse-dot{display:inline-block;flex:0 0 auto;width:8px;height:8px;border-radius:50%;
background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}
@media (prefers-reduced-motion:reduce){ .tap-pulse-dot{animation:none !important} }
.tap-lay{display:grid;gap:14px}
.tap-lay-list{grid-template-columns:1fr}
.tap-lay-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--tap-smart-card-min,148px)),1fr));min-width:0}
/* Carousel is a horizontal snap rail, matching the featured strip the homepage
already uses β not a JS slider. No dependency, works without script, and the
scrollbar is the affordance. */
.tap-lay-carousel{grid-auto-flow:column;grid-auto-columns:minmax(250px,78vw);
overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px}
.tap-lay-carousel>*{scroll-snap-align:start}
@media (min-width:768px){
.tap-lay-carousel{grid-auto-columns:minmax(250px,300px)}
}
@media (min-width:1024px){
.tap-lay-carousel{grid-auto-flow:column;overflow-x:auto}
}
/* Service-card track/card geometry lives in tap-cards.css. */
.tap-svc-shortcode{padding:8px 0 4px}
@media (prefers-reduced-motion:reduce){ .tap-lay-carousel{scroll-behavior:auto} }
/* ββ Responsive & compatibility pass (v7.6.1) βββββββββββββββββββββββββββββ
Findings from an automated sweep at 375/480/768/1024/1280/1440 across the
home, catalogue and shortcode surfaces. Hit areas only β no visual redesign:
where a control is deliberately small, the TARGET grows and the paint does
not. */
/* ββ Hero scrim: covered 198px of a 360px hero ββββββββββββββββββββββββββββ
`.tap-hero-compact` gained `display:grid; align-items:end` in v7.5.x for the
bottom-aligned body. That turned the pre-existing `:after` scrim into a grid
ITEM, and `align-items:end` beat its `bottom:0`, so the darkening gradient
stopped partway down and left a hard horizontal band across the hero β the
one visible in the reported screenshot. `place-self:stretch` puts it back
over the whole box. `align-self:stretch` alone is NOT enough (measured: still
198px); the height:auto is what releases the inset-derived size. */
.tap-home-root .tap-hero-compact:after{place-self:stretch;height:auto;width:auto}
/* ββ Touch targets (WCAG 2.5.8 / 2.5.5) ββββββββββββββββββββββββββββββββββ
Measured under 44px at one or more breakpoints. Chips take a real min-height,
matching `.tap-info-chip` which the detail page already holds at 44 β this is
alignment with the existing system, not a new decision. */
.tap-app .tap-festival-chip,
.tap-root .tap-festival-chip,
.tap-home-root .tap-festival-chip{min-height:44px;display:inline-flex;align-items:center;gap:6px}
.tap-app .tap-search-sug,
.tap-root .tap-search-sug,
.tap-home-root .tap-search-sug{min-height:44px;display:inline-flex;align-items:center}
/* Text actions ("See all βΊ", "View all"). The LABEL keeps its size; the row it
sits in grows to a thumb-sized target. */
.tap-root .tap-sec-action,
.tap-home-root .tap-sec-action,
.tap-root .tap-view-all,
.tap-home-root .tap-view-all,
.tap-root .tap-section-viewall{min-height:44px;display:inline-flex;align-items:center}
.tap-root .tap-search-submit,
.tap-home-root .tap-search-submit{min-height:44px;min-width:44px}
/* ββ iOS zoom floor βββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Safari zooms the page when a focused field is under 16px, which on a booking
form reads as the layout breaking. The app already holds this inside modals;
this closes the remaining fields (hero search, filter inputs). */
.tap-root input,.tap-root select,.tap-root textarea,
.tap-home-root input,.tap-home-root select,.tap-home-root textarea{font-size:max(16px,1rem)}
/* Component roots use inline-size containment so intrinsic card/table widths
cannot enlarge the canonical DIVSA shell. Horizontal rails remain explicit
overflow containers and continue to scroll independently. */
/* Review stars are now per-review, so an unrated review shows none and a
4-star review shows four. The old markup printed five glyphs on every card
regardless of what anyone actually gave. */
.tap-root .tap-testi2-stars{display:inline-flex;gap:2px;line-height:1}
.tap-root .tap-star{color:var(--tap-ui-line,#e0d6ec)}
.tap-root .tap-star.is-on{color:var(--tap-gold)}
.tap-root .tap-testi2-src{margin-top:6px;font-size:.75rem;color:var(--tap-muted)}
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
MOBILE-FIRST FLUID LAYER (v7.6.1)
SCOPE, STATED HONESTLY. The component CSS in this product is 636 fixed-px
font-sizes and 453 fixed-px paddings across five stylesheets. Converting all
of them to fluid units would change how every screen looks at every
intermediate width β that is a redesign, and the brief for this work says
preserve the existing UI. So this layer does the part that is both safe and
genuinely missing:
- every clamp() MINIMUM is the value measured on a 375px phone today, so
mobile is pixel-identical and nothing regresses on the highest-priority
breakpoint;
- the maximum is the value the design already reaches at >=1280px, so the
desktop end is unchanged too;
- what changes is the MIDDLE β sizes now interpolate smoothly instead of
jumping at a media-query edge, and the two values that never scaled at
all (container gutter, section rhythm) now do.
Every ramp uses the accessible `rem + vw` form rather than raw vw. A pure-vw
font-size ignores the user's browser text-size setting entirely, which fails
WCAG 1.4.4; including a rem term keeps zoom working.
Measured endpoints this layer reproduces (375px -> 1280px):
hero h1 24 -> 34 (was a media-query step)
hero sub 14 -> 17 (was 14 flat at every width)
section title 22 -> 32 (was a step)
container pad 16 -> 32 (was 16 flat, phone gutters on a 1440 display)
section rhythm 48 -> 72 (was 48 flat)
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* Vertical rhythm: 48px between sections reads as cramped past ~1024px. */
.tap-home-root .tap-home-section{
padding-top:var(--tap-fluid-section);
padding-bottom:var(--tap-fluid-section);
}
/* Type. Endpoints match today's design; only the interpolation is new. */
.tap-home-root .tap-hero-compact-title{font-size:var(--tap-fluid-h1);line-height:1.15}
.tap-home-root .tap-hero-compact-sub{font-size:var(--tap-fluid-lead);line-height:1.5}
.tap-root .tap-sec-title,
.tap-home-root .tap-sec-title{font-size:var(--tap-fluid-h2);line-height:1.2}
/* ββ Responsive images ββββββββββββββββββββββββββββββββββββββββββββββββββββ
Only three `img{max-width:100%}` rules existed across the whole frontend, so
any image an operator uploads at its natural size could push a layout wider
than its column. This makes it universal inside the app roots and keeps the
aspect ratio. */
/* An ![]()
with width/height attributes keeps its ratio while scaling. */
.tap-root img[width][height],.tap-home-root img[width][height]{height:auto}
/* ββ Responsive tables ββββββββββββββββββββββββββββββββββββββββββββββββββββ
A table has an intrinsic minimum width and will happily push a phone layout
sideways. It scrolls inside its own box instead β the standard treatment,
and the only one that does not hide data. */
/* ββ Modals and sheets on a phone βββββββββββββββββββββββββββββββββββββββββ
dvh rather than vh so the mobile browser's collapsing address bar does not
leave the action button under the fold, plus the home-indicator inset. */
@supports (height:100dvh){
}
/* ββ Forms ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Fields fill their column and never exceed it, on every screen. */
.tap-root .tap-input,.tap-root input[type=text],.tap-root input[type=tel],
.tap-root input[type=email],.tap-root input[type=number],.tap-root select,
.tap-root textarea{width:100%;max-width:100%;box-sizing:border-box}
/* ββ Long content must wrap, not stretch ββββββββββββββββββββββββββββββββββ
A single unbroken string (a long temple name, a pasted URL) sets a grid
track's min-content width and can widen the whole row. */
.tap-root .tap-fcard-name,.tap-root .tap-testi2-quote,.tap-root .tap-sec-title,
.tap-home-root .tap-fcard-name,.tap-home-root .tap-testi2-quote{overflow-wrap:anywhere}
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
FLUID TYPE BASE (v7.6.3) β the one knob for 638 font-sizes
Every fixed-px font-size in the frontend stylesheets is now expressed as a
RATIO of this base: `font-size:14px` became
`font-size:calc(0.875 * var(--tap-fs))`. The whole type system therefore
scales together and keeps its hierarchy exactly β a 24px heading stays
exactly 1.714x a 14px body at every viewport.
THE BASE IS ON OUR ROOTS, NOT ON `html`.
Setting `html{font-size:clamp(...)}` is the usual recipe and it is the wrong
choice for a plugin: it rescales the HOST THEME's typography too, on a site
that is not ours. Scoping the base to the app roots means nothing outside
DIVSA changes.
THE RANGE: 16px at 375px -> 18px at 1440px (+12.5%).
Deliberately modest. Before this, body copy, buttons, chips and labels were
the SAME pixel size on a 375px phone and a 1440px monitor β measured, not
assumed β so the app read as a phone layout stretched wide. 12.5% is enough
to fix that without re-proportioning the design.
The 375px end is unchanged, so the mobile layout that was just verified
stays pixel-identical.
The `rem` term keeps browser text-size settings working (a pure-vw ramp
ignores them and fails WCAG 1.4.4). --tap-fs-max lets an operator or a
future site retune the top of the range without touching any component.
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* The declaration the block above documents was missing from the file. 565
font-sizes across tap-core, tap-booking, tap-account, tap-cards and
tap-consultation read `calc( * var(--tap-fs))`, and with --tap-fs
undefined every one of them was invalid at computed-value time and fell back
to the inherited 16px. That flattened the whole type hierarchy everywhere
inside .tap-root β booking, chadhava, consultations, account β while the
homepage, which uses its own clamp() ramp, looked correct. Restored to the
documented range and kept on the app roots, never on `html`, so the host
theme is untouched. The rem term keeps browser text-size settings working
(WCAG 1.4.4); --tap-fs-scale and --tap-fs-max stay the operator knobs.
Ramp: 0.956rem + 0.1878vw resolves to exactly 16px at 375px and 18px at
1440px. */
.tap-root,
.tap-home-root{
--tap-fs-max: calc(18px * var(--tap-fs-scale, 1));
--tap-fs: clamp(
var(--tap-fs-base, 16px),
calc((0.956rem + 0.1878vw) * var(--tap-fs-scale, 1)),
var(--tap-fs-max)
);
}
/* Fixed-height boxes that contain text must be able to grow with it, or the
type conversion turns them into clipping boxes. Height becomes a floor. */
.tap-root .tap-btn,
.tap-root .tap-btn-sm,
.tap-root .tap-chip,
.tap-root .tap-tab,
.tap-home-root .tap-btn{min-height:44px;height:auto}
/* v7.6.3 REGRESSION FIX from the fluid-type conversion.
`.tap-chad-step` (the chadhava quantity stepper) is a fixed 36px box with
overflow:hidden. Once its digits scaled with --tap-fs the content grew past
36px and was clipped. Height becomes a floor rather than a ceiling β the
same treatment already applied to buttons and chips. Caught by the clipping
scan, not by eye. */
.tap-root .tap-chad-step,
.tap-root.tap-view-chadhava .tap-chad-step{height:auto;min-height:40px;overflow:visible}
.tap-root .tap-chad-step button,
.tap-root.tap-view-chadhava .tap-chad-step button{height:auto;min-height:40px;line-height:1}
.tap-root .tap-chad-qty{line-height:1.1}
/* Featured/service card geometry moved to tap-cards.css in Phase 8. */
/* Transaction sticky geometry moved to tap-booking.css (Phase 6). */
/* =====================================================================
* v7.12.1 - production UI fixes (2026-08-10)
* ===================================================================== */
/* v7.36.0: no phone-specific service grid override here. Embedded gutters and
* columns are calculated from the component container by TAP_Layout. */
/* 3. The no-dates notice rendered as flex-row/nowrap, so the WhatsApp button
* got 138px for 189px of label and "Ask us on WhatsApp" was clipped
* mid-word on phone and desktop alike. */
.tap-notice-warn {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
}
.tap-notice-warn > p { margin: 0; }
.tap-notice-warn .tap-btn-wa {
white-space: normal;
flex: 0 0 auto;
width: 100%;
max-width: 320px;
min-height: 44px;
justify-content: center;
text-align: center;
}
/* =====================================================================
* v7.33.8 β Brand-theme semantic surface bridge
* ---------------------------------------------------------------------
* A historical experience layer shipped after the original palette and still painted
* several premium cards/sheets with literal white. That made a saved dark
* preset look only half-applied. Keep status/CTA foreground colours intact,
* but let neutral UI surfaces follow Brand Customizer's semantic contract.
* ===================================================================== */
.tap-root .tap-chad-item.is-featured {
background:color-mix(in srgb,var(--tap-surface) 94%,var(--tap-gold));
}
/* v8.6.1 accessibility hardening: interactive targets and control boundaries. */
.tap-root .tap-qty button,
.tap-root .tap-cst-method-chip { min-width:44px; min-height:44px; }
.tap-root .tap-input,
.tap-root .tap-otp-boxes input,
.tap-root .tap-fld-in,
.tap-root .tap-member-grid .tap-inp,
.tap-root .tap-cst-input { border-color:var(--tap-control-border,#767676); }
.tap-root :where(a,button,input,select,textarea,[tabindex]):focus-visible { outline:2px solid var(--tap-primary,#6109BE) !important; outline-offset:2px; }
/* Featured-card placeholder paint moved to tap-cards.css in Phase 8. */
/* ==========================================================================
v8.6.20 β Phone product cards are compact, not stretched.
.tap-sam-card > a is flex:1 1 auto and .tap-sam-price carries margin-top:auto,
so in any equal-height context the anchor grows to the tallest sibling and
the price is pushed to ITS bottom. The slack lands as dead space between the
product name and the price β on the homepage shelf that was roughly 200px of
nothing inside a card whose actual content is four short lines.
Equal height is worth keeping where cards sit in a grid; what is not worth
keeping is equal height achieved by inflating one gap. On phones the card
sizes to its content and the shelf aligns its cards to the start, so the
stack reads Image -> Name -> Price -> CTA with ordinary spacing.
!important is required: the store's CSS is emitted into an inline