/**
 * ECOFACTOR AC Configurator — Frontend CSS
 * Matches Figma nodes: 19943:51640 / 51643 / 52599 / 53561 / 53563
 */

/* ── Full-width: works both inside .container and in the dedicated template ── */
/*
 * When used with page-configurator.php template the wrapper is already
 * full-width (no .container parent).  When dropped into a regular page
 * the 100vw trick breaks out of the theme's max-width: 1148px container.
 */
.ec-wrapper {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* When the dedicated template is active the breakout is a no-op
   (100vw == 100% already), so no side-effects. */

/* ── Design tokens ─────────────────────────────────────────────────────────── */
.ec-wrapper {
    --ec-gray-10:  #1f1f1f;
    --ec-gray-20:  #3a3a3a;
    --ec-gray-30:  #525252;
    --ec-gray-70:  #b0b2b5;
    --ec-gray-95:  #f1f3f5;
    --ec-white:    #ffffff;
    --ec-green:    #3af185;
    --ec-green-40: #23a859;
    --ec-green-dim: rgba(58,241,133,.4);
    --ec-error:    #ff4444;
    --ec-r-inner:  12px;
    --ec-r-card:   16px;
    --ec-font:     'Ruberoid', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ec-trans:    all .2s ease;

    font-family: var(--ec-font);
    background:  var(--ec-gray-10);
    color:       var(--ec-white);
    -webkit-font-smoothing: antialiased;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.5;
}

.ec-wrapper *, .ec-wrapper *::before, .ec-wrapper *::after { box-sizing: border-box; }

/* ── Layout ────────────────────────────────────────────────────────────────── */
.ec-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px 146px;
}

/* ── Station image layers ──────────────────────────────────────────────────── */
.ec-model-wrapper {
    /* sticky handled by JS initStickyPreview; this is a no-op wrapper */
}

.ec-station-layers {
    position: relative;
    width: 363px;
    height: 656px;
    margin: 0 auto;
}

.ec-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}

/* Only show layers that are active */
.ec-layer.ec-layer-active { opacity: 1; }

/* Base layers: only one visible at a time */
.ec-layer-base { opacity: 0; z-index: 1; }
.ec-layer-base.ec-layer-active { opacity: 1; }

/* Color layer sits on top of base */
.ec-layer-color { opacity: 0; z-index: 2; }
.ec-layer-color.ec-layer-active { opacity: 1; }

/* Feature layers (terminal etc.) above color */
.ec-layer-feature { opacity: 0; z-index: 3; }
.ec-layer-feature.ec-layer-active { opacity: 1; }

/* Connector layers always on top of everything */
.ec-layer-connector { opacity: 0; z-index: 4; }
.ec-layer-connector.ec-layer-active { opacity: 1; }

.ec-configurator {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
    justify-content: center;
}

/* Left column — station image */
.ec-model-section {
    width: 363px;
    flex-shrink: 0;
    align-self: flex-start;
    /* CSS sticky: fallback when JS is disabled. JS initStickyPreview() overrides
       this with position:fixed + placeholder for reliable cross-theme behaviour. */
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
}

.ec-station-img { display: none; } /* replaced by layer system */

/* Right column */
.ec-config-section {
    flex: 1 0 0;
    min-width: 493px;
    display: flex;
    flex-direction: column;
    gap: 54px;
}

/* ── Step indicator ────────────────────────────────────────────────────────── */
.ec-steps {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.ec-step {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ec-step-divider {
    width: 16px;
    flex-shrink: 0;
    height: 1px;
    background: var(--ec-gray-30);
    margin-top: 20px;
}

.ec-step-number {
    width: 40px;
    height: 40px;
    border-radius: 30px;
    background: var(--ec-gray-30);
    color: var(--ec-gray-70);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    flex-shrink: 0;
    transition: var(--ec-trans);
}

.ec-step-number svg { color: var(--ec-gray-70); }

.ec-step-label {
    font-size: 12px;
    color: var(--ec-gray-70);
    text-align: center;
    line-height: 1.55;
    transition: var(--ec-trans);
}

/* Active */
.ec-step.ec-active .ec-step-number {
    background: var(--ec-green);
    color: var(--ec-gray-20);
}
.ec-step.ec-active .ec-step-label { color: var(--ec-green); }

/* Completed */
.ec-step.ec-completed .ec-step-number {
    background: var(--ec-green);
    color: var(--ec-gray-20);
}
.ec-step.ec-completed .ec-step-number svg { color: var(--ec-gray-20); }
.ec-step.ec-completed .ec-step-label { color: var(--ec-white); }

/* ── Content area ──────────────────────────────────────────────────────────── */
.ec-content-area { width: 100%; }

.ec-step-content { display: none; animation: ecFadeIn .3s ease; }
.ec-step-content.ec-active { display: flex; flex-direction: column; gap: 24px; }

@keyframes ecFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ec-content-header { display: flex; flex-direction: column; gap: 9px; }

.ec-step-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ec-white);
    margin: 0;
}

