/* Link/pill style mockups (preview). Switch with ?style=a | ?style=b | ?style=off (saved on this device). */
/* Shared: make these real pills */
html[data-linkstyle] .how-jump a,html[data-linkstyle] .sp-mine-link,html[data-linkstyle] .sales-how{display:inline-flex!important;align-items:center;min-height:40px;padding:8px 14px!important;border-radius:999px!important;font-weight:800!important;font-size:14px!important;text-decoration:none!important;border-bottom-width:1.5px!important;white-space:nowrap;line-height:1.1}

/* ===== A: darker / stronger red ===== */
html[data-linkstyle="a"] .how-jump a,html[data-linkstyle="a"] .sp-mine-link,html[data-linkstyle="a"] .sales-how{background:#B3121F!important;color:#fff!important;border:1.5px solid #B3121F!important}
html[data-linkstyle="a"] body[data-mode="night"] .how-jump a,html[data-linkstyle="a"] body[data-mode="night"] .sp-mine-link,html[data-linkstyle="a"] body[data-mode="night"] .sales-how{background:#C8202D!important;border-color:#E8505B!important}
/* inline text links */
html[data-linkstyle="a"] body[data-mode="day"] .screen p a:not(.btn),html[data-linkstyle="a"] body[data-mode="day"] .how-step a{color:#A50F1B!important;font-weight:700;text-decoration:underline!important;text-underline-offset:2px}
html[data-linkstyle="a"] body[data-mode="night"] a:not(.btn):not(.tab):not([class*="desk"]){color:#FF6B74}
html[data-linkstyle="a"] body[data-mode="night"] .screen p a:not(.btn),html[data-linkstyle="a"] body[data-mode="night"] .how-step a{color:#FF6B74!important;font-weight:700;text-decoration:underline!important;text-underline-offset:2px}

/* ===== B: silver / dark-gray, like the Day/Night toggle ===== */
html[data-linkstyle="b"] .how-jump a,html[data-linkstyle="b"] .sp-mine-link,html[data-linkstyle="b"] .sales-how{background:#3A3F47!important;color:#fff!important;border:1.5px solid #C9CDD3!important;box-shadow:0 0 0 1px rgba(201,205,211,.15),0 1px 6px rgba(0,0,0,.25)}
html[data-linkstyle="b"] body[data-mode="day"] .how-jump a,html[data-linkstyle="b"] body[data-mode="day"] .sp-mine-link,html[data-linkstyle="b"] body[data-mode="day"] .sales-how{background:#2F343B!important;border-color:#A9AFB8!important}
html[data-linkstyle="b"] body[data-mode="day"] .screen p a:not(.btn),html[data-linkstyle="b"] body[data-mode="day"] .how-step a{color:#2F343B!important;font-weight:700;text-decoration:underline!important;text-decoration-color:#8A9099!important;text-underline-offset:2px}
html[data-linkstyle="b"] body[data-mode="night"] a:not(.btn):not(.tab):not([class*="desk"]){color:#D5D9DE}
html[data-linkstyle="b"] body[data-mode="night"] .screen p a:not(.btn),html[data-linkstyle="b"] body[data-mode="night"] .how-step a{color:#E4E7EB!important;font-weight:700;text-decoration:underline!important;text-decoration-color:#9AA0A8!important;text-underline-offset:2px}

/* ===== Night: no near-black text on dark (applies always) ===== */
body[data-mode="night"] :not(.map-brand-float) > .b4u-mark .brand-wordmark,body[data-mode="night"] .screen .brand-wordmark{content:url("../assets/wordmark-night.svg")}
html body[data-mode="night"] .mode-slider-opt[aria-checked="true"],html body[data-mode="night"] .mode-slider-opt.active,html body[data-mode="night"] .mode-slider-opt.on{color:#E4E7EB!important}

/* TEST payments pill: keep clear of the Back link */
.pay-test-badge{left:auto!important;right:8px!important;transform:none!important;font-size:10px!important;padding:2px 8px!important}
@media (min-width:900px){.pay-test-badge{top:auto!important;bottom:10px!important;right:10px!important}}

/* ===== Ring variants: dark-gray pill + colored ring (?style=yellow|green|red) ===== */
html[data-linkstyle="yellow"],html[data-linkstyle="green"],html[data-linkstyle="red"]{--ring:#FFB703}
html[data-linkstyle="green"]{--ring:#22C55E}
html[data-linkstyle="red"]{--ring:#E63946}
html[data-linkstyle="yellow"] .how-jump a,html[data-linkstyle="yellow"] .sp-mine-link,html[data-linkstyle="yellow"] .sales-how,
html[data-linkstyle="green"] .how-jump a,html[data-linkstyle="green"] .sp-mine-link,html[data-linkstyle="green"] .sales-how,
html[data-linkstyle="red"] .how-jump a,html[data-linkstyle="red"] .sp-mine-link,html[data-linkstyle="red"] .sales-how{background:#2F343B!important;color:#fff!important;border:2px solid var(--ring)!important;box-shadow:0 0 8px color-mix(in srgb,var(--ring) 35%,transparent)}

/* ===== Glowy silver ring (?style=silver) ===== */
html[data-linkstyle="silver"] .how-jump a,html[data-linkstyle="silver"] .sp-mine-link,html[data-linkstyle="silver"] .sales-how{color:#fff!important;border:2px solid transparent!important;background:linear-gradient(#2F343B,#2F343B) padding-box,linear-gradient(135deg,#F4F6F8 0%,#B8BEC6 45%,#E6E9ED 70%,#A9B0B9 100%) border-box!important;box-shadow:0 0 10px rgba(217,221,227,.45),0 0 2px rgba(255,255,255,.6)}
html[data-linkstyle="silver"] body[data-mode="day"] .how-jump a,html[data-linkstyle="silver"] body[data-mode="day"] .sp-mine-link,html[data-linkstyle="silver"] body[data-mode="day"] .sales-how{background:linear-gradient(#2B3037,#2B3037) padding-box,linear-gradient(135deg,#C9CED5 0%,#8E959F 45%,#B9BFC7 70%,#7D848E 100%) border-box!important;box-shadow:0 0 6px rgba(120,128,138,.45)}

/* ===== Price-tag wordmark mockup (?logo=tag) ===== */
html[data-logo="tag"] .brand-wordmark,html[data-logo="tag"] .desk-wordmark{content:url("../assets/wordmark-tag-day.svg");width:auto}
html[data-logo="tag"] body[data-mode="night"] .screen .brand-wordmark,html[data-logo="tag"] body[data-mode="night"] :not(.map-brand-float) > .b4u-mark .brand-wordmark{content:url("../assets/wordmark-tag-night.svg")}
/* white chips (desktop header logo, map float) keep dark lettering */
body[data-mode="night"] .desk-logo .brand-wordmark{content:url("../assets/wordmark.svg")!important}
html[data-logo="tag"] body[data-mode="night"] .desk-logo .brand-wordmark{content:url("../assets/wordmark-tag-day.svg")!important}

/* Tag logo default: night = dark translucent bar + silver tag wordmark (map chip + desktop logo) */
html[data-logo="tag"] body[data-mode="night"] .map-brand-float,html[data-logo="tag"] body[data-mode="night"] .desk-logo{background:rgba(17,20,26,.78)!important;border:1px solid rgba(201,205,211,.35)!important;box-shadow:0 2px 12px rgba(0,0,0,.45)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html[data-logo="tag"] body[data-mode="night"] .map-brand-float .brand-wordmark,html[data-logo="tag"] body[data-mode="night"] .desk-logo .brand-wordmark,html:root[data-logo="tag"] body[data-mode="night"] .desk-logo .b4u-mark .brand-wordmark{content:url("../assets/wordmark-tag-night.svg")!important}