/*
 *      Popup na zber kontaktov + male okienko pri ponukach
 *      -----------------------------------------------------------------
 *      Vsetko ma prefix .pdp-lead / .pdp-bubble a ziadna trieda temy sa
 *      tu neprepisuje - sablona (style.css) ma 20 000 riadkov a kazdy
 *      zasah do jej tried by sa prejavil na celom webe.
 *
 *      Popup zamerne NEPOUZIVA bootstrap modal - ten by si vyzadoval
 *      bootstrap.min.js, ktory sa nacita az v paticke, a popup by
 *      do toho casu nefungoval.
 *
 *      Farby su prevzate z temy: #dd3d53 (cervena), #222222 (tmava).
 */

:root {
    --pdp-lead-red: #dd3d53;
    --pdp-lead-red-dark: #c22f44;
    --pdp-lead-dark: #222222;
    --pdp-lead-text: #4a4a4a;
    --pdp-lead-muted: #8b8b8b;
    --pdp-lead-line: #e3e3e3;
}

/* zaloha pre prehliadace bez CSS premennych */
@supports not (color: var(--pdp-lead-red)) {
    .pdp-lead__submit,
    .pdp-bubble__tab { background: #dd3d53; }
}


/* =====================================================================
 *  Prekrytie a dialog
 * ===================================================================== */

.pdp-lead {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10500;                 /* nad fixnou hlavickou aj cookie listou */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: 'Open Sans', Arial, sans-serif;
}

.pdp-lead[hidden] { display: none; }

.pdp-lead__backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(20, 20, 20, .72);
    opacity: 0;
    transition: opacity .25s ease;
}

.pdp-lead__dialog {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 760px;
    max-height: calc(100vh - 40px);
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    overflow: hidden;
    opacity: 0;
    transform: translateY(24px) scale(.98);
    transition: opacity .3s ease, transform .3s ease;
}

/* trieda sa prida az po vlozeni do DOM, aby sa animacia naozaj prehrala */
.pdp-lead.is-open .pdp-lead__backdrop { opacity: 1; }
.pdp-lead.is-open .pdp-lead__dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* pouzivatel, ktory si vypol animacie */
@media (prefers-reduced-motion: reduce) {
    .pdp-lead__backdrop,
    .pdp-lead__dialog { transition: none; }
}

/* stranka pod otvorenym popupom sa nescrolluje */
body.pdp-lead-open { overflow: hidden; }


/* =====================================================================
 *  Lavy tmavy stlpec - preco vobec kontakt davat
 * ===================================================================== */

.pdp-lead__aside {
    position: relative;
    flex: 0 0 38%;
    background: var(--pdp-lead-dark);
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 34px 26px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* ked je v pozadi fotka vozidla, text musi ostat citatelny */
.pdp-lead__aside::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(34, 34, 34, .55), rgba(34, 34, 34, .95));
}

.pdp-lead__aside > * { position: relative; }

.pdp-lead__logo {
    width: 128px;
    margin-bottom: auto;
}

.pdp-lead__claim {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    margin: 24px 0 16px;
}

.pdp-lead__points {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .85);
}

.pdp-lead__points li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 9px;
}

.pdp-lead__points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pdp-lead-red);
}


/* =====================================================================
 *  Pravy stlpec - formular
 * ===================================================================== */

.pdp-lead__body {
    flex: 1 1 auto;
    padding: 34px 32px 28px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.pdp-lead__x {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #9a9a9a;
    font-size: 26px;
    line-height: 30px;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
}

.pdp-lead__x:hover {
    background: #f2f2f2;
    color: var(--pdp-lead-dark);
}

.pdp-lead__step-info {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pdp-lead-red);
    font-weight: 600;
    margin-bottom: 8px;
}

.pdp-lead__title {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pdp-lead-dark);
    margin: 0 0 8px;
}

.pdp-lead__text {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--pdp-lead-muted);
    margin: 0 0 20px;
}


/* ---- polia ---- */

.pdp-lead__field { margin-bottom: 14px; }

.pdp-lead__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--pdp-lead-dark);
    margin-bottom: 6px;
}

.pdp-lead__input,
.pdp-lead__select,
.pdp-lead__textarea {
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--pdp-lead-line);
    border-radius: 3px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    color: var(--pdp-lead-text);
    /* 16px na mobile brani iOS Safari, aby pri fokuse priblizil stranku */
    transition: border-color .2s ease, box-shadow .2s ease;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

.pdp-lead__textarea {
    height: 76px;
    padding: 11px 14px;
    resize: vertical;
    line-height: 1.5;
}

.pdp-lead__select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23888' d='M0 0h12L6 8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 34px;
    cursor: pointer;
}

.pdp-lead__input:focus,
.pdp-lead__select:focus,
.pdp-lead__textarea:focus {
    outline: none;
    border-color: var(--pdp-lead-red);
    box-shadow: 0 0 0 3px rgba(221, 61, 83, .12);
}

.pdp-lead__field.has-error .pdp-lead__input,
.pdp-lead__field.has-error .pdp-lead__select {
    border-color: var(--pdp-lead-red);
}

