/* ==========================================================================
   Panel kalkulátor – frontend stílus
   FIGYELEM: minden szelektor a `html body .pk-wrap` gyökérrel indul,
   és minden kulcs-property `!important` — így a téma / más pluginok
   NEM tudják felülírni. Ez a kalkulátor CSS-e a legerősebb.
   ========================================================================== */

/* --- Reset a .pk-wrap alatt: a téma button/input stílusait kioltjuk --------- */

html body .pk-wrap,
html body .pk-wrap *,
html body .pk-wrap *::before,
html body .pk-wrap *::after {
    box-sizing: border-box !important;
}

html body .pk-wrap button,
html body .pk-wrap input,
html body .pk-wrap select,
html body .pk-wrap textarea {
    font-family: inherit !important;
    font-size: 100% !important;
    color: inherit !important;
    line-height: normal !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

html body .pk-wrap button {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    text-decoration: none !important;
    outline: none !important;
    min-width: 0 !important;
    height: auto !important;
    width: auto !important;
    border-radius: 0 !important;
    line-height: normal !important;
    text-align: left !important;
}

html body .pk-wrap input[type="text"],
html body .pk-wrap input[type="email"],
html body .pk-wrap input[type="number"],
html body .pk-wrap input[type="range"],
html body .pk-wrap input[type="checkbox"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: auto !important; /* range/checkbox natív rendering */
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
    max-width: 100% !important;
}
html body .pk-wrap input[type="range"] { appearance: auto !important; }
html body .pk-wrap input[type="checkbox"] { appearance: auto !important; }

html body .pk-wrap a {
    color: inherit;
    text-decoration: none;
}

html body .pk-wrap h2,
html body .pk-wrap h3,
html body .pk-wrap h4 {
    font-family: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* --- Root változók + wrapper --------------------------------------------- */

html body .pk-wrap {
    --pk-radius:      14px;
    --pk-radius-sm:   10px;
    --pk-bg:          #ffffff;
    --pk-card:        #ffffff;
    --pk-input-bg:    #f1f2fb;
    --pk-muted:       #a5aac4;
    --pk-text:        #1a1e3a;
    --pk-subtext:     #5b6180;
    --pk-primary:     #3f4c9e;
    --pk-primary-h:   #35408a;
    --pk-accent:      #26397a;
    --pk-line:        #e6e8f2;
    --pk-warn-bg:     #fff6e5;
    --pk-warn-border: #f2c56c;
    --pk-warn-text:   #7a5300;
    --pk-success:     #1e8449;
    --pk-error:       #c0392b;

    position: relative !important;
    box-sizing: border-box !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    color: var(--pk-text) !important;
    font-family: inherit !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    background: transparent !important;
    text-align: left !important;
}

/* --- Elrendezés --------------------------------------------------------- */

html body .pk-wrap .pk-app-title {
    margin: 0 0 20px 0 !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    color: var(--pk-text) !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

html body .pk-wrap .pk-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px !important;
    gap: 24px !important;
    align-items: start !important;
}

html body .pk-wrap .pk-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    min-width: 0 !important;
}

html body .pk-wrap .pk-card {
    background: var(--pk-card) !important;
    border: 1px solid var(--pk-line) !important;
    border-radius: var(--pk-radius) !important;
    padding: 22px !important;
    box-shadow: 0 1px 2px rgba(26, 30, 58, 0.04) !important;
    margin: 0 !important;
}

html body .pk-wrap .pk-card-title {
    margin: 0 0 16px 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--pk-text) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

html body .pk-wrap .pk-subtitle {
    margin: 18px 0 10px 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--pk-subtext) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

html body .pk-wrap .pk-divider {
    border: 0 !important;
    border-top: 1px solid var(--pk-line) !important;
    margin: 22px 0 4px 0 !important;
    padding: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

html body .pk-wrap .pk-field { margin: 16px 0 !important; }
html body .pk-wrap .pk-field:first-child { margin-top: 0 !important; }
html body .pk-wrap .pk-field:last-child  { margin-bottom: 0 !important; }

html body .pk-wrap .pk-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin: 0 0 10px 0 !important;
    color: var(--pk-text) !important;
    padding: 0 !important;
    background: transparent !important;
    text-transform: none !important;
}

html body .pk-wrap .pk-hint {
    margin: 8px 0 0 0 !important;
    font-size: 13px !important;
    color: var(--pk-subtext) !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    font-weight: 400 !important;
}
html body .pk-wrap .pk-hint--wall {
    background: var(--pk-input-bg) !important;
    padding: 10px 12px !important;
    border-radius: var(--pk-radius-sm) !important;
    margin-top: 14px !important;
    font-size: 14px !important;
    color: var(--pk-text) !important;
}

/* --- Radio (panel típus) ------------------------------------------------ */

html body .pk-wrap .pk-radio-group {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}
html body .pk-wrap .pk-radio {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px !important;
    background: var(--pk-input-bg) !important;
    border: 2px solid transparent !important;
    border-radius: var(--pk-radius-sm) !important;
    cursor: pointer !important;
    text-align: left !important;
    font-family: inherit !important;
    transition: border-color 0.15s, background-color 0.15s !important;
    width: 100% !important;
    color: var(--pk-text) !important;
}
html body .pk-wrap .pk-radio:hover { background: #e9ebf6 !important; }
html body .pk-wrap .pk-radio:focus-visible {
    outline: 2px solid var(--pk-primary) !important;
    outline-offset: 2px !important;
}
html body .pk-wrap .pk-radio--active {
    border-color: var(--pk-primary) !important;
    background: #fff !important;
}
html body .pk-wrap .pk-radio-dot {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: #fff !important;
    border: 1px solid var(--pk-line) !important;
    display: block !important;
}
html body .pk-wrap .pk-radio-dot--feher { background: #fff !important; }
html body .pk-wrap .pk-radio-dot--fa    { background: linear-gradient(135deg, #b47a3c, #8a5423) !important; }

html body .pk-wrap .pk-radio-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    font-size: 14px !important;
    color: var(--pk-text) !important;
    line-height: 1.3 !important;
}
html body .pk-wrap .pk-radio-text strong { font-size: 15px !important; font-weight: 700 !important; color: var(--pk-text) !important; }
html body .pk-wrap .pk-radio-text span   { font-size: 12px !important; color: var(--pk-subtext) !important; }
html body .pk-wrap .pk-radio-text em     { font-style: normal !important; font-size: 13px !important; color: var(--pk-primary) !important; font-weight: 600 !important; margin-top: 2px !important; }

/* --- Alapterület sávos gombcsoport ------------------------------------- */

html body .pk-wrap .pk-area-group {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}
html body .pk-wrap .pk-area-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 8px !important;
    background: var(--pk-input-bg) !important;
    border: 2px solid transparent !important;
    border-radius: var(--pk-radius-sm) !important;
    cursor: pointer !important;
    text-align: center !important;
    font-family: inherit !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--pk-text) !important;
    transition: border-color 0.15s, background-color 0.15s, transform 0.05s !important;
    width: 100% !important;
    min-height: 56px !important;
    line-height: 1 !important;
}
html body .pk-wrap .pk-area-btn:hover { background: #e9ebf6 !important; }
html body .pk-wrap .pk-area-btn:active { transform: translateY(1px) !important; }
html body .pk-wrap .pk-area-btn:focus-visible {
    outline: 2px solid var(--pk-primary) !important;
    outline-offset: 2px !important;
}
html body .pk-wrap .pk-area-btn--active {
    border-color: var(--pk-primary) !important;
    background: #fff !important;
    color: var(--pk-primary) !important;
    box-shadow: 0 2px 6px rgba(63, 76, 158, 0.15) !important;
}

/* --- Toggle switch ------------------------------------------------------ */

html body .pk-wrap .pk-toggle-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--pk-line) !important;
    background: transparent !important;
    margin: 0 !important;
}
html body .pk-wrap .pk-toggle-row:last-of-type { border-bottom: 0 !important; }

html body .pk-wrap .pk-toggle-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    line-height: 1.35 !important;
    min-width: 0 !important;
}
html body .pk-wrap .pk-toggle-text strong { font-size: 15px !important; font-weight: 700 !important; color: var(--pk-text) !important; }
html body .pk-wrap .pk-toggle-text span   { font-size: 13px !important; color: var(--pk-subtext) !important; }
html body .pk-wrap .pk-toggle-text em     { font-style: normal !important; font-size: 13px !important; color: var(--pk-primary) !important; font-weight: 600 !important; margin-top: 2px !important; }

