/* =========================================================
   PARTSSTART CAR FORM V1
   ========================================================= */

.ps-car-page {
    --ps-dark: #262625;
    --ps-text: #45403a;
    --ps-muted: #91887d;
    --ps-gold: #b99550;
    --ps-border: #e4dbcf;
    --ps-soft: #faf8f4;
}


/* ---------------------------------------------------------
   Навигация и вводный текст
   --------------------------------------------------------- */

.ps-car-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin: 0 0 10px;

    color: #655e56 !important;
    font-size: 12px;
    text-decoration: none !important;
}

.ps-car-back:hover {
    color: #262625 !important;
}

.ps-car-intro {
    margin: -5px 0 22px;

    color: var(--ps-muted);
    font-size: 12px;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   Основные панели
   --------------------------------------------------------- */

.ps-car-page .panel {
    margin-bottom: 16px !important;

    background: #fff !important;

    border: 1px solid var(--ps-border) !important;
    border-radius: 10px !important;

    box-shadow: none !important;

    overflow: hidden !important;
}

.ps-car-page .panel-heading {
    padding: 14px 18px !important;

    background: var(--ps-soft) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ps-border) !important;

    color: #37322d !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

.ps-car-page .panel-body {
    padding: 18px 20px !important;
}


/* ---------------------------------------------------------
   Поля
   --------------------------------------------------------- */

.ps-car-page .form-group {
    margin-bottom: 13px !important;
}

.ps-car-page .form-group label {
    display: block !important;

    margin-bottom: 5px !important;

    color: #5f5850 !important;

    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
}

.ps-car-page .form-control {
    width: 100% !important;
    height: 40px !important;

    padding: 8px 11px !important;

    background: #fff !important;

    border: 1px solid #ddd5ca !important;
    border-radius: 6px !important;

    color: #3f3a35 !important;

    font-size: 12px !important;

    box-shadow: none !important;
    outline: none !important;
}

.ps-car-page textarea.form-control,
.ps-car-page textarea {
    min-height: 92px !important;
    height: 92px !important;

    padding: 10px 11px !important;

    resize: vertical !important;
}

.ps-car-page .form-control:focus {
    border-color: var(--ps-gold) !important;

    box-shadow:
        0 0 0 2px rgba(185,149,80,.08) !important;
}

.ps-car-page .form-control::placeholder {
    color: #aaa39a !important;
}


/* ---------------------------------------------------------
   Фото
   --------------------------------------------------------- */

.ps-car-photo-area {
    margin-top: 5px !important;
    padding: 18px !important;

    text-align: center !important;

    background: #fbfaf7 !important;

    border: 1px solid var(--ps-border) !important;
    border-radius: 8px !important;
}

.ps-car-photo-title {
    margin-bottom: 5px !important;

    color: #4f4942 !important;

    font-size: 12px !important;
    font-weight: 600 !important;
}

.ps-car-photo-hint {
    margin-bottom: 12px !important;

    color: #938b81 !important;

    font-size: 10px !important;
}

.ps-car-page #image_preshow {
    display: block !important;

    width: 150px !important;
    height: 110px !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 auto !important;
    padding: 5px !important;

    object-fit: contain !important;

    background: #fff !important;

    border: 1px solid #ded5c8 !important;
    border-radius: 8px !important;

    cursor: pointer !important;
}

.ps-car-photo-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    min-height: 36px;

    margin-top: 10px;
    padding: 7px 13px;

    background: #fff;

    border: 1px solid #d7cec1;
    border-radius: 6px;

    color: #48423b;

    font-size: 11px;
    font-weight: 500;

    cursor: pointer;
}

.ps-car-photo-button:hover {
    border-color: var(--ps-gold);

    background: #faf7f1;

    color: #262625;
}


/* ---------------------------------------------------------
   Каталог ТО
   --------------------------------------------------------- */

.ps-car-to-panel .panel-heading {
    background: #faf8f4 !important;

    color: #37322d !important;
}

