/* KyianKyiv Submit Place — Стилі форми */
.vsp-wrap {
    font-family: 'Manrope', system-ui, sans-serif;
    max-width: 720px;
    margin: 0 auto;
    --green: #3B6D11;
    --green-light: #f0fdf4;
    --border: #e5e7eb;
    --radius: 12px;
    --shadow: 0 4px 20px rgba(0,0,0,.08);
}

/* КРОКИ */
.vsp-steps {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.vsp-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    opacity: .4;
    transition: opacity .3s;
}
.vsp-step.active, .vsp-step.done { opacity: 1; }
.vsp-step-num {
    width: 32px; height: 32px;
    background: #e5e7eb;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    transition: all .3s;
}
.vsp-step.active .vsp-step-num { background: var(--green); color: #fff; }
.vsp-step.done .vsp-step-num { background: #dcfce7; color: var(--green); }
.vsp-step-label { font-size: 11px; color: #6b7280; font-weight: 600; white-space: nowrap; }
.vsp-step.active .vsp-step-label { color: var(--green); }
.vsp-step-line { flex: 1; height: 2px; background: #e5e7eb; margin: 0 8px; min-width: 20px; }

/* ПАНЕЛІ */
.vsp-pane { display: none; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.vsp-pane.active { display: block; }
.vsp-pane-header { margin-bottom: 24px; }
.vsp-pane-header h2 { font-size: 20px; font-weight: 700; color: #1a2e14; margin: 0 0 4px; }
.vsp-pane-header p { font-size: 13px; color: #9ca3af; margin: 0; }

/* ПОЛЯ */
.vsp-field {
    margin-bottom: 18px;
    position: relative;
}
.vsp-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}
.vsp-field input[type="text"],
.vsp-field input[type="tel"],
.vsp-field input[type="email"],
.vsp-field input[type="url"],
.vsp-field select,
.vsp-field textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
    background: #fff;
}
.vsp-field input:focus,
.vsp-field select:focus,
.vsp-field textarea:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(59,109,17,.1);
}
.vsp-field.has-error input,
.vsp-field.has-error select { border-color: #ef4444; }
.vsp-field.is-valid input,
.vsp-field.is-valid select { border-color: #10b981; }
.vsp-req-mark { color: #ef4444; }
.vsp-hint { font-size: 11px; color: #9ca3af; margin-top: 4px; display: block; }
.vsp-error-msg { font-size: 12px; color: #ef4444; margin-top: 4px; display: none; }
.vsp-field.has-error .vsp-error-msg { display: block; }
.vsp-char-count { font-size: 11px; color: #9ca3af; position: absolute; right: 0; bottom: -18px; }

.vsp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media(max-width:560px) { .vsp-row { grid-template-columns: 1fr; } }

/* ЦІНА */
.vsp-price-group { display: flex; flex-wrap: wrap; gap: 8px; }
.vsp-price-option { cursor: pointer; }
.vsp-price-option input { display: none; }
.vsp-price-option span {
    display: inline-block;
    padding: 7px 14px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    transition: all .15s;
    user-select: none;
}
.vsp-price-option input:checked + span {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
}
.vsp-price-option:hover span { border-color: var(--green); }

/* ГРАФІК */
.vsp-hours-grid { display: grid; gap: 8px; margin-bottom: 8px; }
.vsp-hours-row { display: grid; grid-template-columns: 80px 1fr; gap: 8px; align-items: center; }
.vsp-day-label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; cursor: pointer; }
.vsp-day-check { width: 16px; height: 16px; cursor: pointer; accent-color: var(--green); }
.vsp-hours-input {
    padding: 8px 10px !important;
    font-size: 13px !important;
}

/* ТЕГИ ПІДКАЗКИ */
.vsp-tags-suggest {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.vsp-tag-suggest-item {
    padding: 3px 10px;
    background: #f0fdf4;
    border: 1px solid #a7f3d0;
    border-radius: 14px;
    font-size: 12px;
    color: var(--green);
    cursor: pointer;
    transition: all .15s;
}
.vsp-tag-suggest-item:hover { background: var(--green); color: #fff; }

/* КАРТА */
#vsp-map { border: 1.5px solid var(--border); }
.vsp-map-search {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.vsp-map-search input {
    flex: 1;
    padding: 9px 14px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
}
.vsp-map-search input:focus { border-color: var(--green); }
.vsp-map-search button {
    padding: 9px 14px;
    background: var(--green-light);
    border: 1.5px solid #a7f3d0;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: all .15s;
}
.vsp-map-search button:hover { background: var(--green); color: #fff; }
.vsp-coords-row { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 4px; }
.vsp-coords-row .vsp-field { flex: 1; margin-bottom: 0; }

/* ПІДСУМОК */
.vsp-summary {
    background: #f9fafb;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}
.vsp-summary h3 { font-size: 14px; font-weight: 700; margin: 0 0 10px; color: #1a2e14; }
.vsp-summary-item {
    display: flex;
    gap: 8px;
    font-size: 13px;
    padding: 4px 0;
    border-bottom: 0.5px solid #e5e7eb;
}
.vsp-summary-item:last-child { border-bottom: none; }
.vsp-summary-label { color: #9ca3af; min-width: 100px; flex-shrink: 0; }
.vsp-summary-val { color: #1a2e14; font-weight: 500; }

/* ПОГОДЖЕНІСТЬ */
.vsp-agree {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}
.vsp-agree input { width: 16px; height: 16px; margin-top: 1px; flex-shrink: 0; accent-color: var(--green); }
.vsp-agree a { color: var(--green); }

/* КНОПКИ */
.vsp-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.vsp-btn {
    padding: 11px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: all .2s;
    text-decoration: none;
    display: inline-block;
}
.vsp-btn--next, .vsp-btn--submit {
    background: var(--green);
    color: #fff;
}
.vsp-btn--next:hover, .vsp-btn--submit:hover { background: #27500A; }
.vsp-btn--prev {
    background: #f3f4f6;
    color: #374151;
}
.vsp-btn--prev:hover { background: #e5e7eb; }
.vsp-btn--outline {
    background: #fff;
    color: var(--green);
    border: 1.5px solid var(--green);
}
.vsp-btn--outline:hover { background: var(--green-light); }
.vsp-btn:disabled { opacity: .6; cursor: not-allowed; }
.vsp-btn--submit { padding: 12px 32px; font-size: 15px; }

/* УСПІХ */
.vsp-success {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.vsp-success-icon { font-size: 56px; margin-bottom: 16px; }
.vsp-success h2 { font-size: 24px; color: #1a2e14; margin: 0 0 12px; }
.vsp-success p { font-size: 15px; color: #374151; max-width: 480px; margin: 0 auto 16px; line-height: 1.6; }

/* Адаптив */
@media(max-width:560px) {
    .vsp-steps { padding: 12px; gap: 0; }
    .vsp-step-label { font-size: 9px; }
    .vsp-pane { padding: 16px; }
    .vsp-step-line { min-width: 8px; }
    .vsp-coords-row { flex-wrap: wrap; }
}