/* MBH Online Áruhitel tájékoztató doboz + kalkulátor modal */

.mbh-credit-box {
    border: 1px solid #1E5594;
    border-radius: 3px;
    padding: 12px 16px;
    margin: 16px 0;
    background: #ffffff;
    font-size: 14px;
    line-height: 1.5;
    /* Konténer-kontextus: a doboz saját szélessége szerint igazodik az elrendezés,
       nem a képernyőé — így a kosár szűk oldalsávjában is helyesen tördel. */
    container-type: inline-size;
}

/* Felső sor: logó + tájékoztató szöveg egymás mellett.
   Szűk helyen (pl. kosár oldalsáv) a logó a szöveg fölé kerül — lásd lentebb. */
.mbh-credit-top {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.mbh-credit-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #dde3ea;
    padding-right: 14px;
}

.mbh-credit-logo img {
    display: block;
    width: 54px;
    height: auto;
}

/* Széles helyen egy sorba fér; keskenyen (pl. kosár oldalsáv) rendezetten tördel.
   Görgetősávot NEM használunk — az csúnya és a szöveg olvashatatlan tőle. */
/* A 190px-es alapszélesség miatt szűk helyen a szöveg a logó ALÁ csúszik,
   ahelyett hogy egy vékony hasábba préselődne és kilógna a dobozból. */
.mbh-credit-main {
    flex: 1 1 190px;
    min-width: 0;
    color: #333333;
}

/* Az összetartozó adatok nem szakadnak szét sortöréskor. */
.mbh-credit-amount,
.mbh-credit-detail {
    white-space: nowrap;
}

.mbh-credit-amount {
    color: #1E5594;
}

.mbh-credit-sep {
    color: #b9c2cc;
    margin: 0 7px;
}

/* A link a tájékoztató szöveg jobb szélére kerül (float), így az "Önrész: 0 Ft"
   sorának végén jelenik meg. Szűk helyen magától a következő sorba csúszik. */
.mbh-credit-link {
    float: right;
    margin-left: 16px;
    color: #1E5594;
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}

/* A float miatt a szülő magasságát nyitva kell tartani. */
.mbh-credit-main::after {
    content: '';
    display: block;
    clear: both;
}

.mbh-credit-link:hover,
.mbh-credit-link:focus {
    color: #174374;
    text-decoration: underline;
}

/* --- Kalkulátor modal --- */

.mbh-calc-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.mbh-calc-dialog {
    background: #ffffff;
    border-radius: 4px;
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 30px rgba(0, 0, 0, .3);
}

.mbh-calc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e3e8ee;
}

.mbh-calc-title {
    font-size: 16px;
    font-weight: bold;
    color: #1E5594;
    margin: 0;
}

.mbh-calc-close {
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #888888;
    cursor: pointer;
    padding: 0 4px;
}

.mbh-calc-close:hover {
    color: #333333;
}