.ps-car-to-note {
    margin-bottom: 14px;

    color: #8d857b;

    font-size: 11px;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   Кнопки формы
   --------------------------------------------------------- */

.ps-car-actions {
    display: flex !important;
    align-items: center !important;

    gap: 8px !important;

    margin: 4px 0 24px !important;
}

.ps-car-save {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    min-height: 40px !important;

    margin: 0 !important;
    padding: 8px 16px !important;

    background: var(--ps-dark) !important;

    border: 1px solid var(--ps-dark) !important;
    border-radius: 6px !important;

    color: #fff !important;

    font-size: 11px !important;
    font-weight: 600 !important;

    box-shadow: none !important;
}

.ps-car-save:hover {
    background: #111 !important;
    border-color: #111 !important;
}

.ps-car-cancel {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 40px;

    padding: 8px 15px;

    background: #fff;

    border: 1px solid #d8d0c5;
    border-radius: 6px;

    color: #59534c !important;

    font-size: 11px;
    font-weight: 500;

    text-decoration: none !important;
}

.ps-car-cancel:hover {
    border-color: var(--ps-gold);

    color: #262625 !important;
}


/* ---------------------------------------------------------
   Убираем старое визуальное оформление Bootstrap primary
   --------------------------------------------------------- */

.ps-car-page .panel-primary {
    border-color: var(--ps-border) !important;
}

.ps-car-page .panel-primary > .panel-heading {
    background: var(--ps-soft) !important;
    border-color: var(--ps-border) !important;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .ps-car-page .panel-body {
        padding: 14px !important;
    }

    .ps-car-page .form-group {
        width: 100% !important;
    }

    .ps-car-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .ps-car-save,
    .ps-car-cancel {
        width: 100% !important;
    }

    .ps-car-page #image_preshow {
        width: 135px !important;
        height: 100px !important;
    }
}

/* ===== END PARTSSTART CAR FORM V1 ===== */

