/**
 * Motorro - jeden połączony panel: kalkulator + licznik klientów.
 * Samodzielny arkusz, niezależny od starego motorro-suwak.css.
 *
 * @version 5.0.10
 */

.motorro-panel,
div.motorro-panel {
    --mp-accent: #0255aa;
    --mp-accent-2: #2879ce;
    --mp-accent-rgb: 2, 85, 170;
    --mp-on-accent: #ffffff;
    --mp-ink: #111827;
    --mp-muted: #6b7280;
    --mp-faint: #94a3b8;
    --mp-line: #e2e8f0;
    --mp-max: 1240px;
    --mp-scale: 1;

    display: block !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    border: 0 !important;
    background: none !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 16px;
    line-height: 1.5;
    color: var(--mp-ink);
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

.motorro-panel *,
.motorro-panel *::before,
.motorro-panel *::after {
    box-sizing: border-box;
}

/* ========== KARTA ========== */
.motorro-panel__inner {
    max-width: var(--mp-max);
    margin: 0 auto;
    border-radius: clamp(14px, 1.6vw, 22px);
    background: #ffffff;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

/* ========== TYTUŁ SEKCJI ========== */
.motorro-panel__section-head {
    max-width: var(--mp-max);
    margin: 0 auto calc(clamp(18px, 2.2vw, 28px) * var(--mp-scale));
    padding: 0 clamp(14px, 2vw, 24px);
    text-align: center;
}

.motorro-panel__eyebrow {
    display: block;
    margin: 0 0 6px;
    color: var(--mp-faint);
    font-size: clamp(9px, 1vw, 11px);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.motorro-panel__title {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--mp-ink) !important;
    font-size: calc(clamp(26px, 3vw, 38px) * var(--mp-scale)) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em;
    text-transform: none !important;
}

/* ========== SIATKA: KALKULATOR | LICZNIK ========== */
.motorro-panel__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    margin-top: calc(clamp(16px, 2.2vw, 26px) * var(--mp-scale));
}

.motorro-panel__calc,
.motorro-panel__live {
    min-width: 0;
    padding: calc(clamp(18px, 2.4vw, 30px) * var(--mp-scale)) clamp(18px, 2.6vw, 34px);
}

/* Prawa połowa - delikatny odcień akcentu, żeby licznik czytał się
   jako druga część tej samej karty, a nie osobne pudełko. */
.motorro-panel__live {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--mp-line);
    background: rgba(var(--mp-accent-rgb), 0.05);
}

.motorro-panel__col-label {
    margin: 0 0 calc(clamp(20px, 2.4vw, 30px) * var(--mp-scale)) !important;
    padding: 0 !important;
    color: var(--mp-ink) !important;
    font-size: calc(clamp(20px, 2vw, 27px) * var(--mp-scale)) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    text-align: center;
}

/* ================================================================
   KALKULATOR
   ================================================================ */
.motorro-panel__slider {
    margin-bottom: calc(clamp(18px, 2.4vw, 30px) * var(--mp-scale));
}

.motorro-panel__slider-title {
    display: block;
    margin: 0 0 8px;
    color: var(--mp-ink);
    font-size: calc(clamp(15px, 1.5vw, 19px) * var(--mp-scale));
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.motorro-slider-track-wrapper {
    position: relative;
    padding-top: calc(46px * var(--mp-scale));
}

.motorro-slider-value-floating {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    padding: calc(7px * var(--mp-scale)) calc(15px * var(--mp-scale));
    border-radius: 8px;
    background: linear-gradient(135deg, var(--mp-accent) 0%, var(--mp-accent-2) 100%);
    color: var(--mp-on-accent);
    font-size: calc(clamp(15px, 1.4vw, 18px) * var(--mp-scale));
    font-weight: 700;
    white-space: nowrap;
    z-index: 2;
    transition: left 0.1s ease-out;
    box-shadow: 0 4px 12px rgba(var(--mp-accent-rgb), 0.35);
    pointer-events: none;
}

.motorro-slider-value-floating::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid var(--mp-accent-2);
}

.motorro-slider-input {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 8px;
    margin: 0;
    border: none;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    background: linear-gradient(
        to right,
        var(--mp-accent) 0%,
        var(--mp-accent) var(--motorro-progress, 15%),
        var(--mp-line) var(--motorro-progress, 15%),
        var(--mp-line) 100%
    );
}

.motorro-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    border: 4px solid var(--mp-accent);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(var(--mp-accent-rgb), 0.35);
    transition: transform 0.15s ease;
}

.motorro-slider-input::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.motorro-slider-input::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border: 4px solid var(--mp-accent);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.motorro-slider-input:focus-visible {
    outline: 2px solid var(--mp-accent);
    outline-offset: 4px;
}

.motorro-slider-range-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
}

.motorro-slider-min,
.motorro-slider-max {
    color: var(--mp-faint);
    font-size: clamp(11px, 1.05vw, 13px);
    font-weight: 500;
}

.motorro-stations-info {
    margin-top: 10px;
    text-align: center;
}

.motorro-stations-info-text {
    color: var(--mp-muted);
    font-size: clamp(12px, 1.2vw, 14px);
    line-height: 1.45;
}

.motorro-stations-info-text strong {
    color: var(--mp-accent);
    font-weight: 700;
}

/* ===== WYNIK KALKULATORA ===== */
.motorro-panel__result {
    margin-top: auto;
    padding: calc(clamp(16px, 1.9vw, 24px) * var(--mp-scale)) clamp(16px, 2vw, 26px);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--mp-accent) 0%, var(--mp-accent-2) 100%);
    color: var(--mp-on-accent);
    text-align: center;
}

