/*
 * Shipping information (Tts\Ui\ShippingInfo\ShippingInfoDisclosure::grouped):
 * the market's shipping information (ShippingCostModalComponent, the one source
 * of it) as native disclosures - the delivery time and the delivery - and the
 * rates behind an action that opens them over the page (shipping-info.js). The
 * chevron turns with the state; the native marker goes. Used in the product
 * page's buying area, the cart's summary and the checkout's summary.
 * Decisions 22, 23 and 24.
 */

.shipping-info {
    border-block: 1px solid var(--shop-divider);
}

/* Last in its box (the cart's summary with no notes after it): the box's edge
   closes it. */
.shipping-info:last-child {
    border-block-end: 0;
}

.shipping-info__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--shop-space-3);
    min-height: var(--shop-tap);
    color: var(--shop-accent);
    font-size: var(--shop-text-md);
    font-weight: var(--shop-weight-semibold);
    line-height: var(--shop-leading-snug);
    list-style: none;
    cursor: pointer;
}

/* The label is a heading for the outline; it reads as the summary's own text. */
.shipping-info__label {
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.shipping-info__toggle::-webkit-details-marker {
    display: none;
}

.shipping-info__toggle:hover {
    color: var(--shop-accent-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.shipping-info__chevron {
    flex: none;
    width: 20px;
    height: 20px;
    transition: transform 150ms ease;
}

.shipping-info[open] .shipping-info__chevron {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .shipping-info__chevron {
        transition: none;
    }
}

/* The information itself is stored HTML (ShippingCostModalComponent) with no
   classes: an h2 title, h4 subheadings, paragraphs and a two-column rate table
   carrying an inline min-width. Element selectors under one class, sized for
   a side column (the cart's summary, the product page's buying area); they have to answer combined.css's h2/h4/p/table rules,
   and its `display: block; white-space: nowrap` for tables below 768px. */
.shipping-info__content {
    /* On a tablet the card spans the page: keep the lines readable. */
    max-inline-size: 65ch;
    padding-block-end: var(--shop-space-4);
    color: var(--shop-text);
    font-size: var(--shop-text-md);
    line-height: var(--shop-leading-normal);
}

/* The title repeats the toggle ("Verzendinformatie" under "Verzendkosten en
   levering"): kept for assistive technology, not shown. */
.shipping-info__content > :is(h2, h3):first-child {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Two levels. A section (Verzendkosten, Levertijd, Belangrijk) opens with a
   hairline and its heading, so the column reads as a few short blocks under
   the introduction; the heading that names a rate table (the country) is a
   quiet label for it, inside its section. */
.shipping-info__content :is(h2, h3, h4) {
    margin: var(--shop-space-4) 0 var(--shop-space-1);
    padding-block-start: var(--shop-space-4);
    border-block-start: 1px solid var(--shop-divider);
    color: var(--shop-ink);
    font-size: var(--shop-text-md);
    font-weight: var(--shop-weight-bold);
    line-height: var(--shop-leading-snug);
}

.shipping-info__content :is(h2, h3, h4):has(+ table) {
    margin-block: var(--shop-space-3) var(--shop-space-1);
    padding-block-start: 0;
    border: 0;
    color: var(--shop-text-soft);
    font-size: var(--shop-text-sm);
    font-weight: var(--shop-weight-semibold);
}

.shipping-info__content p {
    margin: 0 0 var(--shop-space-2);
    font-size: inherit;
    line-height: inherit;
}

.shipping-info__content > :first-child,
.shipping-info__content > :is(h2, h3):first-child + * {
    margin-block-start: 0;
}

.shipping-info__content table {
    display: table;
    width: 100%;
    /* The stored inline min-width: 300px; and a price stays near its
       bracket where the card is wide. */
    min-width: 0 !important;
    max-inline-size: 24rem;
    margin: 0 0 var(--shop-space-3);
    border: 0;
    border-collapse: collapse;
    background: none;
    white-space: normal;
}

.shipping-info__content tr,
.shipping-info__content tr:nth-of-type(even) {
    background: none;
}

.shipping-info__content td {
    padding: var(--shop-space-1) 0;
    border-block-end: 1px solid var(--shop-divider);
    color: var(--shop-text);
    font-size: inherit;
    line-height: inherit;
}

.shipping-info__content td:last-child {
    padding-inline-start: var(--shop-space-3);
    text-align: end;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.shipping-info__content tr:last-child td {
    border-block-end: 0;
}


/* ---------------------------------------------------------------------------
   The group: the short answers as disclosures, one open at a time, and the
   rates behind an action that opens them over the page.
   --------------------------------------------------------------------------- */

.shipping-info-group {
    display: grid;
}

/* Each disclosure carries the rule above it, so the group reads as one list
   rather than as separate boxes. */
.shipping-info-group .shipping-info + .shipping-info,
.shipping-info-group .shipping-info + .shipping-info__toggle--action {
    border-block-start: 1px solid var(--shop-divider);
}

/* The action that opens the rates: a row like the disclosures above it, but a
   button, and its chevron points on rather than down. */
button.shipping-info__toggle--action {
    width: 100%;
    margin: 0;
    padding: var(--shop-space-3) 0;
    border: 0;
    border-radius: 0;
    background: none;
    text-align: start;
}

button.shipping-info__toggle--action:hover,
button.shipping-info__toggle--action:focus {
    background: none;
}

.shipping-info__chevron--action {
    transform: none;
}

/* The rates themselves ------------------------------------------------------
   combined.css gives every dialog position: absolute and top: 0, so a modal
   would be laid out at the top of the document and focusing it would scroll the
   page there. The browser's own fixed position, answered here - the same
   correction the photo viewer makes (Decision 4b). */
.shipping-rates {
    position: fixed;
    inset: 0;
    display: none;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    min-height: 0;
    margin: 0;
    padding: var(--shop-space-4);
    border: 0;
    box-shadow: none;
    background: none;
    color: var(--shop-ink);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.shipping-rates[open] {
    display: grid;
    place-items: center;
}

.shipping-rates::backdrop {
    background: rgb(30 27 75 / 0.55);
}

.shipping-rates__panel {
    display: grid;
    gap: var(--shop-space-4);
    width: 100%;
    max-width: 34rem;
    max-height: 100%;
    padding: var(--shop-space-5);
    border-radius: var(--shop-radius-panel);
    background: var(--shop-surface);
    overflow-y: auto;
}

.shipping-rates__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--shop-space-4);
}

.shipping-rates__title {
    margin: 0;
    color: var(--shop-ink);
    font-size: var(--shop-text-lg);
    font-weight: var(--shop-weight-semibold);
    line-height: var(--shop-leading-snug);
}

button.shipping-rates__close {
    flex: none;
    margin: 0;
    padding: var(--shop-space-2) var(--shop-space-3);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius-md);
    background: var(--shop-surface);
    color: var(--shop-ink);
    font-size: var(--shop-text-md);
    line-height: var(--shop-leading-snug);
    cursor: pointer;
}

button.shipping-rates__close:hover,
button.shipping-rates__close:focus {
    border-color: var(--shop-accent);
    background: var(--shop-surface);
    color: var(--shop-accent-strong);
}

/* The rates read as the reference they are: the text at the card's size, the
   table's own column at a comfortable width. */
.shipping-rates__content {
    padding: 0;
}

.shipping-rates__content table {
    max-width: 28rem;
}

/* The rate table's own head and name (added with the caption, which replaced the
   quiet heading that used to sit above the table). combined.css gives thead a
   grey band and centres a caption; both are answered here so the table reads as
   the two columns it is. */
.shipping-info__content thead,
.shipping-rates__content thead {
    background: none;
}

.shipping-info__content caption,
.shipping-rates__content caption {
    padding: 0 0 var(--shop-space-2);
    color: var(--shop-text-soft);
    font-size: var(--shop-text-md);
    font-weight: var(--shop-weight-semibold);
    text-align: start;
}

.shipping-info__content th,
.shipping-rates__content th {
    padding: 4px 0 4px var(--shop-space-3);
    background: none;
    color: var(--shop-text-soft);
    font-size: var(--shop-text-md);
    font-weight: var(--shop-weight-semibold);
    text-align: start;
}

/* The prices are right-aligned, so the column that names them is too. */
.shipping-info__content th:last-child,
.shipping-rates__content th:last-child {
    text-align: end;
}