/* ===== PARTSSTART CAR EXPERIENCE V2 ===== */
.ps-car-page-v2 .ps-car-live-card {
    display:grid; grid-template-columns:auto 1fr 190px; align-items:center; gap:16px;
    margin:0 0 16px; padding:17px 20px; background:linear-gradient(135deg,#262626,#38332d);
    border-radius:12px; color:#fff; box-shadow:0 10px 26px rgba(35,30,25,.12);
}
.ps-car-live-icon { display:flex; align-items:center; justify-content:center; width:48px; height:48px; background:rgba(211,163,61,.14); border:1px solid rgba(224,185,100,.3); border-radius:12px; color:#e3b552; font-size:20px; }
.ps-car-live-main { display:flex; flex-direction:column; min-width:0; }
.ps-car-live-main > span { margin-bottom:2px; color:#bfb8ae; font-size:9px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.ps-car-live-main strong { overflow:hidden; color:#fff; font-size:17px; text-overflow:ellipsis; white-space:nowrap; }
.ps-car-live-main small { margin-top:3px; overflow:hidden; color:#cfc8be; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.ps-car-progress { display:flex; flex-direction:column; gap:7px; color:#d8d1c7; font-size:10px; }
.ps-car-progress i { display:block; height:5px; background:rgba(255,255,255,.13); border-radius:9px; overflow:hidden; }
.ps-car-progress b { display:block; width:0; height:100%; background:#d4a33b; border-radius:9px; transition:width .2s ease; }
.ps-car-page-v2 .ps-car-main-panel > .panel-heading { display:none; }
.ps-car-page-v2 .ps-car-main-panel > .panel-body { padding:0 !important; }
.ps-car-sections { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ps-car-section { min-width:0; padding:18px; background:#fff; border:1px solid var(--ps-border); border-radius:11px; }
.ps-car-section-head { margin-bottom:15px; }
.ps-car-section-head > div { display:flex; flex-direction:column; gap:3px; }
.ps-car-section-head strong { color:#322e2a; font-size:14px; }
.ps-car-section-head span { color:#92897e; font-size:10px; line-height:1.45; }
.ps-car-section-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.ps-car-section-grid .form-group { width:100% !important; padding:0 !important; }
.ps-section-id { background:#fdfbf7; border-color:#dfd2bb; }
.ps-car-id-notice { display:flex; align-items:flex-start; gap:9px; margin:-3px 0 14px; padding:10px 11px; background:#f5efe3; border-radius:7px; color:#71634c; font-size:10px; line-height:1.45; }
.ps-car-id-notice i { margin-top:2px; color:#b68a31; }
.ps-car-frame-hint { display:block; margin-top:6px; color:#8b8175; font-size:10px; line-height:1.35; }
.ps-section-extra .ps-note-group, .ps-section-extra .ps-car-photo-area { grid-column:1 / -1; }
.ps-section-tech .ps-note-group { grid-column:1 / -1; }
.ps-car-page-v2 .ps-car-photo-area { margin:0 !important; padding:14px !important; }
.ps-car-page-v2 #image_preshow { width:180px !important; height:120px !important; }
.ps-commons-photo { display:flex; gap:14px; align-items:center; margin:12px auto 0; padding:9px 11px; border-top:1px solid #e5dccf; max-width:360px; text-align:left; }
.ps-commons-photo[hidden] { display:none; }
.ps-commons-photo-copy { display:flex; flex-direction:column; gap:3px; min-width:0; }
.ps-commons-photo-copy strong { color:#3d3831; font-size:13px; }
.ps-commons-photo-copy span, .ps-commons-photo-copy small { color:#7c7469; font-size:10px; line-height:1.4; }
.ps-commons-photo-copy a { display:inline-block; margin:4px 10px 0 0; color:#9c701c; font-size:10px; text-decoration:underline; }
.ps-car-optional-panel > .panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ps-panel-toggle { display:inline-flex; align-items:center; gap:7px; padding:6px 10px; background:#fff; border:1px solid #d9d0c4; border-radius:6px; color:#635b52; font-size:10px; }
.ps-car-optional-panel:not(.is-open) > .panel-body { display:none; }
.ps-car-optional-panel.is-open .ps-panel-toggle i { transform:rotate(180deg); }
.ps-car-page-v2 .ps-car-actions { position:sticky; bottom:10px; z-index:30; margin:18px 0 28px !important; padding:10px; background:rgba(255,255,255,.94); border:1px solid #e4dbcf; border-radius:10px; box-shadow:0 8px 25px rgba(45,38,30,.12); backdrop-filter:blur(8px); }
.ps-car-to-panel .ps-to-source-title { margin:3px 0 12px; padding:10px 12px; background:#f5f1e9; border-left:3px solid #d4a33b; color:#4e473e; font-size:12px; font-weight:700; }
.ps-car-to-panel .clearfix + .ps-to-source-title { margin-top:18px; }
@media (max-width: 991px) {
    .ps-car-sections { grid-template-columns:1fr; }
}
@media (max-width: 767px) {
    .ps-car-page-v2 .ps-car-live-card { grid-template-columns:auto 1fr; padding:14px; }
    .ps-car-progress { grid-column:1 / -1; }
    .ps-car-section { padding:14px; }
    .ps-car-section-grid { grid-template-columns:1fr; }
    .ps-commons-photo { align-items:flex-start; }
    .ps-car-page-v2 .ps-car-actions { bottom:6px; }
}
/* ===== END PARTSSTART CAR EXPERIENCE V2 ===== */

/* ===== UMAPI AUTOCOMPLETE ===== */
.ps-umapi-source { display:inline-flex; align-items:center; margin-left:7px; padding:2px 5px; background:#f3ead7; border-radius:4px; color:#9a6f19; font-size:8px; font-weight:700; letter-spacing:.05em; vertical-align:middle; }
.ps-umapi-ac { z-index:9000; max-height:320px; }
.ps-umapi-ac .ps-garage-ac-item { display:flex; flex-direction:column; width:100%; border:0; border-bottom:1px solid #eee8df; text-align:left; }
.ps-umapi-ac .ps-garage-ac-item:last-child { border-bottom:0; }
.ps-umapi-ac .ps-garage-ac-title { display:block; }
.ps-umapi-ac .ps-garage-ac-meta { display:block; }
.ps-umapi-ac .ps-garage-ac-empty.is-error { color:#a04d42; }
/* ===== END UMAPI AUTOCOMPLETE ===== */

/* ===== VIN AUTO FILL ===== */
.ps-vin-fill-status { display:none; margin-top:7px; font-size:10px; line-height:1.45; }
.ps-vin-fill-status:not(:empty) { display:block; }
.ps-vin-fill-status.is-loading { color:#8b6a25; }
.ps-vin-fill-status.is-success { padding:8px 10px; background:#eef7ed; border-radius:6px; color:#39713b; }
.ps-vin-fill-status.is-error { color:#a04d42; }
.ps-vin-fill-status.is-choice { padding:9px; background:#f5efe3; border-radius:7px; color:#655a49; }
.ps-vin-fill-status.is-choice > span { display:block; margin-bottom:7px; }
.ps-vin-fill-status.is-choice button { margin:0 6px 6px 0; padding:6px 9px; background:#fff; border:1px solid #d9c9ab; border-radius:5px; color:#332f2a; }
.ps-identifier-guide { margin-top:5px; color:#8b8175; font-size:10px; line-height:1.35; }
.ps-engine-selected-hint { display:block; margin-top:6px; color:#39713b; font-size:10px; line-height:1.4; }
/* ===== END VIN AUTO FILL ===== */