:root {
    --offer-brown: #5A3A22;
    --offer-brown-dark: #4a2f1b;
    --offer-gold: #C9873A;
    --offer-line: rgba(46, 33, 25, .16);
    --offer-bg: #F1EEE9;
    --offer-card: #FFFFFF;
    --offer-muted: #6B5B4E;
    --offer-ink: #2E2119;
    --offer-soft: #F7F4EF;
}

body.body.public-offer {
    background: var(--offer-bg);
    color: var(--offer-ink);
    font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    overflow-x: hidden;
}

body.public-offer .content {
    max-width: 1240px;
    margin: 0 auto;
    overflow-x: hidden;
}

body.public-offer .box {
    background: var(--offer-card);
    border-radius: 12px;
    border-top: 0;
    box-shadow: 0 1px 3px rgba(60, 45, 25, .08);
}

body.public-offer .box.box-solid.box-success > .box-header,
body.public-offer .box.box-success > .box-header {
    background: var(--offer-brown) !important;
    color: #fff !important;
}

body.public-offer .box.box-solid.box-success > .box-header h3,
body.public-offer .box.box-success > .box-header h3,
body.public-offer .box.box-solid.box-success > .box-header .box-title,
body.public-offer .box.box-success > .box-header .box-title {
    color: #fff !important;
}

body.public-offer .box.box-solid.box-success,
body.public-offer .box.box-solid.box-success {
    border: 0 !important;
}

body.public-offer .box-header.with-border {
    border-bottom-color: var(--offer-line);
}

body.public-offer .box-title,
body.public-offer h3,
body.public-offer h4,
body.public-offer .box-header h3 {
    color: var(--offer-brown);
}

body.public-offer .form-control,
body.public-offer select.form-control,
body.public-offer input.form-control,
body.public-offer textarea.form-control,
body.public-offer div.form-control {
    border: 1.5px solid var(--offer-line) !important;
    border-radius: 7px;
    color: var(--offer-ink);
    background: #fff;
    box-shadow: none;
    height: 34px;
    min-height: 34px;
    padding: 4px 8px;
    font-size: 13px;
    box-sizing: border-box;
}

body.public-offer textarea.form-control {
    height: auto;
    min-height: 80px;
}

body.public-offer .form-control:focus {
    border-color: var(--offer-gold) !important;
    box-shadow: none;
}

/* Kötelező, de még ki nem töltött mezők diszkrét jelzése */
body.public-offer .form-control[required]:invalid,
body.public-offer select[required]:invalid,
body.public-offer textarea[required]:invalid {
    background-color: #fdf1f0 !important;
    border-color: #e8c4c0 !important;
}

body.public-offer .form-control[required]:invalid:focus,
body.public-offer select[required]:invalid:focus {
    border-color: var(--offer-gold) !important;
}

/* Lépésenkénti kitöltés (offer-wizard.js): a következő mezők rejtve, amíg az előző nincs kitöltve */
body.public-offer .aszw-step-hidden {
    display: none !important;
}

body.public-offer .aszw-step-reveal {
    animation: aszw-reveal 0.35s ease-out;
}

@keyframes aszw-reveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

body.public-offer .input-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

body.public-offer .input-group > .form-control,
body.public-offer .input-group > input,
body.public-offer .input-group > select,
body.public-offer .input-group > textarea {
    width: 100%;
    display: block;
    position: relative;
}

body.public-offer .input-group-addon,
body.public-offer .box .input-group .iga_85px,
body.public-offer .box .input-group .iga_135px {
    width: 100% !important;
    max-width: none;
    display: block;
    text-align: left;
    border: 0 !important;
    background: transparent !important;
    padding: 0 0 3px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--offer-muted) !important;
    white-space: normal;
}

body.public-offer .btn-success,
body.public-offer button.btn.btn-success {
    background-color: var(--offer-brown) !important;
    border-color: var(--offer-brown) !important;
    color: #fff !important;
}

body.public-offer .btn-success:hover,
body.public-offer .btn-success:focus {
    background-color: var(--offer-brown-dark) !important;
    border-color: var(--offer-brown-dark) !important;
}

body.public-offer .btn-warning,
body.public-offer select.only_material.btn-warning {
    background-color: #fff !important;
    border: 1.5px solid var(--offer-gold) !important;
    color: var(--offer-ink) !important;
}

body.public-offer select.only_material {
    font-weight: 400;
    border-radius: 7px;
}

body.public-offer .select-order-type {
    margin-bottom: 20px;
}

body.public-offer .select-order-type .form-group {
    margin-bottom: 0;
}

