/** * Kalagan Cost Calculators — front-end styles. * Deliberately uses CSS custom properties defined by the active theme * (--kod-*) with safe fallbacks, so this plugin looks correct on the * Kalagan theme without hard-coding a duplicate palette, and degrades * gracefully if the theme changes. */ .kcc-calculator { max-width: 640px; padding: 28px; border: 1px solid #E4E1D8; border-radius: var(--kod-r-lg, 6px); background: #FFFFFF; font-family: var(--kod-font-sans, sans-serif); color: #2A2921; box-shadow: 0 8px 28px rgba(0,0,0,.22); } .kcc-calculator__wording { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: #000000; } .kcc-calculator__note { margin: 0 0 20px; font-size: 13px; font-style: italic; color: #3A3730; } .kcc-calculator__inputs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; } .kcc-calculator__inputs label { font-size: 12px; font-weight: 700; color: #000000; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 10px; } .kcc-calculator__inputs label.kcc-checkbox { display: flex; align-items: center; gap: 8px; font-weight: 400; margin-top: 6px; text-transform: none; letter-spacing: normal; color: #000000; } .kcc-calculator__inputs input[type="number"], .kcc-calculator__inputs input[type="text"], .kcc-calculator__inputs input[type="email"], .kcc-calculator__inputs input[type="tel"], .kcc-calculator__inputs select { padding: 14px 16px; /* Client preference: dark input fields with white text as a deliberate contrast panel against the white calculator card, not a leftover. */ background: #2A2921; border: 1px solid #2A2921; border-radius: var(--kod-r-sm, 2px); color: #FFFFFF; font-family: inherit; font-size: 14px; transition: border-color 150ms; } .kcc-calculator__inputs select option { background: #2A2921; color: #FFFFFF; } .kcc-calculator__inputs input[type="number"]:focus, .kcc-calculator__inputs input[type="text"]:focus, .kcc-calculator__inputs input[type="email"]:focus, .kcc-calculator__inputs input[type="tel"]:focus, .kcc-calculator__inputs select:focus { outline: 2px solid rgba(183,141,74,.6); outline-offset: 2px; border-color: var(--kod-star, #B78D4A); } .kcc-calculator__inputs input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--kod-btn-primary, #43422B); } .kcc-addons { border: 1px solid #D8D4C8; border-radius: var(--kod-r-md, 4px); padding: 12px 14px; margin-top: 16px; } .kcc-addons legend { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: #000000; font-weight: 700; padding: 0 4px; } .kcc-calculator__calc-btn { width: 100%; justify-content: center; /* !important is required here: this button also carries the theme's own .kod-btn.kod-btn--secondary classes (transparent bg, cream text, for the dark page background sitewide). That theme rule has the same specificity as this one, and wp-admin loads the theme's style.css AFTER this plugin's calculator.css in -- so without !important the theme's rule silently wins the cascade and this override is a no-op, even though it's technically "correct" and present in the DOM. Confirmed via devtools: computed style fell back to transparent/cream despite this rule existing, until !important was added. */ background: #2A2921 !important; border-color: #2A2921 !important; color: #FFFFFF !important; } .kcc-calculator__calc-btn:hover { background: #43422B !important; border-color: #43422B !important; color: #FFFFFF !important; } .kcc-calculator__success { max-width: 640px; margin: 0 0 20px; padding: 16px 20px; border: 1px solid #7A9058; border-radius: var(--kod-r-md, 4px); background: #EEF3E7; color: #3E4A2E; font-family: var(--kod-font-sans, sans-serif); font-size: 15px; line-height: 1.5; } .kcc-calculator__success strong { color: #2F3A22; } .kcc-calculator__result { margin-top: 24px; padding-top: 20px; border-top: 1px solid #D8D4C8; } .kcc-calculator__range { font-family: var(--kod-font-serif, serif); font-size: 28px; color: #000000; margin-bottom: 10px; } .kcc-calculator__disclaimer { font-size: 12px; line-height: 1.6; color: #3A3730; margin-bottom: 20px; } .kcc-calculator__lead-form { display: flex; flex-direction: column; gap: 6px; } .kcc-calculator__lead-form label { font-size: 12px; font-weight: 700; color: #000000; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 8px; } .kcc-calculator__lead-form input { padding: 14px 16px; /* Matches the calculator inputs above: dark field, white text. */ background: #2A2921; border: 1px solid #2A2921; border-radius: var(--kod-r-sm, 2px); color: #FFFFFF; font-family: inherit; font-size: 14px; transition: border-color 150ms; } .kcc-calculator__lead-form input::placeholder { color: #A8A498; } .kcc-calculator__lead-form input:focus { outline: 2px solid rgba(183,141,74,.6); outline-offset: 2px; border-color: var(--kod-star, #B78D4A); } .kcc-calculator__lead-form input.kcc-error, .kcc-calculator__inputs input.kcc-error { border-color: var(--kod-danger, #C0503A); } .kcc-calculator__field-error { display: block; color: var(--kod-danger, #C0503A); font-size: 12px; margin-top: -2px; } .kcc-calculator__lead-form button { margin-top: 16px; }