.mbh-calc-body {
    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.mbh-calc-body iframe {
    display: block;
    width: 100%;
    height: 560px;
    border: none;
}

/* Köztes szélesség (pl. mobil termékoldal): a logó még oldalt fér el, de a
   szöveg már több sorba tördel. Ilyenkor a jobbra lógó link zavaró, ezért
   külön sorba, középre kerül.
   FIGYELEM: asztali termékoldalon a doboz ~555 px széles (a jobb oszlopban),
   ezért a küszöb ennél alacsonyabb kell legyen, különben ott is középre
   igazítana — pedig ott a link a jobb szélen a helyes. */
@container (max-width: 480px) {
    .mbh-credit-main {
        text-align: center;
    }

    .mbh-credit-link {
        float: none;
        display: block;
        margin-left: 0;
        margin-top: 8px;
        white-space: normal;
    }
}

/* Szűk doboz (pl. kosár oldalsáv): a logó a szöveg fölé kerül, ezért a
   függőleges elválasztó helyett vízszintes vonal illik alá, és az egész
   tartalom középre igazodik — így nem tapad rendezetlenül a bal szélre. */
@container (max-width: 330px) {
    .mbh-credit-logo {
        border-right: none;
        border-bottom: 1px solid #dde3ea;
        padding-right: 0;
        padding-bottom: 8px;
        margin-bottom: 2px;
        width: 100%;
    }

    .mbh-credit-main {
        text-align: center;
    }

    /* Keskenyen a link is középre kerül, nem a jobb szélre. */
    .mbh-credit-link {
        float: none;
        display: block;
        margin-left: 0;
        margin-top: 8px;
        white-space: normal;
    }
}

@media (max-width: 600px) {
    .mbh-credit-box {
        padding: 10px 12px;
        font-size: 13px;
    }

    .mbh-credit-top {
        gap: 10px;
    }

    .mbh-credit-logo img {
        width: 48px;
    }

    .mbh-credit-sep {
        margin: 0 5px;
    }

    .mbh-calc-body iframe {
        height: 70vh;
    }
}

/* --- /mbh-aruhitel tájékoztató oldal --- */

/* A fejlécet és a morzsamenüt a téma saját osztályai adják
   (.page-heading, .page-breadcrumbs, .content-container), mint a többi
   tájékoztató oldalon — itt csak az iframe stílusa marad. */

.mbh-page-frame-wrap {
    margin-bottom: 20px;
}

/* A keret a nézetablak magasságához igazodik, saját görgetéssel.
   Miért így?
   - Az MBH oldal ~15 600 px magas, és kereszt-origin: a magasságát JS-ből nem
     lehet megmérni (a bank nem küld postMessage-t sem).
   - Ha akkora keretet adnánk, amibe minden belefér, az MBH SAJÁT süti-ablaka
     — ami a beágyazott oldal közepére igazodik — a lap közepére, több ezer
     pixelre csúszna le, és a látogató nem találná meg.
   Ezért a keret a képernyőhöz igazodik, és belül görget: a süti-ablak rögtön
   látható, a teljes tartalom pedig elérhető. */
.mbh-page-frame {
    display: block;
    width: 100%;
    height: calc(100vh - 200px);
    min-height: 600px;
    border: 1px solid #dde3ea;
    border-radius: 3px;
}

@media (max-width: 600px) {
    .mbh-page-frame {
        height: calc(100vh - 150px);
        min-height: 500px;
    }
}

/* --- Pénzügyi szolgáltatás közvetítését megelőző ügyfél tájékoztatás ---
   Az MBH Bank kérésére teljes terjedelmében, a csatolt dokumentummal
   formailag és tartalmilag megegyezően jelenik meg. */

.mbh-broker-info {
    margin: 30px 0 20px;
    font-size: 13px;
    line-height: 1.5;
    color: #333333;
}

.mbh-broker-title {
    font-size: 17px;
    font-weight: bold;
    color: #1E5594;
    text-transform: uppercase;
    margin: 0 0 12px;
}

.mbh-broker-intro {
    margin: 0 0 14px;
    text-align: justify;
}

.mbh-broker-table {
    width: 100%;
    border-collapse: collapse;
}

.mbh-broker-table td {
    border: 1px solid #b9c2cc;
    padding: 8px 10px;
    vertical-align: top;
}

/* Bal oszlop: a kérdés; jobb oszlop: a válasz. */
.mbh-broker-table td:first-child {
    width: 45%;
}

.mbh-broker-table a {
    color: #1E5594;
    text-decoration: underline;
    word-break: break-all;
}

@media (max-width: 600px) {
    .mbh-broker-info {
        font-size: 12px;
    }

    /* Keskenyen a két oszlop egymás alá kerül, hogy olvasható maradjon. */
    .mbh-broker-table,
    .mbh-broker-table tr,
    .mbh-broker-table td {
        display: block;
        width: 100%;
    }

    .mbh-broker-table tr {
        margin-bottom: 10px;
    }

    .mbh-broker-table td:first-child {
        width: 100%;
        border-bottom: none;
        background: #f5f7fa;
        font-weight: bold;
    }
}