/* Rex Forms — front-end styles. * * These pull from Elementor's global "kit" settings (fonts & colors) via the * CSS variables Elementor prints on . Each var() has a fallback, so when * Elementor is not active the form falls back to neutral, theme-inherited styling. * * Elementor globals used: * --e-global-typography-text-font-family (Body / Text font) * --e-global-typography-primary-font-family (Headings font) * --e-global-typography-accent-font-family (Buttons / accents font) * --e-global-color-text / -primary / -accent (Global colors) */ .rexf-wrap { max-width: 720px; font-family: var( --e-global-typography-text-font-family, inherit ); font-size: var( --e-global-typography-text-font-size, inherit ); color: var( --e-global-color-text, inherit ); } .rexf-form .rexf-field { margin-bottom: 18px; } .rexf-form .rexf-label { display: block; font-weight: 600; margin-bottom: 5px; font-family: var( --e-global-typography-text-font-family, inherit ); color: var( --e-global-color-text, inherit ); } .rexf-form .rexf-required { color: #c0392b; } .rexf-form .rexf-help { font-size: .9em; opacity: .8; margin-bottom: 6px; } .rexf-form .rexf-input, .rexf-form .rexf-textarea { width: 100%; padding: 10px 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font: inherit; color: inherit; } .rexf-form .rexf-input:focus, .rexf-form .rexf-textarea:focus { outline: none; border-color: var( --e-global-color-accent, #2271b1 ); box-shadow: 0 0 0 1px var( --e-global-color-accent, #2271b1 ); } .rexf-form textarea.rexf-textarea { min-height: 120px; resize: vertical; } /* Locked / prefilled fields shown as a fixed, non-editable value */ .rexf-form .rexf-readonly-value { padding: 10px 12px; border: 1px solid #e0e0e0; border-radius: 4px; background: rgba( 0, 0, 0, .04 ); color: inherit; min-height: 1em; } .rexf-form .rexf-empty { opacity: .5; } .rexf-form .rexf-radio-group { display: flex; flex-direction: column; gap: 6px; } .rexf-form .rexf-radio { font-weight: normal; } /* Content ("tussentekst") blocks */ .rexf-content-block { background: rgba( 0, 0, 0, .03 ); border-left: 3px solid var( --e-global-color-accent, #2271b1 ); padding: 10px 14px; margin: 16px 0; font-size: .95em; } .rexf-content-block h1, .rexf-content-block h2, .rexf-content-block h3, .rexf-content-block h4 { font-family: var( --e-global-typography-primary-font-family, inherit ); color: var( --e-global-color-primary, inherit ); margin: 0 0 .3em; } /* Submit button — uses Elementor accent color / button font */ .rexf-actions { margin-top: 22px; } .rexf-submit { background: var( --e-global-color-accent, var( --e-global-color-primary, #2271b1 ) ); color: #fff; border: 0; padding: 12px 26px; border-radius: 4px; font-size: 1em; font-family: var( --e-global-typography-accent-font-family, inherit ); cursor: pointer; transition: filter .15s ease; } .rexf-submit:hover { filter: brightness( 0.92 ); } .rexf-thankyou { background: rgba( 70, 180, 80, .08 ); border: 1px solid rgba( 70, 180, 80, .4 ); border-radius: 6px; padding: 18px 22px; } /* ---- Front-end review page ([rex_form_review]) ---- */ .rexf-review { max-width: 820px; } .rexf-review-title { margin: 6px 0 18px; } .rexf-review-id { opacity: .5; font-weight: normal; } .rexf-review-back { margin: 0 0 6px; } .rexf-review-back a { text-decoration: none; } .rexf-review-section { border: 1px solid #e2e2e2; border-radius: 8px; padding: 16px 20px; margin-bottom: 18px; } .rexf-review-section > h3 { margin-top: 0; } .rexf-review-admin { border-left: 4px solid var( --e-global-color-accent, #2271b1 ); background: rgba( 0, 0, 0, .015 ); } .rexf-review-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .rexf-review-pdf { text-decoration: none; padding: 11px 22px; border: 1px solid #ccc; border-radius: 4px; color: inherit; } .rexf-review-pdf:hover { border-color: #999; } .rexf-review-saved { background: rgba( 70, 180, 80, .1 ); border: 1px solid rgba( 70, 180, 80, .4 ); border-radius: 6px; padding: 12px 16px; margin-bottom: 16px; } .rexf-review-login { border: 1px solid #e2e2e2; border-radius: 8px; padding: 22px 24px; max-width: 420px; } .rexf-review-login .login-username, .rexf-review-login .login-password { margin-bottom: 12px; } .rexf-review-login label { display: block; font-weight: 600; margin-bottom: 4px; } .rexf-review-login input[type="text"], .rexf-review-login input[type="password"] { width: 100%; padding: 10px 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font: inherit; } .rexf-review-login .login-remember { font-weight: normal; margin: 4px 0 14px; } .rexf-review-login .login-remember label { display: inline; font-weight: normal; } .rexf-review-login .button-primary, .rexf-review-login #wp-submit { background: var( --e-global-color-accent, #2271b1 ); color: #fff; border: 0; padding: 11px 24px; border-radius: 4px; font-size: 1em; cursor: pointer; } .rexf-review-lost { margin-top: 12px; font-size: .9em; } .rexf-review-msg { color: #555; } .rexf-review-table { width: 100%; border-collapse: collapse; } .rexf-review-table th, .rexf-review-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #e6e6e6; } .rexf-review-table thead th { border-bottom: 2px solid #ddd; font-size: .9em; text-transform: uppercase; letter-spacing: .03em; opacity: .7; } .rexf-state { display: inline-block; font-size: .85em; padding: 2px 10px; border-radius: 999px; } .rexf-state-done { background: rgba( 70, 180, 80, .15 ); } .rexf-state-open { background: rgba( 220, 150, 50, .18 ); }