/*
 * Contact page + thank-you page + Shoper's own form route — page-specific styles.
 * Own stylesheet, not part of styles.less (same approach as dealers.css).
 * Loaded only where scripts/header.tpl says so. Scoped under .loca-contact,
 * .loca-contact-thanks and .shop_contact, so nothing can leak onto other pages.
 * Reuses user.css's tokens, .container, .btn and .btn-border.
 */

/* The page's own hero starts right under the sticky breadcrumb bar. */
body:has(.loca-contact) .main,
body:has(.loca-contact-thanks) .main { padding-top: 0; }

/* FAQ belongs on the contact page, not after "message sent". */
body:has(.loca-contact-thanks) #cnt-module-faq { display: none; }

/* ==========================================================================
   Background ring: same shape as the Dealers page, white, fading downwards.
   ========================================================================== */
.lc-hero,
.lc-thanks {
    position: relative;
    overflow: hidden;
}
.lc-hero::before,
.lc-thanks::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -300px;
    right: -260px;
    width: 1120px;
    height: 1123px;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1055 1058'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.6'/%3E%3Cstop offset='.9' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23a)' fill-rule='evenodd' d='M527.397 746.775C407.405 746.775 310.19 649.262 310.19 529 310.19 408.76 407.405 311.247 527.397 311.247 647.207 311.247 744.559 408.76 744.559 529 744.559 649.262 647.207 746.775 527.397 746.775ZM527.397 0C236.134 0 0 236.869 0 529 0 821.108 236.134 1058 527.397 1058 818.659 1058 1054.79 821.108 1054.79 529 1054.79 236.869 818.659 0 527.397 0Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.lc-hero > .container,
.lc-thanks > .container {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   Addresses + form
   ========================================================================== */
.lc-hero { padding: clamp(40px, 5vw, 72px) 0; }
.box_infopage .innerbox .lc-hero h1,
.box_infopage .innerbox .lc-thanks h1 {
    margin: 0 0 clamp(28px, 3vw, 44px);
    font-size: clamp(50px, 8vw, 116px);
    line-height: 1;
    font-weight: 700;
    text-align: left;
}
.lc-columns {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: clamp(40px, 6vw, 96px);
}
.lc-data {
    flex: 1 1 400px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.lc-form { flex: 1.2 1 460px; min-width: 0; }

.box_infopage .innerbox .lc-block h2,
.lc-form #box_contact .boxhead h3 {
    margin: 0;
    padding: 0 0 10px;
    border-bottom: 1px solid #6e6e6e;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
}
.lc-block dl {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 6px 16px;
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.45;
}
.lc-block dt { font-weight: 700; }
.lc-block dd { margin: 0; }
.lc-block a { color: var(--theme-color-black); text-decoration: underline; }
.lc-block a:hover { color: var(--theme-color-black); text-decoration: none; }

/* ==========================================================================
   Form: Shoper's markup (scripts/contact/_form.tpl), restyled. Also used on
   Shoper's own route, .shop_contact, which has no CMS content around it.
   ========================================================================== */
.shop_contact .innermain {
    width: calc(100% - 25%);
    margin-right: 12.5%;
    margin-left: 12.5%;
    padding-top: 48px;
}
.lc-form #box_contact,
.shop_contact #box_contact { margin: 0; padding: 0; background: transparent; }
.lc-form #box_contact .boxhead,
.shop_contact #box_contact .boxhead { margin: 0 0 16px; padding: 0; }
.shop_contact #box_contact .boxhead h3 { font-size: 28px; line-height: 1.2; }
.lc-form #box_contact .innerbox,
.shop_contact #box_contact .innerbox { padding: 0; }

.lc-form #box_contact fieldset,
.shop_contact #box_contact fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 0;
    padding: 0;
    border: 0;
}
.lc-form #box_contact fieldset > *,
.shop_contact #box_contact fieldset > * { flex: 1 1 100%; min-width: 0; margin: 0; }
/* Name and e-mail share a row where there's room. */
.lc-form #box_contact fieldset > .f-row:nth-of-type(1),
.lc-form #box_contact fieldset > .f-row:nth-of-type(2),
.shop_contact #box_contact fieldset > .f-row:nth-of-type(1),
.shop_contact #box_contact fieldset > .f-row:nth-of-type(2) { flex: 1 1 220px; }

.lc-form #box_contact .f-row > div,
.shop_contact #box_contact .f-row > div {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    flex: none;
}
.lc-form #box_contact label,
.shop_contact #box_contact label {
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;
    text-align: left;
}
.lc-form #box_contact input:not([type="checkbox"]),
.lc-form #box_contact textarea,
.shop_contact #box_contact input:not([type="checkbox"]),
.shop_contact #box_contact textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    /* Below 16px iOS zooms the page in when a field gets focus. */
    font-size: 16px;
    line-height: 1.4;
    color: var(--theme-color-black);
    background: var(--theme-color-white);
    border: 1px solid var(--theme-color-black);
    border-radius: 0;
    padding: 13px 14px;
    min-height: 50px;
    height: auto;
    box-shadow: none;
}
.lc-form #box_contact textarea,
.shop_contact #box_contact textarea { min-height: 168px; resize: vertical; }
.lc-form #box_contact input:focus,
.lc-form #box_contact textarea:focus,
.shop_contact #box_contact input:focus,
.shop_contact #box_contact textarea:focus {
    border-color: var(--theme-color-black);
    outline: 2px solid var(--theme-color-black);
    outline-offset: 1px;
}
.lc-form #box_contact input[aria-invalid="true"],
.lc-form #box_contact textarea[aria-invalid="true"],
.shop_contact #box_contact input.error,
.shop_contact #box_contact textarea.error {
    border: 2px solid #B3261E;
    padding: 12px 13px;
}
.lc-form #box_contact input.lc-valid { border-color: #1A7F37; }

