/* Verzendkosten-calculator — NR Agri.
   Eigen klassen met voorvoegsel nrs-. Kleuren uit het thema waar die er zijn. */

.nrs {
    --nrs-primary: var(--nr-primary, #6CBF4A);
    --nrs-primary-dark: var(--nr-primary-dark, #46812F);
    --nrs-heading: var(--nr-secondary, #142C73);
    --nrs-border: #d9dee7;
    --nrs-muted: #6b7280;
    border: 1px solid var(--nrs-border);
    border-radius: 12px;
    padding: 1rem 1.1rem 1.1rem;
    background: #fff;
    font-size: 15px;
    color: #1f2937;
}

.nrs-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .5rem;
}

.nrs-icon {
    width: 2.1rem;
    height: 2.1rem;
    flex: none;
    border-radius: 999px;
    background: color-mix(in srgb, var(--nrs-primary) 14%, #fff);
    color: var(--nrs-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nrs-icon svg { width: 1.15rem; height: 1.15rem; }

.nrs-title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--nrs-heading);
    line-height: 1.3;
}

.nrs-intro {
    margin: 0 0 .85rem;
    font-size: .87rem;
    line-height: 1.55;
    color: var(--nrs-muted);
}

/*
   LAND EN POSTCODE MOETEN OP ÉÉN LIJN STAAN

   Dit stond op `align-items: end`, dus de twee kolommen werden aan de ONDERkant
   uitgelijnd. Onder het postcodeveld staat een hint ("Bijvoorbeeld 4265 HM") en
   onder het landveld niet. De postcodekolom is daardoor hoger, en met
   onderuitlijning schoof het landveld naar beneden: twee labels op verschillende
   hoogtes en twee invoervakken die niet naast elkaar liggen. Precies wat er op
   het scherm te zien was.

   Met `start` beginnen beide kolommen bovenaan, dus staan de labels op één regel
   en de vakken op één lijn. De hint mag daaronder de kolom langer maken; de knop
   staat toch op een eigen rij over de volle breedte.
*/
.nrs-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
    align-items: start;
}

.nrs-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/*
   Twee dingen die anders alsnog een verschil van een paar pixels geven:
   - een label zonder "optioneel" is iets lager dan een label mét;
   - de landkiezer is een knop met een vlag erin, het postcodeveld een gewoon
     invoervak. Zonder vaste hoogte verschillen die net.
*/
.nrs-label { min-height: 1.2rem; }
.nrs-input,
.nrs-picker-button { min-height: 2.6rem; }

/*
   Vaste indeling: land links, postcode rechts, allebei de halve breedte.

   In de HTML staan provincie en plaats tússen land en postcode. Zonder
   `order` zouden die dus op de eerste rij belanden en de postcode wegduwen.
   Met `order` staat het beeld vast, ongeacht welke velden aan of uit staan.
*/
.nrs-field--country  { grid-column: 1; order: 1; }
.nrs-field--postcode { grid-column: 2; order: 2; }
.nrs-field--region   { order: 3; }
.nrs-field--city     { order: 4; }

.nrs-field--action   { grid-column: 1 / -1; order: 5; }

.nrs-label {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--nrs-heading);
    margin-bottom: .3rem;
}

.nrs-optional {
    font-weight: 400;
    font-size: .74rem;
    color: var(--nrs-muted);
}

.nrs-input,
.nrs-picker-button {
    width: 100%;
    padding: .58rem .7rem;
    border: 1px solid var(--nrs-border);
    border-radius: 8px;
    background: #fff;
    font-size: .95rem;
    font-family: inherit;
    color: inherit;
    line-height: 1.35;
}

.nrs-input:focus,
.nrs-picker-button:focus {
    outline: none;
    border-color: var(--nrs-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nrs-primary) 20%, transparent);
}

/* ---------------- landkiezer ---------------- */

.nrs-picker { position: relative; }

.nrs-picker-button {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-align: left;
    cursor: pointer;
}

.nrs-picker-flag { display: inline-flex; flex: none; }
.nrs-picker-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nrs-picker-caret { flex: none; width: .9rem; height: .9rem; color: var(--nrs-muted); }
.nrs-picker-caret svg { width: 100%; height: 100%; }

.nrs-picker-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--nrs-border);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(12, 24, 70, .16);
    overflow: hidden;
}

.nrs-picker-search {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #eef1f5;
    padding: .6rem .75rem;
    font-size: .9rem;
    font-family: inherit;
}

.nrs-picker-search:focus { outline: none; background: #fafbfc; }

.nrs-picker-list {
    list-style: none;
    margin: 0;
    padding: .25rem;
    max-height: 15rem;
    overflow-y: auto;
}

.nrs-picker-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .55rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: .92rem;
}

.nrs-picker-item:hover { background: color-mix(in srgb, var(--nrs-primary) 12%, #fff); }

.nrs-picker-empty {
    padding: .7rem .6rem;
    color: var(--nrs-muted);
    font-size: .88rem;
    text-align: center;
}

.nrs-hint {
    margin: .28rem 0 0;
    font-size: .75rem;
    color: var(--nrs-muted);
}

/* ---------------- knop en uitkomst ---------------- */

.nrs-button {
    width: 100%;
    padding: .62rem 1.2rem;
    border: 0;
    border-radius: 8px;
    background: var(--nrs-primary);
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.nrs-button:hover { background: var(--nrs-primary-dark); }
.nrs-button[disabled] { opacity: .65; cursor: default; }

.nrs-result {
    margin-top: .85rem;
    padding: .75rem .85rem;
    border-radius: 9px;
    font-size: .9rem;
    line-height: 1.55;
}

.nrs-result--ok {
    background: color-mix(in srgb, var(--nrs-primary) 9%, #fff);
    border-left: 3px solid var(--nrs-primary-dark);
}

.nrs-result--problem {
    background: #fff8ed;
    border-left: 3px solid #d98324;
    color: #8a5216;
}

.nrs-outcome-main {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
}

.nrs-outcome-label { font-weight: 600; color: var(--nrs-heading); }

.nrs-outcome-price {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--nrs-heading);
}

.nrs-outcome-price.is-free { color: var(--nrs-primary-dark); }

.nrs-outcome-line { color: var(--nrs-muted); margin-top: .18rem; }
.nrs-outcome-line--accent { color: var(--nrs-primary-dark); font-weight: 600; }

.nrs-outcome-carrier { margin-top: .5rem; }

.nrs-carrier-chip {
    display: inline-block;
    padding: .22rem .6rem;
    border-radius: 5px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.nrs-carrier-logo { max-height: 1.6rem; width: auto; display: block; }

.nrs-outcome-note {
    margin-top: .45rem;
    font-size: .82rem;
    color: var(--nrs-muted);
}

.nrs-note {
    margin: .7rem 0 0;
    font-size: .76rem;
    line-height: 1.5;
    color: var(--nrs-muted);
}

@media (max-width: 520px) {
    .nrs-fields { grid-template-columns: 1fr; }
}