.ec-content-description {
    font-size: 16px;
    color: var(--ec-gray-70);
    line-height: 1.5;
    margin: 0;
}

.ec-hint {
    font-size: 14px;
    color: var(--ec-gray-70);
    line-height: 1.55;
    margin: 0;
}

/* Power step — Figma: flex-wrap row, min-width 400px per card */
.ec-power-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    width: 100%;
}

.ec-power-grid .ec-option-card {
    flex: 1 0 0;
    min-width: 400px;
}

/* ── Option cards (step 1 & 2) ─────────────────────────────────────────────── */
.ec-options-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.ec-option-card {
    background: var(--ec-gray-20);
    border-radius: var(--ec-r-card);
    padding: 24px;
    cursor: pointer;
    border: 1px solid transparent;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
    text-align: left;
    transition: var(--ec-trans);
    box-shadow: 0 0 0 0 #4ade80;
    font-family: var(--ec-font);
    color: var(--ec-white);
}

.ec-option-card:hover:not(.ec-feature) { border-color: var(--ec-white); }
.ec-option-card.ec-selected:not(.ec-feature) { border-color: var(--ec-green); }
.ec-option-card.ec-feature { cursor: default; border-color: transparent !important; }

.ec-option-icon {
    width: 60px;
    height: 60px;
    background: var(--ec-gray-10);
    border-radius: var(--ec-r-inner);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ec-option-icon img { width: 28px; height: 28px; object-fit: contain; }

.ec-option-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ec-option-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

.ec-option-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--ec-white);
    line-height: 1.5;
}

.ec-option-check { display: none; width: 20px; height: 20px; flex-shrink: 0; }
.ec-option-card.ec-selected:not(.ec-feature) .ec-option-check { display: block; }

.ec-option-description {
    font-size: 16px;
    color: var(--ec-gray-70);
    line-height: 1.5;
    margin: 0;
}

.ec-option-card.ec-selected:not(.ec-feature) .ec-option-description { color: var(--ec-gray-95); }

/* Power cards — no icon */
.ec-power-card .ec-option-content { width: 100%; }

/* ── Connector step ────────────────────────────────────────────────────────── */
.ec-power-connector-wrapper {
    background: var(--ec-gray-20);
    border-radius: var(--ec-r-card);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    min-width: 400px;
    box-shadow: 0 0 0 0 #4ade80;
}

.ec-power-usage-row {
    display: flex;
    align-items: center;
    gap: 26px;
    width: 100%;
}

.ec-usage-text-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

.ec-usage-label {
    font-size: 14px;
    color: var(--ec-white);
    line-height: 1.55;
    font-weight: 400;
}

.ec-usage-used {
    font-size: 16px;
    color: var(--ec-green);
    font-weight: 700;
    line-height: 1.5;
}

.ec-usage-total {
    font-size: 16px;
    color: var(--ec-white);
    font-weight: 700;
    line-height: 1.5;
}

.ec-usage-bar {
    height: 6px;
    background: var(--ec-gray-30);
    border-radius: 5px;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.ec-usage-fill {
    height: 100%;
    background: var(--ec-green);
    width: 0;
    transition: width .4s ease;
    border-radius: 5px;
}

.ec-add-connector-btn {
    width: 100%;
    background: var(--ec-gray-10);
    color: var(--ec-white);
    border: none;
    padding: 10px 30px;
    border-radius: var(--ec-r-inner);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--ec-trans);
    font-family: var(--ec-font);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    letter-spacing: .16px;
}

.ec-add-connector-btn:hover { background: var(--ec-gray-30); }

.ec-connector-chips {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
    flex-wrap: wrap;
}

.ec-connector-chip {
    background: var(--ec-gray-20);
    border: 1px solid var(--ec-gray-30);
    border-radius: var(--ec-r-inner);
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    width: fit-content;
    gap: 10px;
    transition: var(--ec-trans);
}

.ec-connector-chip:hover { border-color: var(--ec-gray-70); }

