/* NGB Product Configs — frontend rendering */

/* Short product description (sits above the "Cena na upit" / CTA block).
   Quiet sentence look — never compete with title or CTA. */
.ngb-product-short {
    font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.5;
    color: #002145;
    margin: 0 0 16px;
    max-width: 520px;
}

/* Base specs list (upper product area).
   Matches the surrounding "Proizvođač/Model/Tip" pairs: Montserrat 24/700 #002145 label, weight 400 value. */
.ngb-base-specs {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
    font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    color: #002145;
}
.ngb-base-specs__row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    line-height: 1.3;
    font-size: 24px;
}
.ngb-base-specs__label {
    font-weight: 700;
    min-width: 180px;
    color: #002145;
}
.ngb-base-specs__value {
    font-weight: 400;
    color: #002145;
}

@media (max-width: 1024px) {
    .ngb-base-specs__row  { font-size: 20px; }
    .ngb-base-specs__label { min-width: 150px; }
}

@media (max-width: 600px) {
    .ngb-base-specs__row  { flex-direction: column; gap: 2px; font-size: 16px; }
    .ngb-base-specs__label { min-width: 0; }
}

/* Configurations tables (Podaci tab) — multi-section wrapper.
   Visual language: quiet, typographic, no heavy fills. Hierarchy is built
   with weight/size/spacing rather than coloured blocks.
   Per-element margins (no flex gap) so the title sits close to its table
   while sections still get breathing room between each other. */
.ngb-configs-tables {
    /* container; spacing handled on children */
}

/* Section title (only shown on multi-table products: "Pravougaoni bubanj" etc).
   Plain centered text — no underline, no border, no table-row styling. */
.ngb-configs-section-title {
    font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #002145;
    margin: 0 0 13px;
    padding: 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* Separate each table from the section below it. */
.ngb-configs-tables > .ngb-configs-table-wrap {
    margin-bottom: 40px;
}
.ngb-configs-tables > .ngb-configs-table-wrap:last-child {
    margin-bottom: 0;
}

/* Multi-table products only: when the FIRST child of the wrapper is a section
   title (>1 grouped table), give the very first title small breathing room
   from the dark navy tab bar above. Single-table products (where the first
   child is `.ngb-configs-table-wrap`) keep zero padding-top so the table
   sits flush under the navy bar. */
.ngb-configs-tables > .ngb-configs-section-title:first-child {
    padding-top: 20px;
}

/* Table wrapper — full width, with horizontal scroll on narrow viewports. */
.ngb-configs-table-wrap {
    overflow-x: auto;
    margin: 0;
    -webkit-overflow-scrolling: touch;
}

/* Table */
.ngb-configs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    color: #002145;
    font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

/* Every internal AND outer border uses the same navy stroke for visual
   consistency (header bottom, vertical cell separators, outer frame).
   `!important` to beat any theme/Elementor `thead`/`tr`/`tbody` border rules. */
.ngb-configs-table,
.ngb-configs-table thead,
.ngb-configs-table tbody,
.ngb-configs-table tr {
    border: 0 !important;
}
.ngb-configs-table th,
.ngb-configs-table td {
    border: 1px solid #002145 !important;
}

/* Header row — light, typographic, no fill */
.ngb-configs-table th {
    background: transparent;
    color: #002145;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.12em;
    padding: 10px 16px;
    text-align: left;
    white-space: nowrap;
}


/* All columns left-aligned for visual consistency between header and data. */

/* Data cells — generous padding. Border is set in the shared rule above. */
.ngb-configs-table td {
    padding: 14px 16px;
    vertical-align: middle;
    white-space: nowrap;
    color: #002145;
    font-weight: 400;
}
/* Last row keeps its bottom border so the table reads as a complete block. */

/* Suppress hover fills from theme/Elementor. We use very high specificity
   (html body + wrapper + class) so theme rules with their own !important
   can't win. `transparent` overlay on hover only — the underlying zebra is
   set on the *td* explicitly (rules below) and remains visible. */
html body .ngb-configs-tables .ngb-configs-table tr:hover,
html body .ngb-configs-tables .ngb-configs-table tr:hover td,
html body .ngb-configs-tables .ngb-configs-table td:hover,
html body .ngb-configs-tables .ngb-configs-table tbody tr:hover,
html body .ngb-configs-tables .ngb-configs-table tbody tr:hover td {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Explicit zebra colours on td so the tr-hover-transparent above doesn't
   strip the striping. */
.ngb-configs-table tbody tr:nth-child(odd)  td { background-color: #ffffff !important; }
.ngb-configs-table tbody tr:nth-child(even) td { background-color: #f7f7f7 !important; }
html body .ngb-configs-tables .ngb-configs-table tbody tr:nth-child(odd):hover  td { background-color: #ffffff !important; }
html body .ngb-configs-tables .ngb-configs-table tbody tr:nth-child(even):hover td { background-color: #f7f7f7 !important; }

@media (max-width: 600px) {
    .ngb-configs-tables { gap: 32px; }
    .ngb-configs-section-title { font-size: 12px; }
    .ngb-configs-table th { font-size: 10px; padding: 8px 10px; }
    .ngb-configs-table td { padding: 10px; font-size: 13px; }
}