.jpp-pay-app{
    --jpp-blue:#214fbd;
    --jpp-bg:#f4f8ff;
    --jpp-border:#cfd9e8;
    max-width:520px;
    margin:30px auto;
    padding:26px;
    color:#13213a;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.jpp-pay-app *{box-sizing:border-box}
.jpp-pay-brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:22px}
.jpp-pay-brand-mark{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#2f7bff,#1746ad);color:#fff;display:grid;place-items:center;font-size:26px;font-weight:800;box-shadow:0 8px 20px rgba(33,79,189,.22)}
.jpp-pay-brand strong,.jpp-pay-brand span{display:block}
.jpp-pay-brand strong{font-size:15px}.jpp-pay-brand span{font-size:12px;color:#667085;margin-top:2px}
.jpp-pay-heading{text-align:center;margin-bottom:26px}
.jpp-pay-heading h2{margin:0;font-size:30px;color:#0b1324}
.jpp-pay-heading p{margin:7px 0 0;color:#51617d;font-size:17px}
.jpp-zone-card{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--jpp-border);border-radius:15px;padding:20px;box-shadow:0 4px 12px rgba(15,23,42,.08);margin-bottom:28px}
.jpp-zone-left{display:flex;align-items:center;gap:16px}
.jpp-zone-left span{font-size:12px;letter-spacing:2px;color:#2b5ea8;font-weight:800;border-right:2px solid #f5a623;padding-right:16px}
.jpp-zone-left strong{font-size:38px;line-height:1;color:#0f2f65}
.jpp-zone-price{text-align:right}.jpp-zone-price strong{display:block;font-size:30px;line-height:1;color:#0f2f65}.jpp-zone-price span{display:block;margin-top:5px;color:#475467}
.jpp-field{margin-bottom:22px}.jpp-field label{display:block;font-weight:700;margin-bottom:9px;font-size:16px}.jpp-field label span{color:#e5484d}
.jpp-field input,.jpp-field select{width:100%;height:56px;border:1px solid var(--jpp-border);border-radius:12px;background:#fff;padding:0 15px;font-size:18px;outline:none}
.jpp-field input:focus,.jpp-field select:focus{border-color:var(--jpp-blue);box-shadow:0 0 0 3px rgba(33,79,189,.11)}
.jpp-duration-label{font-weight:700;margin:8px 0 10px}
.jpp-duration-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.jpp-duration-tabs button{height:46px;border:1px solid var(--jpp-border);border-radius:11px;background:#fff;font-weight:700;color:#44506a;cursor:pointer}
.jpp-duration-tabs button.is-active{border:2px solid var(--jpp-blue);background:#edf3ff;color:var(--jpp-blue)}
.jpp-counter{height:82px;border:1px solid var(--jpp-border);border-radius:13px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.jpp-counter button{width:48px;height:48px;border-radius:50%;border:1px solid var(--jpp-border);background:#fff;color:var(--jpp-blue);font-size:28px;cursor:pointer}
.jpp-counter>div{text-align:center}.jpp-counter strong{display:block;font-size:30px;color:var(--jpp-blue)}.jpp-counter span{display:block;color:#475467;font-size:13px}
.jpp-valid-until{text-align:center;font-size:12px;color:#667085;margin:12px 0 20px}
.jpp-total-box{display:flex;align-items:center;justify-content:space-between;padding:18px;background:#eef3ff;border:1px solid #c9d6ef;border-radius:12px;margin-bottom:28px;font-weight:700}
.jpp-total-box strong{font-size:25px;color:var(--jpp-blue)}
.jpp-pay-method-title{text-align:center;font-weight:700;margin-bottom:14px}
.jpp-method-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.jpp-method-card{min-height:165px;border:1px solid var(--jpp-border);border-radius:14px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:#0b1324;cursor:pointer;padding:18px;box-shadow:0 3px 9px rgba(15,23,42,.05)}
.jpp-method-card:hover{border-color:var(--jpp-blue);transform:translateY(-1px)}
.jpp-method-card .dashicons{width:52px;height:52px;border-radius:50%;background:#edf3ff;color:var(--jpp-blue);display:grid;place-items:center;font-size:27px;margin-bottom:14px}
.jpp-method-card strong{font-size:18px}.jpp-method-card small{margin-top:7px;text-align:center;color:#667085;line-height:1.4}
.jpp-pay-notice{margin-top:15px;padding:13px;border-radius:10px;background:#fff6df;border:1px solid #f5d98b;color:#7a5200}
.jpp-pay-empty{max-width:520px;margin:30px auto;padding:20px;background:#fff;border:1px solid #ddd}
@media(max-width:600px){
    .jpp-pay-app{padding:16px;margin:10px auto}
    .jpp-pay-heading h2{font-size:26px}
    .jpp-zone-left strong{font-size:32px}
    .jpp-method-grid{grid-template-columns:1fr}
}

.jpp-method-card em{
    display:block;
    margin-top:10px;
    font-size:11px;
    line-height:1.35;
    font-style:normal;
    color:#667085;
    word-break:break-word;
}


/* v0.3 - еден QR код, избор на зона */
.jpp-zone-picker{
    margin-bottom:24px;
    padding:18px;
    background:#fff;
    border:1px solid var(--jpp-border);
    border-radius:15px;
    box-shadow:0 4px 12px rgba(15,23,42,.06);
}
.jpp-zone-picker.is-collapsed{display:none}
.jpp-zone-picker-title{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
}
.jpp-zone-picker-title strong,
.jpp-zone-picker-title small{display:block}
.jpp-zone-picker-title strong{font-size:17px;color:#0b1324}
.jpp-zone-picker-title small{margin-top:3px;color:#667085;font-size:12px}
.jpp-step-badge{
    width:34px;
    height:34px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#eaf1ff;
    color:var(--jpp-blue);
    font-weight:800;
    flex:none;
}
.jpp-zone-options{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}
.jpp-zone-option{
    appearance:none;
    -webkit-appearance:none;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    min-height:104px;
    padding:14px;
    border:1px solid var(--jpp-border);
    border-radius:12px;
    background:#fff;
    cursor:pointer;
    text-align:left;
    transition:.18s ease;
}
.jpp-zone-option:hover{
    border-color:var(--jpp-blue);
    transform:translateY(-1px);
    box-shadow:0 5px 14px rgba(33,79,189,.09);
}
.jpp-zone-option.is-active{
    border:2px solid var(--jpp-blue);
    background:#eef4ff;
}
.jpp-zone-option-code{
    font-size:25px;
    line-height:1;
    font-weight:800;
    color:#123d86;
}
.jpp-zone-option-name{
    margin-top:7px;
    font-size:13px;
    color:#344054;
}
.jpp-zone-option-price{
    margin-top:auto;
    padding-top:8px;
    font-size:12px;
    color:#667085;
    font-weight:600;
}
.jpp-zone-card-actions{
    display:flex;
    align-items:center;
    gap:18px;
}
.jpp-change-zone{
    border:0;
    background:transparent;
    color:var(--jpp-blue);
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    padding:4px 0;
    text-decoration:underline;
}
.jpp-payment-details.is-hidden,
.jpp-zone-card.is-hidden{display:none}
@media(max-width:600px){
    .jpp-zone-options{grid-template-columns:1fr 1fr}
    .jpp-zone-option{min-height:96px}
}


/* =========================================================
   v0.4 - редизајн на изборот за плаќање
   ========================================================= */

.jpp-pay-app .jpp-pay-method-title{
    margin:30px 0 14px !important;
    text-align:left !important;
    font-size:16px !important;
    line-height:1.3 !important;
    font-weight:750 !important;
    color:#101828 !important;
}

.jpp-pay-app .jpp-method-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important;
    align-items:stretch !important;
}

.jpp-pay-app .jpp-method-card,
.jpp-pay-app button.jpp-method-card,
.jpp-pay-app a.jpp-method-card{
    -webkit-appearance:none !important;
    appearance:none !important;
    position:relative !important;
    width:100% !important;
    min-width:0 !important;
    min-height:178px !important;
    margin:0 !important;
    padding:20px 18px 18px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:0 !important;

    border:1px solid #d6deeb !important;
    border-radius:16px !important;
    background:#ffffff !important;
    box-shadow:0 4px 14px rgba(15,23,42,.055) !important;

    color:#101828 !important;
    text-decoration:none !important;
    text-align:left !important;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
    cursor:pointer !important;
    overflow:hidden !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        background .18s ease !important;
}

.jpp-pay-app .jpp-method-card:hover,
.jpp-pay-app button.jpp-method-card:hover,
.jpp-pay-app a.jpp-method-card:hover{
    transform:translateY(-3px) !important;
    border-color:#8fb0f2 !important;
    background:#fbfdff !important;
    box-shadow:0 12px 28px rgba(33,79,189,.12) !important;
    color:#101828 !important;
    text-decoration:none !important;
}

.jpp-pay-app .jpp-method-card:focus,
.jpp-pay-app .jpp-method-card:focus-visible{
    outline:none !important;
    border-color:#214fbd !important;
    box-shadow:0 0 0 3px rgba(33,79,189,.13),0 10px 24px rgba(33,79,189,.10) !important;
}

.jpp-pay-app .jpp-method-icon{
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    border-radius:50% !important;
    display:grid !important;
    place-items:center !important;
    margin:0 0 16px 0 !important;
}

.jpp-pay-app .jpp-method-card-online .jpp-method-icon{
    background:#eaf1ff !important;
    color:#214fbd !important;
}

.jpp-pay-app .jpp-method-card-sms .jpp-method-icon{
    background:#e7f9ef !important;
    color:#079455 !important;
}

.jpp-pay-app .jpp-method-icon .dashicons{
    width:26px !important;
    height:26px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:inherit !important;
    font-size:26px !important;
    line-height:26px !important;
    display:block !important;
}

.jpp-pay-app .jpp-method-copy{
    display:block !important;
    width:100% !important;
    padding-right:28px !important;
}

.jpp-pay-app .jpp-method-copy strong{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    color:#101828 !important;
    font-size:18px !important;
    line-height:1.3 !important;
    font-weight:750 !important;
    text-decoration:none !important;
}

.jpp-pay-app .jpp-method-copy small{
    display:block !important;
    margin:7px 0 0 !important;
    padding:0 !important;
    color:#667085 !important;
    font-size:12px !important;
    line-height:1.45 !important;
    font-weight:400 !important;
    text-align:left !important;
    text-decoration:none !important;
}

.jpp-pay-app .jpp-method-copy em{
    display:inline-block !important;
    max-width:100% !important;
    margin:12px 0 0 !important;
    padding:5px 8px !important;
    border-radius:7px !important;
    background:#f2f4f7 !important;
    color:#475467 !important;
    font-size:10px !important;
    line-height:1.35 !important;
    font-style:normal !important;
    font-weight:500 !important;
    word-break:break-word !important;
    text-decoration:none !important;
}

.jpp-pay-app .jpp-method-arrow{
    position:absolute !important;
    right:16px !important;
    bottom:15px !important;
    color:#98a2b3 !important;
    font-size:22px !important;
    line-height:1 !important;
    font-weight:500 !important;
    transition:transform .18s ease,color .18s ease !important;
}

.jpp-pay-app .jpp-method-card:hover .jpp-method-arrow{
    transform:translateX(3px) !important;
    color:#214fbd !important;
}

.jpp-pay-app .jpp-method-card-sms:hover .jpp-method-arrow{
    color:#079455 !important;
}

.jpp-pay-app .jpp-pay-notice{
    margin-top:14px !important;
    padding:12px 14px !important;
    border:1px solid #f2cc60 !important;
    border-radius:10px !important;
    background:#fff9e8 !important;
    color:#7a5200 !important;
    font-size:12px !important;
    line-height:1.45 !important;
}

/* Ја неутрализира црвената рамка/текст што може да ги додава темата */
.jpp-pay-app #jpp-card-payment,
.jpp-pay-app #jpp-card-payment:hover,
.jpp-pay-app #jpp-card-payment:active{
    border-color:#d6deeb !important;
    color:#101828 !important;
}

.jpp-pay-app #jpp-card-payment:hover{
    border-color:#8fb0f2 !important;
}

/* Мобилен изглед */
@media(max-width:600px){
    .jpp-pay-app .jpp-method-grid{
        grid-template-columns:1fr !important;
        gap:12px !important;
    }

    .jpp-pay-app .jpp-method-card,
    .jpp-pay-app button.jpp-method-card,
    .jpp-pay-app a.jpp-method-card{
        min-height:128px !important;
        padding:16px !important;
        display:grid !important;
        grid-template-columns:50px minmax(0,1fr) 24px !important;
        grid-template-rows:auto !important;
        column-gap:14px !important;
        align-items:center !important;
    }

    .jpp-pay-app .jpp-method-icon{
        width:50px !important;
        height:50px !important;
        min-width:50px !important;
        margin:0 !important;
        grid-column:1 !important;
    }

    .jpp-pay-app .jpp-method-copy{
        grid-column:2 !important;
        padding-right:0 !important;
    }

    .jpp-pay-app .jpp-method-arrow{
        position:static !important;
        grid-column:3 !important;
        justify-self:end !important;
        align-self:center !important;
    }

    .jpp-pay-app .jpp-method-copy em{
        margin-top:8px !important;
    }
}


/* =========================================================
   v0.5 - Мои возила + card icon
   ========================================================= */

.jpp-pay-app .jpp-my-vehicles{
    margin:-4px 0 24px;
}

.jpp-pay-app .jpp-my-vehicles-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}

.jpp-pay-app .jpp-my-vehicles-head strong,
.jpp-pay-app .jpp-my-vehicles-head small{
    display:block;
}

.jpp-pay-app .jpp-my-vehicles-head strong{
    font-size:14px;
    color:#344054;
}

.jpp-pay-app .jpp-my-vehicles-head small{
    margin-top:2px;
    font-size:11px;
    color:#98a2b3;
}

.jpp-pay-app .jpp-save-vehicle{
    appearance:none;
    border:1px solid #cfd9e8;
    border-radius:999px;
    background:#fff;
    color:#214fbd;
    padding:7px 11px;
    font-size:12px;
    line-height:1;
    font-weight:700;
    cursor:pointer;
    transition:.18s ease;
}

.jpp-pay-app .jpp-save-vehicle:hover{
    border-color:#214fbd;
    background:#eef4ff;
}

.jpp-pay-app .jpp-vehicle-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.jpp-pay-app .jpp-vehicle-empty{
    width:100%;
    padding:11px 12px;
    border:1px dashed #d7deea;
    border-radius:10px;
    color:#98a2b3;
    background:#fafbfc;
    font-size:12px;
}

.jpp-pay-app .jpp-vehicle-chip{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:38px;
    padding:8px 34px 8px 12px;
    border:1px solid #d7deea;
    border-radius:10px;
    background:#fff;
    color:#344054;
    cursor:pointer;
    transition:.18s ease;
}

.jpp-pay-app .jpp-vehicle-chip:hover{
    border-color:#8fb0f2;
    background:#f8fbff;
}

.jpp-pay-app .jpp-vehicle-chip.is-active{
    border-color:#214fbd;
    background:#edf3ff;
    color:#123d86;
    box-shadow:0 0 0 2px rgba(33,79,189,.08);
}

.jpp-pay-app .jpp-vehicle-chip .jpp-vehicle-plate{
    font-size:13px;
    font-weight:800;
    letter-spacing:.35px;
}

.jpp-pay-app .jpp-vehicle-chip .jpp-vehicle-remove{
    position:absolute;
    top:50%;
    right:8px;
    transform:translateY(-50%);
    width:20px;
    height:20px;
    border:0;
    border-radius:50%;
    background:transparent;
    color:#98a2b3;
    font-size:16px;
    line-height:20px;
    cursor:pointer;
    padding:0;
}

.jpp-pay-app .jpp-vehicle-chip .jpp-vehicle-remove:hover{
    background:#ffe9ea;
    color:#e5484d;
}

/* Поинаква card-like икона за online payment */
.jpp-pay-app .jpp-method-card-online .jpp-method-icon .dashicons{
    transform:scaleX(1.08);
}

@media(max-width:600px){
    .jpp-pay-app .jpp-my-vehicles-head{
        align-items:flex-start;
    }

    .jpp-pay-app .jpp-save-vehicle{
        white-space:nowrap;
    }

    .jpp-pay-app .jpp-vehicle-list{
        gap:7px;
    }

    .jpp-pay-app .jpp-vehicle-chip{
        min-height:40px;
    }
}


/* =========================================================
   v0.7 - One-page mobile payment UX
   ========================================================= */

.jpp-pay-app{
    max-width:560px;
}

.jpp-pay-app .jpp-field input#jpp-registration{
    height:62px;
    font-size:21px;
    font-weight:650;
    letter-spacing:.8px;
    border:1.5px solid #cbd5e1;
    box-shadow:0 2px 5px rgba(15,23,42,.035);
    transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.jpp-pay-app .jpp-field input#jpp-registration:focus{
    border-color:#214fbd;
    box-shadow:0 0 0 4px rgba(33,79,189,.10);
}

.jpp-pay-app .jpp-field input#jpp-registration.has-error{
    border-color:#e5484d !important;
    box-shadow:0 0 0 4px rgba(229,72,77,.10) !important;
    animation:jppInputShake .24s linear;
}

@keyframes jppInputShake{
    0%,100%{transform:translateX(0)}
    25%{transform:translateX(-4px)}
    75%{transform:translateX(4px)}
}

.jpp-pay-app .jpp-my-vehicles{
    margin-top:2px;
    padding:14px;
    border-radius:14px;
    background:#f8fafc;
    border:1px solid #e7ecf3;
}

.jpp-pay-app .jpp-my-vehicles-head{
    margin-bottom:12px;
}

.jpp-pay-app .jpp-my-vehicles-head strong{
    color:#101828;
    font-size:15px;
}

.jpp-pay-app .jpp-save-vehicle{
    min-height:34px;
    padding:7px 12px;
    border-color:#c9d6ef;
    background:#fff;
}

.jpp-pay-app .jpp-vehicle-chip{
    min-height:43px;
    padding:8px 56px 8px 10px;
    gap:7px;
    border-radius:11px;
    box-shadow:0 1px 2px rgba(15,23,42,.03);
}

.jpp-pay-app .jpp-vehicle-car{
    font-size:15px;
    filter:saturate(.8);
}

.jpp-pay-app .jpp-vehicle-check{
    display:none;
    position:absolute;
    right:31px;
    top:50%;
    transform:translateY(-50%);
    color:#079455;
    font-size:14px;
    font-weight:900;
}

.jpp-pay-app .jpp-vehicle-chip.is-active .jpp-vehicle-check{
    display:block;
}

.jpp-pay-app .jpp-vehicle-chip.is-active{
    border-color:#214fbd;
    background:#edf4ff;
    color:#123d86;
}

.jpp-pay-app .jpp-vehicle-empty{
    background:#fff;
    border-color:#dde4ee;
    color:#7b879b;
}

.jpp-pay-app .jpp-counter{
    height:86px;
    box-shadow:0 2px 7px rgba(15,23,42,.04);
}

.jpp-pay-app .jpp-counter button{
    width:50px;
    height:50px;
    font-size:27px;
    background:#f8fbff;
}

.jpp-pay-app .jpp-counter strong{
    font-size:32px;
}

.jpp-pay-app .jpp-total-box-pro{
    margin-top:18px;
    margin-bottom:28px;
    padding:18px 19px;
    background:linear-gradient(135deg,#f1f5ff 0%,#eef4ff 100%);
    border:1px solid #c9d6ef;
    border-radius:14px;
    box-shadow:0 5px 15px rgba(33,79,189,.07);
}

.jpp-pay-app .jpp-total-meta{
    min-width:0;
}

.jpp-pay-app .jpp-total-meta>span{
    display:block;
    color:#344054;
    font-size:14px;
    font-weight:750;
}

.jpp-pay-app .jpp-total-meta>small{
    display:block;
    margin-top:5px;
    color:#667085;
    font-size:11px;
    line-height:1.35;
    font-weight:500;
}

.jpp-pay-app .jpp-total-box-pro>strong{
    white-space:nowrap;
    font-size:27px;
}

.jpp-pay-app .jpp-pay-method-title{
    text-align:center !important;
    margin:30px 0 14px !important;
}

.jpp-pay-app .jpp-method-grid{
    grid-template-columns:1fr 1fr !important;
    gap:14px !important;
}

.jpp-pay-app .jpp-method-card{
    min-height:190px !important;
    border-radius:18px !important;
    padding:20px !important;
}

.jpp-pay-app .jpp-method-card-online{
    border-color:#ccdaf4 !important;
}

.jpp-pay-app .jpp-method-card-sms{
    border-color:#ccebdd !important;
}

.jpp-pay-app .jpp-method-card-online:hover{
    border-color:#6f9be8 !important;
    background:#f8fbff !important;
}

.jpp-pay-app .jpp-method-card-sms:hover{
    border-color:#65c59b !important;
    background:#f7fffb !important;
}

.jpp-pay-app .jpp-method-icon{
    width:58px !important;
    height:58px !important;
    margin-bottom:17px !important;
}

.jpp-pay-app .jpp-card-svg-icon svg{
    display:block;
}

.jpp-pay-app .jpp-method-copy strong{
    font-size:19px !important;
}

.jpp-pay-app .jpp-method-copy small{
    font-size:12.5px !important;
}

.jpp-pay-app .jpp-method-copy em{
    margin-top:12px !important;
    background:#f2f4f7 !important;
    border:1px solid #eaecf0 !important;
}

.jpp-pay-app .jpp-method-arrow{
    width:30px;
    height:30px;
    display:grid !important;
    place-items:center;
    border-radius:50%;
    background:#f2f4f7;
    font-size:18px !important;
}

.jpp-pay-app .jpp-method-card-online:hover .jpp-method-arrow{
    background:#e8f1ff;
}

.jpp-pay-app .jpp-method-card-sms:hover .jpp-method-arrow{
    background:#e7f9ef;
}

.jpp-pay-app .jpp-method-card.is-loading{
    align-items:center !important;
    justify-content:center !important;
    cursor:wait !important;
    opacity:.92;
}

.jpp-pay-app .jpp-button-loader{
    width:25px;
    height:25px;
    border:3px solid #d6e1f7;
    border-top-color:#214fbd;
    border-radius:50%;
    animation:jppSpin .65s linear infinite;
    margin-bottom:10px;
}

.jpp-pay-app .jpp-loading-text{
    color:#214fbd;
    font-size:13px;
    font-weight:750;
}

@keyframes jppSpin{
    to{transform:rotate(360deg)}
}

.jpp-pay-app .jpp-pay-notice{
    margin-top:15px !important;
}

.jpp-pay-app .jpp-pay-notice.is-success{
    background:#ecfdf3 !important;
    border-color:#a6e6c6 !important;
    color:#067647 !important;
}

@media(max-width:600px){
    .jpp-pay-app{
        max-width:none;
        width:100%;
        margin:0 auto;
        padding:14px 14px 26px;
    }

    .jpp-pay-app .jpp-zone-card{
        margin-bottom:22px;
    }

    .jpp-pay-app .jpp-field input#jpp-registration{
        height:58px;
        font-size:19px;
    }

    .jpp-pay-app .jpp-my-vehicles{
        padding:12px;
    }

    .jpp-pay-app .jpp-my-vehicles-head{
        gap:8px;
    }

    .jpp-pay-app .jpp-my-vehicles-head small{
        max-width:210px;
    }

    .jpp-pay-app .jpp-method-grid{
        grid-template-columns:1fr !important;
        gap:11px !important;
    }

    .jpp-pay-app .jpp-method-card{
        min-height:122px !important;
        padding:15px 16px !important;
        display:grid !important;
        grid-template-columns:54px minmax(0,1fr) 34px !important;
        align-items:center !important;
        column-gap:13px !important;
    }

    .jpp-pay-app .jpp-method-icon{
        margin:0 !important;
        width:52px !important;
        height:52px !important;
    }

    .jpp-pay-app .jpp-method-copy strong{
        font-size:17px !important;
    }

    .jpp-pay-app .jpp-method-copy small{
        margin-top:4px !important;
    }

    .jpp-pay-app .jpp-method-copy em{
        margin-top:7px !important;
        font-size:9.5px !important;
    }

    .jpp-pay-app .jpp-method-arrow{
        position:static !important;
        justify-self:end !important;
    }

    .jpp-pay-app .jpp-total-box-pro{
        position:relative;
        margin-top:16px;
        padding:16px;
    }

    .jpp-pay-app .jpp-total-box-pro>strong{
        font-size:24px;
    }
}


/* v0.8 - Мои возила како autocomplete dropdown */
.jpp-pay-app .jpp-registration-field{position:relative;margin-bottom:24px}
.jpp-pay-app .jpp-registration-combobox{position:relative;z-index:30}
.jpp-pay-app .jpp-registration-input-wrap{position:relative;display:flex;align-items:center}
.jpp-pay-app .jpp-registration-car-icon{position:absolute;left:17px;top:50%;transform:translateY(-50%);z-index:2;font-size:18px;pointer-events:none}
.jpp-pay-app .jpp-registration-input-wrap #jpp-registration{width:100%;padding-left:50px!important;padding-right:50px!important}
.jpp-pay-app .jpp-registration-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:9px;background:transparent;color:#667085;cursor:pointer;font-size:22px;line-height:1}
.jpp-pay-app .jpp-registration-toggle:hover{background:#f2f4f7;color:#214fbd}
.jpp-pay-app .jpp-registration-helper{margin-top:7px;color:#98a2b3;font-size:11px;line-height:1.4}
.jpp-pay-app .jpp-vehicle-dropdown[hidden]{display:none!important}
.jpp-pay-app .jpp-vehicle-dropdown{position:absolute;left:0;right:0;top:calc(100% + 7px);z-index:100;overflow:hidden;border:1px solid #cfd9e8;border-radius:14px;background:#fff;box-shadow:0 18px 45px rgba(15,23,42,.14),0 4px 12px rgba(15,23,42,.07);animation:jppDropdownOpen .14s ease}
@keyframes jppDropdownOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.jpp-pay-app .jpp-vehicle-dropdown-head{padding:13px 15px 10px;border-bottom:1px solid #eef1f5;background:#fafbfc}
.jpp-pay-app .jpp-vehicle-dropdown-head strong,.jpp-pay-app .jpp-vehicle-dropdown-head small{display:block}
.jpp-pay-app .jpp-vehicle-dropdown-head strong{color:#101828;font-size:13px;font-weight:800}
.jpp-pay-app .jpp-vehicle-dropdown-head small{margin-top:2px;color:#98a2b3;font-size:10px}
.jpp-pay-app .jpp-vehicle-dropdown-list{max-height:236px;overflow-y:auto;padding:5px}
.jpp-pay-app .jpp-vehicle-dropdown-row{display:grid;grid-template-columns:minmax(0,1fr) 38px;align-items:center;gap:3px;min-height:51px;border-radius:9px}
.jpp-pay-app .jpp-vehicle-dropdown-row:hover,.jpp-pay-app .jpp-vehicle-dropdown-row.is-active{background:#f1f6ff}
.jpp-pay-app .jpp-vehicle-dropdown-select{appearance:none;width:100%;min-width:0;height:49px;margin:0;padding:0 8px 0 10px;display:grid;grid-template-columns:28px minmax(0,1fr) 24px;align-items:center;gap:7px;border:0;background:transparent;color:#344054;text-align:left;cursor:pointer}
.jpp-pay-app .jpp-vehicle-dropdown-select strong{overflow:hidden;color:#1d2939;font-size:15px;font-weight:800;letter-spacing:.45px;white-space:nowrap;text-overflow:ellipsis}
.jpp-pay-app .jpp-dropdown-car{font-size:16px}
.jpp-pay-app .jpp-dropdown-check{color:#079455;font-size:16px;font-weight:900;text-align:center}
.jpp-pay-app .jpp-vehicle-dropdown-remove{appearance:none;width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#98a2b3;cursor:pointer;font-size:19px;line-height:1}
.jpp-pay-app .jpp-vehicle-dropdown-remove:hover{background:#ffe9ea;color:#e5484d}
.jpp-pay-app .jpp-vehicle-dropdown-empty{padding:18px 15px;text-align:center}
.jpp-pay-app .jpp-vehicle-dropdown-empty strong,.jpp-pay-app .jpp-vehicle-dropdown-empty span{display:block}
.jpp-pay-app .jpp-vehicle-dropdown-empty strong{color:#344054;font-size:13px}
.jpp-pay-app .jpp-vehicle-dropdown-empty span{margin-top:5px;color:#98a2b3;font-size:11px;line-height:1.4}
.jpp-pay-app .jpp-save-current-vehicle{appearance:none;width:100%;min-height:45px;display:flex;align-items:center;justify-content:flex-start;gap:7px;padding:0 15px;border:0;border-top:1px solid #eef1f5;background:#fafbfc;color:#214fbd;font-size:12px;font-weight:800;cursor:pointer;text-align:left}
.jpp-pay-app .jpp-save-current-vehicle:hover{background:#eef4ff}
.jpp-pay-app .jpp-my-vehicles{display:none!important}
@media(max-width:600px){
    .jpp-pay-app .jpp-registration-input-wrap #jpp-registration{padding-left:47px!important;padding-right:47px!important}
    .jpp-pay-app .jpp-vehicle-dropdown{left:-2px;right:-2px;border-radius:12px}
    .jpp-pay-app .jpp-vehicle-dropdown-list{max-height:220px}
}


/* =========================================================
   v0.9 - Clean saved-vehicle selector + reliable SMS SVG
   ========================================================= */

/* Полето повторно е чисто поле за внесување табличка */
.jpp-pay-app .jpp-registration-input-wrap,
.jpp-pay-app .jpp-registration-car-icon,
.jpp-pay-app .jpp-registration-helper{
    display:none !important;
}

.jpp-pay-app .jpp-registration-field #jpp-registration{
    width:100% !important;
    padding-left:17px !important;
    padding-right:17px !important;
}

/* Посебно копче „Избери зачувано возило“ */
.jpp-pay-app .jpp-saved-vehicles-control{
    position:relative;
    margin-top:10px;
}

.jpp-pay-app .jpp-saved-vehicles-button{
    appearance:none !important;
    width:100% !important;
    min-height:58px !important;
    display:grid !important;
    grid-template-columns:38px minmax(0,1fr) 28px !important;
    align-items:center !important;
    gap:10px !important;
    padding:9px 12px !important;
    border:1px solid #d7deea !important;
    border-radius:12px !important;
    background:#fff !important;
    color:#344054 !important;
    text-align:left !important;
    cursor:pointer !important;
    box-shadow:0 2px 7px rgba(15,23,42,.035) !important;
    transition:.18s ease !important;
}

.jpp-pay-app .jpp-saved-vehicles-button:hover,
.jpp-pay-app .jpp-saved-vehicles-button.is-open{
    border-color:#8fb0f2 !important;
    background:#f8fbff !important;
    box-shadow:0 0 0 3px rgba(33,79,189,.07) !important;
}

.jpp-pay-app .jpp-saved-vehicle-button-icon{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#eef4ff;
    color:#214fbd;
}

.jpp-pay-app .jpp-saved-vehicle-button-icon svg{
    display:block;
}

.jpp-pay-app .jpp-saved-vehicle-button-text{
    min-width:0;
}

.jpp-pay-app .jpp-saved-vehicle-button-text strong,
.jpp-pay-app .jpp-saved-vehicle-button-text small{
    display:block;
}

.jpp-pay-app .jpp-saved-vehicle-button-text strong{
    color:#1d2939;
    font-size:13px;
    font-weight:800;
}

.jpp-pay-app .jpp-saved-vehicle-button-text small{
    margin-top:3px;
    color:#98a2b3;
    font-size:10.5px;
}

.jpp-pay-app .jpp-saved-vehicle-chevron{
    justify-self:end;
    color:#667085;
    font-size:20px;
    transition:transform .18s ease;
}

.jpp-pay-app .jpp-saved-vehicles-button.is-open .jpp-saved-vehicle-chevron{
    transform:rotate(180deg);
}

/* Панелот сега визуелно е листа/selector, не второ input поле */
.jpp-pay-app .jpp-vehicle-selector-panel{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:calc(100% + 7px) !important;
    z-index:100 !important;
    border:1px solid #d7deea !important;
    border-radius:14px !important;
    background:#fff !important;
    box-shadow:0 16px 38px rgba(15,23,42,.13) !important;
}

.jpp-pay-app .jpp-vehicle-dropdown-row{
    grid-template-columns:minmax(0,1fr) 36px !important;
    min-height:60px !important;
    margin:2px 0 !important;
}

.jpp-pay-app .jpp-vehicle-dropdown-select{
    height:58px !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    padding:7px 10px !important;
}

.jpp-pay-app .jpp-vehicle-plate-block small,
.jpp-pay-app .jpp-vehicle-plate-block strong{
    display:block;
}

.jpp-pay-app .jpp-vehicle-plate-block small{
    color:#98a2b3;
    font-size:9.5px;
    font-weight:600;
    margin-bottom:2px;
}

.jpp-pay-app .jpp-vehicle-plate-block strong{
    color:#1d2939;
    font-size:15px;
    font-weight:800;
    letter-spacing:.45px;
}

.jpp-pay-app .jpp-dropdown-check{
    min-width:46px;
    padding:5px 7px;
    border-radius:999px;
    background:#f2f4f7;
    color:#667085;
    font-size:10px !important;
    font-weight:800 !important;
}

.jpp-pay-app .jpp-vehicle-dropdown-row.is-active .jpp-dropdown-check{
    background:#e7f8ef;
    color:#079455;
}

/* SMS SVG - работи и кога Dashicons не се вчитани на мобилен */
.jpp-pay-app .jpp-sms-svg-icon svg{
    display:block !important;
    width:29px !important;
    height:29px !important;
}

.jpp-pay-app .jpp-method-card-sms .jpp-method-icon{
    background:#e7f9ef !important;
    color:#079455 !important;
}

@media(max-width:600px){
    .jpp-pay-app .jpp-saved-vehicles-button{
        min-height:56px !important;
    }

    .jpp-pay-app .jpp-vehicle-selector-panel{
        left:0 !important;
        right:0 !important;
    }

    .jpp-pay-app .jpp-method-card-sms .jpp-method-icon{
        display:grid !important;
        opacity:1 !important;
        visibility:visible !important;
    }
}


/* =========================================================
   v1.0 - Различен flow за SMS и картичка
   ========================================================= */

.jpp-pay-app .jpp-method-card.is-selected{
    transform:translateY(-2px) !important;
}

.jpp-pay-app .jpp-method-card-online.is-selected{
    border-color:#214fbd !important;
    background:#f4f8ff !important;
    box-shadow:0 0 0 3px rgba(33,79,189,.09),0 10px 24px rgba(33,79,189,.10) !important;
}

.jpp-pay-app .jpp-method-card-sms.is-selected{
    border-color:#12a66a !important;
    background:#f3fff8 !important;
    box-shadow:0 0 0 3px rgba(18,166,106,.08),0 10px 24px rgba(18,166,106,.09) !important;
}

.jpp-pay-app .jpp-sms-stop-note{
    display:block;
    margin-top:9px;
    padding:7px 9px;
    border-radius:8px;
    background:#ecfdf3;
    color:#067647;
    font-size:10px;
    line-height:1.35;
    font-weight:650;
}

.jpp-pay-app .jpp-card-payment-panel[hidden]{
    display:none !important;
}

.jpp-pay-app .jpp-card-payment-panel{
    margin-top:18px;
    padding:18px;
    border:1px solid #cbd8ef;
    border-radius:16px;
    background:#fbfdff;
    box-shadow:0 7px 20px rgba(33,79,189,.065);
    animation:jppCardPanelIn .18s ease;
}

@keyframes jppCardPanelIn{
    from{opacity:0;transform:translateY(-5px)}
    to{opacity:1;transform:translateY(0)}
}

.jpp-pay-app .jpp-card-payment-panel-head{
    margin-bottom:17px;
}

.jpp-pay-app .jpp-card-payment-panel-head strong,
.jpp-pay-app .jpp-card-payment-panel-head small{
    display:block;
}

.jpp-pay-app .jpp-card-payment-panel-head strong{
    color:#101828;
    font-size:16px;
    font-weight:800;
}

.jpp-pay-app .jpp-card-payment-panel-head small{
    margin-top:4px;
    color:#667085;
    font-size:11.5px;
}

.jpp-pay-app .jpp-card-payment-panel .jpp-duration-label{
    margin-top:0 !important;
}

.jpp-pay-app .jpp-card-payment-panel .jpp-total-box-pro{
    margin-bottom:16px !important;
}

.jpp-pay-app .jpp-card-confirm-button{
    appearance:none;
    width:100%;
    min-height:54px;
    display:grid;
    grid-template-columns:34px minmax(0,1fr) 28px;
    align-items:center;
    gap:8px;
    margin:0;
    padding:0 14px;
    border:1px solid #214fbd;
    border-radius:12px;
    background:#214fbd;
    color:#fff;
    cursor:pointer;
    font-size:14px;
    font-weight:800;
    box-shadow:0 7px 17px rgba(33,79,189,.18);
    transition:.18s ease;
}

.jpp-pay-app .jpp-card-confirm-button:hover{
    background:#173f9f;
    border-color:#173f9f;
    transform:translateY(-1px);
}

.jpp-pay-app .jpp-card-confirm-icon{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
}

.jpp-pay-app .jpp-card-confirm-arrow{
    justify-self:end;
    font-size:20px;
}

@media(max-width:600px){
    .jpp-pay-app .jpp-card-payment-panel{
        margin-top:14px;
        padding:15px;
    }

    .jpp-pay-app .jpp-sms-stop-note{
        font-size:9.5px;
    }
}


/* =========================================================
   v1.2 - Mobile polish: zone card + keyboard close
   ========================================================= */

.jpp-pay-app .jpp-zone-card{
    gap:18px;
    padding:18px 20px;
}

.jpp-pay-app .jpp-zone-left{
    min-width:0;
}

.jpp-pay-app .jpp-zone-card-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:14px;
    margin-left:auto;
}

.jpp-pay-app .jpp-zone-price{
    min-width:74px;
}

.jpp-pay-app .jpp-zone-price strong{
    font-size:28px;
}

.jpp-pay-app .jpp-zone-price span{
    white-space:nowrap;
}

.jpp-pay-app .jpp-zone-change-wrap{
    display:flex;
    align-items:center;
}

.jpp-pay-app .jpp-change-zone{
    appearance:none !important;
    min-height:36px !important;
    padding:7px 11px !important;
    border:1px solid #d7deea !important;
    border-radius:9px !important;
    background:#fff !important;
    color:#475467 !important;
    font-size:11px !important;
    line-height:1 !important;
    font-weight:700 !important;
    text-decoration:none !important;
    white-space:nowrap !important;
    cursor:pointer !important;
    transition:.16s ease !important;
}

.jpp-pay-app .jpp-change-zone:hover{
    border-color:#8fb0f2 !important;
    background:#f8fbff !important;
    color:#214fbd !important;
}

/* На телефон ја делиме картичката во два реда за да не е натрупана */
@media(max-width:600px){
    .jpp-pay-app .jpp-zone-card{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) auto !important;
        grid-template-rows:auto auto !important;
        align-items:center !important;
        gap:10px 14px !important;
        padding:16px !important;
        border-radius:14px !important;
    }

    .jpp-pay-app .jpp-zone-left{
        grid-column:1 !important;
        grid-row:1 !important;
        gap:11px !important;
    }

    .jpp-pay-app .jpp-zone-left span{
        padding-right:11px !important;
        font-size:10px !important;
        letter-spacing:1.5px !important;
    }

    .jpp-pay-app .jpp-zone-left strong{
        font-size:32px !important;
    }

    .jpp-pay-app .jpp-zone-card-actions{
        grid-column:2 !important;
        grid-row:1 / span 2 !important;
        margin-left:0 !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:flex-end !important;
        justify-content:center !important;
        gap:9px !important;
    }

    .jpp-pay-app .jpp-zone-price{
        min-width:auto !important;
        text-align:right !important;
    }

    .jpp-pay-app .jpp-zone-price strong{
        font-size:26px !important;
        line-height:1 !important;
    }

    .jpp-pay-app .jpp-zone-price span{
        margin-top:4px !important;
        font-size:11px !important;
    }

    .jpp-pay-app .jpp-change-zone{
        min-height:32px !important;
        padding:6px 9px !important;
        border-radius:8px !important;
        font-size:10px !important;
    }
}

/* Уште потесни телефони */
@media(max-width:390px){
    .jpp-pay-app .jpp-zone-card{
        grid-template-columns:minmax(0,1fr) 86px !important;
        padding:14px !important;
    }

    .jpp-pay-app .jpp-zone-left strong{
        font-size:29px !important;
    }

    .jpp-pay-app .jpp-zone-price strong{
        font-size:23px !important;
    }
}


/* =========================================================
   v1.3 - Clean "Избери возило" chevron
   ========================================================= */

.jpp-pay-app .jpp-saved-vehicle-chevron{
    width:34px !important;
    height:34px !important;
    display:grid !important;
    place-items:center !important;
    justify-self:end !important;
    border-radius:50% !important;
    background:#f4f7fb !important;
    color:#52657f !important;
    font-size:0 !important;
    transition:
        transform .22s ease,
        background .18s ease,
        color .18s ease !important;
}

.jpp-pay-app .jpp-saved-vehicle-chevron svg{
    display:block !important;
    width:18px !important;
    height:18px !important;
}

.jpp-pay-app .jpp-saved-vehicles-button:hover .jpp-saved-vehicle-chevron{
    background:#eaf1ff !important;
    color:#214fbd !important;
}

.jpp-pay-app .jpp-saved-vehicles-button.is-open .jpp-saved-vehicle-chevron{
    transform:rotate(180deg) !important;
    background:#eaf1ff !important;
    color:#214fbd !important;
}

.jpp-pay-app .jpp-saved-vehicle-button-text strong{
    font-size:14px !important;
    line-height:1.25 !important;
}

@media(max-width:600px){
    .jpp-pay-app .jpp-saved-vehicle-chevron{
        width:32px !important;
        height:32px !important;
    }

    .jpp-pay-app .jpp-saved-vehicle-chevron svg{
        width:17px !important;
        height:17px !important;
    }
}


/* v1.4 - возилата се зачувуваат автоматски */
.jpp-pay-app .jpp-save-current-vehicle{
    display:none !important;
}

.jpp-pay-app .jpp-vehicle-dropdown-list{
    padding-bottom:8px;
}


/* =========================================================
   v1.8 - Original JP logo + simplified top copy
   ========================================================= */
.jpp-pay-app .jpp-pay-brand{
    justify-content:center !important;
    gap:12px !important;
    margin-bottom:20px !important;
}

.jpp-pay-app .jpp-pay-brand-mark.jpp-pay-brand-logo{
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    padding:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
}

.jpp-pay-app .jpp-pay-brand-logo img{
    display:block !important;
    width:auto !important;
    height:54px !important;
    max-width:70px !important;
    object-fit:contain !important;
}

.jpp-pay-app .jpp-pay-brand strong{
    font-size:17px !important;
    line-height:1.2 !important;
}

.jpp-pay-app .jpp-pay-brand span{
    display:none !important;
}

.jpp-pay-app .jpp-pay-heading{
    margin-top:0 !important;
}

.jpp-pay-app .jpp-pay-heading h2{
    margin-bottom:7px !important;
}

@media(max-width:600px){
    .jpp-pay-app .jpp-pay-brand{
        justify-content:center !important;
        margin-bottom:15px !important;
    }

    .jpp-pay-app .jpp-pay-brand-mark.jpp-pay-brand-logo{
        width:48px !important;
        height:48px !important;
        min-width:48px !important;
    }

    .jpp-pay-app .jpp-pay-brand-logo img{
        height:48px !important;
        max-width:62px !important;
    }

    .jpp-pay-app .jpp-pay-brand strong{
        font-size:15px !important;
    }
}


/* =========================================================
   v1.9 - WordPress Custom Logo во payment header
   ========================================================= */

.jpp-pay-app .jpp-pay-brand-mark.jpp-pay-brand-logo{
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
}

.jpp-pay-app .jpp-pay-brand-logo img{
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-width:72px !important;
    max-height:58px !important;
    object-fit:contain !important;
    background:transparent !important;
}

.jpp-pay-app .jpp-pay-brand-fallback{
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:linear-gradient(145deg,#3478ee,#1749ac);
    color:#fff;
    font-size:25px;
    font-weight:900;
    box-shadow:0 7px 16px rgba(33,79,189,.20);
}

.jpp-pay-app .jpp-pay-brand{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:13px !important;
}

.jpp-pay-app .jpp-pay-brand > div:last-child{
    text-align:left !important;
}

.jpp-pay-app .jpp-pay-brand > div:last-child strong{
    display:block !important;
    color:#101828 !important;
    font-size:17px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
}

@media(max-width:600px){
    .jpp-pay-app .jpp-pay-brand-mark.jpp-pay-brand-logo{
        width:52px !important;
        height:52px !important;
        min-width:52px !important;
    }

    .jpp-pay-app .jpp-pay-brand-logo img{
        max-width:64px !important;
        max-height:52px !important;
    }

    .jpp-pay-app .jpp-pay-brand > div:last-child strong{
        font-size:15px !important;
    }
}


/* =========================================================
   v2.1 - Mobile zone selector: zones one below another
   ========================================================= */

@media(max-width:600px){

    /* Picker wrapper */
    .jpp-pay-app .jpp-zone-picker{
        padding:16px !important;
        border-radius:16px !important;
    }

    .jpp-pay-app .jpp-zone-picker-head{
        align-items:flex-start !important;
        gap:12px !important;
        margin-bottom:14px !important;
    }

    .jpp-pay-app .jpp-zone-picker-head .jpp-step-badge{
        width:36px !important;
        height:36px !important;
        min-width:36px !important;
        font-size:14px !important;
    }

    .jpp-pay-app .jpp-zone-picker-head h3{
        margin:0 !important;
        font-size:18px !important;
        line-height:1.25 !important;
    }

    .jpp-pay-app .jpp-zone-picker-head p{
        margin:5px 0 0 !important;
        font-size:11px !important;
        line-height:1.45 !important;
    }

    /* IMPORTANT: one column only */
    .jpp-pay-app .jpp-zone-options{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:10px !important;
        width:100% !important;
    }

    /* Each zone becomes a full-width row */
    .jpp-pay-app .jpp-zone-option{
        width:100% !important;
        min-width:0 !important;
        min-height:76px !important;
        margin:0 !important;
        padding:14px 16px !important;

        display:grid !important;
        grid-template-columns:64px minmax(0,1fr) auto !important;
        align-items:center !important;
        column-gap:13px !important;

        border:1px solid #d7deea !important;
        border-radius:13px !important;
        background:#fff !important;
        text-align:left !important;
        box-shadow:0 2px 7px rgba(15,23,42,.035) !important;
    }

    .jpp-pay-app .jpp-zone-option:hover{
        border-color:#9db9ee !important;
        background:#f9fbff !important;
    }

    .jpp-pay-app .jpp-zone-option.is-active,
    .jpp-pay-app .jpp-zone-option.active{
        border-color:#214fbd !important;
        background:#eef4ff !important;
        box-shadow:0 0 0 2px rgba(33,79,189,.08) !important;
    }

    /* Zone code */
    .jpp-pay-app .jpp-zone-option strong{
        display:block !important;
        margin:0 !important;
        color:#123d86 !important;
        font-size:26px !important;
        line-height:1 !important;
        font-weight:850 !important;
    }

    /* Zone name/description */
    .jpp-pay-app .jpp-zone-option .jpp-zone-option-name,
    .jpp-pay-app .jpp-zone-option small{
        display:block !important;
        min-width:0 !important;
        margin:0 !important;
        color:#667085 !important;
        font-size:11px !important;
        line-height:1.35 !important;
        white-space:normal !important;
    }

    /* Price */
    .jpp-pay-app .jpp-zone-option .jpp-zone-option-price,
    .jpp-pay-app .jpp-zone-option span:last-child{
        justify-self:end !important;
        text-align:right !important;
        color:#344054 !important;
        font-size:12px !important;
        line-height:1.25 !important;
        font-weight:700 !important;
        white-space:nowrap !important;
    }

    /* If older markup has all text inline, force sensible spacing */
    .jpp-pay-app .jpp-zone-option > *{
        min-width:0 !important;
    }
}

/* Extra narrow phones */
@media(max-width:390px){
    .jpp-pay-app .jpp-zone-option{
        grid-template-columns:58px minmax(0,1fr) !important;
        grid-template-rows:auto auto !important;
    }

    .jpp-pay-app .jpp-zone-option strong{
        grid-column:1 !important;
        grid-row:1 / span 2 !important;
        align-self:center !important;
        font-size:24px !important;
    }

    .jpp-pay-app .jpp-zone-option .jpp-zone-option-name,
    .jpp-pay-app .jpp-zone-option small{
        grid-column:2 !important;
        grid-row:1 !important;
    }

    .jpp-pay-app .jpp-zone-option .jpp-zone-option-price,
    .jpp-pay-app .jpp-zone-option span:last-child{
        grid-column:2 !important;
        grid-row:2 !important;
        justify-self:start !important;
        text-align:left !important;
        margin-top:3px !important;
    }
}


/* =========================================================
   v2.3 - Public zone map + optional GPS location
   ========================================================= */

.jpp-pay-app .jpp-open-zone-map{
    appearance:none;
    width:100%;
    min-height:62px;
    display:grid;
    grid-template-columns:42px minmax(0,1fr) 28px;
    align-items:center;
    gap:10px;
    margin-top:12px;
    padding:10px 13px;
    border:1px solid #d7deea;
    border-radius:13px;
    background:#fff;
    color:#344054;
    text-align:left;
    cursor:pointer;
    box-shadow:0 2px 7px rgba(15,23,42,.035);
    transition:.18s ease;
}

.jpp-pay-app .jpp-open-zone-map:hover,
.jpp-pay-app .jpp-open-zone-map.is-open{
    border-color:#8fb0f2;
    background:#f8fbff;
    box-shadow:0 0 0 3px rgba(33,79,189,.07);
}

.jpp-pay-app .jpp-open-zone-map-icon{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#eef4ff;
    color:#214fbd;
}

.jpp-pay-app .jpp-open-zone-map > span:nth-child(2) strong,
.jpp-pay-app .jpp-open-zone-map > span:nth-child(2) small{
    display:block;
}

.jpp-pay-app .jpp-open-zone-map > span:nth-child(2) strong{
    color:#1d2939;
    font-size:13px;
    font-weight:800;
}

.jpp-pay-app .jpp-open-zone-map > span:nth-child(2) small{
    margin-top:3px;
    color:#98a2b3;
    font-size:10.5px;
}

.jpp-pay-app .jpp-open-zone-map-arrow{
    justify-self:end;
    color:#667085;
    font-size:19px;
}

.jpp-pay-app .jpp-public-zone-map-panel[hidden]{
    display:none !important;
}

.jpp-pay-app .jpp-public-zone-map-panel{
    margin-top:12px;
    overflow:hidden;
    border:1px solid #d7deea;
    border-radius:15px;
    background:#fff;
    box-shadow:0 12px 30px rgba(15,23,42,.09);
}

.jpp-pay-app .jpp-public-zone-map-head{
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:11px 14px;
    border-bottom:1px solid #eef1f5;
}

.jpp-pay-app .jpp-public-zone-map-head strong,
.jpp-pay-app .jpp-public-zone-map-head small{
    display:block;
}

.jpp-pay-app .jpp-public-zone-map-head strong{
    color:#101828;
    font-size:14px;
    font-weight:800;
}

.jpp-pay-app .jpp-public-zone-map-head small{
    margin-top:3px;
    color:#98a2b3;
    font-size:10px;
}

.jpp-pay-app .jpp-public-zone-map-close{
    appearance:none;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:50%;
    background:#f4f6f9;
    color:#667085;
    cursor:pointer;
    font-size:21px;
    line-height:1;
}

.jpp-pay-app .jpp-public-zone-map-tools{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:9px 11px;
    border-bottom:1px solid #eef1f5;
    background:#fafcff;
}

.jpp-pay-app .jpp-my-location-button{
    appearance:none;
    min-height:34px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:0 10px;
    border:1px solid #cfd9e8;
    border-radius:9px;
    background:#fff;
    color:#214fbd;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
}

.jpp-pay-app .jpp-location-dot-icon{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#2f75ff;
    box-shadow:0 0 0 4px rgba(47,117,255,.13);
}

.jpp-pay-app .jpp-location-status{
    min-width:0;
    color:#98a2b3;
    font-size:9.5px;
    text-align:right;
}

.jpp-pay-app .jpp-location-status.is-success{
    color:#079455;
    font-weight:700;
}

.jpp-pay-app .jpp-location-status.is-warning{
    color:#b26a00;
}

.jpp-pay-app .jpp-location-status.is-info{
    color:#52657f;
}

.jpp-pay-app #jpp-public-zone-map{
    width:100%;
    height:330px;
    background:#edf2f7;
}

.jpp-pay-app .jpp-public-zone-map-panel .leaflet-container{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

.jpp-pay-app .jpp-user-location-marker{
    background:transparent !important;
    border:0 !important;
}

.jpp-pay-app .jpp-user-location-marker span{
    width:18px;
    height:18px;
    display:block;
    border:3px solid #fff;
    border-radius:50%;
    background:#2f75ff;
    box-shadow:
        0 0 0 2px #2f75ff,
        0 3px 12px rgba(47,117,255,.42);
}

.jpp-pay-app .jpp-public-zone-map-result[hidden]{
    display:none !important;
}

.jpp-pay-app .jpp-public-zone-map-result{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 13px;
    border-top:1px solid #eef1f5;
}

.jpp-pay-app .jpp-public-zone-map-result > div{
    min-width:0;
}

.jpp-pay-app .jpp-public-zone-map-result small,
.jpp-pay-app .jpp-public-zone-map-result strong,
.jpp-pay-app .jpp-public-zone-map-result span{
    display:block;
}

.jpp-pay-app .jpp-public-zone-map-result small{
    color:#667085;
    font-size:9.5px;
}

.jpp-pay-app .jpp-public-zone-map-result strong{
    margin-top:2px;
    color:#123d86;
    font-size:22px;
    line-height:1;
}

.jpp-pay-app .jpp-public-zone-map-result span{
    margin-top:4px;
    color:#667085;
    font-size:10px;
}

.jpp-pay-app .jpp-public-zone-map-result.is-success{
    background:#f4fcf8;
}

.jpp-pay-app .jpp-public-zone-map-result.is-warning{
    display:block;
    background:#fff9ec;
}

.jpp-pay-app .jpp-public-zone-map-result.is-warning strong{
    color:#875a00;
    font-size:12px;
}

.jpp-pay-app .jpp-public-zone-map-result.is-warning span{
    margin-top:4px;
}

.jpp-pay-app .jpp-map-confirm-zone{
    appearance:none;
    flex:0 0 auto;
    min-height:36px;
    padding:0 12px;
    border:1px solid #214fbd;
    border-radius:9px;
    background:#214fbd;
    color:#fff;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
}

@media(max-width:600px){
    .jpp-pay-app #jpp-public-zone-map{
        height:360px;
    }

    .jpp-pay-app .jpp-public-zone-map-tools{
        align-items:flex-start;
        flex-direction:column;
    }

    .jpp-pay-app .jpp-location-status{
        text-align:left;
    }

    .jpp-pay-app .jpp-public-zone-map-result{
        align-items:flex-start;
    }
}

@media(max-width:390px){
    .jpp-pay-app #jpp-public-zone-map{
        height:330px;
    }

    .jpp-pay-app .jpp-public-zone-map-result{
        flex-direction:column;
    }

    .jpp-pay-app .jpp-map-confirm-zone{
        width:100%;
    }
}


/* =========================================================
   v2.4 - Colored A/B zones + permanent zone labels
   ========================================================= */

.jpp-pay-app .jpp-public-zone-map-wrap{
    position:relative;
}

.jpp-pay-app #jpp-public-zone-map{
    height:430px;
}

.jpp-pay-app .jpp-zone-map-legend-box{
    position:absolute;
    z-index:800;
    top:14px;
    left:14px;
    width:145px;
    padding:12px 13px;
    border:1px solid rgba(208,215,225,.95);
    border-radius:12px;
    background:rgba(255,255,255,.94);
    box-shadow:0 6px 20px rgba(15,23,42,.12);
    backdrop-filter:blur(6px);
    pointer-events:none;
}

.jpp-pay-app .jpp-zone-map-legend-box > strong{
    display:block;
    margin-bottom:10px;
    color:#172033;
    font-size:12px;
    font-weight:850;
}

.jpp-pay-app .jpp-zone-map-legend-row{
    display:grid;
    grid-template-columns:18px minmax(0,1fr);
    align-items:start;
    gap:8px;
}

.jpp-pay-app .jpp-zone-map-legend-row + .jpp-zone-map-legend-row{
    margin-top:9px;
}

.jpp-pay-app .jpp-zone-map-legend-color{
    width:15px;
    height:15px;
    display:block;
    margin-top:1px;
    border-radius:4px;
}

.jpp-pay-app .jpp-zone-map-legend-color.is-a{
    border:2px solid #ef3f49;
    background:rgba(255,91,99,.42);
}

.jpp-pay-app .jpp-zone-map-legend-color.is-b{
    border:2px solid #ff9800;
    background:rgba(255,173,50,.48);
}

.jpp-pay-app .jpp-zone-map-legend-row b,
.jpp-pay-app .jpp-zone-map-legend-row small{
    display:block;
}

.jpp-pay-app .jpp-zone-map-legend-row b{
    color:#344054;
    font-size:10px;
    line-height:1.15;
}

.jpp-pay-app .jpp-zone-map-legend-row small{
    margin-top:2px;
    color:#667085;
    font-size:9px;
    line-height:1.15;
}

/* Leaflet persistent zone labels */
.jpp-pay-app .jpp-zone-permanent-label{
    background:transparent !important;
    border:0 !important;
}

.jpp-pay-app .jpp-zone-label-inner{
    width:92px;
    min-height:48px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    pointer-events:none;
    transform:translateZ(0);
}

.jpp-pay-app .jpp-zone-label-inner strong{
    display:block;
    color:var(--zone-label-color);
    font-size:23px;
    line-height:1;
    font-weight:900;
    letter-spacing:-.4px;
    text-shadow:
        -2px -2px 0 #fff,
         2px -2px 0 #fff,
        -2px  2px 0 #fff,
         2px  2px 0 #fff,
         0 2px 4px rgba(15,23,42,.20);
}

.jpp-pay-app .jpp-zone-label-inner span{
    display:block;
    margin-top:4px;
    padding:2px 5px;
    border-radius:5px;
    background:rgba(255,255,255,.82);
    color:#374151;
    font-size:8.5px;
    line-height:1.15;
    font-weight:800;
    box-shadow:0 1px 4px rgba(15,23,42,.10);
}

.jpp-pay-app .jpp-zone-hover-tooltip{
    padding:7px 9px !important;
    border:1px solid #d7deea !important;
    border-radius:8px !important;
    box-shadow:0 5px 14px rgba(15,23,42,.12) !important;
    color:#344054 !important;
    font-size:10px !important;
}

@media(max-width:600px){
    .jpp-pay-app #jpp-public-zone-map{
        height:430px;
    }

    .jpp-pay-app .jpp-zone-map-legend-box{
        top:10px;
        left:10px;
        width:125px;
        padding:10px;
    }

    .jpp-pay-app .jpp-zone-map-legend-box > strong{
        font-size:11px;
        margin-bottom:8px;
    }

    .jpp-pay-app .jpp-zone-label-inner{
        width:76px;
        min-height:42px;
    }

    .jpp-pay-app .jpp-zone-label-inner strong{
        font-size:20px;
    }

    .jpp-pay-app .jpp-zone-label-inner span{
        font-size:7.5px;
    }
}

@media(max-width:390px){
    .jpp-pay-app #jpp-public-zone-map{
        height:390px;
    }

    .jpp-pay-app .jpp-zone-map-legend-box{
        width:112px;
    }

    .jpp-pay-app .jpp-zone-map-legend-row small{
        font-size:8px;
    }
}


/* =========================================================
   v2.5 - Clean map + C daily zone
   ========================================================= */

/* Легендата е тргната од HTML; ова е fallback ако browser cache задржи стар markup */
.jpp-pay-app .jpp-zone-map-legend-box{
    display:none !important;
}

/* На polygon се прикажува само кодот A1/B1/C1 */
.jpp-pay-app .jpp-zone-label-inner{
    width:72px !important;
    min-height:40px !important;
}

.jpp-pay-app .jpp-zone-label-inner strong{
    font-size:25px !important;
}

.jpp-pay-app .jpp-zone-label-inner span{
    display:none !important;
}

@media(max-width:600px){
    .jpp-pay-app .jpp-zone-label-inner{
        width:60px !important;
        min-height:36px !important;
    }

    .jpp-pay-app .jpp-zone-label-inner strong{
        font-size:22px !important;
    }
}


/* =========================================================
   v2.5.1 - Fix black Leaflet label boxes
   ========================================================= */

.jpp-pay-app .leaflet-marker-icon.jpp-zone-permanent-label,
.jpp-pay-app .leaflet-div-icon.jpp-zone-permanent-label,
.jpp-pay-app .jpp-zone-permanent-label{
    background:transparent !important;
    background-color:transparent !important;
    border:0 !important;
    border-width:0 !important;
    border-style:none !important;
    border-color:transparent !important;
    border-radius:0 !important;
    box-shadow:none !important;
    outline:0 !important;
    padding:0 !important;
    margin:0 !important;
}

.jpp-pay-app .leaflet-marker-icon.jpp-zone-permanent-label::before,
.jpp-pay-app .leaflet-marker-icon.jpp-zone-permanent-label::after,
.jpp-pay-app .leaflet-div-icon.jpp-zone-permanent-label::before,
.jpp-pay-app .leaflet-div-icon.jpp-zone-permanent-label::after,
.jpp-pay-app .jpp-zone-permanent-label::before,
.jpp-pay-app .jpp-zone-permanent-label::after{
    content:none !important;
    display:none !important;
    border:0 !important;
    background:transparent !important;
}

.jpp-pay-app .jpp-zone-label-inner{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    outline:0 !important;
}


.jpp-pay-app .jpp-zone-permanent-label .jpp-zone-label-inner{
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    transform:translate(-50%, -50%) !important;
    width:72px !important;
    min-height:40px !important;
    pointer-events:none !important;
}


/* =========================================================
   v2.5.2 - Fix black focus box around clicked zone polygon
   ========================================================= */

.jpp-pay-app .leaflet-container svg path.leaflet-interactive:focus,
.jpp-pay-app .leaflet-container .leaflet-interactive:focus,
.jpp-pay-app #jpp-public-zone-map svg path:focus,
.jpp-pay-app #jpp-public-zone-map path[tabindex]:focus{
    outline:none !important;
    outline-width:0 !important;
    outline-style:none !important;
    outline-color:transparent !important;
    box-shadow:none !important;
}

/* Chrome/Edge accessibility focus ring */
.jpp-pay-app #jpp-public-zone-map .leaflet-interactive:focus-visible,
.jpp-pay-app #jpp-public-zone-map svg path:focus-visible{
    outline:none !important;
    box-shadow:none !important;
}


/* =========================================================
   v2.6 - Zone selector dropdown
   ========================================================= */

.jpp-pay-app .jpp-zone-options{
    display:none !important;
}

.jpp-pay-app .jpp-zone-select-wrap{
    margin-top:14px;
}

.jpp-pay-app .jpp-zone-select-label{
    display:block;
    margin-bottom:7px;
    color:#475467;
    font-size:11px;
    font-weight:800;
}

.jpp-pay-app .jpp-zone-select-control{
    position:relative;
}

.jpp-pay-app .jpp-zone-select{
    appearance:none !important;
    -webkit-appearance:none !important;
    width:100% !important;
    min-height:54px !important;
    padding:0 48px 0 16px !important;
    border:1px solid #cfd9e8 !important;
    border-radius:12px !important;
    background:#fff !important;
    color:#1d2939 !important;
    font-size:14px !important;
    font-weight:750 !important;
    line-height:1.2 !important;
    box-shadow:0 2px 8px rgba(15,23,42,.035) !important;
    cursor:pointer !important;
    transition:.18s ease !important;
}

.jpp-pay-app .jpp-zone-select:hover{
    border-color:#9bb6e7 !important;
}

.jpp-pay-app .jpp-zone-select:focus{
    border-color:#214fbd !important;
    box-shadow:0 0 0 3px rgba(33,79,189,.10) !important;
    outline:none !important;
}

.jpp-pay-app .jpp-zone-select-chevron{
    position:absolute;
    right:15px;
    top:50%;
    width:28px;
    height:28px;
    transform:translateY(-50%);
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#f4f7fb;
    color:#52657f;
    pointer-events:none;
}

.jpp-pay-app .jpp-zone-select-current{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
    column-gap:10px;
    row-gap:2px;
    align-items:center;
    margin-top:9px;
    padding:10px 12px;
    border:1px solid #edf0f4;
    border-radius:10px;
    background:#fafcff;
}

.jpp-pay-app .jpp-zone-select-current > span{
    grid-column:1;
    grid-row:1 / span 2;
    color:#98a2b3;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.8px;
}

.jpp-pay-app .jpp-zone-select-current strong{
    grid-column:2;
    grid-row:1;
    color:#123d86;
    font-size:17px;
    line-height:1;
}

.jpp-pay-app .jpp-zone-select-current small{
    grid-column:2;
    grid-row:2;
    color:#667085;
    font-size:9.5px;
    line-height:1.25;
}

@media(max-width:600px){
    .jpp-pay-app .jpp-zone-select-wrap{
        margin-top:12px;
    }

    .jpp-pay-app .jpp-zone-select{
        min-height:58px !important;
        padding-left:14px !important;
        padding-right:46px !important;
        font-size:14px !important;
        border-radius:13px !important;
    }

    .jpp-pay-app .jpp-zone-select-current{
        padding:9px 11px;
    }

    .jpp-pay-app .jpp-zone-select-current strong{
        font-size:16px;
    }
}


/* =========================================================
   v2.7 - 3 separate ways to select zone
   ========================================================= */

.jpp-pay-app .jpp-zone-choice-list{
    display:grid;
    gap:13px;
    margin-top:15px;
}

.jpp-pay-app .jpp-zone-choice-card{
    position:relative;
    display:grid;
    grid-template-columns:40px minmax(0,1fr);
    gap:12px;
    padding:14px;
    border:1px solid #dbe2ed;
    border-radius:15px;
    background:#fff;
    box-shadow:0 3px 10px rgba(15,23,42,.035);
}

.jpp-pay-app .jpp-zone-choice-card.is-primary{
    padding-bottom:15px;
}

.jpp-pay-app .jpp-zone-choice-number{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#edf3ff;
    color:#214fbd;
    font-size:15px;
    font-weight:900;
}

.jpp-pay-app .jpp-zone-choice-content{
    min-width:0;
}

.jpp-pay-app .jpp-zone-choice-heading{
    margin-bottom:10px;
}

.jpp-pay-app .jpp-zone-choice-heading strong,
.jpp-pay-app .jpp-zone-choice-heading small{
    display:block;
}

.jpp-pay-app .jpp-zone-choice-heading strong{
    color:#101828;
    font-size:15px;
    font-weight:850;
}

.jpp-pay-app .jpp-zone-choice-heading small{
    margin-top:3px;
    color:#98a2b3;
    font-size:10px;
}

.jpp-pay-app .jpp-zone-choice-action{
    appearance:none;
    width:100%;
    min-width:0;
    min-height:62px;
    display:grid;
    grid-template-columns:42px minmax(0,1fr) 26px;
    align-items:center;
    gap:11px;
    padding:0;
    border:0;
    background:transparent;
    color:#344054;
    text-align:left;
    cursor:pointer;
}

.jpp-pay-app .jpp-zone-choice-icon{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:11px;
}

.jpp-pay-app .jpp-zone-choice-icon.is-map{
    background:#eef4ff;
    color:#2156bf;
}

.jpp-pay-app .jpp-zone-choice-icon.is-qr{
    background:#eefaf4;
    color:#079455;
}

.jpp-pay-app .jpp-zone-choice-action-copy{
    min-width:0;
}

.jpp-pay-app .jpp-zone-choice-action-copy strong,
.jpp-pay-app .jpp-zone-choice-action-copy small{
    display:block;
}

.jpp-pay-app .jpp-zone-choice-action-copy strong{
    color:#101828;
    font-size:14px;
    font-weight:850;
}

.jpp-pay-app .jpp-zone-choice-action-copy small{
    margin-top:4px;
    color:#98a2b3;
    font-size:10px;
    line-height:1.35;
}

.jpp-pay-app .jpp-zone-choice-arrow{
    justify-self:end;
    color:#667085;
    font-size:18px;
    transition:transform .18s ease;
}

.jpp-pay-app .jpp-zone-choice-action:hover .jpp-zone-choice-arrow{
    transform:translateX(3px);
}

/* Old standalone "choose from map" button is no longer used */
.jpp-pay-app > .jpp-open-zone-map{
    display:none !important;
}

/* The select is now inside card 1 */
.jpp-pay-app .jpp-zone-choice-card .jpp-zone-select-wrap{
    margin-top:0 !important;
}

/* QR scanner */
.jpp-pay-app .jpp-qr-scanner-panel[hidden]{
    display:none !important;
}

.jpp-pay-app .jpp-qr-scanner-panel{
    margin-top:13px;
    overflow:hidden;
    border:1px solid #dbe2ed;
    border-radius:15px;
    background:#fff;
    box-shadow:0 12px 30px rgba(15,23,42,.09);
}

.jpp-pay-app .jpp-qr-scanner-head{
    min-height:60px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border-bottom:1px solid #eef1f5;
}

.jpp-pay-app .jpp-qr-scanner-head strong,
.jpp-pay-app .jpp-qr-scanner-head small{
    display:block;
}

.jpp-pay-app .jpp-qr-scanner-head strong{
    color:#101828;
    font-size:14px;
    font-weight:850;
}

.jpp-pay-app .jpp-qr-scanner-head small{
    margin-top:3px;
    color:#98a2b3;
    font-size:10px;
}

.jpp-pay-app .jpp-qr-scanner-close{
    appearance:none;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:50%;
    background:#f4f6f9;
    color:#667085;
    cursor:pointer;
    font-size:21px;
}

.jpp-pay-app .jpp-qr-reader-wrap{
    padding:12px;
    background:#f7f9fc;
}

.jpp-pay-app #jpp-qr-reader{
    width:100%;
    overflow:hidden;
    border:0 !important;
    border-radius:12px;
    background:#101828;
}

.jpp-pay-app #jpp-qr-reader video{
    border-radius:12px;
}

.jpp-pay-app #jpp-qr-reader__dashboard{
    padding:10px !important;
    background:#fff;
}

.jpp-pay-app .jpp-qr-scanner-status{
    padding:11px 13px;
    border-top:1px solid #eef1f5;
    color:#667085;
    font-size:10px;
    line-height:1.4;
}

.jpp-pay-app .jpp-qr-scanner-status.is-success{
    background:#f0fdf4;
    color:#067647;
    font-weight:700;
}

.jpp-pay-app .jpp-qr-scanner-status.is-warning{
    background:#fff8e7;
    color:#985e00;
}

.jpp-pay-app .jpp-qr-scanner-status.is-info{
    color:#52657f;
}

/* Keep map and QR panels visually separated from choice cards */
.jpp-pay-app .jpp-public-zone-map-panel{
    margin-top:13px !important;
}

@media(max-width:600px){
    .jpp-pay-app .jpp-zone-choice-card{
        grid-template-columns:36px minmax(0,1fr);
        gap:10px;
        padding:12px;
    }

    .jpp-pay-app .jpp-zone-choice-number{
        width:34px;
        height:34px;
        font-size:14px;
    }

    .jpp-pay-app .jpp-zone-choice-action{
        grid-template-columns:40px minmax(0,1fr) 22px;
        min-height:58px;
    }

    .jpp-pay-app .jpp-zone-choice-heading strong{
        font-size:14px;
    }
}


/* =========================================================
   v2.8 - Cleaner zone choice cards + map confirm above map
   ========================================================= */

/* Remove the outer top number and make header look like a section title */
.jpp-pay-app .jpp-zone-picker-head-clean{
    display:block !important;
    margin-bottom:16px !important;
}

.jpp-pay-app .jpp-zone-picker-head-clean h3{
    margin:0 !important;
    color:#101828 !important;
    font-size:19px !important;
    line-height:1.25 !important;
    font-weight:850 !important;
}

.jpp-pay-app .jpp-zone-picker-head-clean p{
    margin:6px 0 0 !important;
    color:#7f8ca3 !important;
    font-size:11px !important;
    line-height:1.45 !important;
}

/* Distinct card backgrounds */
.jpp-pay-app .jpp-zone-choice-card{
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease !important;
}

.jpp-pay-app .jpp-zone-choice-card:hover{
    transform:translateY(-1px);
}

.jpp-pay-app .jpp-zone-choice-card.is-blue{
    border-color:#cfe0ff !important;
    background:linear-gradient(135deg,#f7faff 0%,#eef5ff 100%) !important;
    box-shadow:0 5px 16px rgba(49,101,210,.055) !important;
}

.jpp-pay-app .jpp-zone-choice-card.is-green{
    border-color:#d4eee0 !important;
    background:linear-gradient(135deg,#fbfffd 0%,#effaf4 100%) !important;
    box-shadow:0 5px 16px rgba(14,149,85,.05) !important;
}

.jpp-pay-app .jpp-zone-choice-card.is-purple{
    border-color:#eadcf8 !important;
    background:linear-gradient(135deg,#fefcff 0%,#f7f0ff 100%) !important;
    box-shadow:0 5px 16px rgba(126,46,190,.045) !important;
}

/* Number badges follow each card family */
.jpp-pay-app .jpp-zone-choice-card.is-blue .jpp-zone-choice-number{
    background:#e6efff !important;
    color:#2161d5 !important;
}

.jpp-pay-app .jpp-zone-choice-card.is-green .jpp-zone-choice-number{
    background:#e3f7ec !important;
    color:#079455 !important;
}

.jpp-pay-app .jpp-zone-choice-card.is-purple .jpp-zone-choice-number{
    background:#f0e6fc !important;
    color:#7b2bc1 !important;
}

/* Icon colors harmonize with the card */
.jpp-pay-app .jpp-zone-choice-card.is-green .jpp-zone-choice-icon.is-map{
    background:#e4f8ed !important;
    color:#079455 !important;
}

.jpp-pay-app .jpp-zone-choice-card.is-purple .jpp-zone-choice-icon.is-qr{
    background:#f1e6fc !important;
    color:#7b2bc1 !important;
}

.jpp-pay-app .jpp-zone-choice-card.is-green .jpp-zone-choice-arrow{
    color:#079455 !important;
}

.jpp-pay-app .jpp-zone-choice-card.is-purple .jpp-zone-choice-arrow{
    color:#7b2bc1 !important;
}

/* Selected-zone summary inside option 1 */
.jpp-pay-app .jpp-zone-choice-card.is-blue .jpp-zone-select-current{
    border-color:#dce8fb !important;
    background:rgba(255,255,255,.65) !important;
}

/* The map result now sits above the map */
.jpp-pay-app .jpp-public-zone-map-result-top{
    border-top:0 !important;
    border-bottom:1px solid #eef1f5 !important;
    background:#f7fbff !important;
}

.jpp-pay-app .jpp-public-zone-map-result-top.is-success{
    background:#f1fbf6 !important;
}

.jpp-pay-app .jpp-public-zone-map-result-top.is-warning{
    background:#fff9ec !important;
}

.jpp-pay-app .jpp-map-selected-inline{
    min-width:0;
    display:grid;
    grid-template-columns:auto auto minmax(0,1fr);
    align-items:center;
    column-gap:8px;
}

.jpp-pay-app .jpp-map-selected-inline small{
    color:#7f8ca3 !important;
    font-size:9px !important;
    text-transform:uppercase;
    letter-spacing:.7px;
}

.jpp-pay-app .jpp-map-selected-inline strong{
    margin:0 !important;
    color:#123d86 !important;
    font-size:20px !important;
    line-height:1 !important;
}

.jpp-pay-app .jpp-map-selected-inline span{
    min-width:0;
    margin:0 !important;
    color:#667085 !important;
    font-size:10px !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.jpp-pay-app .jpp-map-confirm-zone{
    min-height:38px !important;
    padding:0 14px !important;
    border-radius:10px !important;
    box-shadow:0 4px 10px rgba(33,79,189,.14) !important;
}

@media(max-width:600px){
    .jpp-pay-app .jpp-zone-picker-head-clean{
        margin-bottom:13px !important;
    }

    .jpp-pay-app .jpp-zone-picker-head-clean h3{
        font-size:17px !important;
    }

    .jpp-pay-app .jpp-zone-choice-list{
        gap:11px !important;
    }

    .jpp-pay-app .jpp-zone-choice-card{
        border-radius:14px !important;
    }

    .jpp-pay-app .jpp-public-zone-map-result-top{
        gap:8px !important;
        padding:10px 11px !important;
    }

    .jpp-pay-app .jpp-map-selected-inline{
        grid-template-columns:auto auto;
        grid-template-rows:auto auto;
        column-gap:7px;
        row-gap:2px;
    }

    .jpp-pay-app .jpp-map-selected-inline small{
        grid-column:1;
        grid-row:1;
    }

    .jpp-pay-app .jpp-map-selected-inline strong{
        grid-column:2;
        grid-row:1;
        justify-self:start;
    }

    .jpp-pay-app .jpp-map-selected-inline span{
        grid-column:1 / -1;
        grid-row:2;
    }
}

@media(max-width:390px){
    .jpp-pay-app .jpp-public-zone-map-result-top{
        flex-direction:column !important;
        align-items:stretch !important;
    }

    .jpp-pay-app .jpp-map-confirm-zone{
        width:100% !important;
    }
}


/* =========================================================
   v2.8.1 - main zone title icon / remove duplicate 1
   ========================================================= */

.jpp-pay-app .jpp-zone-picker-title-clean{
    display:flex !important;
    align-items:flex-start !important;
    gap:13px !important;
}

.jpp-pay-app .jpp-zone-picker-title-clean > .jpp-step-badge{
    display:none !important;
}

.jpp-pay-app .jpp-zone-picker-title-icon{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:14px !important;
    background:#edf4ff !important;
    color:#2161d5 !important;
    box-shadow:inset 0 0 0 1px rgba(33,97,213,.04) !important;
}

.jpp-pay-app .jpp-zone-picker-title-icon svg{
    display:block !important;
}

.jpp-pay-app .jpp-zone-picker-title-clean > div{
    min-width:0 !important;
    padding-top:2px !important;
}

.jpp-pay-app .jpp-zone-picker-title-clean strong{
    display:block !important;
    color:#101828 !important;
    font-size:19px !important;
    line-height:1.22 !important;
    font-weight:850 !important;
}

.jpp-pay-app .jpp-zone-picker-title-clean small{
    display:block !important;
    margin-top:5px !important;
    color:#7f8ca3 !important;
    font-size:11px !important;
    line-height:1.4 !important;
}

@media(max-width:600px){
    .jpp-pay-app .jpp-zone-picker-title-clean{
        gap:11px !important;
    }

    .jpp-pay-app .jpp-zone-picker-title-icon{
        width:40px !important;
        height:40px !important;
        min-width:40px !important;
        border-radius:12px !important;
    }

    .jpp-pay-app .jpp-zone-picker-title-icon svg{
        width:22px !important;
        height:22px !important;
    }

    .jpp-pay-app .jpp-zone-picker-title-clean strong{
        font-size:17px !important;
    }

    .jpp-pay-app .jpp-zone-picker-title-clean small{
        font-size:10.5px !important;
    }
}


/* =========================================================
   v2.9 - P + car icon + no default selected zone
   ========================================================= */

.jpp-pay-app .jpp-zone-picker-parking-icon{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    border-radius:15px !important;
    background:#eaf2ff !important;
    color:#155ed4 !important;
}

.jpp-pay-app .jpp-zone-picker-parking-icon svg{
    display:block !important;
    width:34px !important;
    height:34px !important;
    overflow:visible !important;
}

.jpp-pay-app .jpp-zone-select-current.is-empty{
    border-style:dashed !important;
    border-color:#d9e0ea !important;
    background:rgba(255,255,255,.48) !important;
}

.jpp-pay-app .jpp-zone-select-current.is-empty strong,
.jpp-pay-app .jpp-zone-select-current.is-empty small{
    color:#98a2b3 !important;
}

@media(max-width:600px){
    .jpp-pay-app .jpp-zone-picker-parking-icon{
        width:43px !important;
        height:43px !important;
        min-width:43px !important;
        border-radius:13px !important;
    }

    .jpp-pay-app .jpp-zone-picker-parking-icon svg{
        width:31px !important;
        height:31px !important;
    }
}