.ec-connector-chip__left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.ec-connector-chip__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ec-connector-chip__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ec-connector-chip__icon svg {
    width: 24px;
    height: 24px;
}

.ec-connector-chip__name {
    font-size: 14px;
    color: var(--ec-white);
    line-height: 1.55;
    white-space: nowrap;
}

.ec-connector-chip__power {
    font-size: 14px;
    color: var(--ec-gray-70);
    line-height: 1.55;
    flex-shrink: 0;
    white-space: nowrap;
}

.ec-connector-chip__remove {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--ec-trans);
}

.ec-connector-chip:hover .ec-connector-chip__remove svg path { stroke: var(--ec-gray-70); }
.ec-connector-chip__remove:hover svg path { stroke: var(--ec-white); }

.ec-validation-msg {
    font-size: 13px;
    color: var(--ec-error);
    padding: 8px 0;
    line-height: 1.4;
}

/* ── Features step ─────────────────────────────────────────────────────────── */
.ec-feature-card {
    background: var(--ec-gray-20);
    border-radius: var(--ec-r-card);
    padding: 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
    box-shadow: 0 0 0 0 #4ade80;
}

.ec-toggle-switch {
    width: 52px;
    height: 32px;
    background: var(--ec-green-40);
    border-radius: 100px;
    cursor: pointer;
    border: none;
    flex-shrink: 0;
    position: relative;
    transition: var(--ec-trans);
    padding: 2px 4px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.ec-toggle-switch.ec-off {
    background: var(--ec-gray-30);
    justify-content: flex-start;
}

.ec-toggle-switch::after {
    content: '';
    width: 24px;
    height: 24px;
    background: var(--ec-white);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    transition: var(--ec-trans);
    display: block;
}

/* Color section */
.ec-color-section {
    background: var(--ec-gray-20);
    border-radius: var(--ec-r-card);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    box-shadow: 0 0 0 0 #4ade80;
}

.ec-color-section-header { display: flex; flex-direction: column; gap: 8px; }

.ec-color-selector {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.ec-color-option {
    background: var(--ec-gray-10);
    border-radius: var(--ec-r-inner);
    padding: 12px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: var(--ec-trans);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1 0 100px;
    min-width: 100px;
    font-family: var(--ec-font);
}

.ec-color-option:hover { border-color: var(--ec-white); }
.ec-color-option.ec-selected { border-color: var(--ec-green); }

.ec-color-circle {
    width: 40px;
    height: 40px;
    border-radius: 133px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.ec-color-check {
    display: none;
    width: 24px;
    height: 24px;
}

.ec-color-option.ec-selected .ec-color-check { display: block; }

.ec-color-name {
    font-size: 14px;
    color: var(--ec-white);
    text-align: center;
    line-height: 1.55;
}

/* ── Summary step ──────────────────────────────────────────────────────────── */
.ec-summary-title-section { display: flex; flex-direction: column; gap: 9px; }

.ec-config-code {
    font-size: 16px;
    color: var(--ec-gray-70);
    line-height: 1.5;
}

.ec-summary-card-main {
    background: var(--ec-gray-20);
    border-radius: var(--ec-r-card);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    box-shadow: 0 0 0 0 #4ade80;
}

.ec-summary-section { display: flex; flex-direction: column; gap: 8px; }

.ec-summary-label {
    font-size: 20px;
    font-weight: 600;
    color: var(--ec-green);
    line-height: 1.5;
}

.ec-summary-value {
    font-size: 16px;
    color: var(--ec-white);
    line-height: 1.5;
}

.ec-summary-connectors-list {
    font-size: 16px;
    color: var(--ec-gray-70);
    line-height: 1.5;
    padding-left: 20px;
}

.ec-summary-features-list { display: flex; flex-direction: column; gap: 4px; }

.ec-summary-feature-row {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 16px;
}

.ec-summary-feature-row span:first-child { color: var(--ec-white); white-space: nowrap; }
.ec-summary-feature-row span:last-child  { color: var(--ec-gray-70); padding-left: 20px; }

.ec-summary-color-row {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 16px;
}

.ec-summary-color-row span:first-child { color: var(--ec-white); white-space: nowrap; }
.ec-summary-color-row span:last-child  { color: var(--ec-gray-70); padding-left: 20px; }

/* ── Navigation buttons ────────────────────────────────────────────────────── */
.ec-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
}

.ec-btn {
    height: 60px;
    padding: 10px 30px;
    border-radius: var(--ec-r-inner);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: var(--ec-trans);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ec-font);
    letter-spacing: .16px;
    white-space: nowrap;
}

.ec-btn-back {
    background: transparent;
    border: 2px solid var(--ec-green);
    color: var(--ec-white);
}

.ec-btn-back:hover { background: rgba(58,241,133,.08); }

.ec-btn-next {
    background: var(--ec-green);
    color: var(--ec-gray-20);
}

.ec-btn-next:hover:not(:disabled) { background: #2fd672; }

.ec-btn-next:disabled {
    background: #87d9a8;
    cursor: not-allowed;
    color: var(--ec-white);
}

/* ── Form section ──────────────────────────────────────────────────────────── */
.ec-form-section {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    margin-top: 40px;
}

.ec-form-heading {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ec-white);
    margin: 0;
}

.ec-form-description {
    font-size: 16px;
    color: var(--ec-gray-70);
    line-height: 1.5;
    margin: 0;
}

#ecConfigForm {
    display: flex;
    flex-direction: column;
    gap: 27px;
}

