/**
 * DIVSA OS Puja Platform — UI Style Presets (v4.9.37, audit UI-1)
 * ------------------------------------------------------------------
 * Admin-selectable modern looks, applied as a body class
 * (`tap-style-{name}`) OVER the signature DIVSA OS design. The default
 * "Signature" style loads no overrides at all — pixel-identical to 4.9.36.
 *
 * Styles: glass (Glassmorphism) · clay (Claymorphism) · neo (Neomorphism) ·
 * minimal (Minimalism) · bento (Bento Grid) · maximal (Maximalism) ·
 * spatial (Spatial/3D depth) · retro (Skeuomorphism-inspired).
 *
 * Design contract: only surfaces are restyled — cards, panels, buttons,
 * inputs, nav, hero. Layout, spacing rhythm, and every booking interaction
 * stay untouched so no flow ever breaks when the admin switches styles.
 */

/* ═══════════════ GLASSMORPHISM ═══════════════ */
.tap-style-glass .tap-panel,
.tap-style-glass .tap-fcard,
.tap-style-glass .tap-hl-tile,
.tap-style-glass .tap-site-footer {
	background: rgba(255, 255, 255, 0.60);
	backdrop-filter: blur(20px) saturate(1.6);
	-webkit-backdrop-filter: blur(20px) saturate(1.6);
	border: 1px solid rgba(255, 255, 255, 0.70);
	box-shadow: 0 8px 32px rgba(66, 7, 127, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
/* Sacred Gold Glassmorphism Preset */
.tap-style-glass .tap-hl-vip,
.tap-style-glass-gold {
	background: rgba(255, 248, 231, 0.70);
	backdrop-filter: blur(20px) saturate(1.8);
	-webkit-backdrop-filter: blur(20px) saturate(1.8);
	border: 1px solid rgba(245, 200, 66, 0.50);
	box-shadow: 0 10px 36px rgba(249, 144, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.tap-style-glass .tap-bottomnav {
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(20px) saturate(1.6);
	-webkit-backdrop-filter: blur(20px) saturate(1.6);
	border-top: 1px solid rgba(255, 255, 255, 0.8);
}
/* Royal Velvet Glass Button */
.tap-style-glass .tap-btn-primary,
.tap-style-glass-velvet {
	background: color-mix(in srgb, var(--tap-purple, #6109be) 85%, transparent);
	color: #ffffff;
	backdrop-filter: blur(12px) saturate(1.6);
	-webkit-backdrop-filter: blur(12px) saturate(1.6);
	border: 1px solid rgba(255, 255, 255, 0.30);
	box-shadow: 0 8px 24px color-mix(in srgb, var(--tap-purple, #6109be) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.40);
}
/* Sacred Gold Glass Button */
.tap-style-glass .tap-btn-gold {
	background: color-mix(in srgb, var(--tap-marigold, #f99000) 88%, transparent);
	color: #3a2400;
	backdrop-filter: blur(12px) saturate(1.8);
	-webkit-backdrop-filter: blur(12px) saturate(1.8);
	border: 1px solid rgba(255, 255, 255, 0.50);
	box-shadow: 0 8px 24px color-mix(in srgb, var(--tap-marigold, #f99000) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.70);
}
.tap-style-glass .tap-input {
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.7);
}

/* ═══════════════ CLAYMORPHISM ═══════════════ */
.tap-style-clay .tap-panel,
.tap-style-clay .tap-fcard,
.tap-style-clay .tap-hl-tile,
.tap-style-clay .tap-hl-vip {
	border-radius: 26px;
	border: none;
	box-shadow:
		0 18px 36px rgba(66, 7, 127, 0.14),
		inset 0 -8px 16px rgba(66, 7, 127, 0.08),
		inset 0 6px 12px rgba(255, 255, 255, 0.9);
}
.tap-style-clay .tap-btn,
.tap-style-clay .tap-btn-primary,
.tap-style-clay .tap-btn-gold {
	border-radius: 22px;
	box-shadow:
		0 10px 20px rgba(66, 7, 127, 0.22),
		inset 0 -5px 10px rgba(0, 0, 0, 0.18),
		inset 0 4px 8px rgba(255, 255, 255, 0.35);
}
.tap-style-clay .tap-input { border-radius: 18px; }
.tap-style-clay .tap-bottomnav { border-radius: 26px 26px 0 0; box-shadow: 0 -12px 30px rgba(66, 7, 127, 0.12); }

/* ═══════════════ NEOMORPHISM ═══════════════ */
.tap-style-neo,
.tap-style-neo .tap-root { background: color-mix(in srgb, var(--tap-purple, #6109be) 6%, #f8f6fa); }
.tap-style-neo .tap-panel,
.tap-style-neo .tap-fcard,
.tap-style-neo .tap-hl-tile {
	background: color-mix(in srgb, var(--tap-purple, #6109be) 6%, #f8f6fa);
	border: 1px solid rgba(97, 9, 190, 0.14);
	box-shadow: 9px 9px 20px rgba(66, 7, 127, 0.13), -9px -9px 20px rgba(255, 255, 255, 0.95);
}
.tap-style-neo .tap-btn-primary,
.tap-style-neo .tap-btn-gold {
	border: 1px solid rgba(97, 9, 190, 0.25);
	box-shadow: 6px 6px 14px rgba(66, 7, 127, 0.28), -4px -4px 10px rgba(255, 255, 255, 0.5);
}
.tap-style-neo .tap-btn-primary:active,
.tap-style-neo .tap-btn-gold:active {
	box-shadow: inset 5px 5px 12px rgba(66, 7, 127, 0.28), inset -4px -4px 10px rgba(255, 255, 255, 0.4);
}
.tap-style-neo .tap-input {
	background: color-mix(in srgb, var(--tap-purple, #6109be) 6%, #f8f6fa);
	border: 1px solid rgba(97, 9, 190, 0.18);
	box-shadow: inset 5px 5px 12px rgba(66, 7, 127, 0.1), inset -5px -5px 12px rgba(255, 255, 255, 0.9);
}
.tap-style-neo .tap-bottomnav { background: color-mix(in srgb, var(--tap-purple, #6109be) 6%, #f8f6fa); box-shadow: 0 -8px 22px rgba(66, 7, 127, 0.12); border-top: 1px solid rgba(97, 9, 190, 0.14); }

/* ═══════════════ MINIMALISM ═══════════════ */
.tap-style-minimal .tap-panel,
.tap-style-minimal .tap-fcard,
.tap-style-minimal .tap-hl-tile,
.tap-style-minimal .tap-hl-vip {
	border-radius: 8px;
	box-shadow: none;
	border: 1px solid var(--tap-line, #ece6f2);
	background: #fff;
}
.tap-style-minimal .tap-btn,
.tap-style-minimal .tap-btn-primary,
.tap-style-minimal .tap-btn-gold {
	border-radius: 6px;
	box-shadow: none;
	background-image: none;
}
.tap-style-minimal .tap-hero-compact { border-radius: 10px; background: var(--tap-purple, #6109be); }
.tap-style-minimal .tap-hero-compact-glyph,
.tap-style-minimal .tap-lotus-bloom { display: none; }
.tap-style-minimal .tap-sec-eyebrow { letter-spacing: 0.14em; }
.tap-style-minimal .tap-input { border-radius: 6px; }

/* ═══════════════ BENTO GRID ═══════════════ */
.tap-style-bento .tap-home-section .tap-container { max-width: 1120px; }
.tap-style-bento .tap-panel,
.tap-style-bento .tap-fcard,
.tap-style-bento .tap-hl-tile,
.tap-style-bento .tap-hl-vip {
	border-radius: 20px;
	border: 1.5px solid var(--tap-line, #ece6f2);
	box-shadow: none;
	background: var(--tap-card, #fff);
}
.tap-style-bento .tap-fcard:hover { border-color: var(--tap-purple, #6109be); box-shadow: 0 4px 0 var(--tap-purple, #6109be); transform: translateY(-4px); }
@media (min-width: 900px) {
	/* Rails become tiled bento boards on desktop; mobile keeps thumb rails. */
	.tap-style-bento .tap-fcard-rail,
	.tap-style-bento .tap-fav-rail {
		display: grid !important;
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
		gap: 16px;
		overflow: visible;
	}
	.tap-style-bento .tap-fcard { width: auto; }
}
.tap-style-bento .tap-hero-compact { border-radius: 24px; }

/* ═══════════════ MAXIMALISM ═══════════════ */
.tap-style-maximal .tap-panel,
.tap-style-maximal .tap-fcard,
.tap-style-maximal .tap-hl-vip {
	border: 2px solid var(--tap-marigold, #f2a007);
	border-radius: 22px;
	box-shadow: 6px 6px 0 var(--tap-purple, #6109be);
	background:
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(135deg, var(--tap-marigold, #f2a007), var(--tap-purple, #6109be)) border-box;
	border-color: transparent;
}
.tap-style-maximal .tap-btn-primary,
.tap-style-maximal .tap-btn-gold {
	border: 2px solid var(--tap-ink, #241832);
	box-shadow: 4px 4px 0 var(--tap-ink, #241832);
	border-radius: 14px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.tap-style-maximal .tap-btn-primary:active,
.tap-style-maximal .tap-btn-gold:active { box-shadow: 1px 1px 0 var(--tap-ink, #241832); transform: translate(3px, 3px); }
.tap-style-maximal .tap-sec-title { text-shadow: 2px 2px 0 rgba(242, 160, 7, 0.35); }
.tap-style-maximal .tap-hero-compact { border: 3px solid var(--tap-marigold, #f2a007); }

/* ═══════════════ SPATIAL (3D DEPTH) ═══════════════ */
.tap-style-spatial .tap-fcard,
.tap-style-spatial .tap-hl-tile,
.tap-style-spatial .tap-hl-vip,
.tap-style-spatial .tap-panel {
	transform-style: preserve-3d;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s;
	box-shadow: 0 12px 40px rgba(66, 7, 127, 0.16), 0 2px 8px rgba(66, 7, 127, 0.1);
	border-radius: 20px;
}
.tap-style-spatial .tap-fcard:hover,
.tap-style-spatial .tap-hl-tile:hover,
.tap-style-spatial .tap-hl-vip:hover {
	transform: perspective(900px) rotateX(3deg) rotateY(-3deg) translateY(-6px) scale(1.015);
	box-shadow: 0 26px 60px rgba(66, 7, 127, 0.24), 0 6px 16px rgba(66, 7, 127, 0.14);
}
.tap-style-spatial .tap-bottomnav {
	box-shadow: 0 -14px 40px rgba(66, 7, 127, 0.18);
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}
@media (prefers-reduced-motion: reduce) {
	.tap-style-spatial .tap-fcard:hover,
	.tap-style-spatial .tap-hl-tile:hover,
	.tap-style-spatial .tap-hl-vip:hover { transform: none; }
}

/* ═══════════════ RETRO (SKEUOMORPHIC) ═══════════════ */
.tap-style-retro .tap-panel,
.tap-style-retro .tap-fcard {
	background: linear-gradient(180deg, #fffdf8 0%, #f4ecdd 100%);
	border: 1px solid #d9c9a8;
	border-radius: 14px;
	box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(90, 62, 20, 0.18);
}
.tap-style-retro .tap-btn-primary,
.tap-style-retro .tap-btn-gold {
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(0, 0, 0, 0.12));
	border: 1px solid rgba(0, 0, 0, 0.25);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 5px rgba(0, 0, 0, 0.25);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	border-radius: 10px;
}
.tap-style-retro .tap-btn-primary:active,
.tap-style-retro .tap-btn-gold:active { box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3); }
.tap-style-retro .tap-input {
	background: #fffdf8;
	border: 1px solid #cbb98f;
	box-shadow: inset 0 2px 4px rgba(90, 62, 20, 0.12);
	border-radius: 8px;
}
.tap-style-retro .tap-hero-compact { border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 18px rgba(66, 7, 127, 0.3); }

/* v7.31.12 — current-component coverage bridge -----------------------------
   The original preset layer predated Home Experience/Service Junction, so the
   admin switch was real but visually incomplete on newly-added homepage
   components. These rules make Settings → Appearance affect current home
   surfaces when Home Experience is explicitly set to “Inherit global UI style”. */
.tap-style-glass .tap-home-visual-inherit .tap-service-junction__card,
.tap-style-glass .tap-home-visual-inherit.tap-service-junction .tap-service-junction__card,
.tap-style-glass .tap-home-visual-inherit .tap-home-promo__card{
  background:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.78);
  box-shadow:0 10px 34px rgba(66,7,127,.11),inset 0 1px 0 rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)
}
.tap-style-clay .tap-home-visual-inherit .tap-service-junction__card,
.tap-style-clay .tap-home-visual-inherit.tap-service-junction .tap-service-junction__card,
.tap-style-clay .tap-home-visual-inherit .tap-home-promo__card{border:none;border-radius:26px;box-shadow:0 16px 34px rgba(66,7,127,.13),inset 0 -7px 14px rgba(66,7,127,.07),inset 0 5px 10px rgba(255,255,255,.88)}
.tap-style-neo .tap-home-visual-inherit .tap-service-junction__card,
.tap-style-neo .tap-home-visual-inherit.tap-service-junction .tap-service-junction__card,
.tap-style-neo .tap-home-visual-inherit .tap-home-promo__card{background:color-mix(in srgb,var(--tap-purple,#6109be) 6%,#f8f6fa);border:1px solid rgba(97,9,190,.12);box-shadow:8px 8px 18px rgba(66,7,127,.12),-8px -8px 18px rgba(255,255,255,.94)}
.tap-style-minimal .tap-home-visual-inherit .tap-service-junction__card,
.tap-style-minimal .tap-home-visual-inherit.tap-service-junction .tap-service-junction__card,
.tap-style-minimal .tap-home-visual-inherit .tap-home-promo__card{border-radius:8px;box-shadow:none;background:#fff;border:1px solid var(--tap-line,#ece6f2)}
.tap-style-maximal .tap-home-visual-inherit .tap-service-junction__card,
.tap-style-maximal .tap-home-visual-inherit.tap-service-junction .tap-service-junction__card,
.tap-style-maximal .tap-home-visual-inherit .tap-home-promo__card{border:2px solid var(--tap-marigold,#f2a007);border-radius:22px;box-shadow:5px 5px 0 var(--tap-purple,#6109be)}
.tap-style-spatial .tap-home-visual-inherit .tap-service-junction__card,
.tap-style-spatial .tap-home-visual-inherit.tap-service-junction .tap-service-junction__card,
.tap-style-spatial .tap-home-visual-inherit .tap-home-promo__card{transform-style:preserve-3d;box-shadow:0 12px 38px rgba(66,7,127,.15);transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s}
@media(hover:hover) and (pointer:fine){
 .tap-style-spatial .tap-home-visual-inherit .tap-service-junction__card:hover,
 .tap-style-spatial .tap-home-visual-inherit.tap-service-junction .tap-service-junction__card:hover,
 .tap-style-spatial .tap-home-visual-inherit .tap-home-promo__card:hover{transform:perspective(900px) rotateX(2deg) rotateY(-2deg) translateY(-5px);box-shadow:0 24px 54px rgba(66,7,127,.22)}
}
.tap-style-retro .tap-home-visual-inherit .tap-service-junction__card,
.tap-style-retro .tap-home-visual-inherit.tap-service-junction .tap-service-junction__card,
.tap-style-retro .tap-home-visual-inherit .tap-home-promo__card{background:linear-gradient(180deg,#fffdf8,#f4ecdd);border:1px solid #d9c9a8;border-radius:14px;box-shadow:inset 0 1px 0 #fff,0 3px 8px rgba(90,62,20,.18)}
@media(min-width:900px){
 .tap-style-bento .tap-home-root.tap-home-visual-inherit .tap-home-promo__grid{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:dense}
 .tap-style-bento .tap-home-root.tap-home-visual-inherit .tap-home-promo__card{grid-column:span 3;border-radius:20px}
 .tap-style-bento .tap-home-root.tap-home-visual-inherit .tap-home-promo__card:first-child{grid-column:span 6}
 .tap-style-bento .tap-home-root.tap-home-visual-inherit .tap-home-promo__card:nth-child(4n+4),
 .tap-style-bento .tap-home-root.tap-home-visual-inherit .tap-home-promo__card:nth-child(4n+5){grid-column:span 4}
}
@media(prefers-reduced-motion:reduce){
 .tap-style-spatial .tap-home-visual-inherit .tap-service-junction__card,
 .tap-style-spatial .tap-home-visual-inherit .tap-home-promo__card{transform:none!important;transition:none!important}
}