/* =========================================================
   MODERN OPENCART CHECKOUT
   Webshoponként csak a változókat kell átírni
========================================================= */

:root {
    --checkout-primary: #df5488;
    --checkout-primary-rgb: 223, 84, 136;
    --checkout-primary-dark: #c83e73;
    --checkout-primary-soft: #fff3f7;
    --checkout-primary-hover: #fff9fb;

    --checkout-text: #333333;
    --checkout-muted: #777777;

    --checkout-border: #dedede;
    --checkout-border-light: #eeeeee;

    --checkout-page-bg: #ffffff;
    --checkout-panel-bg: #ffffff;

    --checkout-width: 1250px;
    --checkout-radius: 10px;
}

/* Teljes checkout oldal */
#checkout-checkout.checkout-page {
    width: 100%;
    max-width: none;
    padding-left: 15px;
    padding-right: 15px;
}

/* A teljes checkout középre rendezése */
#checkout-checkout .checkout-content {
    width: 100%;
    max-width: var(--checkout-width);
    margin-left: auto;
    margin-right: auto;
    float: none;
}

/* Oldalsávok esetén ne törjön el */
#checkout-checkout .row {
    margin-left: -15px;
    margin-right: -15px;
}

/* Oldalcím */
.checkout-page-title {
    margin: 22px 0 18px;
    color: var(--checkout-text);
    font-size: 28px;
    font-weight: 500;
}

/* Accordion teljes szélessége a keskeny blokkon belül */
.checkout-accordion {
    width: 100%;
}

/* Panelek */
.checkout-accordion .panel {
    overflow: hidden;
    margin-bottom: 10px;
    border: 1px solid var(--checkout-border);
    border-radius: var(--checkout-radius);
    background: var(--checkout-panel-bg);
    box-shadow: none;
}

/* Fejlécek */
.checkout-accordion .panel-heading {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #f7f7f7;
}

.checkout-accordion .panel-title {
    margin: 0;
    color: var(--checkout-text);
    font-size: 16px;
    font-weight: 500;
}

/* Aktív és kattintható fejléc */
.checkout-accordion .panel-title > a,
.checkout-accordion .panel-title:not(:has(a)) {
    display: block;
    width: 100%;
    padding: 15px 17px;
    color: var(--checkout-text);
    text-decoration: none;
}

/* Nyitott panel */
.checkout-accordion .panel:has(.panel-collapse.in) {
    border-color: var(--checkout-primary);
}

/* Aktív fejléc */
.checkout-accordion .panel:has(.panel-collapse.in) > .panel-heading {
    background: var(--checkout-primary-soft);
}

/* Panel tartalma */
.checkout-accordion .panel-body {
    padding: 20px;
    border-top: 1px solid var(--checkout-border-light);
}

/* Bootstrap oszlopszélesség felülírása csak checkouton */
#checkout-checkout .checkout-content.col-sm-6,
#checkout-checkout .checkout-content.col-sm-9,
#checkout-checkout .checkout-content.col-sm-12 {
    float: none;
    width: 100%;
}

/* Mobil */
@media (max-width: 767px) {
    #checkout-checkout.checkout-page {
        padding-left: 10px;
        padding-right: 10px;
    }

    .checkout-page-title {
        margin-top: 16px;
        font-size: 24px;
    }

    .checkout-accordion .panel-body {
        padding: 14px;
    }

    .checkout-accordion .panel-title > a,
    .checkout-accordion .panel-title:not(:has(a)) {
        padding: 14px;
        font-size: 15px;
    }
}
/* =========================================================
   CHECKOUT – ÁLTALÁNOS ŰRLAPMEZŐK
========================================================= */

#checkout-checkout .form-group {
    margin-bottom: 17px;
}

#checkout-checkout .control-label {
    display: block;
    margin-bottom: 7px;
    color: var(--checkout-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

/* Kötelező mező csillaga */
#checkout-checkout .required .control-label::before {
    margin-right: 4px;
    color: var(--checkout-primary);
    font-size: 15px;
}