.ec-form-group { display: flex; flex-direction: column; gap: 10px; }

.ec-form-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--ec-white);
    line-height: 1.35;
}

.ec-form-input,
.ec-form-textarea {
    width: 100%;
    background: var(--ec-gray-10);
    border: 1px solid var(--ec-gray-70);
    border-radius: var(--ec-r-inner);
    padding: 19px 30px;
    color: var(--ec-white);
    font-size: 16px;
    font-family: var(--ec-font);
    line-height: 1.6;
    transition: var(--ec-trans);
    height: 60px;
}

.ec-form-textarea {
    height: 100px;
    resize: vertical;
    padding-top: 20px;
    padding-bottom: 40px;
}

.ec-form-input:focus,
.ec-form-textarea:focus { outline: none; border-color: var(--ec-green); }

.ec-form-input::placeholder,
.ec-form-textarea::placeholder { color: var(--ec-gray-70); }

.ec-form-error {
    color: var(--ec-error);
    font-size: 12px;
    display: none;
}

.ec-form-group.ec-error .ec-form-input,
.ec-form-group.ec-error .ec-form-textarea { border-color: var(--ec-error); }

.ec-form-group.ec-error .ec-form-error { display: block; }

/* ── Phone input (custom, dark theme) ───────────────────────────────────────── */
.ec-phone-group { display: flex; flex-direction: column; gap: 10px; }

.ec-phone-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 60px;
    padding: 0 30px;
    background: var(--ec-gray-10);
    border: 1px solid var(--ec-gray-70);
    border-radius: var(--ec-r-inner);
    transition: var(--ec-trans);
}

.ec-phone-wrapper:focus-within { border-color: var(--ec-green); }
.ec-form-group.ec-error .ec-phone-wrapper { border-color: var(--ec-error); }

