/* ================================================================
   bankjegyszámláló.hu — custom.css
   Bootstrap 5.3 alapokon, brand színek + a régi skin.css class-ok
   responsive újraírása (backwards-compat a content fájlokkal)
   ================================================================ */

:root {
    /* Brand színek */
    --brand-primary: #003399;        /* fő márka kék */
    --brand-primary-dark: #002577;
    --brand-accent: #ff6600;         /* narancs hover/akcent */
    --brand-success: #228b22;
    --brand-danger:  #dc143c;
    --brand-warning: #ffcc00;
    --brand-link:    #24468a;

    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: 0, 51, 153;
    --bs-link-color: var(--brand-link);
    --bs-link-color-rgb: 36, 70, 138;
    --bs-link-hover-color: var(--brand-accent);
    --bs-link-hover-color-rgb: 255, 102, 0;
    --bs-body-font-family: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-size: 0.95rem;
    --bs-body-color: #1f2937;
    --bs-body-bg: #ffffff;

    /* Banknote admin design system kompatibilitás (kosár flow használja) */
    --surface:    #ffffff;
    --border:     #e5e7eb;
    --text-muted: #6b7280;
    --radius-sm:  .25rem;
    --radius-md:  .5rem;
}

/* --- Globális tipográfia ----------------------------------------- */
body {
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    color: var(--bs-body-color);
    background: #fbfbfd;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Sora", sans-serif;
    font-weight: 600;
    color: #111827;
}

/* régi h1/h2/h3 felülírás backwards-compat */
h1 { font-size: 1.6rem; padding-bottom: .5rem; }
h2 {
    font-size: 1.25rem;
    font-weight: 700;
    border-bottom: 2px solid var(--brand-accent);
    padding-bottom: .35rem;
    margin: 1.25rem 0 1rem;
    line-height: 1.4;
    /* a régi inline width:700/730px override */
    width: auto !important;
    max-width: 100%;
}
h3 {
    font-size: 1rem;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: .25rem;
}
h5 { font-family: "Sora", sans-serif; font-weight: 600; }

/* numerikus / kód értékekhez */
.font-mono, .cell-mono { font-family: "JetBrains Mono", monospace; font-feature-settings: "tnum"; }

a {
    color: var(--brand-link);
    text-decoration: none;
}
a:hover {
    color: var(--brand-accent);
    text-decoration: underline;
}