body.public-offer .select-order-type select.form-control,
body.public-offer .select-order-type select.only_material,
body.public-offer .select-order-type select.only_material option {
    color: var(--offer-ink) !important;
    background-color: #fff !important;
}

body.public-offer #fence-elements {
    border-top: 2px solid var(--offer-brown) !important;
    padding: 18px 0 8px !important;
    overflow: visible;
}

body.public-offer .table-th {
    background-color: var(--offer-brown) !important;
}

body.public-offer .table-tr.total-line.box.box-success,
body.public-offer .box.box-success {
    background: var(--offer-card) !important;
}

body.public-offer .section,
body.public-offer .section.col-md-12 {
    padding-left: 0;
    padding-right: 0;
    float: none;
    width: 100%;
}

body.public-offer .section[data-section-id] {
    background: var(--offer-card);
    border: 1px solid var(--offer-line);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(60, 45, 25, .10);
    padding: 12px 14px 10px;
    margin: 0 0 20px;
    box-sizing: border-box;
    overflow: visible;
}

body.public-offer .section-box {
    overflow: visible;
    background: transparent;
    box-shadow: none;
}

body.public-offer .section-box > .box-header {
    border-bottom: 0;
    min-height: 0;
    padding: 0 4px 8px;
    background: transparent;
}

body.public-offer .section-keret {
    display: grid;
    /* A két oszlop szélessége azonos, így a vizualizáció nem nő túl nagyra. */
    grid-template-columns: minmax(260px, 720px) minmax(260px, 720px);
    grid-template-areas:
        "form viz"
        "total viz";
    gap: 24px;
    align-items: start;
    padding: 0 4px 8px;
}

body.public-offer .section-urlap {
    grid-area: form;
    background: #9999992b;
    border-radius: 12px;
    padding: 16px 18px 18px;
    box-shadow: none;
    min-width: 0;
}

body.public-offer .section-urlap h2 {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--offer-muted);
}

body.public-offer .section-urlap .valaszto {
    border-bottom: 1px solid var(--offer-line);
    padding-bottom: 12px;
    margin-bottom: 14px;
}

body.public-offer .section-urlap .form-group {
    margin-bottom: 11px;
}

body.public-offer .section-urlap .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.public-offer .section-urlap .col-md-4,
body.public-offer .section-urlap .col-md-6,
body.public-offer .section-urlap .col-md-8,
body.public-offer .section-urlap .col-md-12,
body.public-offer .section-urlap .row > [class*="col-"] {
    width: 100% !important;
    float: none;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.public-offer .section-urlap .input-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

body.public-offer .section-urlap .input-group-addon {
    width: 100%;
    max-width: none;
    display: block;
    text-align: left;
    border: 0 !important;
    background: transparent !important;
    padding: 0 0 3px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--offer-muted) !important;
    white-space: normal;
}

body.public-offer .section-urlap .form-control,
body.public-offer .section-urlap select.form-control,
body.public-offer .section-urlap input.form-control,
body.public-offer .section-urlap div.form-control {
    width: 100%;
    height: 34px;
    min-height: 34px;
    padding: 4px 8px;
    border: 1.5px solid var(--offer-line) !important;
    border-radius: 7px;
    background: #fff;
    font-size: 13px;
    box-sizing: border-box;
}

body.public-offer .section-urlap div.form-control {
    display: flex;
    align-items: center;
    line-height: 22px;
}

body.public-offer .section-kepoldal {
    grid-area: viz;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    min-width: 0;
}

body.public-offer .kepdoboz {
    width: 100%;
    max-width: 780px;
    aspect-ratio: 1;
    background: #E6EDF0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(60, 45, 25, .10);
}

body.public-offer .kepdoboz svg {
    display: block;
    width: 100%;
    height: 100%;
}

@supports not (aspect-ratio: 1) {
    body.public-offer .kepdoboz {
        position: relative;
        padding-top: 100%;
        height: 0;
    }

    body.public-offer .kepdoboz svg {
        position: absolute;
        left: 0;
        top: 0;
    }
}

body.public-offer .adatsor {
    width: 100%;
    max-width: 780px;
    background: var(--offer-card);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 16px;
    color: var(--offer-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    box-shadow: 0 1px 3px rgba(60, 45, 25, .08);
}

body.public-offer .adatsor b {
    color: var(--offer-brown);
    font-weight: 700;
    font-size: 18px;
}

body.public-offer .box-footer-section {
    background: transparent !important;
    padding: 8px 4px 4px !important;
    margin: 0 !important;
}

body.public-offer .box-footer-section .add_section {
    max-width: 300px;
    margin-left: 0;
}

body.public-offer #fence-elements > .row > .col-md-12 > .add_section {
    display: none !important;
}

