/* ===================================================== RH Compatibility Tool – Frontend Styles ===================================================== */ #rh-wp, #rh-wp *, #rh-wp *::before, #rh-wp *::after { box-sizing: border-box !important; font-family: inherit !important; } /* Inherit the active theme's font stack from */ #rh-wp { font-family: var(--wp--preset--font-family--body, inherit) !important; display: block !important; width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; color: #0f172a !important; } /* Intro */ #rh-wp .tool-intro { text-align: center !important; margin: 0 0 26px !important; } #rh-wp .tool-tab-title { display: inline-block !important; font-size: 1.75rem !important; font-weight: 800 !important; line-height: 1.2 !important; color: #0f172a !important; margin: 0 0 10px !important; } #rh-wp .tool-prompt { display: block !important; font-size: 1rem !important; line-height: 1.65 !important; color: #475569 !important; margin: 0 !important; } /* Grid layout */ #rh-wp .rh-grid { display: grid !important; grid-template-columns: 1.15fr 1fr !important; gap: 28px !important; align-items: start !important; } @media (max-width: 900px) { #rh-wp .rh-grid { grid-template-columns: 1fr !important; } } /* Left card */ #rh-wp .lcard { background: #ffffff !important; border-radius: 2.5rem !important; box-shadow: 0 20px 60px rgba(0,0,0,.10) !important; padding: 32px !important; border: 1px solid #f1f5f9 !important; } #rh-wp .lcard-head { display: flex !important; align-items: center !important; gap: 14px !important; margin-bottom: 20px !important; } #rh-wp .icon-pill { display: flex !important; align-items: center !important; justify-content: center !important; width: 48px !important; height: 48px !important; background: #fff1f2 !important; border-radius: 14px !important; color: #e11d48 !important; flex-shrink: 0 !important; font-size: 20px !important; font-weight: 800 !important; } #rh-wp .lcard-title { display: block !important; font-size: 1.15rem !important; font-weight: 800 !important; color: #0f172a !important; line-height: 1.3 !important; text-transform: uppercase !important; margin: 0 !important; } #rh-wp .mini-helper { display: block !important; font-size: 0.86rem !important; color: #64748b !important; margin: 0 0 22px !important; line-height: 1.6 !important; } /* Field blocks */ #rh-wp .field-block { display: block !important; margin-bottom: 22px !important; } #rh-wp .sec-label { display: flex !important; align-items: center !important; gap: 7px !important; font-size: 10px !important; font-weight: 700 !important; color: #94a3b8 !important; letter-spacing: .14em !important; text-transform: uppercase !important; margin-bottom: 12px !important; } #rh-wp .gender-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } #rh-wp .bt-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; } @media (max-width: 640px) { #rh-wp .gender-grid { grid-template-columns: 1fr !important; } #rh-wp .bt-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* Choice buttons */ #rh-wp .choice-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 44px !important; padding: 12px 8px !important; border-radius: 12px !important; font-weight: 700 !important; font-size: 0.92rem !important; text-align: center !important; cursor: pointer !important; transition: all 0.18s ease !important; background: #f1f5f9 !important; color: #64748b !important; border: 2px solid transparent !important; line-height: 1.2 !important; appearance: none !important; -webkit-appearance: none !important; } #rh-wp .choice-btn:hover { background: #e2e8f0 !important; color: #334155 !important; } #rh-wp .choice-btn.active { background: #e11d48 !important; color: #ffffff !important; border-color: #e11d48 !important; box-shadow: 0 8px 20px rgba(225,29,72,.28) !important; transform: translateY(-2px) !important; } /* gender active = dark blue */ #rh-wp .rh-gender-grid .choice-btn.active { background: #1d4ed8 !important; border-color: #1d4ed8 !important; box-shadow: 0 10px 20px rgba(29,78,216,.25) !important; } /* Result */ #rh-wp .result-wrap { min-height: 140px !important; margin-top: 10px !important; } #rh-wp .result-card { display: flex !important; gap: 14px !important; border-radius: 18px !important; padding: 18px !important; animation: rhFadeUp .3s ease both !important; } @keyframes rhFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } #rh-wp .result-card.risk { background: #fffbeb !important; border: 1px solid #fde68a !important; } #rh-wp .result-card.safe { background: #ecfdf5 !important; border: 1px solid #a7f3d0 !important; } #rh-wp .result-card.info { background: #eff6ff !important; border: 1px solid #bfdbfe !important; } #rh-wp .res-ico { width: 40px !important; height: 40px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; color: #fff !important; } #rh-wp .res-ico.amber { background: #f59e0b !important; } #rh-wp .res-ico.green { background: #10b981 !important; } #rh-wp .res-ico.blue { background: #2563eb !important; } #rh-wp .res-title { display: block !important; font-weight: 700 !important; font-size: 0.95rem !important; margin-bottom: 5px !important; } #rh-wp .res-title.amber { color: #78350f !important; } #rh-wp .res-title.green { color: #064e3b !important; } #rh-wp .res-title.blue { color: #1e3a8a !important; } #rh-wp .res-text { display: block !important; font-size: 0.84rem !important; color: #475569 !important; line-height: 1.65 !important; } /* Action row */ #rh-wp .action-row { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; margin-top: 18px !important; align-items: center !important; } #rh-wp .download-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 12px 18px !important; border-radius: 999px !important; background: #0f172a !important; color: #ffffff !important; font-size: 0.9rem !important; font-weight: 700 !important; text-decoration: none !important; cursor: pointer !important; border: none !important; } #rh-wp .download-btn:hover { opacity: .92 !important; } #rh-wp .download-note { font-size: 0.8rem !important; color: #64748b !important; } /* Right column */ #rh-wp .rcol { display: flex !important; flex-direction: column !important; gap: 22px !important; } #rh-wp .dcard { background: #0f172a !important; border-radius: 2.5rem !important; padding: 32px !important; box-shadow: 0 20px 50px rgba(0,0,0,.22) !important; } #rh-wp .dcard-head { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 20px !important; } #rh-wp .dcard-ico { display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; background: rgba(255,255,255,.10) !important; border-radius: 12px !important; color: #fff !important; } #rh-wp .dcard-title { font-size: 1.15rem !important; font-weight: 700 !important; color: #ffffff !important; line-height: 1.3 !important; } #rh-wp .dcard-body { display: block !important; color: #cbd5e1 !important; font-size: 0.84rem !important; line-height: 1.75 !important; margin-bottom: 20px !important; } #rh-wp .proto-item { display: flex !important; align-items: center !important; gap: 12px !important; background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.07) !important; border-radius: 12px !important; padding: 14px 16px !important; margin-bottom: 10px !important; } #rh-wp .proto-item:last-child { margin-bottom: 0 !important; } #rh-wp .proto-ico { width: 26px !important; height: 26px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } #rh-wp .proto-ico.red { background: rgba(239,68,68,.20) !important; color: #f87171 !important; } #rh-wp .proto-ico.cyan { background: rgba(6,182,212,.20) !important; color: #22d3ee !important; } #rh-wp .proto-text { display: block !important; font-size: 0.8rem !important; font-weight: 500 !important; color: #e2e8f0 !important; } /* Fact card */ #rh-wp .fcard { background: #ffffff !important; border-radius: 2rem !important; padding: 28px 32px !important; border: 1px solid #f1f5f9 !important; box-shadow: 0 8px 30px rgba(0,0,0,.07) !important; } #rh-wp .fcard-head { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 14px !important; } #rh-wp .fcard-label { display: flex !important; align-items: center !important; gap: 7px !important; font-size: 10px !important; font-weight: 700 !important; color: #94a3b8 !important; letter-spacing: .14em !important; text-transform: uppercase !important; } #rh-wp .dots { display: flex !important; gap: 5px !important; align-items: center !important; } #rh-wp .dot { height: 4px !important; border-radius: 9999px !important; background: #e2e8f0 !important; width: 6px !important; transition: all .6s ease !important; flex-shrink: 0 !important; } #rh-wp .dot.on { width: 24px !important; background: #e11d48 !important; } #rh-wp .fact-txt { display: block !important; font-size: 1rem !important; font-weight: 700 !important; color: #1e293b !important; line-height: 1.45 !important; min-height: 3rem !important; } /* Footer */ #rh-wp .rh-footer { display: block !important; margin-top: 36px !important; font-size: 11px !important; color: #94a3b8 !important; text-align: center !important; max-width: 560px !important; margin-left: auto !important; margin-right: auto !important; line-height: 1.7 !important; } /* ------------------------------------------------- PNG SHARE CARD (hidden off-screen) ------------------------------------------------- */ #rh-wp .rh-share-card { position: fixed !important; left: -99999px !important; top: 0 !important; width: 1080px !important; z-index: -1 !important; } #rh-wp .rh-share-inner { width: 1080px !important; padding: 48px !important; border-radius: 32px !important; background: linear-gradient(180deg, #e0f7ff 0%, #ffffff 100%) !important; border: 1px solid #dbeafe !important; color: #0f172a !important; font-family: Arial, sans-serif !important; } #rh-wp .rh-share-brand { font-size: 42px !important; font-weight: 800 !important; margin-bottom: 8px !important; color: #0f172a !important; } #rh-wp .rh-share-sub { font-size: 20px !important; color: #475569 !important; margin-bottom: 28px !important; } #rh-wp .rh-share-body { background: #fff !important; padding: 30px !important; border-radius: 24px !important; border: 1px solid #e2e8f0 !important; } #rh-wp .rh-share-row { display: flex !important; justify-content: space-between !important; gap: 20px !important; padding: 14px 0 !important; border-bottom: 1px solid #f1f5f9 !important; } #rh-wp .rh-share-label { font-size: 20px !important; font-weight: 700 !important; color: #475569 !important; } #rh-wp .rh-share-value { font-size: 20px !important; font-weight: 800 !important; color: #0f172a !important; } #rh-wp .rh-share-result-wrap { margin-top: 26px !important; padding: 28px !important; border-radius: 22px !important; background: #fffbeb !important; border: 1px solid #fde68a !important; } #rh-wp .rh-share-result-wrap.safe { background: #ecfdf5 !important; border-color: #a7f3d0 !important; } #rh-wp .rh-share-result-wrap.info { background: #eff6ff !important; border-color: #bfdbfe !important; } #rh-wp .rh-share-badge { display: inline-block !important; padding: 10px 18px !important; border-radius: 999px !important; background: #f59e0b !important; color: #fff !important; font-size: 18px !important; font-weight: 800 !important; margin-bottom: 18px !important; } #rh-wp .rh-share-result-wrap.safe .rh-share-badge { background: #10b981 !important; } #rh-wp .rh-share-result-wrap.info .rh-share-badge { background: #2563eb !important; } #rh-wp .rh-share-text { font-size: 22px !important; line-height: 1.6 !important; font-weight: 600 !important; color: #334155 !important; } #rh-wp .rh-share-footer { margin-top: 24px !important; font-size: 16px !important; line-height: 1.6 !important; text-align: center !important; color: #64748b !important; } #rh-wp .choice-btn.active::before { background: #e11e48; } .gender-grid .choice-btn.active::before, .gender-grid .choice-btn.active::after{ background-color: #1d4ed8 !important; } .gender-grid .choice-btn::after{ background-color: #1d4ed8 !important; } #rh-wp .gender-grid .choice-btn:hover{ color: #fff!important } #rh-wp .download-btn::before { background: #000; } /* ------------------------------------------------- DOWNLOAD LOADER OVERLAY ------------------------------------------------- */ #rh-wp .rh-loader-overlay { display: none; position: fixed !important; inset: 0 !important; z-index: 99999 !important; background: rgba(15, 23, 42, 0.55) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; align-items: center !important; justify-content: center !important; flex-direction: column !important; gap: 18px !important; } #rh-wp .rh-loader-overlay.active { display: flex !important; } #rh-wp .rh-loader-box { background: #ffffff !important; border-radius: 24px !important; padding: 36px 44px !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 16px !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22) !important; } #rh-wp .rh-spinner { width: 48px !important; height: 48px !important; border: 4px solid #f1f5f9 !important; border-top-color: #e11d48 !important; border-radius: 50% !important; animation: rh-spin 0.75s linear infinite !important; } @keyframes rh-spin { to { transform: rotate(360deg); } } #rh-wp .rh-loader-text { font-size: 0.95rem !important; font-weight: 700 !important; color: #0f172a !important; letter-spacing: 0.01em !important; }