/* GeoView Hotfix v2.3.2 — catalog CTA buttons + rating + emoji fix */
/* ── Catalog detail panel: button geometry ─────────────────
Target: width=278.4px (panel 320px - 2×20px padding = 280, minus border = 278.4)
height=33.6px (standard single-line button)
The theme injects background-image, large padding, and min-height
that turn .btn into a large square tile. All overridden below.
──────────────────────────────────────────────────────────── */
/* Kill the tile-causing styles at body level so they cannot bleed in */
body.geoview-app #root .catalog-detail-panel button,
body.geoview-app #root .catalog-detail-panel .btn {
/* Geometry */
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 33.6px !important;
min-height: 33.6px !important;
max-height: 33.6px !important;
box-sizing: border-box !important;
/* Layout */
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
flex-direction: row !important;
/* Text */
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
letter-spacing: normal !important;
text-transform: none !important;
text-decoration: none !important;
/* Spacing */
padding: 0 12px !important;
margin: 0 !important;
/* Strip theme backgrounds */
background-image: none !important;
border-image: none !important;
/* Shape */
border-radius: 8px !important;
cursor: pointer !important;
transition: opacity 0.15s, filter 0.15s !important;
}
/* Pseudo-elements that themes use to build large icon tiles */
body.geoview-app #root .catalog-detail-panel button::before,
body.geoview-app #root .catalog-detail-panel button::after,
body.geoview-app #root .catalog-detail-panel .btn::before,
body.geoview-app #root .catalog-detail-panel .btn::after {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
}
/* Icons inside buttons — fixed 16px, no flex growth */
body.geoview-app #root .catalog-detail-panel .btn i,
body.geoview-app #root .catalog-detail-panel .btn svg,
body.geoview-app #root .catalog-detail-panel .btn img {
flex: 0 0 auto !important;
width: 16px !important;
height: 16px !important;
font-size: 16px !important;
max-width: 16px !important;
max-height: 16px !important;
line-height: 1 !important;
}
/* ── Primary CTA ("Open this dataset" / "Download file") ── */
body.geoview-app #root .catalog-detail-panel .btn.btn-primary {
background: var(--primary, #3498db) !important;
background-color: var(--primary, #3498db) !important;
color: #fff !important;
}
body.geoview-app #root .catalog-detail-panel .btn.btn-primary:hover {
filter: brightness(1.1) !important;
}
/* ── Outline CTA ("Open in Map") ────────────────────────── */
body.geoview-app #root .catalog-detail-panel .btn.btn-outline,
body.geoview-app #root .catalog-detail-panel .btn.btn-secondary {
background: rgba(255,255,255,0.08) !important;
background-color: rgba(255,255,255,0.08) !important;
border: 1px solid rgba(255,255,255,0.2) !important;
color: inherit !important;
}
body.geoview-app #root .catalog-detail-panel .btn.btn-outline:hover,
body.geoview-app #root .catalog-detail-panel .btn.btn-secondary:hover {
background: rgba(255,255,255,0.14) !important;
background-color: rgba(255,255,255,0.14) !important;
border-color: rgba(255,255,255,0.35) !important;
}
/* ── Ghost CTA ("Preview") ───────────────────────────────── */
body.geoview-app #root .catalog-detail-panel .btn.btn-ghost {
background: rgba(255,255,255,0.05) !important;
background-color: rgba(255,255,255,0.05) !important;
color: inherit !important;
opacity: 0.85 !important;
}
/* ── Button column container ─────────────────────────────── */
body.geoview-app #root .catalog-detail-panel > div {
width: 100% !important;
}
/* ── "Report broken link" text button (no .btn class) ────── */
body.geoview-app #root .catalog-detail-panel button:not(.btn) {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
background: none !important;
border: none !important;
padding: 6px 0 !important;
font-size: 12px !important;
opacity: 0.4 !important;
width: 100% !important;
text-align: center !important;
}
body.geoview-app #root .catalog-detail-panel button:not(.btn):hover {
opacity: 0.7 !important;
}
/* ── Prevent preview media from dominating the panel ────────
Excludes .emoji so WordPress emoji SVGs are not stretched. */
body.geoview-app #root .catalog-detail-panel img:not(.emoji),
body.geoview-app #root .catalog-detail-panel iframe {
max-width: 100% !important;
height: auto !important;
max-height: 55vh !important;
object-fit: contain !important;
}
/* ── WordPress emoji ![]()
— global app fix ───
WP replaces ↗ 📎 👋 etc. with 
which inherits the theme's img { width:100%; display:block }
and blows up to 237×237 px. Pin to 1em everywhere in the app. */
body.geoview-app img.emoji {
width: 1em !important;
height: 1em !important;
max-width: 1em !important;
max-height: 1em !important;
min-width: 0 !important;
min-height: 0 !important;
display: inline !important;
vertical-align: -0.15em !important;
margin: 0 0.05em !important;
padding: 0 !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
background: none !important;
}
/* ── Analysis Results button fill + theme support (plugin hotfix) ───────────── */
.analysis-results-btn{
background: var(--card, #ffffff) !important;
background-color: var(--card, #ffffff) !important;
border: 1px solid var(--border, rgba(17,24,39,0.12)) !important;
color: var(--text, #111827) !important;
box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,0.12)) !important;
font-weight: 600 !important;
}
.analysis-results-btn:hover{
background: var(--primary, #3498db) !important;
background-color: var(--primary, #3498db) !important;
border-color: var(--primary, #3498db) !important;
color: #fff !important;
}
/* Dark theme support — handle either class on body or on app root */
.theme-dark .analysis-results-btn,
.geoview-root.theme-dark .analysis-results-btn{
background: var(--card, #2a3245) !important;
background-color: var(--card, #2a3245) !important;
border-color: var(--border, rgba(255,255,255,0.12)) !important;
color: var(--text, #f1f5f9) !important;
}
/* System theme: when app uses theme-system */
@media (prefers-color-scheme: dark){
.theme-system .analysis-results-btn,
.geoview-root.theme-system .analysis-results-btn{
background: var(--card, #2a3245) !important;
background-color: var(--card, #2a3245) !important;
border-color: var(--border, rgba(255,255,255,0.12)) !important;
color: var(--text, #f1f5f9) !important;
}
}
/* Ensure the badge stays readable on filled button */
.analysis-results-btn .analysis-badge{
box-shadow: 0 1px 4px rgba(0,0,0,0.35) !important;
}