body.public-offer .tooltipico .infobox {
    visibility: hidden;
    z-index: 1;
    position: absolute;
}

body.public-offer .tooltipico.fa-info-circle:before {
    content: "\f05a";
    font-family: FontAwesome;
    color: var(--offer-gold);
    font-size: 16px;
}

.tooltipico.fa-info-circle {
    top: -2px;
}

body.public-offer .tooltipico.fa-info-circle {
    width: 18px;
    position: relative;
    height: 18px;
    top: -2px;
    vertical-align: middle;
    display: inline-block;
}

body.public-offer .tooltipico:hover .infobox {
    visibility: visible;
    background: var(--offer-gold);
    color: #fff;
    display: block;
    height: auto;
    min-height: 0;
    padding: 8px 12px;
    width: 230px;
    margin-left: 0;
    border-radius: 8px;
    position: absolute;
    top: 22px;
    left: 0;
    z-index: 50;
    white-space: initial;
    font-size: 13px;
    text-align: left;
    line-height: 1.2em;
}

body.public-offer #sum-block .table {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

body.public-offer #sum-block .tbody {
    display: table-row-group;
}

body.public-offer #sum-block .table-tr {
    display: table-row;
}

body.public-offer #sum-block .table-td,
body.public-offer #sum-block .table-th {
    display: table-cell;
    vertical-align: middle;
    max-width: none;
}

body.public-offer #sum-block .table-td {
    padding: 3px 14px;
    line-height: 1.45;
    font-size: 15px;
}

body.public-offer #sum-block .table-td:first-child {
    padding-right: 16px;
}

body.public-offer #sum-block .table-td:last-child {
    text-align: right;
    white-space: nowrap;
    width: 1%;
    padding-left: 16px;
}

body.public-offer #sum-block .table-th {
    padding: 10px 14px;
    text-align: left;
}

body.public-offer .select-order-type .input-group.required-field {
    display: none !important;
}

@media (max-width: 900px) {
    body.public-offer .section-keret {
        /* minmax(0, 1fr): a bare 1fr cannot shrink below its content and widens the page */
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "form"
            "viz"
            "total";
        padding: 0;
    }

    body.public-offer .kepdoboz,
    body.public-offer .adatsor {
        max-width: 100%;
    }

    /* iOS Safari zooms in on focus when a field's font is below 16px */
    body.public-offer .form-control,
    body.public-offer select.form-control,
    body.public-offer input.form-control,
    body.public-offer textarea.form-control,
    body.public-offer .section-urlap .form-control,
    body.public-offer .section-urlap select.form-control,
    body.public-offer .section-urlap input.form-control {
        font-size: 16px;
    }
}

@media (max-width: 700px) {
    body.public-offer .content {
        padding: 0;
        overflow-x: hidden;
    }

    body.public-offer .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.public-offer #fence-elements {
        margin: 0 !important;
        padding: 12px 0 8px !important;
        overflow: visible;
    }

    body.public-offer [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }

    body.public-offer h3,
    body.public-offer .h3,
    body.public-offer .box-title,
    body.public-offer .box-header h3 {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        max-width: 100%;
        margin-left: 0;
        padding-left: 0;
    }

    body.public-offer .section[data-section-id] {
        padding: 10px 10px 8px;
        margin-left: 0;
        margin-right: 0;
    }

    body.public-offer #sum-block {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100%;
        /* az inline "padding: 18px 10px" oldalsó részét mobilon nullázzuk */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.public-offer .last-step-btn {
        font-size: 20px !important;
        padding: 18px 20px !important;
    }
}

body.public-offer .order-section-total {
    grid-area: total;
    background: var(--offer-card);
    border: 1px solid var(--offer-line);
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 1px 3px rgba(60, 45, 25, .08);
    min-width: 0;
}

body.public-offer .order-section-total .section-total-block {
    margin-left: 0;
    margin-right: 0;
}

body.public-offer .order-section-total .col-xs-6 {
    width: 100%;
    float: none;
    padding-left: 0;
    padding-right: 0;
}

body.public-offer button.btn.btn-success.btn-block.add_section {
    background-color: #337ab7 !important;
    border-color: #2e6da4 !important;
}

body.public-offer button.btn.btn-success.btn-block.add_section:hover,
body.public-offer button.btn.btn-success.btn-block.add_section:focus {
    background-color: #286090 !important;
    border-color: #204d74 !important;
}