html body .pk-wrap .pk-switch {
    position: relative !important;
    display: inline-block !important;
    width: 46px !important;
    height: 26px !important;
    flex: 0 0 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
html body .pk-wrap .pk-switch input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}
html body .pk-wrap .pk-switch-slider {
    position: absolute !important;
    inset: 0 !important;
    cursor: pointer !important;
    background: #d3d6e5 !important;
    border-radius: 999px !important;
    transition: background-color 0.2s !important;
    border: 0 !important;
    display: block !important;
}
html body .pk-wrap .pk-switch-slider::before {
    content: "" !important;
    position: absolute !important;
    left: 3px !important;
    top: 3px !important;
    width: 20px !important;
    height: 20px !important;
    background: #fff !important;
    border-radius: 50% !important;
    transition: transform 0.2s !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
    display: block !important;
}
html body .pk-wrap .pk-switch input:checked + .pk-switch-slider {
    background: var(--pk-primary) !important;
}
html body .pk-wrap .pk-switch input:checked + .pk-switch-slider::before {
    transform: translateX(20px) !important;
}
html body .pk-wrap .pk-switch input:focus-visible + .pk-switch-slider {
    outline: 2px solid var(--pk-primary) !important;
    outline-offset: 2px !important;
}

/* --- Stepper (db) ------------------------------------------------------- */