.pdp-lead__error {
    display: none;
    font-size: 12px;
    color: var(--pdp-lead-red);
    margin-top: 5px;
}

.pdp-lead__field.has-error .pdp-lead__error { display: block; }

.pdp-lead__row {
    display: flex;
    gap: 12px;
}

.pdp-lead__row > * { flex: 1 1 0; min-width: 0; }

/* honeypot - pole pre robotov, clovek ho nikdy neuvidi ani netabuje */
.pdp-lead__hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}


/* ---- suhlas ---- */

.pdp-lead__consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--pdp-lead-muted);
    margin: 4px 0 16px;
    cursor: pointer;
}

.pdp-lead__consent input {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    accent-color: #dd3d53;
    cursor: pointer;
}

.pdp-lead__consent a { color: var(--pdp-lead-red); }


/* ---- tlacidla ---- */

.pdp-lead__actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pdp-lead__submit {
    flex: 1 1 auto;
    height: 46px;
    padding: 0 22px;
    border: 0;
    border-radius: 3px;
    background: var(--pdp-lead-red);
    color: #fff;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s ease;
}

.pdp-lead__submit:hover { background: var(--pdp-lead-red-dark); }

.pdp-lead__submit[disabled] {
    opacity: .6;
    cursor: default;
}

.pdp-lead__skip {
    background: none;
    border: 0;
    padding: 0;
    font-size: 12.5px;
    color: var(--pdp-lead-muted);
    text-decoration: underline;
    cursor: pointer;
}

.pdp-lead__skip:hover { color: var(--pdp-lead-dark); }

.pdp-lead__back {
    background: none;
    border: 0;
    padding: 0;
    margin-bottom: 12px;
    font-size: 12.5px;
    color: var(--pdp-lead-muted);
    cursor: pointer;
}

.pdp-lead__back:hover { color: var(--pdp-lead-dark); }


/* ---- kroky ---- */

.pdp-lead__step[hidden] { display: none; }

.pdp-lead__done {
    text-align: center;
    padding: 20px 0 10px;
}

.pdp-lead__done-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(76, 175, 80, .12);
    color: #4CAF50;
    font-size: 30px;
    line-height: 62px;
}

.pdp-lead__phone-out {
    display: inline-block;
    margin-top: 14px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--pdp-lead-dark);
}


/* =====================================================================
 *  Mobil - dialog sa meni na spodny panel
 * ===================================================================== */

@media (max-width: 767px) {

    .pdp-lead {
        padding: 0;
        align-items: flex-end;
    }

    .pdp-lead__dialog {
        max-width: none;
        max-height: 92vh;
        border-radius: 6px 6px 0 0;
        transform: translateY(100%);
    }

    .pdp-lead.is-open .pdp-lead__dialog { transform: translateY(0); }

    /* tmavy stlpec by na mobile zabral pol obrazovky */
    .pdp-lead__aside { display: none; }

    .pdp-lead__body { padding: 30px 20px 24px; }

    .pdp-lead__title { font-size: 18px; }

    /* pod 16px iOS Safari pri fokuse priblizi stranku a uz sa neoddiali */
    .pdp-lead__input,
    .pdp-lead__select,
    .pdp-lead__textarea { font-size: 16px; }

    .pdp-lead__row { flex-direction: column; gap: 0; }
}


/* =====================================================================
 *  Male okienko pri ponukach
 * ===================================================================== */

.pdp-bubble {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 10400;                 /* pod popupom, nad obsahom */
    width: 320px;
    max-width: calc(100vw - 32px);
    font-family: 'Open Sans', Arial, sans-serif;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .3s ease, transform .3s ease;
}

.pdp-bubble[hidden] { display: none; }
.pdp-bubble.is-in { opacity: 1; transform: translateY(0); }

.pdp-bubble__tab {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 13px 16px;
    border: 0;
    border-radius: 3px;
    background: var(--pdp-lead-red);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: background .2s ease;
}

.pdp-bubble__tab:hover { background: var(--pdp-lead-red-dark); }

.pdp-bubble__tab i { font-size: 17px; }

.pdp-bubble__panel {
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
    padding: 20px 18px 18px;
    position: relative;
}

.pdp-bubble__panel[hidden],
.pdp-bubble__tab[hidden] { display: none; }

.pdp-bubble__title {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--pdp-lead-dark);
    margin: 0 24px 6px 0;
}

.pdp-bubble__text {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--pdp-lead-muted);
    margin: 0 0 14px;
}

.pdp-bubble__x {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #aaa;
    font-size: 22px;
    line-height: 26px;
    cursor: pointer;
}

.pdp-bubble__x:hover { color: var(--pdp-lead-dark); }

/* zbaleny stav - iba ikonka v rohu, uz nezavadzia */
.pdp-bubble.is-mini { width: auto; }

.pdp-bubble.is-mini .pdp-bubble__tab {
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
}

.pdp-bubble.is-mini .pdp-bubble__tab span { display: none; }

@media (max-width: 767px) {

    .pdp-bubble {
        right: 12px;
        bottom: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }

    .pdp-bubble.is-mini {
        left: auto;
        width: auto;
    }
}