/* ==================================================================
   NR Agri — de betaallogo's als nette rij tegels

   WAAROM EIGEN CSS EN GEEN TAILWIND
   =================================
   Dit sjabloon staat in `app/code`, en Tailwind scant alleen de themamap.
   Klassen met eigen maten zouden hier dus nooit gebouwd worden. Met een eigen
   stijlbestand werkt het blok overal, ook op een winkel waar nooit een
   Tailwind-bouw heeft gedraaid.

   WAAROM TEGELS EN GEEN LOSSE PLAATJES
   ====================================
   De logo's verschillen sterk van vorm: iDEAL en SEPA zijn breed, Apple Pay is
   bijna vierkant, Visa is laag en breed. Zet je die op gelijke hóógte, dan
   worden de breedtes wild verschillend en oogt de rij rommelig — precies wat
   er gemeld werd. Een tegel van vaste maat met het logo passend erbinnen geeft
   een rustige, uitgelijnde rij, ongeacht welke logo's de beheerder toevoegt.
   ================================================================== */

.nrp-payments {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.25rem 0;
    padding: 0;
    list-style: none;
}

/* Op CMS-pagina's wint anders `.cms-page-view .column.main ul { list-style: outside }`
   (drie klassen diep): bolletjes tussen de betaallogo's. */
.cms-page-view .column.main ul.nrp-payments { list-style: none; margin: 1.25rem 0; padding: 0; }
.cms-page-view .column.main li.nrp-payment { margin: 0; }
.cms-page-view .column.main .nrp-payment img { border-radius: 0; height: auto; }

.nrp-payments--center { justify-content: center; }
.nrp-payments--start { justify-content: flex-start; }

.nrp-payment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.9rem;
    height: 2.6rem;
    padding: .35rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    box-sizing: border-box;
}

/* Het logo past zich aan de tegel aan en wordt nooit uitgerekt. */
.nrp-payment img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Geen bestand geüpload: de naam als tekst. Nooit een gebroken plaatje. */
.nrp-payment--text {
    font-size: .62rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    color: #142c73;
    word-break: break-word;
    hyphens: auto;
}

/* Iets grotere tegels waar meer ruimte is. */
.nrp-payments--groot .nrp-payment {
    width: 4.6rem;
    height: 3rem;
}

@media (max-width: 480px) {
    .nrp-payment { width: 3.4rem; height: 2.3rem; }
}

/* ==================================================================
   Officiële Mollie-badge "Betalingen door mollie" — payments/badge.phtml.
   Zelfde tegel als de logo's, maar iets lager en zo breed als het beeld:
   de badge is een liggende pil (± 4,5 : 1). Op tegelhoogte zou hij bijna
   200 px breed worden en de rij domineren; op 2,15 rem blijft hij bescheiden
   naast de logo's en leest de tekst nog goed.
   ================================================================== */
.nrp-payment--mollie {
    width: auto;
    height: 2.15rem;
    padding: 0;
    align-self: center;
    overflow: hidden;
    border-radius: 9px;
}
.nrp-payment--mollie img {
    height: 100%;
    width: auto;
    max-width: none;
    max-height: none;
    display: block;
}
.nrp-payments--groot .nrp-payment--mollie { height: 2.5rem; }
.cms-page-view .column.main .nrp-payment--mollie img { height: 100%; width: auto; border-radius: 0; }
@media (max-width: 480px) {
    .nrp-payment--mollie { height: 1.9rem; }
}