html body .pk-wrap .pk-stepper {
    display: inline-flex !important;
    align-items: center !important;
    background: var(--pk-input-bg) !important;
    border-radius: 999px !important;
    padding: 4px !important;
    gap: 4px !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}
html body .pk-wrap .pk-step {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid var(--pk-line) !important;
    color: var(--pk-text) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    transition: background-color 0.15s, color 0.15s, opacity 0.15s !important;
    font-family: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    min-width: 34px !important;
}
html body .pk-wrap .pk-step:hover:not(:disabled) {
    background: var(--pk-primary) !important;
    color: #fff !important;
    border-color: var(--pk-primary) !important;
}
html body .pk-wrap .pk-step:focus-visible {
    outline: 2px solid var(--pk-primary) !important;
    outline-offset: 2px !important;
}
html body .pk-wrap .pk-step:disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    background: #fff !important;
    color: var(--pk-text) !important;
    border-color: var(--pk-line) !important;
}
html body .pk-wrap .pk-step-val {
    min-width: 32px !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    color: var(--pk-text) !important;
    line-height: 1 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Ha egy .pk-field közvetlenül tartalmaz steppert:
   label balra, stepper jobbra, hint/warn alul teljes szélességen */
html body .pk-wrap .pk-field:has(> .pk-stepper) {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    column-gap: 16px !important;
    row-gap: 0 !important;
}
html body .pk-wrap .pk-field:has(> .pk-stepper) > .pk-label {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    align-self: center !important;
}
html body .pk-wrap .pk-field:has(> .pk-stepper) > .pk-stepper {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
}
html body .pk-wrap .pk-field:has(> .pk-stepper) > .pk-hint {
    grid-column: 1 / -1 !important;
    margin-top: 8px !important;
}
html body .pk-wrap .pk-field:has(> .pk-stepper) > .pk-warn {
    grid-column: 1 / -1 !important;
}

/* --- Accordion (Ablakok / Külső ajtók) --------------------------------- */

html body .pk-wrap .pk-accordion {
    border: 1px solid var(--pk-line) !important;
    border-radius: var(--pk-radius-sm) !important;
    background: var(--pk-input-bg) !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transition: background-color 0.2s !important;
}
html body .pk-wrap .pk-accordion:last-child { margin-bottom: 0 !important; }
html body .pk-wrap .pk-accordion[open] {
    background: #fff !important;
    border-color: var(--pk-primary) !important;
    box-shadow: 0 2px 6px rgba(63, 76, 158, 0.08) !important;
}

html body .pk-wrap .pk-accordion-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 14px 16px !important;
    cursor: pointer !important;
    user-select: none !important;
    list-style: none !important;
    font-family: inherit !important;
    background: transparent !important;
    color: var(--pk-text) !important;
    outline: none !important;
    line-height: 1.2 !important;
}
/* Natív "▶" marker eltüntetése */
html body .pk-wrap .pk-accordion-header::-webkit-details-marker { display: none !important; }
html body .pk-wrap .pk-accordion-header::marker { content: "" !important; }
html body .pk-wrap .pk-accordion-header:hover .pk-accordion-title { color: var(--pk-primary) !important; }
html body .pk-wrap .pk-accordion-header:focus-visible {
    outline: 2px solid var(--pk-primary) !important;
    outline-offset: -2px !important;
    border-radius: var(--pk-radius-sm) !important;
}

