.efc-calculator-card {
--efc-bg: #ffffff;
--efc-bg-secondary: #f5f5f5;
--efc-bg-results: #f0faf5;
--efc-text-primary: #1a1a1a;
--efc-text-body: #333333;
--efc-text-muted: #666666;
--efc-text-light: #555555;
--efc-text-placeholder: #aaaaaa;
--efc-border: #dddddd;
--efc-border-light: #eeeeee;
--efc-border-results: #d4edda;
--efc-primary: #27AE7E;
--efc-primary-hover: #229e71;
--efc-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
--efc-focus-shadow: 0 0 0 3px rgba(39, 174, 126, 0.1);
--efc-logo-text: #1a1a1a;
--efc-logo-icon: #27AE7E;
} @media (prefers-color-scheme: dark) {
.efc-calculator-card {
--efc-bg: #1e1e1e;
--efc-bg-secondary: #2d2d2d;
--efc-bg-results: #1a2e24;
--efc-text-primary: #f0f0f0;
--efc-text-body: #e0e0e0;
--efc-text-muted: #a0a0a0;
--efc-text-light: #b0b0b0;
--efc-text-placeholder: #707070;
--efc-border: #404040;
--efc-border-light: #353535;
--efc-border-results: #2d5a40;
--efc-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
--efc-focus-shadow: 0 0 0 3px rgba(39, 174, 126, 0.25);
--efc-logo-text: #f0f0f0;
--efc-logo-icon: #27AE7E;
}
} body.dark-mode .efc-calculator-card,
body.night-mode .efc-calculator-card,
body.darkmode .efc-calculator-card,
body.dark .efc-calculator-card,
body[data-theme="dark"] .efc-calculator-card,
html.dark .efc-calculator-card,
html.dark-mode .efc-calculator-card,
.wp-dark-mode-active .efc-calculator-card,
.flavor-dark .efc-calculator-card {
--efc-bg: #1e1e1e;
--efc-bg-secondary: #2d2d2d;
--efc-bg-results: #1a2e24;
--efc-text-primary: #f0f0f0;
--efc-text-body: #e0e0e0;
--efc-text-muted: #a0a0a0;
--efc-text-light: #b0b0b0;
--efc-text-placeholder: #707070;
--efc-border: #404040;
--efc-border-light: #353535;
--efc-border-results: #2d5a40;
--efc-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
--efc-focus-shadow: 0 0 0 3px rgba(39, 174, 126, 0.25);
--efc-logo-text: #f0f0f0;
--efc-logo-icon: #27AE7E;
} .efc-calculator-card {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: var(--efc-bg);
border-radius: 16px;
box-shadow: var(--efc-shadow);
max-width: 520px;
width: 100%;
padding: 48px 56px;
margin: 0 auto;
box-sizing: border-box;
color: var(--efc-text-body);
line-height: 1.6;
}
.efc-calculator-card *,
.efc-calculator-card *::before,
.efc-calculator-card *::after {
box-sizing: border-box;
} .efc-logo {
display: flex;
justify-content: center;
margin-bottom: 24px;
}
.efc-logo svg {
height: 40px;
width: auto;
}
.efc-logo-text {
fill: var(--efc-logo-text);
}
.efc-logo-icon {
fill: var(--efc-logo-icon);
} .efc-title {
font-size: 24px;
font-weight: 700;
text-align: center;
margin: 0 0 32px 0;
color: var(--efc-text-primary);
} .efc-form {
margin: 0;
padding: 0;
}
.efc-form-group {
margin-bottom: 20px;
}
.efc-form-group label {
display: block;
font-size: 18px;
font-weight: 600;
margin-bottom: 12px;
color: var(--efc-text-body);
} .efc-input,
.efc-select {
width: 100%;
padding: 16px 20px;
font-family: inherit;
font-size: 16px;
border: 1px solid var(--efc-border);
border-radius: 12px;
background: var(--efc-bg);
color: var(--efc-text-body);
transition: border-color 0.2s, box-shadow 0.2s;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.efc-select {
padding-right: 48px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
cursor: pointer;
} @media (prefers-color-scheme: dark) {
.efc-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
}
body.dark-mode .efc-select,
body.night-mode .efc-select,
body.darkmode .efc-select,
body.dark .efc-select,
body[data-theme="dark"] .efc-select,
html.dark .efc-select,
html.dark-mode .efc-select,
.wp-dark-mode-active .efc-select,
.flavor-dark .efc-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
.efc-input::-webkit-outer-spin-button,
.efc-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.efc-input[type="number"] {
-moz-appearance: textfield;
}
.efc-input::placeholder {
color: var(--efc-text-placeholder);
}
.efc-input:focus,
.efc-select:focus {
outline: none;
border-color: var(--efc-primary);
box-shadow: var(--efc-focus-shadow);
} .efc-button {
width: 100%;
padding: 18px;
font-family: inherit;
font-size: 18px;
font-weight: 600;
background-color: var(--efc-primary);
color: #ffffff;
border: none;
border-radius: 12px;
cursor: pointer;
transition: background-color 0.2s;
margin-top: 8px;
}
.efc-button:hover {
background-color: var(--efc-primary-hover);
}
.efc-button:focus {
outline: none;
box-shadow: var(--efc-focus-shadow);
} .efc-results {
display: none;
background-color: var(--efc-bg-results);
border-radius: 12px;
padding: 24px;
margin-top: 24px;
text-align: center;
}
.efc-results.efc-show {
display: block;
}
.efc-results-title {
font-size: 14px;
color: var(--efc-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.efc-results-value {
font-size: 42px;
font-weight: 700;
color: var(--efc-primary);
}
.efc-results-unit {
font-size: 18px;
color: var(--efc-primary);
}
.efc-results-breakdown {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--efc-border-results);
text-align: left;
}
.efc-breakdown-item {
display: flex;
justify-content: space-between;
padding: 8px 0;
font-size: 15px;
}
.efc-breakdown-label {
color: var(--efc-text-muted);
}
.efc-breakdown-value {
font-weight: 600;
color: var(--efc-text-body);
} .efc-faq-section {
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid var(--efc-border-light);
}
.efc-faq-title {
font-size: 20px;
font-weight: 700;
margin: 0 0 20px 0;
color: var(--efc-text-primary);
}
.efc-faq-item {
border-bottom: 1px solid var(--efc-border-light);
}
.efc-faq-question {
width: 100%;
padding: 16px 0;
font-family: inherit;
font-size: 15px;
font-weight: 600;
text-align: left;
background: none;
border: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--efc-text-body);
transition: color 0.2s;
}
.efc-faq-question:hover {
color: var(--efc-primary);
}
.efc-faq-question:focus {
outline: none;
color: var(--efc-primary);
}
.efc-faq-icon {
font-size: 20px;
color: var(--efc-primary);
transition: transform 0.3s;
flex-shrink: 0;
margin-left: 16px;
}
.efc-faq-item.efc-active .efc-faq-icon {
transform: rotate(45deg);
}
.efc-faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.efc-faq-answer-content {
padding: 0 0 16px 0;
font-size: 15px;
color: var(--efc-text-light);
line-height: 1.7;
}
.efc-faq-item.efc-active .efc-faq-answer {
max-height: 300px;
} @media (max-width: 600px) {
.efc-calculator-card {
padding: 32px 24px;
}
.efc-title {
font-size: 20px;
}
.efc-form-group label {
font-size: 16px;
}
.efc-results-value {
font-size: 36px;
}
}