/* Szöveges mezők és legördülők */
#checkout-checkout .form-control {
    width: 100%;
    height: 48px;
    padding: 11px 13px;
    border: 1px solid var(--checkout-border);
    border-radius: 8px;
    background-color: #ffffff;
    color: var(--checkout-text);
    font-size: 15px;
    line-height: 1.4;
    box-shadow: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

#checkout-checkout textarea.form-control {
    height: auto;
    min-height: 105px;
    resize: vertical;
}

#checkout-checkout select.form-control {
    cursor: pointer;
}

#checkout-checkout .form-control:hover {
    border-color: #bcbcbc;
}

#checkout-checkout .form-control:focus {
    border-color: var(--checkout-primary);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(223, 84, 136, 0.13);
}

#checkout-checkout .form-control::placeholder {
    color: #aaaaaa;
    opacity: 1;
}

/* Automatikus böngészős kitöltés ne legyen rikító */
#checkout-checkout input:-webkit-autofill,
#checkout-checkout input:-webkit-autofill:hover,
#checkout-checkout input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--checkout-text);
    box-shadow: 0 0 0 1000px #ffffff inset;
    transition: background-color 9999s ease-out;
}


/* =========================================================
   CHECKOUT – KÉTOSZLOPOS MEZŐK
========================================================= */

/*
   A Bootstrap oszlopok megmaradnak, de kényelmesebb
   térközöket és egységes megjelenést kapnak.
*/

#checkout-checkout .panel-body > .row {
    display: flex;
    flex-wrap: wrap;
}

#checkout-checkout .panel-body .col-sm-6,
#checkout-checkout .panel-body .col-sm-4,
#checkout-checkout .panel-body .col-sm-8 {
    min-width: 0;
}

@media (min-width: 768px) {
    #checkout-checkout .panel-body > .row {
        margin-left: -8px;
        margin-right: -8px;
    }

    #checkout-checkout .panel-body > .row > [class*="col-"] {
        padding-left: 8px;
        padding-right: 8px;
    }
}


/* =========================================================
   CHECKOUT – ÁLTALÁNOS GOMBOK
========================================================= */

#checkout-checkout .btn {
    min-height: 48px;
    padding: 12px 22px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: none;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.1s ease;
}

#checkout-checkout .btn-primary {
    border-color: var(--checkout-primary);
    background-color: var(--checkout-primary);
    color: #ffffff;
}

#checkout-checkout .btn-primary:hover,
#checkout-checkout .btn-primary:focus,
#checkout-checkout .btn-primary:active {
    border-color: var(--checkout-primary-dark);
    background-color: var(--checkout-primary-dark);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

#checkout-checkout .btn-primary:active {
    transform: translateY(1px);
}

#checkout-checkout .btn-default {
    border-color: var(--checkout-border);
    background: #ffffff;
    color: var(--checkout-text);
}

#checkout-checkout .btn-default:hover,
#checkout-checkout .btn-default:focus {
    border-color: var(--checkout-primary);
    background: var(--checkout-primary-hover);
    color: var(--checkout-primary-dark);
}

/* Tovább gombok */
#checkout-checkout .buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    margin-top: 22px;
    padding: 0;
}

#checkout-checkout .buttons .pull-right {
    float: none !important;
    width: auto;
}

#checkout-checkout .buttons .btn-primary,
#checkout-checkout .checkout-continue-button {
    min-width: 190px;
}

/* Betöltés közben */
#checkout-checkout .btn[disabled],
#checkout-checkout .btn.disabled {
    cursor: wait;
    opacity: 0.65;
}


/* =========================================================
   CHECKOUT – HIBAÜZENETEK
========================================================= */

#checkout-checkout .alert {
    margin-bottom: 18px;
    padding: 13px 42px 13px 15px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
}

#checkout-checkout .alert-danger,
#checkout-checkout .alert-warning {
    border: 1px solid #efb6b6;
    background: #fff5f5;
    color: #9d2828;
}

#checkout-checkout .alert-success {
    border: 1px solid #a8d8b2;
    background: #f3fff5;
    color: #28733a;
}