html body .pk-wrap .pk-accordion-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--pk-text) !important;
    transition: color 0.15s !important;
    flex: 0 0 auto !important;
}
html body .pk-wrap .pk-accordion-count {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--pk-primary) !important;
    margin-right: auto !important;
    line-height: 1 !important;
}
html body .pk-wrap .pk-accordion-count:empty { display: none !important; }

html body .pk-wrap .pk-accordion-chev {
    width: 20px !important;
    height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--pk-subtext) !important;
    transition: transform 0.2s ease !important;
    flex: 0 0 20px !important;
    margin-left: auto !important;
}
html body .pk-wrap .pk-accordion-chev::before {
    content: "" !important;
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(45deg) translateY(-2px) !important;
    background: transparent !important;
}
html body .pk-wrap .pk-accordion[open] .pk-accordion-chev {
    transform: rotate(180deg) !important;
    color: var(--pk-primary) !important;
}

html body .pk-wrap .pk-accordion-body {
    padding: 4px 16px 12px !important;
    background: #fff !important;
    border-top: 1px solid var(--pk-line) !important;
}

/* --- Item row (nyílászáró tétel) --------------------------------------- */

html body .pk-wrap .pk-item-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--pk-line) !important;
    background: transparent !important;
    margin: 0 !important;
}
html body .pk-wrap .pk-item-row:last-child { border-bottom: 0 !important; }
html body .pk-wrap .pk-item-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    line-height: 1.35 !important;
    min-width: 0 !important;
}
html body .pk-wrap .pk-item-text strong { font-size: 15px !important; font-weight: 700 !important; color: var(--pk-text) !important; }
html body .pk-wrap .pk-item-text span   { font-size: 13px !important; color: var(--pk-subtext) !important; }
html body .pk-wrap .pk-item-text em     { font-style: normal !important; font-size: 13px !important; color: var(--pk-primary) !important; font-weight: 600 !important; margin-top: 2px !important; }

/* --- Warning box -------------------------------------------------------- */

html body .pk-wrap .pk-warn {
    margin: 10px 0 0 0 !important;
    padding: 10px 14px !important;
    background: var(--pk-warn-bg) !important;
    border: 1px solid var(--pk-warn-border) !important;
    border-radius: var(--pk-radius-sm) !important;
    color: var(--pk-warn-text) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}
html body .pk-wrap .pk-warn[hidden] { display: none !important; }

/* --- Info tooltip ------------------------------------------------------- */

html body .pk-wrap .pk-info {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    background: var(--pk-primary) !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    margin-left: 4px !important;
    cursor: help !important;
    position: relative !important;
    vertical-align: middle !important;
    padding: 0 !important;
}
html body .pk-wrap .pk-info::after {
    content: attr(data-tip) !important;
    position: absolute !important;
    left: 50% !important;
    bottom: calc(100% + 8px) !important;
    transform: translateX(-50%) !important;
    background: var(--pk-text) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    padding: 8px 10px !important;
    border-radius: 6px !important;
    width: max-content !important;
    max-width: 240px !important;
    text-align: left !important;
    line-height: 1.35 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.15s !important;
    z-index: 10 !important;
}
html body .pk-wrap .pk-info:hover::after,
html body .pk-wrap .pk-info:focus::after { opacity: 1 !important; }

/* --- Eredménypanel ------------------------------------------------------ */