.motorro-panel__result-text {
    margin: 0 0 6px !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: calc(clamp(14px, 1.45vw, 17px) * var(--mp-scale)) !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    opacity: 0.95;
}

.motorro-panel__result-amount-wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

.motorro-slider-savings-amount {
    display: inline-block;
    padding: 6px 20px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2);
    color: inherit;
    font-size: calc(clamp(24px, 3vw, 34px) * var(--mp-scale));
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    transition: transform 0.15s ease;
}

.motorro-panel.is-light-accent .motorro-slider-savings-amount {
    background: rgba(0, 0, 0, 0.07);
}

.motorro-slider-savings-amount.motorro-updating {
    transform: scale(1.05);
}

.motorro-panel__result-period {
    margin: 8px 0 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: calc(clamp(12px, 1.2vw, 14px) * var(--mp-scale)) !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    opacity: 0.8;
}

/* ================================================================
   LICZNIK KLIENTÓW
   ================================================================ */
/* Wolna przestrzeń rozkłada się nad i pod blokami, więc licznik
   siedzi optycznie na środku swojej połowy, a status zostaje na dole. */
.motorro-panel__live-block:first-of-type {
    margin-top: auto;
}

.motorro-panel__live-block + .motorro-panel__live-block {
    margin-top: calc(clamp(18px, 2.4vw, 30px) * var(--mp-scale));
}

.motorro-panel__live-label {
    margin: 0 0 calc(clamp(9px, 1.2vw, 14px) * var(--mp-scale)) !important;
    padding: 0 !important;
    color: var(--mp-muted) !important;
    font-size: clamp(11px, 1.15vw, 14px) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: center;
}

.motorro-panel__units {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(5px, 0.6vw, 9px);
}

.motorro-panel__unit {
    min-width: 0;
    padding: calc(clamp(9px, 1.1vw, 14px) * var(--mp-scale)) 2px calc(clamp(7px, 0.9vw, 11px) * var(--mp-scale));
    border: 1px solid rgba(var(--mp-accent-rgb), 0.16);
    border-radius: clamp(8px, 0.9vw, 12px);
    background: #ffffff;
    text-align: center;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
}

.motorro-panel__unit strong {
    display: block;
    margin: 0 0 3px;
    color: var(--mp-accent);
    font-size: calc(clamp(17px, 2vw, 28px) * var(--mp-scale));
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.motorro-panel__unit span {
    display: block;
    color: var(--mp-faint);
    font-size: clamp(8px, 0.85vw, 11px);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.motorro-panel__money {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--mp-accent) !important;
    font-size: calc(clamp(26px, 3.4vw, 46px) * var(--mp-scale)) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
    text-align: center;
    overflow-wrap: break-word;
}

.motorro-panel__money-sub {
    margin: clamp(6px, 0.9vw, 10px) 0 0 !important;
    padding: 0 !important;
    color: var(--mp-muted) !important;
    font-size: clamp(12px, 1.2vw, 15px) !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-align: center;
}

/* ===== STATUS ===== */
.motorro-panel__status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: auto;
    padding-top: calc(clamp(14px, 1.8vw, 22px) * var(--mp-scale));
    color: var(--mp-faint);
    font-size: clamp(9px, 0.95vw, 11px);
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
}

.motorro-panel__status-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.16);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.motorro-panel.is-loading .motorro-panel__status-dot {
    animation: motorro-panel-pulse 1.1s ease-in-out infinite;
}

.motorro-panel.is-error .motorro-panel__status-dot {
    background: #d97706;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.16);
}

@keyframes motorro-panel-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* ========== GĘSTOŚĆ (stare style layoutu) ========== */
.motorro-panel.motorro-layout-compact  { --mp-scale: 0.85; }
.motorro-panel.motorro-layout-spacious { --mp-scale: 1.15; }

/* ========== TABLET / MOBILE ========== */
@media (max-width: 860px) {
    .motorro-panel__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .motorro-panel__live {
        border-left: 0;
        border-top: 1px solid var(--mp-line);
    }

    .motorro-panel__result {
        margin-top: clamp(16px, 3vw, 22px);
    }
}

@media (max-width: 520px) {
    .motorro-panel__inner {
        border-radius: 14px;
    }

    .motorro-panel__section-head {
        margin-bottom: 18px;
        padding: 0 10px;
    }

    .motorro-panel__title {
        font-size: 27px !important;
    }

    .motorro-panel__col-label {
        font-size: 21px !important;
        margin-bottom: 22px !important;
    }

    .motorro-panel__calc,
    .motorro-panel__live {
        padding: 18px 14px;
    }

    .motorro-panel__units {
        gap: 5px;
    }

    .motorro-panel__unit {
        padding: 9px 1px 7px;
        border-radius: 9px;
    }

    .motorro-panel__unit strong {
        font-size: 19px;
    }

    .motorro-panel__unit span {
        font-size: 8px;
        letter-spacing: -0.01em;
    }

    .motorro-panel__money {
        font-size: 30px !important;
        letter-spacing: -0.04em;
    }

    .motorro-slider-value-floating {
        font-size: 15px;
        padding: 6px 13px;
    }
}

@media (max-width: 360px) {
    .motorro-panel__units {
        gap: 4px;
    }

    .motorro-panel__unit strong {
        font-size: 17px;
    }

    .motorro-panel__money {
        font-size: 26px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .motorro-panel *,
    .motorro-panel *::before,
    .motorro-panel *::after {
        animation: none !important;
        transition: none !important;
    }
}