/* Custom Token Mapping from GenerateBlocks Style Profile */
:root {
    --calc-contrast: #16293A;
    --calc-contrast-2: #0D1A22;
    --calc-contrast-3: #B23A2E;
    --calc-base: #EFF2EE;
    --calc-base-2: #E3E7E1;
    --calc-base-3: #1E2622;
    --calc-accent: #E8A33D;
    --calc-ink: #F4FAF9;
    --calc-secondary-text: #5B655F;
    --calc-line: rgba(30,38,34,0.16);
    --calc-line-dark: rgba(30,38,34,0.3);
    --calc-font-heading: 'Space Grotesk', sans-serif;
    --calc-font-body: 'IBM Plex Sans', sans-serif;
}

/* Framework Layout Settings */
.elec-calc-container {
    display: flex;
    flex-direction: row;
    gap: 30px;
    align-items: flex-start;
    font-family: var(--calc-font-body);
    color: var(--calc-contrast-2);
    width: 100%;
    box-sizing: border-box;
}

.elec-calc-main {
    flex: 2.4;
    background: var(--calc-base);
    padding: 35px;
    border-radius: 12px;
    border: 1px solid var(--calc-line);
    box-sizing: border-box;
}

.elec-calc-main h1, .elec-calc-main h2, .elec-calc-main h3, .elec-calc-main h4 {
    font-family: var(--calc-font-heading);
    color: var(--calc-contrast);
    margin-top: 0;
}

.elec-calc-main h1 { font-size: 2rem; font-weight: 700; margin-bottom: 12px; }
.elec-calc-main h2 { font-size: 1.4rem; font-weight: 600; margin-top: 25px; border-bottom: 2px solid var(--calc-line); padding-bottom: 6px; }

/* Sticky Right Column Navigation Panel */
.elec-calc-sidebar {
    flex: 1;
    background: #ffffff;
    border: 1px solid var(--calc-line-dark);
    border-radius: 8px;
    box-sizing: border-box;
    position: sticky;
    top: 70px;
    max-height: 80vh;
    overflow-y: auto;
}

.elec-calc-sidebar h3 {
    background: var(--calc-contrast);
    color: var(--calc-ink);
    margin: 0;
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--calc-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.elec-calc-sidebar ul { list-style: none; padding: 0; margin: 0; }
.elec-calc-sidebar ul li { border-bottom: 1px solid var(--calc-line); }

.elec-calc-sidebar ul li a {
    display: block;
    padding: 10px 16px;
    color: var(--calc-contrast);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}

.elec-calc-sidebar ul li a:hover,
.elec-calc-sidebar ul li a.active-calc {
    background-color: var(--calc-base-2);
    color: var(--calc-contrast-3);
    font-weight: 700;
}

/* Global Form & Input Controls Framework Styling */
.elec-calc-main .form-control, .elec-calc-main select, .elec-calc-main input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    font-size: 15px;
    border: 1px solid var(--calc-line-dark);
    border-radius: 6px;
    background-color: #ffffff;
    box-sizing: border-box;
}

.elec-calc-main .form-group { margin-bottom: 18px; }
.elec-calc-main label { display: block; font-weight: 600; margin-bottom: 6px; font-family: var(--calc-font-heading); }
.elec-calc-main p.math { background: #ffffff; padding: 12px; border-left: 4px solid var(--calc-accent); font-family: monospace; font-size: 15px; }

.elec-calc-main .btn { padding: 10px 18px; font-weight: 700; border: none; border-radius: 6px; cursor: pointer; font-family: var(--calc-font-heading); }
.elec-calc-main .btn-success { background: var(--calc-contrast); color: var(--calc-ink); }
.elec-calc-main .btn-secondary { background: var(--calc-base-2); color: var(--calc-base-3); margin-left: 6px; }

.elec-calc-main table.dtable, .elec-calc-main table.calc2 { width: 100%; border-collapse: collapse; margin-top: 15px; background: #ffffff; }
.elec-calc-main table th, .elec-calc-main table td { border: 1px solid var(--calc-line); padding: 8px 12px; text-align: left; font-size: 14px; }
.elec-calc-main table th { background: var(--calc-base-2); font-weight: 700; }

@media (max-width: 992px) {
    .elec-calc-container { flex-direction: column; }
    .elec-calc-sidebar { width: 100%; position: static; max-height: none; order: 2; margin-top: 25px; }
    .elec-calc-main { width: 100%; }
}

/* ---------- Calculate button wiring: result panel, error box, ---------- */
/* ---------- conditional field rows (added — plugin fix)       ---------- */

.elec-calc-main .form-row-inline {
    display: flex;
    gap: 10px;
}

.elec-calc-main .form-row-inline .form-control {
    width: auto;
    flex: 1;
}

.elec-calc-main [data-conditional] {
    display: none;
}

.elec-calc-main [data-conditional].is-visible {
    display: block;
}

.elec-error {
    background: rgba(178, 58, 46, 0.08);
    border: 1px solid var(--calc-contrast-3);
    color: var(--calc-contrast-3);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 14px;
    margin-top: 14px;
}

.elec-error[hidden] {
    display: none;
}

.elec-result {
    margin-top: 18px;
    background: #ffffff;
    border: 2px solid var(--calc-accent);
    border-radius: 8px;
    overflow: hidden;
}

.elec-result[hidden] {
    display: none;
}

.elec-result-title {
    background: var(--calc-contrast);
    color: var(--calc-ink);
    font-family: var(--calc-font-heading);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 16px;
}

.elec-result-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 16px;
    border-bottom: 1px solid var(--calc-line);
    gap: 12px;
}

.elec-result-row:last-child {
    border-bottom: none;
}

.elec-result-label {
    font-weight: 600;
    color: var(--calc-secondary-text);
    font-size: 14px;
}

.elec-result-value {
    font-family: monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--calc-contrast);
    text-align: right;
}