html body .pk-wrap .pk-summary {
    position: sticky !important;
    top: 20px !important;
    align-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
html body .pk-wrap .pk-summary-inner {
    background: var(--pk-accent) !important;
    color: #fff !important;
    border-radius: var(--pk-radius) !important;
    padding: 24px !important;
    box-shadow: 0 10px 30px rgba(38, 57, 122, 0.20) !important;
}
html body .pk-wrap .pk-summary-header h3 {
    margin: 0 0 4px 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #fff !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
html body .pk-wrap .pk-summary-header p {
    margin: 0 0 18px 0 !important;
    font-size: 12px !important;
    opacity: 0.7 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #fff !important;
    padding: 0 !important;
    background: transparent !important;
}
html body .pk-wrap .pk-summary-totals {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
}
html body .pk-wrap .pk-total-card {
    background: rgba(255,255,255,0.08) !important;
    border-radius: var(--pk-radius-sm) !important;
    padding: 14px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    color: #fff !important;
    border: 0 !important;
}
html body .pk-wrap .pk-total-card--gross {
    background: #fff !important;
    color: var(--pk-text) !important;
}
html body .pk-wrap .pk-total-label {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    opacity: 0.75 !important;
    font-weight: 600 !important;
}
html body .pk-wrap .pk-total-card--gross .pk-total-label { color: var(--pk-subtext) !important; opacity: 1 !important; }
html body .pk-wrap .pk-total-val {
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.15 !important;
}

html body .pk-wrap .pk-perm2 {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    padding: 12px 0 !important;
    font-size: 13px !important;
    opacity: 0.85 !important;
    border-top: 1px solid rgba(255,255,255,0.15) !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    margin-bottom: 16px !important;
    color: #fff !important;
}
html body .pk-wrap .pk-perm2 strong { font-size: 15px !important; opacity: 1 !important; font-weight: 700 !important; color: #fff !important; }

html body .pk-wrap .pk-breakdown h4 {
    margin: 0 0 8px 0 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    opacity: 0.75 !important;
    font-weight: 700 !important;
    color: #fff !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
html body .pk-wrap .pk-breakdown ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    max-height: 220px !important;
    overflow-y: auto !important;
    background: transparent !important;
}
html body .pk-wrap .pk-breakdown li {
    display: flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 6px 0 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    border-bottom: 1px dashed rgba(255,255,255,0.12) !important;
    color: #fff !important;
    background: transparent !important;
    margin: 0 !important;
    list-style: none !important;
}
html body .pk-wrap .pk-breakdown li::before,
html body .pk-wrap .pk-breakdown li::marker { content: none !important; display: none !important; }
html body .pk-wrap .pk-breakdown li:last-child { border-bottom: 0 !important; }
html body .pk-wrap .pk-breakdown li span:first-child { opacity: 0.85 !important; }
html body .pk-wrap .pk-breakdown li span:last-child  { font-weight: 700 !important; white-space: nowrap !important; }
html body .pk-wrap .pk-breakdown-empty {
    text-align: center !important;
    padding: 20px 0 !important;
    opacity: 0.6 !important;
    font-style: italic !important;
    border: 0 !important;
    justify-content: center !important;
}

/* CTA feletti figyelemfelhívó szöveg */
html body .pk-wrap .pk-cta-note {
    margin: 0 0 12px 0 !important;
    padding: 12px 14px !important;
    background: #ffd76a !important;
    color: #4a3800 !important;
    border-radius: var(--pk-radius-sm) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    text-align: left !important;
    border: 0 !important;
}
html body .pk-wrap .pk-cta-note strong {
    font-weight: 800 !important;
    color: #4a3800 !important;
}

html body .pk-wrap .pk-cta {
    display: block !important;
    text-align: center !important;
    background: #fff !important;
    color: var(--pk-accent) !important;
    padding: 16px 20px !important;
    border-radius: var(--pk-radius-sm) !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    transition: transform 0.05s, background-color 0.15s !important;
    border: 0 !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    cursor: pointer !important;
}
html body .pk-wrap .pk-cta:hover  { background: #f6f7fb !important; text-decoration: none !important; color: var(--pk-accent) !important; }
html body .pk-wrap .pk-cta:active { transform: translateY(1px) !important; }
html body .pk-wrap .pk-cta:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 2px !important;
}

html body .pk-wrap .pk-disclaimer {
    margin: 14px 0 0 0 !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    opacity: 0.7 !important;
    color: #fff !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

/* ==========================================================================
   EMAIL GATE (részleges blur + overlay)
   ========================================================================== */

/* A teljes kalkulátor NEM interaktív amíg zárva van */
html body .pk-wrap--locked .pk-app {
    pointer-events: none !important;
    user-select: none !important;
}

/* 1. és 2. kártya blur (Alapszerkezet, Padló és belső) */
html body .pk-wrap--locked .pk-cards > .pk-card:nth-child(1),
html body .pk-wrap--locked .pk-cards > .pk-card:nth-child(2) {
    filter: blur(6px) !important;
    transition: filter 0.4s ease !important;
}

/* 3. és 4. kártya (Burkolatok, Nyílászárók): látszik tisztán, de halványítva jelezve, hogy nem interaktív */
html body .pk-wrap--locked .pk-cards > .pk-card:nth-child(n+3) {
    opacity: 0.55 !important;
    transition: opacity 0.4s ease !important;
}

/* Összegzés erős blur — az árat NE lehessen leolvasni */
html body .pk-wrap--locked .pk-summary {
    filter: blur(18px) !important;
    transition: filter 0.4s ease !important;
}

/* Gate overlay: átlátszó, hogy a 3-4. kártya tisztán látszódjon.
   A modal-kártya külön kap pointer-events: auto-t, hogy kattintható legyen. */
html body .pk-wrap .pk-gate {
    position: absolute !important;
    inset: 0 !important;
    z-index: 20 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 60px 20px 20px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: pk-gate-fade-in 0.35s ease !important;
    margin: 0 !important;
    pointer-events: none !important;
}
html body .pk-wrap .pk-gate .pk-gate-card {
    pointer-events: auto !important;
}

@keyframes pk-gate-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

html body .pk-wrap .pk-gate-card {
    width: 100% !important;
    max-width: 460px !important;
    background: #fff !important;
    border-radius: 18px !important;
    padding: 32px 28px 26px !important;
    box-shadow: 0 20px 50px rgba(38, 57, 122, 0.25) !important;
    text-align: center !important;
    position: relative !important;   /* korábbi sticky helyett stabilabb pozíció */
    top: auto !important;
    margin: 0 auto !important;
    color: var(--pk-text) !important;
    z-index: 21 !important;
}
html body .pk-wrap .pk-gate-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: var(--pk-input-bg) !important;
    color: var(--pk-primary) !important;
    margin-bottom: 14px !important;
}
html body .pk-wrap .pk-gate-icon svg { width: 28px !important; height: 28px !important; }

html body .pk-wrap .pk-gate-title {
    margin: 0 0 8px 0 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    color: var(--pk-text) !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    text-transform: none !important;
}
html body .pk-wrap .pk-gate-sub {
    margin: 0 0 22px 0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--pk-subtext) !important;
    padding: 0 !important;
    background: transparent !important;
}

html body .pk-wrap .pk-gate-form { margin: 0 !important; padding: 0 !important; background: transparent !important; }

html body .pk-wrap .pk-gate-input {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background: var(--pk-input-bg) !important;
    border: 2px solid transparent !important;
    border-radius: var(--pk-radius) !important;
    margin-bottom: 12px !important;
    transition: border-color 0.15s, background-color 0.15s !important;
    padding: 0 !important;
}
html body .pk-wrap .pk-gate-input:focus-within {
    border-color: var(--pk-primary) !important;
    background: #fff !important;
}
html body .pk-wrap .pk-gate-input.is-invalid {
    border-color: var(--pk-error) !important;
    background: #fdecea !important;
}
html body .pk-wrap .pk-gate-input-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
    color: var(--pk-muted) !important;
    pointer-events: none !important;
    background: transparent !important;
}
html body .pk-wrap .pk-gate-input-icon svg { width: 22px !important; height: 22px !important; }
html body .pk-wrap .pk-gate-input input {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 52px !important;
    padding: 0 16px 0 4px !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 16px !important;
    font-family: inherit !important;
    color: var(--pk-text) !important;
    outline: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
html body .pk-wrap .pk-gate-input input::placeholder {
    color: var(--pk-muted) !important;
    opacity: 1 !important;
}

/* GDPR consent */
html body .pk-wrap .pk-gate-consent {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    text-align: left !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    color: var(--pk-subtext) !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
html body .pk-wrap .pk-gate-consent input[type="checkbox"] {
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    accent-color: var(--pk-primary) !important;
    cursor: pointer !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
}
html body .pk-wrap .pk-gate-consent a {
    color: var(--pk-primary) !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}
html body .pk-wrap .pk-gate-consent a:hover { color: var(--pk-primary-h) !important; }

html body .pk-wrap .pk-hp {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

html body .pk-wrap .pk-gate-submit {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 54px !important;
    padding: 14px 22px !important;
    background: var(--pk-primary) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--pk-radius) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: background-color 0.15s !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    text-align: center !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    margin: 0 !important;
}
html body .pk-wrap .pk-gate-submit:hover:not(:disabled) { background: var(--pk-primary-h) !important; }
html body .pk-wrap .pk-gate-submit:disabled { opacity: 0.7 !important; cursor: not-allowed !important; }
html body .pk-wrap .pk-gate-submit:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px !important; }
html body .pk-wrap .pk-gate-submit.is-loading .pk-gate-submit-label { visibility: hidden !important; }
html body .pk-wrap .pk-gate-submit.is-loading .pk-gate-spinner { display: block !important; }
html body .pk-wrap .pk-gate-submit-label {
    display: inline !important;
    color: #fff !important;
    font-weight: 700 !important;
}
html body .pk-wrap .pk-gate-spinner {
    display: none !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 20px !important;
    height: 20px !important;
    margin: -10px 0 0 -10px !important;
    border: 3px solid rgba(255,255,255,0.35) !important;
    border-top-color: #fff !important;
    border-radius: 50% !important;
    animation: pk-spin 0.7s linear infinite !important;
    background: transparent !important;
    padding: 0 !important;
}
@keyframes pk-spin { to { transform: rotate(360deg); } }

html body .pk-wrap .pk-gate-msg {
    min-height: 1.3em !important;
    margin: 10px 0 0 0 !important;
    font-size: 13px !important;
    color: var(--pk-error) !important;
    background: transparent !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}
html body .pk-wrap .pk-gate-msg.is-success { color: var(--pk-success) !important; }

html body .pk-wrap .pk-gate-small {
    margin: 16px 0 0 0 !important;
    font-size: 12px !important;
    color: var(--pk-muted) !important;
    padding: 0 !important;
    background: transparent !important;
    line-height: 1.4 !important;
}

/* --- Feloldás animáció -------------------------------------------------- */

html body .pk-wrap.is-unlocking .pk-gate { animation: pk-gate-fade-out 0.4s forwards !important; }
@keyframes pk-gate-fade-out {
    to { opacity: 0; visibility: hidden; }
}

/* ==========================================================================
   AJÁNLATKÉRŐ MODAL
   ========================================================================== */

html body .pk-wrap .pk-quote-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    margin: 0 !important;
}
html body .pk-wrap .pk-quote-modal[hidden] {
    display: none !important;
}

html body .pk-wrap .pk-quote-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(26, 30, 58, 0.55) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    cursor: pointer !important;
    animation: pk-gate-fade-in 0.25s ease !important;
}