#checkout-checkout .text-danger {
    display: block;
    margin-top: 5px;
    color: #c9302c;
    font-size: 13px;
    font-weight: 500;
}

#checkout-checkout .has-error .form-control {
    border-color: #d9534f;
    background: #fffafa;
}

#checkout-checkout .has-error .form-control:focus {
    border-color: #d9534f;
    box-shadow: 0 0 0 3px rgba(217, 83, 79, 0.13);
}


/* =========================================================
   CHECKOUT – RÁDIÓGOMBOK ÉS CHECKBOXOK ÁLTALÁNOSAN
========================================================= */

/*
   Ezek a régebbi, még át nem írt checkout-fájlokban
   található Bootstrap radio/checkbox sorokat is javítják.
*/

#checkout-checkout .radio,
#checkout-checkout .checkbox {
    margin-top: 8px;
    margin-bottom: 8px;
}

#checkout-checkout .radio label,
#checkout-checkout .checkbox label {
    min-height: 24px;
    padding-left: 30px;
    color: var(--checkout-text);
    font-size: 14px;
    line-height: 24px;
    cursor: pointer;
}

#checkout-checkout .radio input[type="radio"],
#checkout-checkout .checkbox input[type="checkbox"] {
    width: 19px;
    height: 19px;
    margin-top: 2px;
    margin-left: -30px;
    accent-color: var(--checkout-primary);
    cursor: pointer;
}


/* =========================================================
   CHECKOUT – ACCORDION FINOMÍTÁS
========================================================= */

.checkout-accordion .panel-heading {
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.checkout-accordion .panel-title > a {
    position: relative;
    padding-right: 44px;
}

.checkout-accordion .panel-title > a:hover,
.checkout-accordion .panel-title > a:focus {
    background: var(--checkout-primary-hover);
    color: var(--checkout-primary-dark);
}

/* A régi Font Awesome nyíl jobb oldalra */
.checkout-accordion .panel-title .fa-caret-down {
    position: absolute;
    top: 50%;
    right: 17px;
    margin: 0;
    transform: translateY(-50%);
}

/* Nyitott lépés címe */
.checkout-accordion .panel:has(.panel-collapse.in) .panel-title > a {
    color: var(--checkout-primary-dark);
    font-weight: 600;
}


/* =========================================================
   CHECKOUT – LINKEK
========================================================= */

#checkout-checkout a {
    color: var(--checkout-primary-dark);
}

#checkout-checkout a:hover,
#checkout-checkout a:focus {
    color: var(--checkout-primary);
}


/* =========================================================
   CHECKOUT – MOBIL
========================================================= */

@media (max-width: 767px) {

    #checkout-checkout .form-group {
        margin-bottom: 15px;
    }

    #checkout-checkout .form-control {
        height: 50px;
        font-size: 16px;
    }

    #checkout-checkout textarea.form-control {
        min-height: 95px;
    }

    #checkout-checkout .buttons {
        display: block;
        margin-top: 18px;
    }

    #checkout-checkout .buttons .pull-right {
        width: 100%;
    }

    #checkout-checkout .buttons .btn,
    #checkout-checkout .buttons .btn-primary,
    #checkout-checkout .checkout-continue-button {
        width: 100%;
        min-width: 0;
        min-height: 52px;
    }

    .checkout-accordion .panel-body {
        padding: 15px;
    }
}

/* =========================================================
   SZÁLLÍTÁSI ÉS FIZETÉSI MÓDOK – KATTINTHATÓ KÁRTYÁK
========================================================= */

#checkout-checkout .checkout-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

#checkout-checkout .checkout-option {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 62px;
    margin: 0;
    padding: 13px 15px;
    border: 2px solid var(--checkout-border);
    border-radius: var(--checkout-radius);
    background: var(--checkout-panel-bg);
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

#checkout-checkout .checkout-option:hover {
    border-color: var(--checkout-primary);
    background: var(--checkout-primary-hover);
}

#checkout-checkout .checkout-option > input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

#checkout-checkout .checkout-option-check {
    position: relative;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-right: 13px;
    border: 2px solid #b8b8b8;
    border-radius: 50%;
    background: #ffffff;
}