/* --- Brand utility osztályok ------------------------------------- */
.text-brand        { color: var(--brand-primary) !important; }
.bg-brand-primary  { background: var(--brand-primary) !important; }
.bg-brand-accent   { background: var(--brand-accent) !important; }
.btn-brand-primary { background: var(--brand-primary); border-color: var(--brand-primary); color:#fff; }
.btn-brand-primary:hover { background: var(--brand-primary-dark); border-color: var(--brand-primary-dark); color:#fff; }
.btn-brand-accent  { background: var(--brand-accent); border-color: var(--brand-accent); color:#fff; }
.btn-brand-accent:hover { background:#e65500; border-color:#e65500; color:#fff; }

/* --- Header / Logo ----------------------------------------------- */
.site-header .site-logo {
    max-height: 70px;
    width: auto;
    height: auto;
}
.contact-block { line-height: 1.5; }
.contact-block a { color: #111827; }
.contact-block a:hover { color: var(--brand-accent); }

/* --- Navbar ------------------------------------------------------ */
.navbar.bg-brand-primary {
    --bs-navbar-color: rgba(255,255,255,.85);
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: #fff;
}
.navbar.bg-brand-primary .nav-link {
    font-weight: 500;
    padding: .65rem 1rem;
    border-radius: .25rem;
    transition: background .15s;
}
.navbar.bg-brand-primary .nav-link:hover,
.navbar.bg-brand-primary .nav-link:focus {
    background: rgba(255,255,255,.12);
    color: #fff;
}
.navbar .cart-link {
    background: var(--brand-accent);
    color: #fff !important;
}
.navbar .cart-link:hover {
    background: #e65500 !important;
    color: #fff !important;
}

/* --- Tartalom-keret (page-wrap > container > content-wrap) ------- */
.page-wrap { background: #fbfbfd; }

.content-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
}

/* --- Régi `.main` osztály (content fájlokban) -------------------- */
/* Régen: float:left; width:728px;  --> most: flex item, responsive */
.main {
    flex: 1 1 0;
    min-width: 0;
    width: auto;            /* régi inline 728px override (override a régi skin.css-é) */
    float: none;
    padding-top: 0;
}

/* --- Régi `aside.leftside` (sidebar) ----------------------------- */
.leftside {
    flex: 0 0 260px;
    min-width: 0;
}

/* Mobil: minden full-width, sidebar a tartalom alá */
@media (max-width: 991.98px) {
    .content-wrap { gap: 1rem; }
    .main, .leftside { flex: 1 1 100%; }
}

/* --- Legacy: `.text2`, `.text3` ---------------------------------- */
.text2 {
    font-size: .95rem;
    line-height: 1.6;
}
.text3 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.6;
}

/* --- Legacy "teaser" boxok (most card-szerű blokkok) ------------- */
.teaserBox h5,
.teaserBoxRed h5 {
    margin: 0;
    padding: .55rem .85rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    border-radius: .35rem .35rem 0 0;
    background: var(--brand-accent);
    /* régi background-image url-eket lecseréljük, nincs többé .gif */
}
.teaserBoxRed h5 {
    background: var(--brand-primary);
}
.teaserBox h5 span,
.teaserBoxRed h5 span {
    padding: 0;
    background: none;
}
.teaserBox h5 a,
.teaserBoxRed h5 a,
a.boxlink {
    color: #fff !important;
    text-decoration: none !important;
}
a.boxlink:hover { color: rgba(255,255,255,.9) !important; }

/* --- Legacy `.tablabelso` (boxon belüli tartalom) ---------------- */
.tablabelso {
    padding: .85rem 1rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-top: 0;
    border-radius: 0 0 .35rem .35rem;
    color: var(--bs-body-color);
    overflow-wrap: break-word;
}

/* Ha valahol önálló blokként van használva (h5 nélkül) */
.tablabelso:first-child {
    border-top: 1px solid #e5e7eb;
    border-radius: .35rem;
}

/* --- Egyéb legacy osztályok -------------------------------------- */
.szines {
    background: #fff8c5;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
    color: #1f2937;
}

.idopont {
    font-weight: 700;
    font-size: .95rem;
    color: var(--brand-primary);
}

.kosarfej {
    word-spacing: 1px;
    font-size: 1.15rem;
    padding: .35rem .6rem;
    margin: 0 0 .75rem 0;
    font-weight: 600;
    background: #f3f4f6;
    color: var(--brand-danger);
    border-radius: .35rem;
}

.vegyemeg {
    color: var(--brand-danger);
    font-weight: 700;
    font-size: .9rem;
    padding: .35rem 0;
}

.subHeader { font-weight: 700; }
.feel { color: var(--brand-warning); font-weight: 700; padding-right: 5px; }
.nagybetu { font-size: 1.1rem; font-weight: 700; padding-top: .5rem; border-bottom: 1px solid var(--brand-warning); }

/* --- Régi gombok (ha valahol még inputban használja) ------------- */
.pirosgomb,
.normalgomb,
.zoldgomb {
    font-family: "Sora", sans-serif;
    font-weight: 600;
    font-size: .9rem;
    padding: .4rem .8rem;
    border: 0;
    border-radius: .35rem;
    cursor: pointer;
    transition: filter .15s;
}
.pirosgomb { background: var(--brand-danger); color: #fff; }
.zoldgomb  { background: var(--brand-success); color: #fff; font-size: 1rem; }
.normalgomb{ background: #fbc391; color: #1f2937; }
.pirosgomb:hover, .zoldgomb:hover, .normalgomb:hover { filter: brightness(.92); }

/* --- Form állapotok ---------------------------------------------- */
.kotelezo { border: 2px solid #1f2937 !important; }
.kimaradt { border: 2px solid var(--brand-danger) !important; }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
    font-family: inherit;
    font-size: .95rem;
    padding: .4rem .55rem;
    border: 1px solid #d1d5db;
    border-radius: .35rem;
    background: #fff;
}
input:focus, textarea:focus, select:focus {
    outline: 0;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 .2rem rgba(0,51,153,.15);
}

/* --- Legacy táblázat .vonalas ------------------------------------ */
table.vonalas {
    font-family: "Sora", sans-serif;
    font-size: .9rem;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e5e7eb;
    border-radius: .35rem;
    overflow: hidden;
    width: 100%;
    margin-top: .5rem;
}
table.vonalas th,
table.vonalas td {
    border-bottom: 1px solid #e5e7eb;
    padding: .5rem .65rem;
    text-align: left;
    vertical-align: top;
    background: #fafafa;
    color: #1f2937;
}
table.vonalas tr:last-child th,
table.vonalas tr:last-child td { border-bottom: 0; }
table.vonalas th {
    background: var(--brand-primary);
    color: #fff;
    font-weight: 600;
}

/* --- Régi képek (logók) framelt megjelenítése -------------------- */
img { max-width: 100%; height: auto; }
.logos-table td {
    padding: 1rem !important;
    border: 1px solid #e5e7eb !important;
    background: #fff;
    text-align: center;
    border-radius: .35rem;
}

/* --- Termékkártya (fooldal.php — Bootstrap card-on alapul) ------- */
.product-card {
    border: 1px solid #e5e7eb;
    border-radius: .65rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    transition: box-shadow .2s, transform .2s;
    overflow: hidden;
}
.product-card:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* Kép oszlop */
.product-card .product-img-col {
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    min-height: 180px;
}
.product-card .product-img-col a {
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-card .product-img-thumb {
    max-height: 170px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Info oszlop */
.product-card .product-info-col {
    border-left: 1px solid #f3f4f6;
}
.product-card .product-title {
    color: #111827;
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.35;
}
.product-card .product-title:hover { color: var(--brand-accent); }
.product-card .product-desc {
    line-height: 1.55;
    color: #4b5563;
}

/* Vásárlás oszlop */
.product-card .product-buy-col {
    background: #f9fafb;
    border-left: 1px solid #e5e7eb;
}
.product-card .buy-form {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    padding: 1rem;
    height: 100%;
}
.product-card .price-block {
    text-align: center;
    padding-bottom: .5rem;
    border-bottom: 1px solid #e5e7eb;
}
.product-card .product-price {
    font-family: "JetBrains Mono", monospace;
    font-feature-settings: "tnum";
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--brand-primary);
    line-height: 1.2;
}
.product-card .product-price.discount { color: var(--brand-danger); }
.product-card .product-price small {
    font-size: .75rem;
    font-weight: 500;
    color: #6b7280;
}
.product-card .qty-row .input-group { max-width: 130px; margin: 0 auto; }
.product-card .availability-info {
    margin-top: auto;
    padding-top: .65rem;
    border-top: 1px solid #e5e7eb;
    text-align: center;
    line-height: 1.3;
}
.product-card .availability-badge {
    background: #dcfce7;
    color: #15803d;
    font-weight: 600;
    font-size: .8rem;
    padding: .3rem .55rem;
    border-radius: .35rem;
}

/* Mobil: vásárlás panel a tartalom alá, border-top elválasztással */
@media (max-width: 767.98px) {
    .product-card .product-info-col { border-left: 0; }
    .product-card .product-buy-col {
        border-left: 0;
        border-top: 1px solid #e5e7eb;
    }
    .product-card .product-img-col {
        border-bottom: 1px solid #f3f4f6;
        min-height: 160px;
    }
}

/* --- Sidebar elemek (leftside.php) ------------------------------- */
.sidebar-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .35rem;
    border-radius: .35rem;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
.sidebar-item + .sidebar-item { margin-top: .15rem; }
.sidebar-item:hover {
    background: #f3f4f6;
    color: inherit;
    text-decoration: none;
}
.sidebar-thumb {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex: 0 0 44px;
    background: #fff;
    border-radius: .25rem;
}
.sidebar-info { min-width: 0; flex: 1 1 auto; }
.sidebar-name {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-price {
    display: block;
    font-family: "JetBrains Mono", monospace;
    font-feature-settings: "tnum";
    font-size: .82rem;
    font-weight: 600;
    color: var(--brand-primary);
}

/* --- Termékadatlap specifikációs lista --------------------------- */
.product-spec-list {
    padding-left: 1.2rem;
    margin: 0;
    line-height: 1.65;
}
.product-spec-list li { margin-bottom: .2rem; }

/* --- Footer ------------------------------------------------------ */
.site-footer {
    background: #ffffff;
    color: #6b7280;
}
.site-footer a { color: var(--brand-link); }
.site-footer a:hover { color: var(--brand-accent); }
.site-footer .footer-cards { max-width: 320px; }

/* --- Responsive utility-k ---------------------------------------- */
.responsive-iframe {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: .35rem;
}
.responsive-iframe iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- 1320px max szélesség xl breakpointtól (megnövelt szabvány) -- */
@media (min-width: 1200px) {
    .container { max-width: 1320px; }
}

/* --- Legacy felülírások (a régi `.main` 728px és `ul#menu` el) --- */
ul#menu { display: none !important; }

/* --- Kosár flow: fizetési mód kiválasztó dobozok ----------------- */
/* (kosar_ok.php — atszinez() JS váltogatja ezt a 2 osztályt)       */
.kosardoboz {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .55rem .75rem;
    margin: .25rem 0;
    background: #fff;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.kosardoboz:hover { background: #f9fafb; }

.kosardoboz_sarga {
    border: 2px solid var(--brand-accent);
    border-radius: var(--radius-sm);
    padding: .45rem .65rem;
    margin: .25rem 0;
    background: #fff8f0;
    cursor: pointer;
}
.kosardoboz_sarga input[type="radio"],
.kosardoboz input[type="radio"] {
    margin-right: .4rem;
    vertical-align: middle;
}

/* --- Kosár oldalakon block layout (sidebar nélkül) ----------------
   A statikus oldalakon a .content-wrap flex container, és a .main
   flex itemként 100%-ot kap. A kosár oldalakon viszont nincs explicit
   .main wrapper — ezért a flex behaviour összezsugorodott formákat
   eredményezett. Megoldás: a kosár oldalakon block layout. */
body.is-kosar-page .content-wrap {
    display: block;
}
body.is-kosar-page .content-wrap > * {
    width: 100%;
}