html body .pk-wrap .pk-quote-card {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 440px !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
    background: #fff !important;
    border-radius: 18px !important;
    padding: 32px 28px 26px !important;
    box-shadow: 0 20px 50px rgba(38, 57, 122, 0.35) !important;
    text-align: center !important;
    color: var(--pk-text) !important;
    animation: pk-quote-pop 0.25s ease !important;
}
@keyframes pk-quote-pop {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

html body .pk-wrap .pk-quote-close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: var(--pk-input-bg) !important;
    color: var(--pk-subtext) !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border: 0 !important;
    padding: 0 !important;
    transition: background-color 0.15s, color 0.15s !important;
}
html body .pk-wrap .pk-quote-close:hover {
    background: #e9ebf6 !important;
    color: var(--pk-text) !important;
}
html body .pk-wrap .pk-quote-close:focus-visible {
    outline: 2px solid var(--pk-primary) !important;
    outline-offset: 2px !important;
}

html body .pk-wrap .pk-quote-phone-hint {
    margin: -4px 0 14px 0 !important;
    font-size: 12px !important;
    color: var(--pk-subtext) !important;
    text-align: left !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Görgetés-zár, amíg a modal nyitva van */
html.pk-modal-open,
html.pk-modal-open body {
    overflow: hidden !important;
}

/* ==========================================================================
   MOBIL BOTTOM BAR (csak mobilon, mindig látszó ár)
   ========================================================================== */

html body .pk-wrap .pk-mobile-bar {
    display: none !important;
}

@media (max-width: 900px) {
    html body .pk-wrap {
        padding-bottom: 76px !important; /* helyet hagyunk a fix bar-nak */
    }
    html body .pk-wrap--locked {
        padding-bottom: 0 !important; /* zárt állapotban rejtett bar → nem kell */
    }

    html body .pk-wrap .pk-mobile-bar {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 999 !important;
        background: var(--pk-accent) !important;
        color: #fff !important;
        padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)) 20px !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 14px !important;
        box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.18) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        margin: 0 !important;
    }
    html body .pk-wrap--locked .pk-mobile-bar {
        display: none !important;
    }

    html body .pk-wrap .pk-mobile-bar-label {
        font-size: 12px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
        opacity: 0.85 !important;
        font-weight: 600 !important;
        color: #fff !important;
        line-height: 1 !important;
    }
    html body .pk-wrap .pk-mobile-bar-val {
        font-size: 20px !important;
        font-weight: 800 !important;
        color: #fff !important;
        line-height: 1.1 !important;
        letter-spacing: -0.01em !important;
        text-align: right !important;
        flex: 1 1 auto !important;
    }
}

