/* Mobile import and vehicle purchase forms; desktop layout is unchanged. */
@media (max-width: 767px) {
    .service-form-page .page-content {
        color: #1e211f;
        background: #f6f5f2;
    }

    .service-form-page .car-background {
        display: flex;
        align-items: flex-end;
        height: auto;
        min-height: 184px;
        padding: 28px 22px;
        background-position: center;
        background-size: cover;
        isolation: isolate;
    }

    .service-form-page .car-background::before {
        position: absolute;
        inset: 0;
        z-index: -1;
        content: "";
        background: linear-gradient(0deg, #192019e8, #19201950);
    }

    .service-form-page .car-info-container {
        position: static;
        width: 100%;
        padding: 0;
        text-align: left;
        background: transparent;
        transform: none;
    }

    .service-form-page .car-info h2 {
        max-width: 24ch;
        margin: 0;
        color: #fff;
        font-family: var(--body-font);
        font-size: 29px;
        font-weight: 600;
        line-height: 1.18;
        letter-spacing: -.8px;
    }

    .service-form-page .page-content .content-inner {
        margin: 0;
        padding: 26px 16px 40px;
        background: #f6f5f2 !important;
    }

    .service-form-page .page-content .container {
        width: 100%;
        max-width: 560px;
        padding: 0;
    }

    .service-form-page .page-content .row {
        margin: 0;
    }

    .service-form-page .page-content .row > div {
        padding: 0;
    }

    .service-form-page .page-content p {
        margin: 0 6px 24px;
        color: #72766f;
        font-size: 14px;
        line-height: 1.75;
    }

    .service-form-page .form-step {
        padding: 22px 20px;
        border: 1px solid #e8e6df;
        border-radius: 16px;
        background: #fff;
    }

    .service-form-page .title-element {
        margin: 0 0 24px;
        color: #1e211f;
        font-size: 21px;
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: -.5px;
    }

    .service-form-page .title-element::before {
        display: block;
        margin-bottom: 10px;
        color: #957749;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 1.4px;
        line-height: 1.5;
        text-transform: uppercase;
    }

    .service-form-page #step1 .title-element::before { content: "Korak 1 od 2"; }
    .service-form-page #step2 .title-element::before { content: "Korak 2 od 2"; }

    .service-form-page .input-box,
    .service-form-page .input-box:hover,
    .service-form-page .input-box:focus {
        height: auto;
        min-width: 0;
        margin: 0 0 18px;
        padding: 0;
        border: 0;
        border-radius: 0;
    }

    .service-form-page .input-box label {
        display: block;
        margin: 0 0 8px;
        color: #5e655a;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.5;
    }

    .service-form-page .input-box input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
        display: block;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        min-height: 48px;
        margin: 0;
        padding: 12px 14px;
        border: 1px solid #dedfd8;
        border-radius: 8px;
        color: #1e211f;
        background: #fff;
        box-shadow: none;
        font-family: inherit;
        font-size: 16px;
        line-height: 1.4;
    }

    .service-form-page .input-box input::placeholder {
        color: #93988d;
        font-family: inherit;
        font-size: 16px;
    }

    .service-form-page .input-box input:focus {
        border-color: #ad8e5e !important;
        outline: 2px solid #ad8e5e35;
        outline-offset: 1px;
    }

    .service-form-page .form-consent {
        display: grid;
        grid-template-columns: 20px 1fr;
        align-items: center;
        gap: 12px;
        min-height: 44px;
        margin: 4px 0 22px;
    }

    .service-form-page .form-consent label {
        display: flex;
        align-items: center;
        min-height: 44px;
        margin: 0;
        cursor: pointer;
    }

    .service-form-page .form-consent input,
    .service-form-page .field-radio-item input {
        position: static;
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
        margin: 0;
        padding: 0;
        appearance: auto;
        accent-color: #8f744b;
        cursor: pointer;
    }

    .service-form-page .field-radio-item input::after {
        display: none;
    }

    .service-form-page .box-check-el {
        display: grid;
        gap: 8px;
        margin: 0 0 24px;
        padding: 0;
        list-style: none;
    }

    .service-form-page .box-check-el li {
        gap: 12px;
        min-height: 48px;
        padding: 0 12px;
        border: 1px solid #e4e4dd;
        border-radius: 8px;
        background: #fafaf7;
    }

    .service-form-page .box-check-el li label {
        display: flex;
        align-items: center;
        flex: 1;
        min-height: 48px;
        margin: 0;
        color: #343b30;
        font-size: 13px;
        line-height: 1.5;
        cursor: pointer;
    }

    .service-form-page .box-check-el li:has(input:checked) {
        border-color: #ad8e5e;
        background: #f7f3eb;
    }

    .service-form-page .page-content .btn {
        display: block;
        width: 100%;
        min-height: 48px;
        margin: 6px 0 0;
        padding: 14px 12px;
        border: 1px solid #262e24;
        border-radius: 8px;
        color: #fff;
        background: #262e24;
        box-shadow: none;
        font-family: inherit;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.5;
        letter-spacing: .35px;
    }

    .service-form-page .page-content .btn:hover,
    .service-form-page .page-content .btn:active {
        border-color: #3e4938;
        background: #3e4938;
    }

    .service-form-page .page-content .btn:focus-visible {
        outline: 2px solid #ad8e5e;
        outline-offset: 4px;
    }
}