#checkout-checkout .checkout-option-check::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #ffffff;
    content: "";
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

#checkout-checkout .checkout-option-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

#checkout-checkout .checkout-option-title {
    color: var(--checkout-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

#checkout-checkout .checkout-option-terms {
    display: block;
    margin-top: 3px;
    color: var(--checkout-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
}

#checkout-checkout .checkout-option-price {
    flex: 0 0 auto;
    margin-left: 15px;
    color: var(--checkout-text);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

#checkout-checkout .checkout-option:has(input[type="radio"]:checked) {
    border-color: var(--checkout-primary);
    background: var(--checkout-primary-soft);
    box-shadow: 0 0 0 1px var(--checkout-primary);
}

#checkout-checkout
.checkout-option
input[type="radio"]:checked
+ .checkout-option-check {
    border-color: var(--checkout-primary);
    background: var(--checkout-primary);
}

#checkout-checkout
.checkout-option
input[type="radio"]:checked
+ .checkout-option-check::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

#checkout-checkout .checkout-group-title {
    margin: 8px 0 1px;
    color: var(--checkout-muted);
    font-size: 14px;
    font-weight: 500;
}

@media (max-width: 767px) {
    #checkout-checkout .checkout-option {
        min-height: 66px;
        padding: 13px;
    }

    #checkout-checkout .checkout-option-price {
        margin-left: 8px;
        font-size: 13px;
    }
}


/* A kompatibilitás miatt megtartott régi .radio külső elem */
#checkout-checkout .checkout-option-wrapper {
    width: 100%;
    margin: 0;
}

/* A régi Bootstrap radio-stílus ne mozdítsa el a modern kártyát */
#checkout-checkout .checkout-option-wrapper > .checkout-option {
    min-height: 62px;
    padding: 13px 15px;
    line-height: normal;
}

/* A Bootstrap negatív margója ne érintse a rejtett eredeti inputot */
#checkout-checkout
.checkout-option-wrapper
.checkout-option
> input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

/* =========================================================
   FOXPOST WIDGET – ASZTALI, TABLET ÉS MOBIL
========================================================= */

#foxpostmap {
    width: 100%;
    padding-top: 10px;
}

#foxpostmap .panel,
#foxpostmap .panel-body {
    width: 100%;
    margin: 0;
    padding: 0 !important;
    overflow: visible !important;
}

#foxpostmap iframe {
    display: block !important;
    width: 100% !important;
    height: 650px !important;
    min-height: 650px !important;
    border: 0;
}

/* A kereső újranyitására szolgáló saját gomb */
.foxpost-reopen-button {
    display: block;
    width: 100%;
    min-height: 48px;
    margin: 10px 0 0;
    padding: 11px 16px;
    border: 2px solid var(--checkout-primary);
    border-radius: 8px;
    background: #ffffff;
    color: var(--checkout-primary-dark);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.foxpost-reopen-button:hover,
.foxpost-reopen-button:focus {
    background: var(--checkout-primary-soft);
    color: var(--checkout-primary-dark);
}

/*
   Tablet: a Foxpost hibás köztes nézete helyett
   keskeny, kompakt nézetet kényszerítünk.
*/
@media (min-width: 769px) and (max-width: 1100px) {
    #foxpostmap .foxpost-widget-frame {
        width: 100%;
        max-width: 650px;
        margin: 0 auto;
    }

    #foxpostmap iframe {
        height: 680px !important;
        min-height: 680px !important;
    }
}

/* Mobil */
@media (max-width: 768px) {
    #foxpostmap .foxpost-widget-frame {
        width: 100%;
        max-width: none;
    }

    #foxpostmap iframe {
        width: 100% !important;
        height: 680px !important;
        min-height: 680px !important;
    }
}

.checkout-agreements{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    flex:1;
}

.checkout-agreement{
    display:flex;
    align-items:flex-start;
    width:100%;
}

.checkout-agreement-check{
    margin-right:8px;
    flex:0 0 18px;
}

.checkout-agreement-text{
    flex:1;
}