/* Shared ECU form theme — loaded from index.html (global for all sterowniki-component instances) */
:root {
    --ecu-brand: #F39200;
    --ecu-success: #16FF00;
    --ecu-error: #c00;
}

.ecu-form-root {
    max-width: 42rem;
}

.ecu-form-root input[type="checkbox"],
.ecu-form-root input[type="radio"] {
    accent-color: var(--ecu-brand);
}

.ecu-field,
.ecu-form-root input.ecu-field[type="email"],
.ecu-form-root input.ecu-field[type="text"],
.ecu-form-root input.ecu-field[type="number"],
.ecu-form-root select.ecu-field {
    border: 2px solid var(--ecu-brand);
    border-radius: 3px;
    padding: 0.25rem 0.4rem;
    box-sizing: border-box;
    color: #000;
    -webkit-text-fill-color: #000;
}

.ecu-field-width {
    width: 16rem;
    max-width: 100%;
}

.ecu-border-brand {
    border-color: var(--ecu-brand) !important;
}

.ecu-border-success {
    border-color: var(--ecu-success) !important;
}

.ecu-border-error {
    border-color: var(--ecu-error) !important;
}

.ecu-field-error {
    color: var(--ecu-error);
    font-size: 0.9rem;
}

.ecu-btn,
.ecu-file-input::file-selector-button {
    background: var(--ecu-brand);
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.25;
    box-sizing: border-box;
    height: 2.125rem;
    min-width: 10.5rem;
    padding: 0 0.75rem;
    vertical-align: middle;
}

.ecu-file-input::file-selector-button {
    margin-right: 0.5rem;
}

.ecu-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ecu-choice-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.35rem 0 0.5rem;
}

.ecu-choice {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 2px solid var(--ecu-brand);
    border-radius: 3px;
    padding: 0.3rem 0.55rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.9rem;
    line-height: 1.25;
}

.ecu-choice-selected {
    background: var(--ecu-brand);
    color: #fff;
}

.ecu-choice input[type="radio"] {
    margin: 0;
    flex-shrink: 0;
}

.ecu-choice-selected input[type="radio"] {
    accent-color: #fff;
}

.ecu-panel {
    border: 2px solid var(--ecu-brand);
    border-radius: 4px;
    margin-bottom: 0.35rem;
    padding: 0.35rem 0.55rem 0.35rem 1.65rem;
    background: #fff;
}

.ecu-panel > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.92rem;
    color: #000;
    list-style: none;
    display: block;
    margin-left: -1.15rem;
    padding-left: 1.15rem;
    position: relative;
}

.ecu-panel > summary::-webkit-details-marker {
    display: none;
}

.ecu-panel > summary::before {
    content: "▶";
    position: absolute;
    left: 0.15rem;
    top: 0.1rem;
    font-size: 0.65rem;
    line-height: 1;
    color: #000;
}

.ecu-panel[open] > summary::before {
    content: "▼";
    top: 0.15rem;
}

.ecu-terms {
    display: block;
    max-width: 42rem;
    margin: 0.75rem 0;
    line-height: 1.45;
}

.ecu-terms input {
    margin-right: 0.35rem;
    vertical-align: top;
    margin-top: 0.2rem;
}

.ecu-terms a.ecu-terms-link {
    color: #000;
    text-decoration: underline;
}

.ecu-terms a.ecu-terms-link:visited,
.ecu-terms a.ecu-terms-link:hover,
.ecu-terms a.ecu-terms-link:active {
    color: #000;
}

/* CAN Sender */
.ecu-form-root .can-frame-list {
    margin-top: 0.75rem;
    font-size: 0.9rem;
}

.ecu-form-root .can-frame-grid {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: #000;
    margin-top: 0.35rem;
}

.ecu-form-root .can-frame-grid .frame-field {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ecu-form-root .can-frame-grid .field-name {
    min-width: 4.25rem;
    font-size: 0.9rem;
    color: #000;
}

.ecu-form-root .can-frame-grid input::placeholder {
    color: #666;
    opacity: 1;
}

.ecu-form-root .input-id {
    width: 5.5rem;
    font-family: Consolas, monospace;
    text-transform: uppercase;
}

.ecu-form-root .input-num {
    width: 3.5rem;
    font-family: Consolas, monospace;
}

.ecu-form-root .input-cycle-select {
    width: 11rem;
    max-width: 100%;
    font-size: 0.9rem;
}

.ecu-form-root .data-bytes {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    align-items: center;
}

.ecu-form-root .data-byte-input {
    width: 2.25rem;
    margin: 0;
    padding: 0.15rem 0.1rem;
    text-align: center;
    font-family: Consolas, monospace;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.ecu-form-root .frame-hint {
    font-size: 0.8rem;
    color: #444;
    margin: 0;
    max-width: 36rem;
    line-height: 1.35;
}

.ecu-form-root .uppercase-field {
    text-transform: uppercase;
}

.vin-emulator-form .ecu-form-root .ecu-choice-group {
    justify-content: center;
}

#vin-emulator-configurator {
    margin: 0 0 2cm;
    scroll-margin-top: 24px;
}

/* Scroll hint — configurator below (CAN Sender, VIN Emulator, …) */
.manual-scroll-hint {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 220px;
    padding: 12px 16px;
    color: #ff9900;
    cursor: pointer;
    border: none;
    background: transparent;
}

.manual-scroll-hint:hover {
    color: #e68a00;
}

.manual-scroll-hint-label {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: #333;
}

.manual-scroll-arrows {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 0.85;
    margin-top: 4px;
}

.manual-scroll-arrow {
    font-size: 26px;
    color: #ff9900;
    animation: manual-scroll-bounce 1.4s ease-in-out infinite;
}

@keyframes manual-scroll-bounce {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(8px); opacity: 0.75; }
}

@media (max-width: 767px) {
    .manual-scroll-hero-row {
        flex-direction: column !important;
    }

    .manual-scroll-hint {
        max-width: 280px;
        margin-top: 8px;
    }
}