.ec-phone-country {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

.ec-phone-flag {
    width: 24px;
    height: 16px;
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}

.ec-phone-flag--ua { background: linear-gradient(to bottom, #0057B7 50%, #FFD700 50%); }
.ec-phone-flag--pl { background: linear-gradient(to bottom, #FFFFFF 50%, #DC143C 50%); }
.ec-phone-flag--de { background: linear-gradient(to bottom, #000 33.3%, #DD0000 33.3%, #DD0000 66.6%, #FFCC00 66.6%); }
.ec-phone-flag--gb { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='a'%3E%3Cpath d='M0 0v30h60V0z'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath d='M30 15h30v15zv15H0zH0V0zV0h30z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M0 0v30h60V0z' fill='%23012169'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' clip-path='url(%23b)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/g%3E%3C/svg%3E") center/cover; }
.ec-phone-flag--us { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect fill='%23B22234' width='60' height='30'/%3E%3Crect fill='%23fff' y='2.31' width='60' height='2.31'/%3E%3Crect fill='%23fff' y='6.92' width='60' height='2.31'/%3E%3Crect fill='%23fff' y='11.54' width='60' height='2.31'/%3E%3Crect fill='%23fff' y='16.15' width='60' height='2.31'/%3E%3Crect fill='%23fff' y='20.77' width='60' height='2.31'/%3E%3Crect fill='%23fff' y='25.38' width='60' height='2.31'/%3E%3Crect fill='%233C3B6E' width='24' height='16.15'/%3E%3C/svg%3E") center/cover; }

.ec-phone-arrow {
    width: 10px;
    height: 6px;
    transition: transform .2s ease;
    flex-shrink: 0;
}

.ec-phone-wrapper.ec-phone-open .ec-phone-arrow { transform: rotate(180deg); }

.ec-phone-code {
    font-family: var(--ec-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--ec-white);
    flex-shrink: 0;
}

.ec-phone-field {
    flex: 1;
    border: none;
    background: none;
    font-family: var(--ec-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ec-white);
    outline: none;
    min-width: 0;
}

.ec-phone-field::placeholder { color: var(--ec-gray-70); }

/* Dropdown */
.ec-phone-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--ec-gray-20);
    border: 1px solid var(--ec-gray-30);
    border-radius: var(--ec-r-inner);
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    z-index: 10;
    max-height: 200px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}

.ec-phone-wrapper.ec-phone-open .ec-phone-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ec-phone-dropdown::-webkit-scrollbar { width: 6px; }
.ec-phone-dropdown::-webkit-scrollbar-track { background: transparent; margin: 8px 0; }
.ec-phone-dropdown::-webkit-scrollbar-thumb { background-color: var(--ec-gray-30); border-radius: 3px; }
.ec-phone-dropdown::-webkit-scrollbar-thumb:hover { background-color: var(--ec-gray-70); }

.ec-phone-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    cursor: pointer;
    transition: background-color .15s ease;
}

.ec-phone-option:hover { background-color: var(--ec-gray-30); }

.ec-phone-option-code {
    font-family: var(--ec-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--ec-white);
}

.ec-phone-option-name {
    font-family: var(--ec-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ec-gray-70);
}

.ec-phone-option-sep { color: var(--ec-gray-30); }

.ec-btn-submit {
    width: 100%;
    background: var(--ec-green);
    color: var(--ec-gray-20);
    border: none;
    height: 60px;
    border-radius: var(--ec-r-inner);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--ec-trans);
    font-family: var(--ec-font);
    letter-spacing: .16px;
}

.ec-btn-submit:hover { background: #2fd672; }

/* ── Connector modal ───────────────────────────────────────────────────────── */
.ec-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.8);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.ec-modal-overlay.ec-active { display: flex; }

.ec-modal {
    background: var(--ec-gray-30);
    border-radius: var(--ec-r-inner);
    padding: 30px;
    width: 480px;
    max-width: 90%;
    margin: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
    animation: ecModalIn .25s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-end;
}

@keyframes ecModalIn {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

.ec-modal-close {
    position: absolute;
    top: 0;
    right: -0.5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 16px;
    display: flex;
    align-items: center;
    transition: var(--ec-trans);
    z-index: 1;
}

.ec-modal-close svg { transition: var(--ec-trans); }
.ec-modal-close:hover svg path { stroke: var(--ec-white); }

.ec-modal-header {
    display: flex;
    align-items: center;
    width: 100%;
}

.ec-modal-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--ec-white);
    line-height: 1.5;
    flex: 1;
    margin: 0;
}

.ec-connector-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.ec-connector-option {
    background: var(--ec-gray-20);
    border-radius: var(--ec-r-inner);
    padding: 12px;
    cursor: pointer;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--ec-trans);
    font-family: var(--ec-font);
    width: 100%;
    height: 48px;
    text-align: left;
    box-shadow: 0 0 0 0 #4ade80;
}

.ec-connector-option:hover:not(:disabled):not(.ec-disabled) { border-color: var(--ec-white); }

.ec-connector-option.ec-selected { border-color: var(--ec-green); }

.ec-connector-option.ec-disabled,
.ec-connector-option:disabled {
    opacity: 1;
    cursor: not-allowed;
    pointer-events: none;
}

.ec-connector-option.ec-disabled .ec-connector-option-name,
.ec-connector-option:disabled .ec-connector-option-name {
    color: var(--ec-gray-30);
}

.ec-connector-option.ec-disabled .ec-connector-option-power,
.ec-connector-option:disabled .ec-connector-option-power {
    color: var(--ec-gray-30);
}

.ec-connector-option.ec-disabled .ec-connector-option-icon svg,
.ec-connector-option:disabled .ec-connector-option-icon svg {
    opacity: .4;
}

.ec-connector-option.ec-disabled .ec-connector-option-icon img,
.ec-connector-option:disabled .ec-connector-option-icon img {
    opacity: .4;
}

.ec-connector-option.ec-disabled:hover,
.ec-connector-option:disabled:hover {
    border-color: transparent;
}

.ec-connector-option-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ec-connector-option-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ec-connector-option-name {
    font-size: 14px;
    color: var(--ec-white);
    line-height: 1.55;
    white-space: nowrap;
}

.ec-connector-option-power {
    font-size: 14px;
    color: var(--ec-gray-70);
    line-height: 1.55;
    white-space: nowrap;
}

/* Keep old class for backwards compatibility */
.ec-connector-option-text {
    font-size: 14px;
    color: var(--ec-white);
    line-height: 1.55;
}

/* ── Success popup — Figma 19872:63572 ──────────────────────────────────────── */
.ec-success-popup {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.8);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.ec-success-popup.ec-active { display: flex; }

.ec-success-popup-content {
    background: var(--ec-gray-30);
    border-radius: var(--ec-r-inner);
    padding: 30px;
    max-width: 480px;
    width: 90%;
    animation: ecModalIn .25s ease;
    margin: 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ec-success-popup-close {
    position: absolute;
    top: 0;
    right: -0.5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 16px;
    display: flex;
    align-items: center;
    transition: var(--ec-trans);
    z-index: 1;
}

.ec-success-popup-close:hover svg path { stroke: var(--ec-white); }
.ec-success-popup-title { font-size: 20px; font-weight: 600; color: var(--ec-white); line-height: 1.5; margin: 0; }
.ec-success-popup-text  { font-size: 16px; font-weight: 400; color: var(--ec-gray-95); line-height: 1.5; margin: 0; }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .ec-container { padding: 40px 40px; }
    .ec-configurator { flex-direction: column; align-items: center; }
    .ec-model-section { width: 100%; max-width: 363px; position: relative; top: 0; }
    .ec-config-section { min-width: 0; width: 100%; }
}

@media (max-width: 768px) {
    .ec-container { padding: 24px 20px; }
    .ec-step-title { font-size: 24px; }
    .ec-option-card { padding: 16px; }
    .ec-option-icon { width: 48px; height: 48px; }
    .ec-option-title { font-size: 17px; }
    .ec-btn { height: 52px; padding: 10px 20px; font-size: 15px; }
    .ec-color-selector { gap: 8px; }
    .ec-color-option { min-width: 80px; }
    .ec-steps { gap: 2px; }
    .ec-step-label { font-size: 10px; }
    .ec-power-connector-wrapper { min-width: 0; }
    .ec-power-usage-row { flex-direction: column; gap: 12px; align-items: flex-start; }
    .ec-usage-bar { width: 100%; }
}

/* ── Theme overrides ───────────────────────────────────────────────────────── */
/* Hide the default page title when the configurator is present */
body:has(.ec-wrapper) .entry-header { display: none; }

/* Remove site-main top padding on the configurator template */
body.page-template-page-configurator .site-main {
    padding: 0;
    margin: 0;
}

/* Prevent horizontal scrollbar from the 100vw breakout on regular pages */
body { overflow-x: hidden; }

/* ── Custom color picker ───────────────────────────────────────────────────── */
.ec-color-circle--custom {
    background: conic-gradient(
        from 0deg,
        #ff0000, #ff8800, #ffff00, #00ff00, #0088ff, #8800ff, #ff0088, #ff0000
    );
    position: relative;
}

.ec-color-circle--custom::after {
    content: '';
    position: absolute;
    top: 6px; left: 6px; right: 6px; bottom: 6px;
    background: var(--ec-gray-10);
    border-radius: 50%;
    transition: opacity .2s;
}

.ec-color-circle--custom.ec-has-color::after { display: none; }

.ec-color-picker-panel {
    background: var(--ec-gray-10);
    border: 1px solid var(--ec-gray-30);
    border-radius: var(--ec-r-inner);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: ecFadeIn .25s ease;
    margin-top: 4px;
}

.ec-picker-top {
    display: flex;
    gap: 12px;
}

/* Saturation/Value area */
.ec-sat-val {
    flex: 1;
    height: 180px;
    border-radius: 8px;
    position: relative;
    cursor: crosshair;
    background: linear-gradient(to bottom, transparent, #000),
                linear-gradient(to right, #fff, #ff0000);
    overflow: hidden;
    user-select: none;
}

.ec-sat-val-cursor {
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 1px rgba(0,0,0,.3), inset 0 0 0 1px rgba(0,0,0,.3);
    pointer-events: none;
    top: 0; left: 100%;
}

/* Hue strip */
.ec-hue-strip {
    width: 20px;
    flex-shrink: 0;
    height: 180px;
    border-radius: 10px;
    background: linear-gradient(to bottom,
        #ff0000 0%, #ff8800 10%, #ffff00 20%, #88ff00 30%,
        #00ff00 40%, #00ff88 50%, #00ffff 60%, #0088ff 70%,
        #0000ff 80%, #8800ff 90%, #ff00ff 95%, #ff0000 100%
    );
    position: relative;
    cursor: pointer;
    user-select: none;
}

.ec-hue-cursor {
    width: 24px;
    height: 8px;
    background: #fff;
    border-radius: 4px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
    pointer-events: none;
    top: 0;
}

/* Bottom row */
.ec-picker-bottom {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ec-picker-preview {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid var(--ec-gray-30);
    background: #ff0000;
    transition: background .1s;
}

.ec-hex-wrapper {
    display: flex;
    align-items: center;
    background: var(--ec-gray-20);
    border: 1px solid var(--ec-gray-30);
    border-radius: 8px;
    padding: 0 12px;
    height: 40px;
    gap: 4px;
    flex: 1;
    max-width: 180px;
    transition: border-color .2s;
}

.ec-hex-wrapper:focus-within { border-color: var(--ec-green); }

.ec-hex-prefix {
    color: var(--ec-gray-70);
    font-size: 14px;
    font-weight: 500;
    user-select: none;
}

.ec-hex-input {
    background: none;
    border: none;
    outline: none;
    color: var(--ec-white);
    font-size: 14px;
    font-family: var(--ec-font);
    width: 80px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ec-hex-input::placeholder { color: var(--ec-gray-30); }

.ec-picker-apply {
    height: 40px;
    padding: 0 20px;
    background: var(--ec-green);
    color: var(--ec-gray-20);
    font-weight: 700;
    font-size: 14px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--ec-font);
    transition: background .2s;
    margin-left: auto;
    white-space: nowrap;
}

.ec-picker-apply:hover { background: #2fd672; }

/* ── Picker tabs ─────────────────────────────────────────────────────────── */
.ec-picker-tabs {
    display: flex;
    background: var(--ec-gray-20);
    border-radius: 8px;
    padding: 3px;
    gap: 0;
}

.ec-picker-tab {
    flex: 1;
    text-align: center;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ec-gray-70);
    border-radius: 6px;
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--ec-font);
    transition: color .15s, background .15s;
}

.ec-picker-tab.active {
    background: var(--ec-gray-10);
    color: var(--ec-white);
}

.ec-picker-tab-panel { display: flex; flex-direction: column; gap: 12px; }

/* ── RAL nearest-match tag (palette tab bottom) ────────────────────────── */
.ec-ral-match {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--ec-gray-20);
    border-radius: 8px;
    border: 1px solid var(--ec-gray-30);
}

.ec-ral-match-swatch {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.1);
}

.ec-ral-match-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.ec-ral-match-code {
    font-size: 13px;
    font-weight: 600;
    color: var(--ec-white);
    font-family: monospace;
    letter-spacing: .5px;
}

.ec-ral-match-name {
    font-size: 12px;
    color: var(--ec-gray-70);
}

.ec-ral-match-note {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--ec-gray-70);
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── RAL badge (below color swatches after apply) ────────────────────── */
.ec-ral-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: var(--ec-gray-20);
    border-radius: 8px;
    border: 1px solid var(--ec-gray-30);
    margin-top: 4px;
    animation: ecFadeIn .2s ease;
}

.ec-ral-badge-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ec-ral-badge-code {
    font-size: 12px;
    color: var(--ec-gray-70);
    font-family: monospace;
    letter-spacing: .5px;
}

.ec-ral-badge-sep { color: var(--ec-gray-30); font-size: 12px; }

.ec-ral-badge-name {
    font-size: 12px;
    color: var(--ec-white);
    font-weight: 500;
}

/* ── RAL search bar ─────────────────────────────────────────────────────── */
.ec-ral-search {
    display: flex;
    align-items: center;
    background: var(--ec-gray-20);
    border-radius: 8px;
    padding: 0 12px;
    height: 36px;
    gap: 8px;
    border: 1px solid var(--ec-gray-30);
    transition: border-color .2s;
}

.ec-ral-search:focus-within { border-color: var(--ec-green); }

.ec-ral-search svg { color: var(--ec-gray-70); flex-shrink: 0; }

.ec-ral-search-input {
    background: none;
    border: none;
    outline: none;
    color: var(--ec-white);
    font-size: 13px;
    font-family: var(--ec-font);
    flex: 1;
}

.ec-ral-search-input::placeholder { color: var(--ec-gray-30); }

/* ── RAL catalog grid ───────────────────────────────────────────────────── */
.ec-ral-catalog {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 4px;
}

.ec-ral-catalog::-webkit-scrollbar { width: 4px; }
.ec-ral-catalog::-webkit-scrollbar-track { background: transparent; }
.ec-ral-catalog::-webkit-scrollbar-thumb { background: var(--ec-gray-30); border-radius: 2px; }

.ec-ral-group { display: flex; flex-direction: column; gap: 8px; }

.ec-ral-group-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--ec-gray-70);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--ec-gray-30);
}