/* ==========================================================================
   Reszponzív
   ========================================================================== */

@media (max-width: 900px) {
    html body .pk-wrap .pk-grid {
        grid-template-columns: 1fr !important;
    }
    html body .pk-wrap .pk-summary {
        position: static !important;
    }
}

@media (max-width: 600px) {
    html body .pk-wrap .pk-app-title { font-size: 22px !important; }
    html body .pk-wrap .pk-card { padding: 18px !important; }
    html body .pk-wrap .pk-radio-group { grid-template-columns: 1fr !important; }
    html body .pk-wrap .pk-area-group { grid-template-columns: repeat(2, 1fr) !important; }
    html body .pk-wrap .pk-total-val { font-size: 20px !important; }
    html body .pk-wrap .pk-gate-card { padding: 26px 22px 22px !important; }
    html body .pk-wrap .pk-gate-title { font-size: 18px !important; }
    html body .pk-wrap .pk-gate { padding: 30px 12px 12px !important; }
    html body .pk-wrap .pk-item-row,
    html body .pk-wrap .pk-toggle-row {
        flex-wrap: wrap !important;
    }
    html body .pk-wrap .pk-item-text,
    html body .pk-wrap .pk-toggle-text {
        flex: 1 1 100% !important;
    }
}

/* =========================================================================
   ÁR-MENTES MÓD (.pk-wrap--hide-prices)
   A látogató nem lát árakat — csak a kiválasztott tételeket és egy tájékoztatót.
   Az admin lista, a PDF, a CRM és az e-mailek továbbra is a valós árakat mutatják.
   ========================================================================= */

/* Tájékoztató doboz az eredménypanel tetején (az ár-kártyák helyett) */
html body .pk-wrap .pk-summary-info {
    margin: 0 0 16px 0 !important;
    padding: 14px 16px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: var(--pk-radius-sm) !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}
html body .pk-wrap .pk-summary-info p { margin: 0 !important; }
html body .pk-wrap .pk-summary-info strong { color: #fff !important; font-weight: 700 !important; }

/* Ár-nélküli breakdown: csak a tételcímkék, a második span (ár) üres —
   a flex elrendezést feloldjuk, hogy ne legyen space-between eltolás. */
html body .pk-wrap .pk-breakdown--no-price li { display: block !important; }
html body .pk-wrap .pk-breakdown--no-price li span:last-child,
html body .pk-wrap .pk-bd-noprice span:last-child {
    display: none !important;
}