.lc-form #box_contact ul.error,
.shop_contact #box_contact ul.error {
    display: block;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    background: transparent;
    border: 0;
    color: #B3261E;
    font-size: 13px;
    line-height: 1.4;
}
.lc-form #box_contact ul.error li,
.shop_contact #box_contact ul.error li { margin: 0; padding: 0; list-style: none; color: inherit; font-size: inherit; }

.lc-form #box_contact .bottombuttons,
.shop_contact #box_contact .bottombuttons { margin: 0; padding: 0; }
.lc-form #box_contact .bottombuttons > div,
.shop_contact #box_contact .bottombuttons > div { width: 100%; text-align: left; }
.lc-form #box_contact button[type="submit"][disabled] { opacity: .6; cursor: progress; }

.lc-form-note {
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #333;
}
.lc-form-note a { color: var(--theme-color-black); text-decoration: underline; }
.lc-form-note a:hover { color: var(--theme-color-black); }

/* Shown by js/contact.js above the fields: summary, or "we can't tell if it went". */
.lc-form-alert {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
    color: #B3261E;
}
.lc-form-alert a { color: inherit; text-decoration: underline; }
.lc-form-alert a:hover { color: inherit; }

/* ==========================================================================
   Showroom: full-width map, same grey basemap as Dealers, panel on top.
   ========================================================================== */
.lc-showroom { position: relative; height: 640px; background: #dedede; }
.lc-map { position: absolute; inset: 0; z-index: 0; }
.lc-map .leaflet-tile-pane { filter: grayscale(1) contrast(.88) brightness(1.08); }
/* CMS content styles images inside .fr-view; map tiles must stay untouched. */
.lc-map .leaflet-tile {
    position: absolute !important;
    max-width: none !important;
    margin: 0 !important;
}
.lc-map .leaflet-control-zoom {
    border: 1px solid var(--theme-color-black) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.lc-map .leaflet-control-zoom a,
.lc-map .leaflet-control-zoom a:hover { color: var(--theme-color-black); border-radius: 0 !important; }
.lc-panel {
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    max-height: calc(100% - 80px);
    right: 12.5%;
    box-sizing: border-box;
    width: 380px;
    overflow: auto;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: rgba(255, 255, 255, .94);
}
.lc-panel img {
    display: block;
    flex: none;
    width: 100%;
    height: 180px;
    margin: 0;
    object-fit: cover;
}
.box_infopage .innerbox .lc-panel h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.1;
    font-weight: 700;
}
.lc-panel p { margin: 0; font-size: 16px; line-height: 1.5; }
.lc-panel .btn { align-self: stretch; text-align: center; }
.lc-panel a.lc-link { font-size: 14px; color: var(--theme-color-black); text-decoration: underline; }
.lc-panel a.lc-link:hover { color: var(--theme-color-black); text-decoration: none; }

/* ==========================================================================
   Thank-you page
   ========================================================================== */
.lc-thanks { padding: clamp(48px, 7vw, 112px) 0; }
.lc-thanks-columns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(32px, 6vw, 96px);
}
.lc-thanks-text { flex: 1.25 1 460px; min-width: 0; }
/* Sized so the longest word (DZIĘKUJEMY) stays on one line. */
.box_infopage .innerbox .lc-thanks h1 { margin-bottom: 24px; font-size: clamp(40px, 5.6vw, 84px); }
.lc-thanks-lead { margin: 0 0 8px; font-size: clamp(20px, 2vw, 26px); line-height: 1.3; font-weight: 600; }
.lc-thanks-text p:not(.lc-thanks-lead) { margin: 0; font-size: 16px; line-height: 1.6; }
.lc-thanks-text p a:not(.btn):not(.btn-border) { color: var(--theme-color-black); text-decoration: underline; white-space: nowrap; }
.lc-thanks-text p a:not(.btn):not(.btn-border):hover { color: var(--theme-color-black); text-decoration: none; }
.lc-thanks-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.lc-thanks-actions a { box-sizing: border-box; }
.lc-thanks-photo { flex: 1 1 400px; min-width: 0; }
.lc-thanks-photo img {
    display: block;
    width: 100%;
    height: clamp(240px, 32vw, 460px);
    margin: 0;
    object-fit: cover;
}

/* ==========================================================================
   Same side margins as user.css's .container at each width.
   ========================================================================== */
@media all and (max-width: 1640px) {
    .lc-panel { right: 8.5%; }
    .shop_contact .innermain { width: calc(100% - 17%); margin-right: 8.5%; margin-left: 8.5%; }
}
@media all and (max-width: 860px) {
    .lc-hero::before,
    .lc-thanks::before { top: -180px; right: -230px; width: 640px; height: 642px; }
    .lc-showroom { height: auto; }
    .lc-map { position: relative; inset: auto; height: 300px; }
    .lc-panel {
        position: static;
        transform: none;
        max-height: none;
        width: auto;
        overflow: visible;
        background: var(--theme-color-white);
    }
}
@media all and (max-width: 767px) {
    .shop_contact .innermain { width: calc(100% - 11%); margin-right: 5.5%; margin-left: 5.5%; }
}
@media all and (max-width: 500px) {
    .lc-block dl { grid-template-columns: 132px minmax(0, 1fr); } /* fits "Telefonnummer" (DE) */
    .lc-thanks-actions a { flex: 1 1 100%; }
    .shop_contact .innermain { width: calc(100% - 48px); margin-right: 24px; margin-left: 24px; }
}