.ec-ral-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 5px;
}

.ec-ral-cell {
    aspect-ratio: 1;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    border: 2px solid transparent;
    transition: border-color .15s, transform .15s;
}

.ec-ral-cell:hover {
    border-color: rgba(255,255,255,.45);
    transform: scale(1.1);
    z-index: 1;
}

.ec-ral-cell.selected {
    border-color: var(--ec-green);
    transform: scale(1.1);
    z-index: 1;
}

.ec-ral-cell.selected::after {
    content: '✓';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

.ec-ral-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ec-gray-10);
    border: 1px solid var(--ec-gray-30);
    border-radius: 6px;
    padding: 6px 10px;
    white-space: nowrap;
    z-index: 20;
    pointer-events: none;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}

.ec-ral-cell:hover .ec-ral-tooltip { display: flex; }

.ec-ral-tooltip-code {
    font-size: 11px;
    font-weight: 600;
    color: var(--ec-white);
    font-family: monospace;
}

.ec-ral-tooltip-name { font-size: 10px; color: var(--ec-gray-70); }

/* ── RAL selected bar (bottom of RAL tab) ───────────────────────────────── */
.ec-ral-selected-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--ec-gray-20);
    border-radius: 8px;
    border-top: 1px solid var(--ec-gray-30);
    margin-top: 4px;
    animation: ecFadeIn .2s ease;
}

