/* ridigital DataHub — Viewer CSS v1.0.0 All rules scoped to .rddh-* — zero theme bleed */ :root { --rddh-p:#5c1d77;--rddh-pd:#451459;--rddh-pm:#7b2fa0; --rddh-pl:#f7f2fa;--rddh-pt:#ede5f5;--rddh-pp:#f4eefa; --rddh-ink:#111827;--rddh-mut:#4b5563;--rddh-fnt:#6b7280; --rddh-wh:#fff;--rddh-sl:#f9fafb;--rddh-sl2:#f4f3f8; --rddh-bdr:#e5e7eb;--rddh-bdrl:#ede9f7; --rddh-grn:#059669;--rddh-grnb:#ecfdf5; --rddh-amb:#d97706;--rddh-red:#dc2626; --rddh-hero:linear-gradient(160deg,#faf8ff 0%,#f3eefb 40%,#ede5f5 100%); --rddh-r:8px;--rddh-rl:12px;--rddh-rxl:16px;--rddh-pill:100px; --rddh-fu:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --rddh-ff:'DM Serif Display',Georgia,serif; --rddh-ease:cubic-bezier(.4,0,.2,1); } /* ── Widget outer section wrapper — must fill 100% of whatever the page builder gives it ── */ section.rddh-widget, div.rddh-widget { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; /* stretch when inside a flex parent (Elementor / BeBuilder columns) */ align-self: stretch !important; } /* ── API error row in table (shown when endpoint returns an error object) ── */ .rddh-tbl-api-err { color: #b91c1c !important; font-size: .8rem !important; background: #fff4f4 !important; padding: 20px 16px !important; line-height: 1.6 !important; } /* ── Base reset scoped to widget ── */ /* Explicitly un-set the most common theme overrides before we apply our own values. BeTheme (and most page builders) set aggressive global rules on a, button, input, p, etc. Without this reset those rules win inside the widget even though our selectors are scoped. */ /* .rddh-theme-scope: a second, layout-free entry point into the theme- defense rules above. Added specifically for the mobile filter drawer — it gets portaled to a direct child of (see RDDH.openMobileFilters in rddh-viewer.js) so it can escape .rddh-widget's own isolation:isolate stacking context and correctly out-rank page content elsewhere that has an explicit z-index. Simply adding the .rddh-widget class to it instead was tried first and rejected: .rddh-widget also carries this file's two-column WIDGET LAYOUT rules (width:100%!important, display:flex, overflow:hidden!important, etc., further down this file) — appropriate for the actual top-level widget, actively harmful on a drawer that needs its own width and its own internal scrolling. This class carries only the typography/box-sizing/button/input/anchor resets, nothing about layout. */ .rddh-widget, .rddh-theme-scope { isolation: isolate; } .rddh-widget, .rddh-widget *, .rddh-widget *::before, .rddh-widget *::after, .rddh-theme-scope, .rddh-theme-scope *, .rddh-theme-scope *::before, .rddh-theme-scope *::after { box-sizing: border-box !important; font-family: var(--rddh-fu) !important; -webkit-font-smoothing: antialiased; line-height: 1.5; /* theme may set a different line-height globally */ letter-spacing: normal; /* some themes set letter-spacing on * */ } /* Anchors — themes colour links globally; we manage our own colours. :where() wrapper below (added to fix a real bug — see note above button) */ :where(.rddh-widget, .rddh-theme-scope) a { color: inherit !important; text-decoration: none !important; background: none !important; border: none !important; padding: 0 !important; margin: 0 !important; } /* Paragraphs — themes add margin-bottom to p globally */ :where(.rddh-widget, .rddh-theme-scope) p { margin: 0 !important; padding: 0 !important; } /* Buttons — BeTheme adds borders, shadows, text-transform, etc. BUG FIX (buy buttons / coupon Apply&Cancel / lock overlay area all reading as "unstyled"): this rule was `.rddh-widget button` — a compound class+type selector, specificity (0,1,1). Every actual button component in this widget (.rddh-btn, .rddh-coupon-apply, .rddh-coupon-cancel, .rddh-coupon-toggle, .rddh-fp-clear, the modal close button, the sticky filter button…) is styled by a SINGLE class selector, specificity (0,1,0) — lower. Both sides used !important on padding/margin, so specificity broke the tie, and this reset's `padding: 0 !important` / `margin: 0 !important` always won over the component's own intended padding, no matter what the component rule said. Confirmed empirically (headless-Chromium computed-style dump): .rddh-btn-full, .rddh-coupon-apply, .rddh-coupon-cancel, and .rddh-coupon-toggle all resolved to `padding: 0px` despite their own CSS explicitly setting 14px/9px/8px !important — this is why the Buy buttons looked cramped and the coupon Apply/Cancel looked like bare text with barely-there hit targets instead of real buttons. Fix: wrap in :where(), which zeroes THIS selector's own specificity contribution (leaving only the bare `button` type selector, same pattern already used and documented in rddh-page.css). Component classes now always win their own padding/margin/border/background — this reset still wins against outside theme rules purely on !important, exactly as before. */ :where(.rddh-widget, .rddh-theme-scope) button { font-family: var(--rddh-fu) !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: none; border-radius: 0; background: none; border: none; padding: 0 !important; margin: 0 !important; cursor: pointer; } /* Inputs — themes add borders/shadows/heights */ :where(.rddh-widget, .rddh-theme-scope) input, :where(.rddh-widget, .rddh-theme-scope) select, :where(.rddh-widget, .rddh-theme-scope) textarea { font-family: var(--rddh-fu) !important; font-size: inherit !important; margin: 0 !important; background: none; } /* SVGs — some themes add max-width: 100% which breaks inline icon sizing */ .rddh-widget svg { max-width: none !important; vertical-align: middle !important; } /* Tables — themes style table/td globally */ .rddh-widget table { border-collapse: separate !important; border-spacing: 0 !important; margin: 0 !important; } .rddh-widget td, .rddh-widget th { padding: 0 !important; border: none !important; background: none; text-align: left; } .rddh-widget, .rddh-theme-scope { color: var(--rddh-ink) !important; font-size: 15px; line-height: 1.65; margin: 0 !important; } /* ── Layout ── */ .rddh-widget { display: flex !important; gap: 0 !important; align-items: stretch !important; background: transparent; /* blends into the #f6f3fb tray behind it */ border: none; /* no more card-in-a-card feeling */ border-radius: var(--rddh-rxl); overflow: hidden !important; box-shadow: none; /* removed — widget is part of the page now */ width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .rddh-filter-panel { width: 270px; min-width: 270px; border-right: 1px solid var(--rddh-bdrl); background: var(--rddh-wh); flex-shrink: 0 !important; display: flex !important; flex-direction: column !important; } .rddh-fp-header { padding: 15px 18px 9px !important; display: flex !important; align-items: center !important; gap: 7px !important; } /* Mobile-drawer-only elements — invisible/inert everywhere above 768px. Shown by the media query near the bottom of this file. */ .rddh-fp-close { display: none !important; } .rddh-mobile-filter-btn { display: none !important; } .rddh-fp-backdrop { display: none; } .rddh-fp-title { flex: 1 !important; font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--rddh-ink) !important; display: flex !important; align-items: center !important; gap: 6px !important; } .rddh-fp-count { background: var(--rddh-p); color: #fff !important; font-size: 10px; font-weight: 800; padding: 1px 7px !important; border-radius: var(--rddh-pill); display: none !important; } .rddh-fp-count.rddh-open { display: inline-flex !important; } /* Filter-count badges mirrored onto the Hero button, the panel's "Buy Filtered Selection" button, and the sticky bar's filter icon — same count as .rddh-fp-count above, same visual language, just placed in three more spots per an explicit ask to extend this beyond where the prototype itself only ever shows it (the sticky bar). */ .rddh-fbadge { display: none !important; align-items: center !important; justify-content: center !important; background: var(--rddh-p); color: #fff !important; font-size: 10px; font-weight: 800; min-width: 17px; height: 17px; padding: 0 4px !important; border-radius: var(--rddh-pill); line-height: 1 !important; flex-shrink: 0 !important; } .rddh-fbadge.rddh-open { display: inline-flex !important; } .rddh-fbadge-corner { position: absolute !important; top: -6px; right: -6px; box-shadow: 0 0 0 2px var(--rddh-wh); } .rddh-fp-clear { font-size: .78rem; font-weight: 700; color: var(--rddh-fnt) !important; cursor: pointer; background: none; border: none; padding: 2px 5px !important; transition: color .15s; } .rddh-fp-clear:hover { color: var(--rddh-red) !important; } /* "X of N filters applied" summary row — ported from the prototype's .filter-applied-row / .filter-applied-count */ .rddh-fp-applied-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 10px 18px !important; border-bottom: 1px solid var(--rddh-bdrl); } .rddh-fp-applied-count { font-size: .76rem; color: var(--rddh-fnt) !important; } .rddh-fp-body { flex: 1 !important; overflow-y: auto !important; padding: 6px 0 !important; } .rddh-fp-body::-webkit-scrollbar { width: 3px; } .rddh-fp-body::-webkit-scrollbar-thumb { background: var(--rddh-bdrl); border-radius: 2px; } .rddh-fp-empty { padding: 20px 18px !important; text-align: center; font-size: .85rem; color: var(--rddh-fnt) !important; } /* Filter group */ .rddh-filter-group { border-bottom: 1px solid var(--rddh-bdrl); } .rddh-fg-header { padding: 11px 18px !important; display: flex !important; align-items: center !important; gap: 7px !important; cursor: pointer; user-select: none; transition: background .12s; } .rddh-fg-header:hover,.rddh-filter-group.rddh-fg-active .rddh-fg-header { background: var(--rddh-pl); } .rddh-fg-label { flex: 1 !important; font-size: .9rem; font-weight: 600; color: var(--rddh-ink) !important; } .rddh-fg-dot { width: 6px; height: 6px; background: var(--rddh-p); border-radius: 50%; display: none !important; flex-shrink: 0 !important; } .rddh-fg-dot.rddh-open { display: inline-block !important; } .rddh-fg-chev { color: var(--rddh-fnt) !important; flex-shrink: 0 !important; transition: transform .18s; } .rddh-fg-body { display: none !important; padding: 8px 14px 12px !important; } .rddh-fg-body.rddh-fg-open { display: block !important; } /* Text filter */ .rddh-text-filter { width: 100%; padding: 8px 11px !important; font-size: .88rem; color: var(--rddh-ink) !important; border: 1.5px solid var(--rddh-bdr); border-radius: var(--rddh-r); outline: none; background: var(--rddh-wh); } .rddh-text-filter:focus { border-color: var(--rddh-p) !important; box-shadow: 0 0 0 2px rgba(92,29,119,.1); } /* Multi-term text filter — type free text, comma-separate several terms at once, pick from real file values shown as suggestions, or add any custom term. Matching is OR-of-contains per term (RDDH_DB::filter_rows, PHP side) — deliberately never exact, since these are user-typed. */ .rddh-mt-wrap { display: flex !important; flex-direction: column !important; gap: 6px !important; } .rddh-mt-chips { display: flex !important; flex-wrap: wrap !important; gap: 5px !important; max-height: 90px; overflow-y: auto !important; } .rddh-mt-chips:empty { display: none !important; } .rddh-mt-chips::-webkit-scrollbar { width: 4px; } .rddh-mt-chips::-webkit-scrollbar-thumb { background: var(--rddh-bdr); border-radius: 2px; } .rddh-mt-chip { display: inline-flex !important; align-items: center !important; gap: 5px !important; background: var(--rddh-pl); color: var(--rddh-p) !important; border-radius: var(--rddh-pill) !important; padding: 4px 6px 4px 10px !important; font-size: .78rem; font-weight: 600; max-width: 100%; } .rddh-mt-chip-x { cursor: pointer; color: var(--rddh-p) !important; display: flex !important; align-items: center !important; flex-shrink: 0 !important; } .rddh-mt-chip-x:hover { color: var(--rddh-red) !important; } .rddh-mt-input-row { position: relative !important; width: 100%; } .rddh-mt-input { width: 100%; padding: 8px 11px !important; font-size: .88rem; color: var(--rddh-ink) !important; border: 1.5px solid var(--rddh-bdr); border-radius: var(--rddh-r); outline: none; background: var(--rddh-wh); } .rddh-mt-input:focus { border-color: var(--rddh-p) !important; box-shadow: 0 0 0 2px rgba(92,29,119,.1); } .rddh-mt-input:disabled { background: var(--rddh-sl) !important; color: var(--rddh-fnt) !important; cursor: not-allowed; } .rddh-mt-suggest { display: none; position: absolute !important; top: calc(100% + 3px); left: 0; right: 0; background: var(--rddh-wh); border: 1.5px solid var(--rddh-bdrl); border-radius: var(--rddh-r); box-shadow: 0 6px 24px rgba(0,0,0,.1); z-index: 210 !important; max-height: 180px; overflow-y: auto !important; } .rddh-mt-suggest.rddh-open { display: block !important; } .rddh-mt-suggest::-webkit-scrollbar { width: 4px; } .rddh-mt-suggest::-webkit-scrollbar-thumb { background: var(--rddh-bdr); border-radius: 2px; } .rddh-mt-suggest-item { padding: 8px 12px !important; font-size: .85rem; color: var(--rddh-ink) !important; cursor: pointer; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis !important; } .rddh-mt-suggest-item:hover { background: var(--rddh-pl); } .rddh-mt-suggest-add { color: var(--rddh-p) !important; font-weight: 700; border-bottom: 1px solid var(--rddh-bdrl); } .rddh-mt-suggest-hint { padding: 10px 12px !important; font-size: .82rem; color: var(--rddh-fnt) !important; font-style: italic; cursor: default; text-align: center; } /* Has-value toggle — ported from the reference prototype's .switch (replaces the old bare native checkbox, which rendered as a tiny unstyled browser-default box/dash — the exact thing flagged as looking broken/ugly in client review). */ .rddh-has-val { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; cursor: pointer; padding: 4px 2px !important; } .rddh-has-val-copy { font-size: .88rem; color: var(--rddh-mut) !important; flex: 1 !important; } .rddh-switch { position: relative !important; flex-shrink: 0 !important; display: inline-block !important; width: 38px; height: 22px; } .rddh-switch input { position: absolute !important; opacity: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; cursor: pointer; z-index: 2 !important; } .rddh-switch-track { position: absolute !important; inset: 0; background: var(--rddh-bdr) !important; border-radius: var(--rddh-pill) !important; transition: background .15s; } .rddh-switch-thumb { position: absolute !important; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50% !important; background: #fff !important; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s var(--rddh-ease); } .rddh-switch input:checked + .rddh-switch-track { background: var(--rddh-p) !important; } .rddh-switch input:checked + .rddh-switch-track .rddh-switch-thumb { transform: translateX(16px); } /* Custom Select */ .rddh-cs-wrap { position: relative !important; width: 100%; } .rddh-cs-trigger { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 9px 12px !important; background: var(--rddh-wh); border: 1.5px solid var(--rddh-bdr); border-radius: var(--rddh-r); cursor: pointer; min-height: 38px; gap: 6px !important; transition: border-color .15s; } .rddh-cs-trigger:hover, .rddh-cs-trigger-open { border-color: var(--rddh-p) !important; } .rddh-cs-trigger-open { box-shadow: 0 0 0 2px rgba(92,29,119,.1); } .rddh-cs-val { font-size: .88rem; color: var(--rddh-ink) !important; flex: 1 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap; } .rddh-cs-placeholder { color: var(--rddh-fnt) !important; } .rddh-cs-chev { flex-shrink: 0 !important; color: var(--rddh-fnt) !important; transition: transform .18s; } .rddh-cs-panel { display: none !important; position: absolute !important; top: calc(100% + 3px); left: 0; right: 0; background: var(--rddh-wh); border: 1.5px solid var(--rddh-bdrl); border-radius: var(--rddh-r); box-shadow: 0 6px 24px rgba(0,0,0,.1); z-index: 200 !important; overflow: hidden !important; } .rddh-cs-panel.rddh-cs-open { display: block !important; } .rddh-cs-search { padding: 7px 9px !important; border-bottom: 1px solid var(--rddh-bdrl); } .rddh-cs-search input { width: 100%; padding: 7px 10px !important; font-size: .86rem; border: 1.5px solid var(--rddh-bdr); border-radius: var(--rddh-r); outline: none; } .rddh-cs-search input:focus { border-color: var(--rddh-p) !important; } .rddh-cs-list { max-height: 210px; overflow-y: auto !important; } .rddh-cs-list::-webkit-scrollbar { width: 4px; } .rddh-cs-list::-webkit-scrollbar-thumb { background: var(--rddh-bdr); border-radius: 2px; } .rddh-cs-item { padding: 9px 13px !important; font-size: .88rem; color: var(--rddh-ink) !important; cursor: pointer; transition: background .1s; display: flex !important; align-items: center !important; gap: 7px !important; } .rddh-cs-item:hover { background: var(--rddh-pl); } .rddh-cs-item.rddh-selected { background: var(--rddh-pp); color: var(--rddh-p) !important; font-weight: 700; } .rddh-cs-check-item { display: flex !important; align-items: center !important; gap: 9px !important; padding: 9px 13px !important; cursor: pointer; font-size: .88rem; transition: background .1s; } /* Compound selectors (two classes) so these reliably beat the base display:flex!important rules above regardless of CSS source order — used by the search-within-dropdown filter to hide non-matching rows. */ .rddh-cs-item.rddh-hidden, .rddh-cs-check-item.rddh-hidden { display: none !important; } .rddh-cs-check-item:hover { background: var(--rddh-pl); } .rddh-cs-check-item.rddh-checked { color: var(--rddh-p) !important; font-weight: 600; } .rddh-cs-checkbox { width: 16px; height: 16px; border: 1.5px solid var(--rddh-bdr); border-radius: 3px; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all .15s; } .rddh-cb-checked { background: var(--rddh-p); border-color: var(--rddh-p) !important; } .rddh-cb-checked::after { content: ''; width: 4px; height: 7px; border: 2px solid #fff; border-top: none; border-left: none; transform: rotate(45deg); display: block !important; margin-top: -2px !important; } .rddh-cs-count { padding: 6px 12px !important; font-size: .72rem; color: var(--rddh-fnt) !important; border-top: 1px solid var(--rddh-bdrl); background: var(--rddh-sl); } .rddh-ms-chips { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; margin-top: 6px !important; } .rddh-ms-chip { background: var(--rddh-pt); border: 1px solid var(--rddh-bdrl); border-radius: var(--rddh-pill); padding: 3px 8px 3px 10px !important; font-size: .76rem; font-weight: 700; color: var(--rddh-pm) !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; } .rddh-ms-chip-x { cursor: pointer; color: var(--rddh-p) !important; display: flex !important; align-items: center !important; } .rddh-ms-chip-x:hover { color: var(--rddh-red) !important; } /* ── Table Area ── */ .rddh-table-area { flex: 1 !important; min-width: 0; display: flex !important; flex-direction: column !important; background: var(--rddh-wh); } .rddh-table-topbar { padding: 11px 16px !important; border-bottom: 1px solid var(--rddh-bdrl); background: var(--rddh-wh); display: flex !important; align-items: center !important; gap: 12px !important; flex-wrap: wrap !important; flex-shrink: 0 !important; } .rddh-table-stats { font-size: .82rem; color: var(--rddh-fnt) !important; font-weight: 500; } .rddh-table-stats strong { color: var(--rddh-ink) !important; } .rddh-filtered-badge { display: none !important; background: var(--rddh-pt); color: var(--rddh-pm) !important; border-radius: var(--rddh-pill); padding: 2px 9px !important; font-size: .68rem; font-weight: 800; margin-left: 4px !important; } .rddh-budget-bar { display: flex !important; align-items: center !important; gap: 7px !important; margin-left: auto !important; font-size: .74rem; color: var(--rddh-fnt) !important; } .rddh-budget-track { width: 80px; height: 4px; background: var(--rddh-bdr); border-radius: 2px; overflow: hidden !important; } .rddh-budget-fill { height: 100%; background: var(--rddh-p); border-radius: 2px; transition: width .35s var(--rddh-ease); } .rddh-budget-warn { background: var(--rddh-amb); } .rddh-budget-low { background: var(--rddh-red); } .rddh-budget-num { font-size: .72rem; font-weight: 700; white-space: nowrap; } /* Active filter chips */ .rddh-chip-bar { display: flex !important; align-items: center !important; gap: 6px !important; flex-wrap: wrap !important; padding: 8px 16px !important; min-height: 38px; border-bottom: 1px solid rgba(237,233,247,.5); } .rddh-chip-label { font-size: .70rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--rddh-fnt) !important; } .rddh-chip { display: inline-flex !important; align-items: center !important; gap: 4px !important; background: var(--rddh-pt); border: 1px solid var(--rddh-bdrl); color: var(--rddh-pm) !important; border-radius: var(--rddh-pill); padding: 3px 9px 3px 11px !important; font-size: .76rem; font-weight: 700; } .rddh-chip-x { cursor: pointer; color: var(--rddh-p) !important; display: flex !important; align-items: center !important; width: 14px; height: 14px; border-radius: 50%; } .rddh-chip-x:hover { color: var(--rddh-red) !important; } .rddh-chip-clr { font-size: .76rem; font-weight: 700; color: var(--rddh-fnt) !important; cursor: pointer; padding: 2px 6px !important; } .rddh-chip-clr:hover { color: var(--rddh-red) !important; } /* ── Excel Table ── */ /* NOTE: the generic .rddh-widget td/th reset above wipes padding/border/background. All excel-table rules below re-apply them with specificity — this is intentional. */ .rddh-excel-outer { flex: 1 !important; position: relative !important; display: flex !important; flex-direction: column !important; min-height: 260px; max-height: 380px; } .rddh-excel-wrap { flex: 1 !important; overflow: auto !important; position: relative !important; } .rddh-excel-wrap::-webkit-scrollbar { width: 8px; height: 8px; } .rddh-excel-wrap::-webkit-scrollbar-track { background: var(--rddh-sl); } .rddh-excel-wrap::-webkit-scrollbar-thumb { background: var(--rddh-bdr); border-radius: 4px; } .rddh-excel-wrap::-webkit-scrollbar-corner { background: var(--rddh-sl); } .rddh-excel-table { border-collapse: separate; border-spacing: 0; font-size: .76rem; white-space: nowrap; user-select: none; -webkit-user-select: none; min-width: 100%; } /* Blur on window focus loss */ .rddh-wblur .rddh-blur-row td:not(.rddh-td-num), .rddh-wblur .rddh-excel-table tbody tr:nth-child(n+2) td:not(.rddh-td-num) { filter: blur(8px); } /* Header */ .rddh-excel-table thead th { background: var(--rddh-p) !important; color: #fff !important; height: 33px; padding: 0 !important; position: sticky !important; top: 0; z-index: 10 !important; border-right: 1px solid rgba(255,255,255,.12) !important; border-bottom: 2px solid var(--rddh-pd) !important; font-weight: 700; font-size: .68rem; letter-spacing: .03em; vertical-align: middle !important; overflow: visible !important; min-width: 100px; } .rddh-th-num { min-width: 38px !important; width: 38px !important; max-width: 38px !important; position: sticky !important; top: 0; left: 0; z-index: 20 !important; background: var(--rddh-pd) !important; } .rddh-th-in { display: flex !important; align-items: center !important; padding: 0 10px !important; height: 100%; gap: 5px !important; overflow: hidden !important; } .rddh-th-txt { overflow: hidden !important; text-overflow: ellipsis !important; flex: 1 !important; } .rddh-th-sort { flex-shrink: 0 !important; opacity: .35; } .rddh-th-sort.rddh-sa,.rddh-th-sort.rddh-sd { opacity: 1; } /* Resize handle */ .rddh-col-rh { position: absolute !important; right: 0; top: 0; bottom: 0; width: 5px; cursor: col-resize; z-index: 30 !important; transition: background .12s; } .rddh-col-rh:hover,.rddh-rh-drag { background: rgba(255,255,255,.45); } /* Body */ .rddh-excel-table tbody td { padding: 0 10px !important; height: 28px; line-height: 28px; border-bottom: 1px solid var(--rddh-sl) !important; border-right: 1px solid rgba(229,231,235,.45) !important; color: var(--rddh-ink) !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 200px; vertical-align: middle !important; background: var(--rddh-wh); } .rddh-td-num { position: sticky !important; left: 0; z-index: 5 !important; background: var(--rddh-sl) !important; color: var(--rddh-fnt) !important; text-align: center; font-size: .64rem; font-weight: 700; border-right: 2px solid var(--rddh-bdr) !important; min-width: 38px; width: 38px; padding: 0 !important; } .rddh-excel-table tbody tr:nth-child(even) td { background: #fafafe !important; } .rddh-excel-table tbody tr:hover td { background: var(--rddh-pl) !important; } .rddh-excel-table tbody tr:hover .rddh-td-num { background: var(--rddh-pt) !important; } .rddh-blur-row td:not(.rddh-td-num) { filter: blur(4.5px); pointer-events: none; } .rddh-tbl-empty { text-align: center; padding: 32px !important; color: var(--rddh-fnt) !important; font-size: .82rem; } /* Lock overlay */ .rddh-lock-overlay { position: absolute !important; bottom: 0; left: 38px; right: 0; height: 76px; background: linear-gradient(transparent,rgba(249,250,251,.97)); display: flex !important; align-items: flex-end !important; justify-content: center !important; padding-bottom: 9px !important; pointer-events: none; } .rddh-lock-pill { display: flex !important; align-items: center !important; gap: 6px !important; background: var(--rddh-wh) !important; border: 1px solid var(--rddh-bdrl) !important; border-radius: var(--rddh-pill) !important; padding: 6px 15px !important; font-size: .75rem; color: var(--rddh-fnt) !important; font-weight: 600; box-shadow: 0 2px 12px rgba(92,29,119,.09) !important; } /* Budget depleted overlay — now a proper floating card, not a stretched flat button */ .rddh-depleted-overlay { display: none !important; position: absolute !important; inset: 0; left: 38px; background: rgba(255,255,255,.82); backdrop-filter: blur(2px); flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 24px !important; } .rddh-depleted-overlay.rddh-open { display: flex !important; } .rddh-depleted-card { background: #fff; border-radius: 16px; box-shadow: 0 16px 48px rgba(31,10,46,.16), 0 2px 8px rgba(31,10,46,.06); border: 1px solid #f0e9f7; padding: 28px 32px !important; max-width: 340px; width: 100%; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center; gap: 10px !important; } .rddh-depleted-card svg { color: var(--rddh-p) !important; margin-bottom: 2px !important; } .rddh-depleted-card strong { font-size: .98rem; font-weight: 800; color: var(--rddh-ink) !important; } .rddh-depleted-card span { font-size: .82rem; color: var(--rddh-mut) !important; line-height: 1.6; margin-bottom: 6px !important; } .rddh-depleted-card .rddh-btn { flex: none !important; width: 100% !important; padding: 12px 20px !important; } /* ── Purchase Panel — ported from the reference prototype's .price-panel ── */ .rddh-purchase-panel { border-top: 1px solid var(--rddh-bdr); background: var(--rddh-wh); padding: 26px 24px 24px !important; flex-shrink: 0 !important; } /* Top row — count left, price right */ .rddh-pp-top { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; flex-wrap: wrap !important; margin-bottom: 18px !important; order: 1; } .rddh-pp-count { } .rddh-count-num { font-family: var(--rddh-ff); font-weight: 400; font-size: 1.7rem; color: var(--rddh-ink) !important; line-height: 1; display: block !important; } .rddh-count-lbl { font-size: .82rem; color: var(--rddh-fnt) !important; font-weight: 500; text-transform: none; letter-spacing: normal; margin-top: 2px !important; display: block !important; } .rddh-pp-price { text-align: right; } .rddh-price-val { font-family: var(--rddh-ff); font-weight: 400; font-size: 1.9rem; color: var(--rddh-ink) !important; line-height: 1; display: block !important; } .rddh-price-detail { font-size: .78rem; color: var(--rddh-fnt) !important; margin-top: 4px !important; display: block !important; text-align: right; } .rddh-discount-badge { display: none !important; align-items: center !important; gap: 5px !important; background: transparent; border: none; padding: 0 !important; font-size: .76rem; font-weight: 700; color: var(--rddh-grn) !important; text-transform: none; letter-spacing: normal; margin-top: 4px !important; justify-content: flex-end !important; width: 100%; } .rddh-discount-badge.rddh-open { display: inline-flex !important; } /* Coupon — ported from the reference prototype's .coupon-link/.coupon-box */ .rddh-coupon-wrap { margin-bottom: 0 !important; margin-top: 12px !important; order: 3; } .rddh-coupon-toggle { all: unset !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; font-size: .82rem; font-weight: 600; color: var(--rddh-fnt) !important; cursor: pointer; font-family: var(--rddh-fu); padding: 8px 4px !important; background: none !important; border: none !important; } .rddh-coupon-toggle svg { color: var(--rddh-fnt) !important; flex-shrink: 0 !important; } .rddh-coupon-toggle:hover { color: var(--rddh-mut) !important; } .rddh-coupon-toggle:hover svg { color: var(--rddh-mut) !important; } .rddh-coupon-field { display: none !important; margin-top: 10px !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; background: transparent; border: none; border-radius: 0; overflow: visible !important; max-width: none; } .rddh-coupon-field.rddh-open { display: flex !important; } @media (max-width: 560px) { .rddh-coupon-field { flex-direction: column !important; align-items: stretch !important; } } .rddh-coupon-input { all: unset !important; box-sizing: border-box !important; min-width: 0 !important; max-width: 220px; display: block !important; padding: 11px 14px !important; border: 1.5px solid var(--rddh-bdr) !important; border-radius: var(--rddh-r) !important; font-size: .86rem !important; font-family: var(--rddh-fu) !important; color: var(--rddh-ink) !important; background: var(--rddh-wh) !important; outline: none !important; text-transform: uppercase !important; letter-spacing: .06em !important; -webkit-appearance: none !important; appearance: none !important; box-shadow: none !important; line-height: 1.4 !important; height: auto !important; width: auto !important; transition: border-color .15s, box-shadow .15s !important; } .rddh-coupon-input:focus { border-color: var(--rddh-p) !important; box-shadow: 0 0 0 3px rgba(92,29,119,.1) !important; } .rddh-coupon-input::placeholder { color: var(--rddh-fnt) !important; opacity: .7 !important; text-transform: none !important; letter-spacing: normal !important; } @media (max-width: 560px) { .rddh-coupon-input { max-width: none; width: 100%; } } .rddh-coupon-apply { all: unset !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 9px 16px !important; background: var(--rddh-wh) !important; color: var(--rddh-p) !important; border: 1.5px solid var(--rddh-bdr) !important; border-radius: var(--rddh-r) !important; font-size: .82rem !important; font-weight: 700 !important; cursor: pointer !important; font-family: var(--rddh-fu) !important; transition: all .2s var(--rddh-ease) !important; white-space: nowrap !important; flex-shrink: 0 !important; line-height: 1 !important; } .rddh-coupon-apply:hover { border-color: var(--rddh-p) !important; background: var(--rddh-pp) !important; } .rddh-coupon-cancel { all: unset !important; box-sizing: border-box !important; font-size: .8rem; font-weight: 600; color: var(--rddh-fnt) !important; padding: 8px !important; cursor: pointer; font-family: var(--rddh-fu); background: none !important; border: none !important; } .rddh-coupon-cancel:hover { color: var(--rddh-ink) !important; } .rddh-coupon-msg { font-size: .8rem; margin-top: 7px !important; font-weight: 700; width: 100%; } .rddh-coupon-ok { color: var(--rddh-grn) !important; } .rddh-coupon-err { color: var(--rddh-red) !important; } /* Buy Buttons — ported from the reference prototype's .btn/.btn-p/.btn-s. Buy Filtered Selection changes from a solid green fill to the prototype's outlined "secondary" treatment (white bg, purple text/ border) — a deliberate visual match, not an oversight; the color no longer needs to carry "this is a different, safe action" meaning since the outline + hover-fill treatment already does that job. */ .rddh-pp-btns { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; order: 2; } .rddh-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; font-family: var(--rddh-fu) !important; font-weight: 700 !important; border-radius: var(--rddh-r) !important; cursor: pointer !important; border: 2px solid transparent !important; transition: all .22s var(--rddh-ease) !important; white-space: nowrap !important; padding: 14px 26px !important; font-size: .92rem !important; text-transform: none !important; letter-spacing: normal !important; line-height: 1 !important; } /* Compound selector so this reliably beats display:inline-flex!important above regardless of source order — used for the "Buy Filtered Selection" buttons, hidden until the visitor actually applies a filter. */ .rddh-btn.rddh-hidden { display: none !important; } .rddh-btn-full { background: var(--rddh-p) !important; color: #fff !important; border-color: var(--rddh-p) !important; } .rddh-btn-full:hover { background: var(--rddh-pd) !important; border-color: var(--rddh-pd) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(92,29,119,.28) !important; } /* Secondary/outline button — referenced consistently across the PDF download link, the "related databases" load-more button, and (on the admin side, separately) the image tools meta box, but was never actually defined anywhere the front end could reach it — those buttons rendered with layout/spacing from the base .rddh-btn rule above but no background or text colour of their own. */ .rddh-btn--ghost { background: var(--rddh-wh) !important; color: var(--rddh-p) !important; border-color: var(--rddh-bdr) !important; } .rddh-btn--ghost:hover { background: var(--rddh-pl) !important; border-color: var(--rddh-p) !important; } .rddh-btn--sm { padding: 9px 16px !important; font-size: .82rem !important; gap: 6px !important; } .rddh-btn-filtered { background: var(--rddh-wh) !important; color: var(--rddh-p) !important; border-color: var(--rddh-bdr) !important; } .rddh-btn-filtered:hover { border-color: var(--rddh-p) !important; background: var(--rddh-pp) !important; transform: translateY(-2px) !important; box-shadow: none !important; } .rddh-btn-cancel { background: transparent !important; color: var(--rddh-fnt) !important; border: 1.5px solid var(--rddh-bdr) !important; } .rddh-btn-cancel:hover { border-color: var(--rddh-p) !important; color: var(--rddh-p) !important; } .rddh-btn-sm { padding: 9px 16px !important; font-size: .82rem !important; flex: 0 !important; } .rddh-btn:disabled { opacity: .45 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; } .rddh-input-err { border-color: var(--rddh-red) !important; box-shadow: 0 0 0 2px rgba(220,38,38,.15) !important; } /* Trust row — kept as its existing 4-item + payment-card content (not part of what was asked to change), lightly aligned with the new panel's spacing rhythm. */ .rddh-trust { display: flex !important; align-items: center !important; justify-content: center !important; gap: 14px !important; padding-top: 18px !important; margin-top: 18px !important; border-top: 1px solid var(--rddh-bdrl); flex-wrap: wrap !important; order: 4; } .rddh-trust-item { display: flex !important; align-items: center !important; gap: 4px !important; font-size: .67rem; font-weight: 600; color: var(--rddh-fnt) !important; } .rddh-trust-cards { display: flex !important; align-items: center !important; gap: 6px !important; } .rddh-trust-cards svg { border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.06); } /* Flex order for the panel's own children — buttons, then coupon, then trust row, matching the prototype (the PHP markup is already in this order; these order values are just an extra guarantee, matching how this codebase already prefers belt-and-suspenders fixes elsewhere). */ /* ── Sticky Bottom Bar — ported from the reference prototype's .sticky-bar exactly: full-width bar flush to the viewport bottom, sliding up on entry rather than fading in as a floating pill. Title + record/field/ updated summary on the left, price + discount on the right, a filter- shortcut icon button plus a single "Buy full database" action on the far right (the prototype doesn't show a second "buy filtered" button here — the main purchase panel above already covers that). ──────────── */ .rddh-sticky-bar, .rddh-sticky-bar *, .rddh-sticky-bar *::before, .rddh-sticky-bar *::after { box-sizing: border-box !important; font-family: var(--rddh-fu) !important; -webkit-font-smoothing: antialiased; line-height: 1.5; letter-spacing: normal; } .rddh-sticky-bar button { font-family: var(--rddh-fu) !important; text-transform: none !important; -webkit-appearance: none !important; appearance: none !important; } .rddh-sticky-price { font-family: var(--rddh-ff) !important; } .rddh-sticky-bar { position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 890 !important; background: var(--rddh-wh); border-top: 1px solid var(--rddh-bdr); box-shadow: 0 -10px 30px -8px rgba(13,10,22,.14); padding-bottom: env(safe-area-inset-bottom, 0); transform: translateY(120%); transition: transform .3s var(--rddh-ease); } .rddh-sticky-bar.rddh-sticky-visible { transform: translateY(0); } .rddh-sticky-inner { max-width: 1160px; margin: 0 auto !important; padding: 13px 32px !important; display: flex !important; align-items: center !important; gap: 16px !important; } .rddh-sticky-text { min-width: 0; flex: 1 !important; } .rddh-sticky-title { font-size: .86rem; font-weight: 700; color: var(--rddh-ink) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rddh-sticky-sub { font-size: .73rem; color: var(--rddh-fnt) !important; white-space: nowrap; } .rddh-sticky-price-block { text-align: right; flex-shrink: 0 !important; max-width: 40vw; } .rddh-sticky-price { font-weight: 400; font-size: 1.2rem; color: var(--rddh-ink) !important; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rddh-sticky-price-sub { font-size: .66rem; color: var(--rddh-grn) !important; font-weight: 700; min-height: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rddh-sticky-actions { display: flex !important; gap: 9px !important; flex-shrink: 0 !important; align-items: center !important; } .rddh-sticky-btn-filter { all: unset !important; box-sizing: border-box !important; position: relative !important; width: 42px; height: 42px; border-radius: 9px; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: var(--rddh-pl) !important; border: 1.5px solid var(--rddh-bdrl) !important; color: var(--rddh-p) !important; cursor: pointer; transition: background .15s, border-color .15s; } .rddh-sticky-btn-filter:hover { background: var(--rddh-pt); border-color: var(--rddh-p) !important; } .rddh-sticky-actions .rddh-btn { padding: 11px 18px !important; font-size: .84rem !important; flex: 0 1 auto !important; } @media (max-width: 900px) { /* Drop the update date first — smallest, least useful piece of the sub line — before touching anything else. */ .rddh-sticky-sub-updated { display: none; } } @media (max-width: 700px) { .rddh-sticky-title { max-width: 42vw; } .rddh-sticky-sub { display: none; } } @media (max-width: 480px) { .rddh-sticky-inner { gap: 10px !important; padding: 11px 16px !important; flex-wrap: wrap !important; row-gap: 8px !important; } .rddh-sticky-title { max-width: 55vw; font-size: .8rem; } .rddh-sticky-price { font-size: 1rem; } .rddh-sticky-price-block { max-width: 32vw; } .rddh-sticky-btn-full-text { display: none; } .rddh-sticky-actions .rddh-btn { padding: 11px 14px !important; } } /* ── Modal ────────────────────────────────────────────────────────────── Default-hidden via a real class rule (not inline style — see the note in class-rddh-shortcode.php on why). display is only ever "none" or "flex" here, so the align-items/justify-content centering below reliably applies whenever it's shown, instead of silently falling back to display:block (and losing centering) under the isolation reset. */ .rddh-modal-overlay { display: none !important; position: fixed !important; inset: 0; background: rgba(13,10,22,.72); z-index: 9999 !important; align-items: center !important; justify-content: center !important; padding: 20px !important; backdrop-filter: blur(5px); } .rddh-modal-overlay.rddh-open { display: flex !important; } .rddh-modal { background: var(--rddh-wh); border-radius: 18px; padding: 30px !important; max-width: 460px; width: 100%; position: relative !important; text-align: center; box-shadow: 0 28px 72px rgba(0,0,0,.22); font-family: var(--rddh-fu); } .rddh-modal-close { position: absolute !important; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--rddh-sl); border: none; color: var(--rddh-fnt) !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer; transition: all .15s; } .rddh-modal-close:hover { background: var(--rddh-bdr); } .rddh-modal-icon { margin-bottom: 10px !important; } .rddh-modal h3 { font-family: var(--rddh-ff); font-size: 1.4rem; color: var(--rddh-ink) !important; margin-bottom: 7px !important; } .rddh-modal p { font-size: .84rem; color: var(--rddh-mut) !important; line-height: 1.7; margin-bottom: 14px !important; } .rddh-modal-det { background: var(--rddh-hero); border: 1px solid var(--rddh-bdrl); border-radius: var(--rddh-rl); padding: 13px 16px !important; text-align: left; font-size: .8rem; margin-bottom: 14px !important; } .rddh-mdet-row { display: flex !important; justify-content: space-between !important; padding: 4px 0 !important; border-bottom: 1px solid rgba(237,233,247,.6); } .rddh-mdet-row:last-child { border: none; } .rddh-mdet-row span { color: var(--rddh-fnt) !important; } .rddh-mdet-row strong { color: var(--rddh-ink) !important; font-weight: 700; } .rddh-modal-label { display: block !important; text-align: left; font-size: .74rem; font-weight: 700; color: var(--rddh-ink) !important; margin-bottom: 5px !important; } .rddh-modal-email { width: 100%; padding: 9px 12px !important; border: 1.5px solid var(--rddh-bdr); border-radius: var(--rddh-r); font-size: .9rem; font-family: var(--rddh-fu); outline: none; margin-bottom: 14px !important; } .rddh-modal-email:focus { border-color: var(--rddh-p) !important; box-shadow: 0 0 0 3px rgba(92,29,119,.1); } .rddh-modal-actions { display: flex !important; flex-direction: column !important; gap: 9px !important; } /* ── Error ── */ .rddh-error { color: var(--rddh-red) !important; font-size: .84rem; padding: 12px !important; background: #fef2f2; border: 1px solid rgba(220,38,38,.2); border-radius: var(--rddh-r); } /* ── Mobile ────────────────────────────────────────────────────────────── NOTE: this codebase previously had two separate, overlapping mobile media query blocks here (768px and 760px) with some duplicated and some conflicting rules — consolidated into one, and updated the purchase- panel/sticky-bar rules to match the current flex-based layout and class names (the old rules here still referenced .rddh-sticky-left/-count/ -btns and a grid-based .rddh-pp-top, all of which no longer exist in the markup after this version's redesign). */ @media (max-width: 768px) { .rddh-widget { flex-direction: column !important; } /* Filter panel becomes an off-canvas drawer, sliding in from the left over a dim backdrop — replaces the old inline max-height expand, which pushed the table + purchase panel down by an unpredictable amount depending on how many filters a given database has. */ .rddh-filter-panel { position: fixed !important; top: 0; left: 0; bottom: 0; width: min(84vw, 320px); max-width: 320px; min-width: 0 !important; height: 100vh !important; height: 100dvh !important; max-height: none !important; background: var(--rddh-wh); z-index: 9999 !important; border-right: 1px solid var(--rddh-bdrl) !important; border-bottom: none !important; box-shadow: 10px 0 36px rgba(31,10,46,.18); transform: translateX(-100%); transition: transform .28s var(--rddh-ease); overflow-y: auto !important; } .rddh-filter-panel.rddh-fp-expanded { transform: translateX(0); } .rddh-fp-close { display: flex !important; align-items: center !important; justify-content: center !important; width: 30px; height: 30px; flex-shrink: 0 !important; border-radius: 50% !important; background: none !important; border: none !important; color: var(--rddh-fnt) !important; cursor: pointer; transition: background .15s; } .rddh-fp-close:hover { background: var(--rddh-sl) !important; } .rddh-fp-backdrop.rddh-open { display: block !important; position: fixed !important; inset: 0; background: rgba(17,10,26,.44); z-index: 9998 !important; } /* Persistent trigger, always visible in the table topbar since the panel itself is off-canvas (and therefore untappable) until opened. */ .rddh-mobile-filter-btn { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: var(--rddh-wh) !important; border: 1.5px solid var(--rddh-bdr) !important; border-radius: var(--rddh-r) !important; padding: 7px 12px !important; font-size: .78rem; font-weight: 700; color: var(--rddh-ink) !important; cursor: pointer; order: -1; width: 100%; justify-content: center !important; } body.rddh-scroll-lock { overflow: hidden !important; } /* Table area */ .rddh-table-area { min-height: 320px; } .rddh-excel-outer { max-height: 280px; } /* Purchase panel — stack */ .rddh-pp-top { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; } .rddh-pp-price { text-align: left !important; } .rddh-price-detail, .rddh-discount-badge { text-align: left !important; justify-content: flex-start !important; } .rddh-pp-btns { flex-direction: column !important; align-items: stretch !important; } .rddh-pp-btns .rddh-btn { width: 100% !important; } }