@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"); :root { --clr-dark-blue: #051D2e;
--clr-teal: #6ec3bf;
--clr-teal-dark: #4a9a96;
--clr-teal-light: #e0f2f1;
--clr-yellow: #ffe143;
--clr-yellow-dark: #f5c500;
--clr-light-gray: #f1f5f9;
--clr-medium-gray: #e5e8eb;
--clr-white: #ffffff;
--clr-text: #333;
--clr-text-light: #555;
--clr-border: #e2e8f0;
--clr-info-bg: #edf2f7;
--clr-error-bg: #ffebee;
--clr-error-border: #f44336;
--clr-error-text: #c62828;
--clr-success-bg: #e8f5e9;
--clr-success-border: #4CAF50;
--clr-success-text: #2e7d32; --clr-glass-bg: rgba(255, 255, 255, 0.45);
--clr-glass-border: rgba(255, 255, 255, 0.25);
--backdrop-blur-value: 10px; --watermark-size: 180px;
--watermark-opacity: 0.18;
--watermark-opacity-quote: 0.18;
--watermark-opacity-input: 0.18; --primary-color: var(--clr-dark-blue);
--secondary-color: var(--clr-teal);
--accent-color: var(--clr-yellow);
--background-color: linear-gradient(145deg, var(--clr-white) 0%, #f8fafc 100%);
--card-background: var(--clr-white);
--input-bg: var(--clr-white);
--input-border: var(--clr-border); --font-family: 'Poppins', sans-serif;
--border-radius-sm: 6px;
--border-radius-md: 10px;
--border-radius-lg: 16px;
--shadow-sm: 0 3px 6px rgba(0, 0, 0, 0.05);
--shadow-md: 0 6px 12px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
--transition-speed: 0.4s;
--transition-speed-fast: 0.2s;
--transition-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
--transition-accordion-ease: ease-in-out; } #calculator * {
box-sizing: border-box;
font-family: var(--font-family);
}
#calculator {
background: var(--background-color);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
padding: 0;
max-width: 600px;
margin: 30px auto;
border: 1px solid #eef2f7;
position: relative;
overflow: hidden; }
#calculator > div { padding: 25px 30px; position: relative; } #calculator h2 { color: var(--primary-color); font-weight: 600; margin-bottom: 1.5em; text-align: center; font-size: 1.6em; padding-top: 20px; }
#calculator .section-legend { color: var(--primary-color); font-weight: 600; font-size: 1.15em; margin: 0 0 0.6em 0; padding: 0; cursor: pointer; width: 100%; display: inline-flex; align-items: center; gap: 10px; transition: color var(--transition-speed) ease; position: relative; }
#calculator p, #calculator label, #calculator span, #calculator li { color: var(--clr-text-light); font-size: 13px; line-height: 1.6; }
#calculator p { margin-bottom: 0.8em; }
#calculator strong { color: var(--clr-text); font-weight: 600; } .step-icon, .summary-icon, .item-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.step-icon svg, .summary-icon svg, .item-icon svg { width: 100%; height: 100%; } .progress-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; padding: 0; position: relative; }
.progress-step { width: 40px; height: 40px; border-radius: 50%; background-color: var(--clr-white); border: 3px solid var(--clr-medium-gray); color: var(--clr-text-light); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1em; transition: all var(--transition-speed) ease-out, transform var(--transition-speed-fast) ease; position: relative; z-index: 2; box-shadow: 0 2px 4px rgba(0,0,0,0.08); }
.progress-step span { display: block; }
.progress-line { flex-grow: 1; height: 5px; background-color: var(--clr-medium-gray); position: absolute; top: 50%; left: calc(40px / 2 + 8px); right: calc(40px / 2 + 8px); transform: translateY(-50%); z-index: 1; border-radius: 3px; overflow: hidden; transition: opacity 0.3s ease; }
.progress-line::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: linear-gradient(to right, var(--clr-teal), var(--accent-color)); border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform var(--transition-speed) ease-out; }
.progress-line.active::after { transform: scaleX(1); }
.progress-step.completed { border-color: var(--clr-teal); background-color: var(--clr-teal); color: var(--clr-white); box-shadow: 0 1px 3px rgba(110, 195, 191, 0.4); }
.progress-step.active { border-color: var(--clr-teal); background: linear-gradient(135deg, var(--clr-teal), var(--accent-color)); color: var(--primary-color); box-shadow: 0 3px 8px rgba(110, 195, 191, 0.3); transform: scale(1.1); }
.progress-step.active::after { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; border: 2px solid var(--clr-teal); border-radius: 50%; animation: pulse-ring 1.5s infinite ease-out; opacity: 0; }
@keyframes pulse-ring { 0% { transform: scale(0.9); opacity: 0.5; } 70% { transform: scale(1.3); opacity: 0; } 100% { transform: scale(1.3); opacity: 0; } } .calculator-section {
border: none; border-radius: 0; padding: 20px 0; margin-bottom: 20px;
background-color: transparent; box-shadow: none; position: relative;
transition: none;
overflow: hidden;  animation: stepFadeIn 0.6s ease-out;
}
@keyframes stepFadeIn {
from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); }
}
#inputs .calculator-section:hover { transform: none; box-shadow: none; }
.calculator-section.active-step .section-legend { color: var(--clr-teal); }
.calculator-section.active-step .section-legend .info-icon { background-color: var(--clr-teal); color: var(--clr-white); }
.calculator-section.active-step .section-legend .step-icon { color: var(--clr-teal); } .section-legend .step-icon { width: 20px; height: 20px; color: var(--clr-dark-blue); transition: color var(--transition-speed) ease; } .step-explanation {
font-size: 12px;
color: var(--clr-text-light);
margin-top: -0.5em;
margin-bottom: 1em;
padding-left: 30px; opacity: 0.95; } .info-icon { background-color: var(--clr-medium-gray); color: var(--primary-color); border-radius: 50%; width: 20px; height: 20px; font-size: 13px; font-weight: bold; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition-speed) ease; z-index: 3; animation: glow 2.5s infinite ease-in-out; box-shadow: 0 0 6px rgba(110, 195, 191, 0.5); margin-left: auto; }
.section-legend:hover .info-icon { background-color: var(--clr-yellow); color: var(--primary-color); transform: scale(1.1); animation: none; box-shadow: 0 0 12px 4px rgba(255, 225, 67, 0.6); }
@keyframes glow { 0%, 100% { box-shadow: 0 0 6px rgba(110, 195, 191, 0.5); opacity: 0.7; } 50% { box-shadow: 0 0 12px 3px rgba(110, 195, 191, 0.9); opacity: 1; } }
.info-details { margin-top: 8px; margin-bottom: 12px; position: relative; }
.info-details summary { display: none; }
.info-content { margin-top: 8px; padding: 12px 15px; font-size: 12px; border-radius: var(--border-radius-sm); background-color: var(--clr-info-bg); color: var(--clr-text-light); line-height: 1.5; border-left: 3px solid var(--clr-teal); }
.info-content ul { margin: 8px 0; padding-left: 18px; }
.info-content p:last-child { margin-bottom: 0; }
.info-details[open] { animation: slideDown 0.4s ease-out; }
@keyframes slideDown { from { max-height: 0; opacity: 0; transform: translateY(-10px); } to { max-height: 500px; opacity: 1; transform: translateY(0); } } #calculator button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(145deg, var(--primary-color), #0a3a5a); color: white; border: none; border-radius: var(--border-radius-md); padding: 9px 16px; cursor: pointer; transition: all var(--transition-speed-fast) ease, transform var(--transition-bounce) 0s; font-size: 13px; font-weight: 500; line-height: 1; text-decoration: none; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin: 4px; }
#calculator button:hover { background: linear-gradient(145deg, var(--clr-teal), var(--accent-color)); color: var(--primary-color); box-shadow: 0 4px 10px rgba(110, 195, 191, 0.25); transform: translateY(-2px) scale(1.03); }
#calculator button:active { transform: translateY(0) scale(0.97); box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); transition-duration: 0.05s; }
#calculator button:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
#calculator button.selected { background: linear-gradient(145deg, var(--clr-teal), #5cb7b3); color: var(--clr-white); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(110, 195, 191, 0.25); font-weight: 600; transform: scale(1.02); }
#calculator button.selected::before { content: '\2714'; font-weight: bold; margin-right: 5px; font-size: 0.85em; }
#calculator button.selected:hover { background: linear-gradient(145deg, #5cb7b3, var(--clr-teal)); transform: scale(1.02) translateY(0); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(110, 195, 191, 0.25); }
#calculator button.primary-action { background: linear-gradient(145deg, var(--clr-yellow), var(--clr-yellow-dark)); color: var(--primary-color); padding: 10px 20px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
#calculator button.primary-action:hover { background: linear-gradient(145deg, var(--clr-yellow-dark), var(--clr-yellow)); color: var(--primary-color); box-shadow: 0 6px 15px rgba(255, 225, 67, 0.4); transform: translateY(-3px) scale(1.04); }
#calculator button.primary-action:disabled { background: var(--clr-light-gray); color: var(--clr-text-light); cursor: not-allowed; box-shadow: none; transform: none; }
#calculator button.secondary-action { background: none; border: 1px solid var(--clr-text-light); color: var(--clr-text-light); box-shadow: none; }
#calculator button.secondary-action:hover { background: var(--clr-light-gray); border-color: var(--clr-light-gray); color: var(--primary-color); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.button-group { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; position: relative; }
.button-group button { margin: 0; flex-grow: 1; min-width: 90px; }
.navigation-buttons { margin-top: 25px; display: flex; justify-content: space-between; align-items: center; gap: 12px; position: relative; }
.navigation-buttons .previous-step, .navigation-buttons .primary-action, .navigation-buttons .secondary-action { margin: 0; } #calculator label { font-weight: 500; display: block; margin-bottom: 5px; font-size: 13px; color: var(--clr-text); }
#calculator label.terms-label { font-weight: 400; display: flex; align-items: center; font-size: 12px; margin-top: 12px; cursor: pointer; color: var(--clr-text-light); }
#calculator label.terms-label a { color: var(--clr-teal); text-decoration: none; margin-left: 4px; font-weight: 500; }
#calculator label.terms-label a:hover { text-decoration: underline; }
#calculator input[type="email"], #calculator input[type="text"] { width: 100%; padding: 8px 10px; margin-bottom: 12px; border: 1px solid var(--input-border); border-radius: var(--border-radius-sm); transition: all var(--transition-speed) ease; box-sizing: border-box; font-size: 13px; background-color: var(--input-bg); box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); }
#calculator input[type="email"]:focus, #calculator input[type="text"]:focus { border-color: var(--clr-teal); outline: none; box-shadow: 0 0 0 3px rgba(110, 195, 191, 0.25), inset 0 1px 3px rgba(0,0,0,0.06); }
#calculator input[type="checkbox"] { margin-right: 8px; width: 16px; height: 16px; accent-color: var(--clr-teal); cursor: pointer; flex-shrink: 0; } .consumption-input-stepper { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 15px auto; background-color: rgba(248, 249, 250, 0.8); padding: 10px 12px; border-radius: var(--border-radius-md); border: 1px solid var(--clr-glass-border); box-shadow: var(--shadow-sm); width: fit-content; position: relative; }
#consumptionDisplay { font-size: 1.8em; font-weight: 600; color: var(--primary-color); min-width: 80px; text-align: center; border: none; background: transparent; padding: 4px 0; border-radius: var(--border-radius-sm); transition: box-shadow var(--transition-speed) ease; outline: none; line-height: 1.1; cursor: text; }
#consumptionDisplay[contenteditable="true"]:focus-visible { box-shadow: 0 0 0 3px rgba(110, 195, 191, 0.3); background-color: var(--clr-white); }
#consumptionDecrement, #consumptionIncrement { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(145deg, rgba(241, 245, 249, 0.7), rgba(240, 244, 248, 0.9)); border: 1px solid var(--clr-glass-border); color: var(--primary-color); font-size: 1.4em; font-weight: 300; line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,0.08); cursor: pointer; transition: all 0.15s ease; margin: 0; flex-shrink: 0; }
#consumptionDecrement:hover, #consumptionIncrement:hover { border-color: var(--clr-teal); color: var(--clr-teal); background: linear-gradient(145deg, rgba(224, 242, 241, 0.8), rgba(200, 230, 228, 0.9)); box-shadow: 0 3px 6px rgba(0,0,0,0.1); transform: translateY(-1px); }
#consumptionDecrement:active, #consumptionIncrement:active { background: linear-gradient(145deg, rgba(220, 225, 229, 0.8), rgba(232, 237, 241, 0.9)); box-shadow: inset 0 1px 3px rgba(0,0,0,0.15); transform: translateY(0); }
.unit { font-size: 0.9em; font-weight: 400; color: var(--clr-text-light); margin-left: 6px; line-height: 1; align-self: center; padding-bottom: 4px; }  #results { position: relative; background: linear-gradient(135deg, #e0f2f1 0%, #f8fafc 60%, #fffbeb 100%); padding-top: 1px; padding-bottom: 1px; }
#results::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.05; z-index: 0; } #results .result-accordion-item {
background-color: var(--clr-glass-bg);
backdrop-filter: blur(var(--backdrop-blur-value));
-webkit-backdrop-filter: blur(var(--backdrop-blur-value));
border: 1px solid var(--clr-glass-border);
border-radius: var(--border-radius-md);
margin: 0 0 20px 0;
box-shadow: var(--shadow-md);
overflow: hidden; transition: box-shadow var(--transition-speed) ease, background-color var(--transition-speed) ease;
position: relative; }
#results .result-accordion-item:last-child { margin-bottom: 0; }
#results .result-accordion-item:hover { box-shadow: var(--shadow-lg); background-color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.3); } #results .result-accordion-item[open] {
box-shadow: 0 0 25px rgba(110, 195, 191, 0.3), var(--shadow-md);
background-color: rgba(255, 255, 255, 0.55);
} #results .result-accordion-item summary {
display: flex; align-items: center; gap: 12px;
padding: 18px 25px; cursor: pointer;
font-weight: 600; font-size: 1.15em;
color: var(--clr-dark-blue); background: transparent;
transition: color var(--transition-speed) ease;
list-style: none; position: relative; width: 100%;
box-sizing: border-box; border-bottom: 1px solid transparent;
z-index: 1; }
#results .result-accordion-item summary::-webkit-details-marker { display: none; }
#results .result-accordion-item summary::before { display: none; } #results .result-accordion-item summary .summary-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; color: var(--clr-teal-dark); transition: color var(--transition-speed) ease; }
#results .contact-section summary .summary-icon { width: 24px; height: 24px; } #results .result-accordion-item summary::after { content: ''; flex-shrink: 0; width: 20px; height: 20px; margin-left: auto; background-color: var(--clr-teal-dark); mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"%3E%3Cpath fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/%3E%3C/svg%3E'); mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"%3E%3Cpath fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/%3E%3C/svg%3E'); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; transition: transform var(--transition-speed) var(--transition-accordion-ease), background-color var(--transition-speed) ease; transform: rotate(0deg); } #results .result-accordion-item[open] > summary { color: var(--clr-teal-dark); border-bottom-color: var(--clr-glass-border); }
#results .result-accordion-item[open] > summary .summary-icon { color: var(--clr-dark-blue); }
#results .result-accordion-item[open] > summary::after { transform: rotate(-180deg); background-color: var(--clr-dark-blue); } #results .result-accordion-item .details-content {
padding: 10px 25px 25px 25px;
border-top: none;
background-color: transparent;
color: var(--clr-text);
position: relative;
z-index: 1;  overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.5s var(--transition-accordion-ease),
opacity 0.3s ease-in-out; }
#results .result-accordion-item[open] .details-content {
max-height: 1000px; opacity: 1;
transition: max-height 0.6s var(--transition-accordion-ease), opacity 0.4s ease-in-out 0.1s; } #results .details-content .input-item,
#results .details-content .advice-item { padding: 12px 0; gap: 10px; border-bottom: 1px solid rgba(110, 195, 191, 0.2); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; transition: none; }
#results .details-content .input-item:hover,
#results .details-content .advice-item:hover { background-color: transparent; }
#results .details-content .input-item:last-child,
#results .details-content .advice-item:last-child { border-bottom: none; } #results .details-content .item-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; color: var(--clr-text-light); margin-right: 6px; opacity: 0.8; }
#results .details-content strong { color: var(--clr-text-light); font-weight: 500; font-size: 0.9em; flex-shrink: 0; margin-right: 10px; display: inline-flex; align-items: center; } #results .details-content span[id^="result"],
#results .details-content span#pvKwP,
#results .details-content span#recommendedBatteryCapacity { font-weight: 700; color: var(--clr-dark-blue); font-size: 1.1em; text-align: right; flex-grow: 1; background-color: rgba(110, 195, 191, 0.25); padding: 6px 14px; border-radius: 20px; display: inline-block; box-shadow: none; min-width: 70px; border: 1px solid rgba(110, 195, 191, 0.3); margin-left: auto; transition: background-color var(--transition-speed) ease, transform var(--transition-speed-fast) ease; }
#results .details-content span[id^="result"]:hover,
#results .details-content span#pvKwP:hover,
#results .details-content span#recommendedBatteryCapacity:hover { background-color: rgba(110, 195, 191, 0.4); transform: scale(1.03); } #results .contact-section { border-color: rgba(255, 225, 67, 0.5); background-color: rgba(255, 255, 255, 0.5); }
#results .contact-section summary { background: linear-gradient(145deg, var(--clr-yellow), var(--clr-yellow-dark)); color: var(--primary-color); border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; padding-top: 20px; padding-bottom: 20px; font-size: 1.2em; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: none; }
#results .contact-section summary:hover { background: linear-gradient(145deg, var(--clr-yellow-dark), var(--clr-yellow)); }
#results .contact-section summary .summary-icon { color: var(--primary-color); width: 24px; height: 24px; }
#results .contact-section summary::after { background-color: var(--primary-color); }
#results .contact-section[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 1px solid rgba(255, 225, 67, 0.3); }
#results .contact-section[open] > summary .summary-icon { color: var(--primary-color); }
#results .contact-section[open] > summary::after { background-color: var(--primary-color); }
#results .contact-section .details-content { background-color: rgba(255, 250, 235, 0.5); border-top: none; }
#results .contact-section .details-content p { margin-bottom: 1.5em; font-size: 13px; color: var(--clr-text); }
#results .contact-section form div { margin-bottom: 15px; position: relative; z-index: 1; }
#results .contact-section form div:last-of-type { margin-bottom: 0; }
#results .contact-section .navigation-buttons { margin-top: 25px; padding-top: 15px; border-top: 1px solid rgba(255, 225, 67, 0.3); justify-content: flex-end; }
#results .contact-section .navigation-buttons button { width: auto; flex-grow: 0; }
#results .contact-section .navigation-buttons .secondary-action { order: 1; }
#results .contact-section .navigation-buttons .primary-action { order: 2; }  .calculator-section::before,
#results .result-accordion-item::before {
content: '';
position: absolute;
top: -2%;
right: -5%;
width: var(--watermark-size);
height: var(--watermark-size);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: var(--watermark-opacity);
z-index: 0; pointer-events: none; transform: rotate(-15deg) translate(5%, -2%); filter: grayscale(50%);
transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease, right 0.3s ease, top 0.3s ease; }  .calculator-section[data-step="1"]::before {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23cccccc" class="bi bi-plug-fill" viewBox="0 0 16 16"%3E%3Cpath d="M6 0a.5.5 0 0 1 .5.5V3h3V.5a.5.5 0 0 1 1 0V3h1a.5.5 0 0 1 .5.5v3A3.5 3.5 0 0 1 8.5 10V13h-1v-3A3.5 3.5 0 0 1 4 6.5v-3A.5.5 0 0 1 4.5 3h1V.5A.5.5 0 0 1 6 0z"/%3E%3C/svg%3E');
opacity: var(--watermark-opacity-input);
}
.calculator-section[data-step="2"]::before {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23cccccc" class="bi bi-person-check-fill" viewBox="0 0 16 16"%3E%3Cpath fill-rule="evenodd" d="M15.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L12.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z"/%3E%3Cpath d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zM11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/%3E%3C/svg%3E');
opacity: var(--watermark-opacity-input);
}
.calculator-section[data-step="3"]::before {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23cccccc" class="bi bi-speedometer2" viewBox="0 0 16 16"%3E%3Cpath d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"/%3E%3Cpath fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.26C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.922C2.328 14.26 1.258 14.01 1 13.5c-.257-.512-1-1.441-1-3.5zm8 1a6.97 6.97 0 0 0 6-2.435V10a6.97 6.97 0 0 0-6 2.435A6.97 6.97 0 0 0 2 10v.565A6.97 6.97 0 0 0 8 11z"/%3E%3C/svg%3E');
opacity: var(--watermark-opacity-input);
} #results .result-accordion-item:nth-of-type(1)::before { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%234a9a96" class="bi bi-sliders" viewBox="0 0 16 16"%3E%3Cpath fill-rule="evenodd" d="M11.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3h9.05zM4.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8h2.05zm9.45 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1h9.05z"/%3E%3C/svg%3E');
}
#results .result-accordion-item:nth-of-type(2)::before { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%234a9a96" class="bi bi-lightning-charge-fill" viewBox="0 0 16 16"%3E%3Cpath d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.032z"/%3E%3C/svg%3E');
}
#results .contact-section::before { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23f5c500" class="bi bi-tag-fill" viewBox="0 0 16 16"%3E%3Cpath d="M2 1a1 1 0 0 0-1 1v4.586a1 1 0 0 0 .293.707l7 7a1 1 0 0 0 1.414 0l4.586-4.586a1 1 0 0 0 0-1.414l-7-7A1 1 0 0 0 6.586 1H2zm4 3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/%3E%3C/svg%3E');
opacity: var(--watermark-opacity-quote);
top: -2%;
right: -8%;
}  #inputs {
background-color: transparent;
border-bottom: 1px solid var(--clr-border);
transition: opacity 0.4s ease-in-out, max-height 0.4s ease-in-out, transform 0.4s ease-in-out, visibility 0s linear 0s, margin 0.4s ease-in-out, padding 0.4s ease-in-out, border-width 0.4s ease-in-out;
overflow: visible; max-height: 2000px; opacity: 1; transform: translateY(0); visibility: visible; position: relative; margin-top: 0; padding: 25px 30px;
}
#results { transition: opacity 0.4s ease-in-out, visibility 0s linear 0s; opacity: 1; visibility: visible; padding: 25px 30px; }
#inputs.hidden, #results.hidden { max-height: 0; opacity: 0; padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; border-width: 0 !important; transform: translateY(-15px); visibility: hidden; pointer-events: none; transition: opacity 0.4s ease-in-out, max-height 0.4s ease-in-out, transform 0.4s ease-in-out, visibility 0s linear 0.4s, margin 0.4s ease-in-out, padding 0.4s ease-in-out, border-width 0.4s ease-in-out; } #ajaxMessageArea { padding: 12px; margin-top: 15px; border-radius: var(--border-radius-sm); text-align: center; display: none; border: 1px solid transparent; font-size: 13px; background-color: rgba(255,255,255,0.7); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); position: relative; z-index: 1; }
.ajax-success { border-color: var(--clr-success-border); background-color: rgba(232, 245, 233, 0.8); color: var(--clr-success-text); }
.ajax-error { border-color: var(--clr-error-border); background-color: rgba(255, 235, 238, 0.8); color: var(--clr-error-text); }
.ajax-loading { border-color: var(--clr-border); background-color: rgba(237, 242, 247, 0.8); color: var(--clr-text-light); }
.spinner { display: inline-block; width: 0.9em; height: 0.9em; border: 2px solid rgba(0,0,0,0.1); border-left-color: currentColor; border-radius: 50%; animation: spin 1s linear infinite; margin-right: 6px; vertical-align: -0.1em; }
@keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 768px) { :root {
--watermark-size: 140px; }
#calculator {
margin: 20px auto; }
#calculator > div {
padding: 20px 20px; }
#calculator h2 {
font-size: 1.4em; padding-top: 15px;
margin-bottom: 1.2em;
}
.progress-bar {
margin-bottom: 25px;
}
.progress-step {
width: 36px; height: 36px; font-size: 0.9em; }
.progress-line {
left: calc(36px / 2 + 8px); right: calc(36px / 2 + 8px); height: 4px; }
.calculator-section {
padding: 15px 0; margin-bottom: 15px; }
.section-legend {
font-size: 1.1em; gap: 8px;
}
.section-legend .step-icon {
width: 18px; height: 18px;
}
.step-explanation {
padding-left: 26px; font-size: 11px; margin-bottom: 0.8em;
}
.info-icon {
width: 18px; height: 18px; font-size: 12px; }
.button-group {
flex-direction: column; gap: 6px; }
.button-group button {
width: 100%; margin: 0; padding: 10px 12px; }
.consumption-input-stepper {
gap: 8px; padding: 8px 10px;
}
#consumptionDisplay {
font-size: 1.6em; min-width: 70px;
}
#consumptionDecrement, #consumptionIncrement {
width: 34px; height: 34px; font-size: 1.3em;
}
.navigation-buttons {
flex-direction: column-reverse; gap: 10px; margin-top: 20px;
}
.navigation-buttons button {
width: 100%; margin: 0 !important; padding: 10px 15px; }
#calculator button.primary-action {
padding: 11px 15px; } #results .result-accordion-item {
margin-bottom: 18px; }
#results .result-accordion-item summary {
font-size: 1.1em; padding: 15px 20px; gap: 10px;
}
#results .contact-section summary {
font-size: 1.15em; padding: 18px 20px;
}
#results .result-accordion-item summary .summary-icon {
width: 20px; height: 20px;
}
#results .contact-section summary .summary-icon {
width: 22px; height: 22px;
}
#results .result-accordion-item summary::after {
width: 18px; height: 18px;
}
.calculator-section::before, #results .result-accordion-item::before {
right: -8%; top: -4%; opacity: calc(var(--watermark-opacity) * 0.9); }
#results .details-content .input-item,
#results .details-content .advice-item {
flex-direction: row; align-items: center; gap: 8px; padding: 10px 0;
}
#results .details-content .item-icon {
margin-right: 4px; width: 18px; height: 18px; opacity: 0.8;
}
#results .details-content strong {
font-size: 0.9em; margin-right: 5px; flex-basis: 50%; flex-shrink: 1; }
#results .details-content span[id^="result"],
#results .details-content span#pvKwP,
#results .details-content span#recommendedBatteryCapacity {
text-align: right; margin-top: 0; font-size: 1em; padding: 5px 12px; min-width: 60px; margin-left: auto; flex-basis: auto; flex-shrink: 0; }
#results .result-accordion-item .details-content {
padding: 10px 20px 20px 20px; }
#results .contact-section .details-content p {
font-size: 12px; margin-bottom: 1.2em;
}
#results .contact-section form div { margin-bottom: 12px; }
#results .contact-section .navigation-buttons { justify-content: center; margin-top: 20px; padding-top: 12px;}
#calculator label.terms-label { font-size: 11px; }
}
@media (max-width: 480px) { :root {
--watermark-size: 80px; --border-radius-md: 8px; --border-radius-lg: 12px;
}
#calculator {
margin: 15px auto; border-radius: var(--border-radius-lg);
}
#calculator > div {
padding: 15px 15px; }
#calculator h2 {
font-size: 1.25em; margin-bottom: 1.1em;
}
.progress-bar {
margin-bottom: 20px;
}
.progress-step {
width: 32px; height: 32px; font-size: 0.8em; border-width: 2px;
}
.progress-line { opacity: 0;
pointer-events: none;
}
.calculator-section {
padding: 10px 0; margin-bottom: 8px; }
.section-legend {
font-size: 1.0em; gap: 6px;
margin-bottom: 0.4em; }
.section-legend .step-icon {
width: 16px; height: 16px;
}
.step-explanation {
padding-left: 22px; font-size: 10px; margin-bottom: 0.8em; line-height: 1.5; opacity: 0.9; }
.info-icon {
width: 16px; height: 16px; font-size: 11px;
}
.info-content { padding: 8px 10px; font-size: 11px; } #results .result-accordion-item {
margin-bottom: 12px; border-radius: var(--border-radius-md);
}
#results .result-accordion-item summary {
font-size: 1.0em; padding: 10px 15px; gap: 8px;
}
#results .contact-section summary {
font-size: 1.05em; padding: 12px 15px; }
#results .result-accordion-item summary .summary-icon {
width: 18px; height: 18px;
}
#results .contact-section summary .summary-icon {
width: 20px; height: 20px;
}
#results .result-accordion-item summary::after {
width: 16px; height: 16px;
}
.calculator-section::before, #results .result-accordion-item::before {
width: var(--watermark-size); height: var(--watermark-size); right: -12%; top: -6%; opacity: calc(var(--watermark-opacity) * 0.7); }
#results .contact-section::before { right: -15%; } #calculator button {
padding: 8px 10px; font-size: 12px; border-radius: var(--border-radius-md); gap: 5px;
}
#calculator button.primary-action {
padding: 9px 12px; }
#calculator button.secondary-action {
padding: 8px 12px; }
.navigation-buttons {
gap: 8px; margin-top: 18px; }
.consumption-input-stepper {
padding: 5px 8px; gap: 5px; }
#consumptionDisplay {
font-size: 1.4em; min-width: 55px; }
#consumptionDecrement, #consumptionIncrement {
width: 30px; height: 30px; font-size: 1.1em; }
.unit { font-size: 0.8em; } #results .result-accordion-item .details-content {
padding: 6px 15px 12px 15px; }
#results .details-content .input-item,
#results .details-content .advice-item { padding: 6px 0; gap: 5px; } #results .details-content span[id^="result"],
#results .details-content span#pvKwP,
#results .details-content span#recommendedBatteryCapacity {
font-size: 0.9em; padding: 4px 10px; min-width: 45px; }
#results .details-content .item-icon {
width: 15px; height: 15px; opacity: 0.8; margin-right: 2px; }
#results .details-content strong {
font-size: 0.8em; }
#calculator input[type="email"], #calculator input[type="text"] { padding: 6px 8px; font-size: 12px; margin-bottom: 10px; } #calculator label { font-size: 12px; margin-bottom: 3px; }
#results .contact-section .details-content p { font-size: 11px; margin-bottom: 1em; }
#results .contact-section form div { margin-bottom: 10px; }
#calculator label.terms-label { font-size: 10px; margin-top: 8px; }
#calculator input[type="checkbox"] { width: 14px; height: 14px; margin-right: 5px;}
}.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
}
.wpcf7 .hidden-fields-container {
display: none;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}