.ec-ral-selected-swatch {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.1);
}

.ec-ral-selected-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.ec-ral-selected-code {
    font-size: 14px;
    font-weight: 600;
    color: var(--ec-white);
    font-family: monospace;
}

.ec-ral-selected-name { font-size: 12px; color: var(--ec-gray-70); }

/* ── DC Configurator specific styles ───────────────────────────────────────── */

.ec-dc-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

.ec-dc-info span {
    font-size: 16px;
    color: var(--ec-gray-70);
    line-height: 1.5;
}

.ec-dc-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.ec-dc-section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.ec-dc-section-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--ec-white);
    flex: 1 0 200px;
    white-space: nowrap;
}

.ec-dc-add-btn {
    background: var(--ec-white);
    color: var(--ec-gray-20);
    border: none;
    padding: 10px 30px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--ec-font);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    letter-spacing: .16px;
    transition: var(--ec-trans);
    white-space: nowrap;
}

.ec-dc-add-btn:hover { background: var(--ec-gray-95); }

.ec-dc-add-btn svg { width: 24px; height: 24px; }

.ec-dc-empty {
    font-size: 16px;
    color: var(--ec-gray-70);
    line-height: 1.5;
    margin: 0;
}

/* DC power cards — compact horizontal layout matching Figma corps choice */
.ec-dc-power-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    width: 100%;
}

.ec-dc-power-card {
    flex: 1 0 0;
    min-width: 140px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 24px;
    background: var(--ec-gray-20);
    border-radius: var(--ec-r-card);
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--ec-trans);
    font-family: var(--ec-font);
    color: var(--ec-white);
    box-shadow: 0 0 0 0 #4ade80;
}

.ec-dc-power-card:hover { border-color: var(--ec-white); }
.ec-dc-power-card.ec-selected { border-color: var(--ec-green); }

.ec-dc-power-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--ec-white);
    line-height: 1.5;
}

.ec-dc-power-card.ec-selected .ec-dc-power-unit { color: var(--ec-gray-95); }

.ec-dc-power-unit {
    font-size: 16px;
    font-weight: 400;
    color: var(--ec-gray-70);
    line-height: 1.5;
    flex: 1;
}

.ec-dc-power-card .ec-option-check { display: none; flex-shrink: 0; }
.ec-dc-power-card.ec-selected .ec-option-check { display: block; }

.ec-wrapper--dc .ec-power-grid .ec-option-card {
    min-width: 140px;
}

/* DC connector chips — no power shown for DC */
.ec-wrapper--dc .ec-connector-chip__power--hidden { display: none; }