body.public-offer .last-step-btn,
body.public-offer button.button.btn.btn-success.btn-block.btn-lg.last-step-btn {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.3;
    padding: 20px 28px;
    white-space: normal;
    min-height: 68px;
    max-width: 720px;
}

body.public-offer .last-step-btn:hover,
body.public-offer .last-step-btn:focus,
body.public-offer button.button.btn.btn-success.btn-block.btn-lg.last-step-btn:hover,
body.public-offer button.button.btn.btn-success.btn-block.btn-lg.last-step-btn:focus {
    background-color: #218838 !important;
    border-color: #1e7e34 !important;
}

body.public-offer button#new-offer-send-button,
body.public-offer button.btn.btn-success.btn-block.btn-lg.calc_submit_btn#new-offer-send-button {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.3;
    padding: 20px 28px;
    white-space: normal;
    min-height: 68px;
    max-width: 720px;
}

body.public-offer button#new-offer-send-button:hover,
body.public-offer button#new-offer-send-button:focus {
    background-color: #218838 !important;
    border-color: #1e7e34 !important;
}

body.public-offer .table-tr.bg-gray-active.color-palette.segedanyag-table,
body.public-offer .other-material-and-work-prices.segedanyagok {
    display: none !important;
}

body.public-offer .select-order-type .input-group.required-field {
    display: none !important;
}

@media (max-width: 700px) {
    body.public-offer #sum-block .table,
    body.public-offer #sum-block .tbody,
    body.public-offer #sum-block .table-tr,
    body.public-offer #sum-block .table-td,
    body.public-offer #sum-block .table-th {
        display: revert;
    }

    body.public-offer #sum-block .table {
        display: table !important;
        width: 100% !important;
        table-layout: auto;
    }

    body.public-offer #sum-block .tbody {
        display: table-row-group !important;
    }

    body.public-offer #sum-block .table-tr,
    body.public-offer #sum-block .table-tr.total-line,
    body.public-offer #sum-block .table-tr.bg-gray-active:not(.segedanyag-table) {
        display: table-row !important;
        margin: 0;
        padding: 0;
    }

    body.public-offer #sum-block .table-td,
    body.public-offer #sum-block .table-th,
    body.public-offer #sum-block .table-tr.total-line .table-th {
        display: table-cell !important;
        max-width: none !important;
        font-size: 14px;
        text-align: left;
    }

    body.public-offer #sum-block .table-td {
        padding: 12px 8px;
        line-height: 1.4;
    }

    body.public-offer #sum-block .table-th {
        padding: 10px 8px;
        text-transform: uppercase;
    }

    body.public-offer #sum-block .table-td:last-child,
    body.public-offer #sum-block .table-th:last-child {
        text-align: right !important;
        white-space: nowrap;
        width: 1%;
    }

    body.public-offer #sum-block .table-tr.segedanyag-table,
    body.public-offer #sum-block .other-material-and-work-prices.segedanyagok {
        display: none !important;
    }
}

body.public-offer #sum-block .total-sum-boxs > .box > .box-header {
    background-color: #00a65a !important;
}

body.public-offer #sum-block .table-tr.total-line.box.box-success,
body.public-offer #sum-block .table-tr.total-line.box.box-success .table-th,
body.public-offer #sum-block .table-tr.total-line.box.box-success .table-th *,
body.public-offer #sum-block .table-tr.total-workdays-line.hide-in-material-type,
body.public-offer #sum-block .table-tr.total-workdays-line.hide-in-material-type .table-th,
body.public-offer #sum-block .table-tr.total-workdays-line.hide-in-material-type .table-th * {
    color: #000 !important;
    background-color: #c0f9df !important;
}

body.public-offer .row.last-step.step-3 .form-control,
body.public-offer .row.last-step.step-3 input,
body.public-offer .row.last-step.step-3 select,
body.public-offer .row.last-step.step-3 textarea,
body.public-offer .row.last-step.step-3 .input-group .form-control,
body.public-offer .row.last-step.step-3 .input-group .form-control:first-child,
body.public-offer .row.last-step.step-3 .input-group .form-control:last-child,
body.public-offer .row.last-step.step-3 .input-group-addon:first-child,
body.public-offer .row.last-step.step-3 .input-group-addon:last-child,
body.public-offer .row.last-step.step-3 #survey_fee {
    border-radius: 7px !important;
}

body.public-offer .row.last-step.step-3 #survey_fee {
    border: 1.5px solid var(--offer-line) !important;
    height: 34px;
    min-height: 34px;
    padding: 4px 8px;
    background: #fff;
    color: var(--offer-ink);
}