/* A way to pay as a small tile: its logo, an icon or its initials, and its
   name underneath (components/pay-network). Loaded by both admins and both
   public sites. Colours from the tokens, except the white plate a logo sits
   on and the dark ink on it: logos are drawn for white, in either theme. */

.pay-network { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-1); min-width: 4.5rem; text-align: center; }
.pay-network-mark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm); background: #ffffff; box-shadow: 0 0 0 1px var(--border); overflow: hidden; color: #1f2937; }
.pay-network-mark img { display: block; width: 2rem; height: 2rem; object-fit: contain; }
.pay-network-initials { font-weight: 700; font-size: .8rem; letter-spacing: .02em; color: #4b5563; }
.pay-network-name { font-size: .75rem; line-height: 1.2; color: var(--muted); max-width: 6rem; }

/* The checkout: a row of tiles, the chosen one ringed. */
.pay-networks { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pay-network-option { position: relative; display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.pay-network-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pay-network-option.is-chosen { border-color: var(--accent); background: var(--accent-soft); }
.pay-network-option.is-chosen .pay-network-name { color: var(--text); font-weight: 600; }
.pay-network-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The rental home page: one strip under the plans, moving like the panels'
   platform strip (site-motion.js); still and wrapped for anybody who asked
   for less motion, or with no script. */
.pay-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.pay-logos.is-loop { flex-wrap: nowrap; justify-content: flex-start; gap: 0; width: max-content; animation: motion-loop var(--loop-time, 30s) linear infinite; }
.pay-logos.is-loop > li { flex: none; margin-inline-end: var(--space-4); }
.tiles-loop:hover .pay-logos, .tiles-loop:focus-within .pay-logos, .pay-logos.is-paused { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .pay-logos.is-loop { animation: none; }
}

/* The strip's heading and line, under the plans on the rental home page. */
.pay-strip { margin-top: var(--space-8); text-align: center; }
.pay-strip-title { margin: 0 0 var(--space-1); font-size: 1.05rem; }
.pay-strip > p { margin: 0 0 var(--space-4); }
.pay-strip.is-tight { margin-top: var(--space-4); }

/* Where a network works, on hover or focus (owner, 27 October 2026): the
   country names on a big screen, small flags on a phone. The flags are
   backgrounds of a label that is not drawn until then, so none is fetched
   for a visitor who never asks. */
.pay-network.has-tip { position: relative; border-radius: var(--radius-sm); outline-offset: 2px; }
.pay-network-tip { display: none; position: absolute; bottom: calc(100% + var(--space-1)); left: 50%; z-index: 5; transform: translateX(-50%); flex-direction: column; align-items: center; gap: var(--space-1); width: max-content; max-width: 22rem; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--text); color: var(--surface); font-size: .75rem; line-height: 1.3; text-align: center; box-shadow: 0 6px 18px rgb(0 0 0 / .2); pointer-events: none; }
.pay-network.has-tip:hover .pay-network-tip, .pay-network.has-tip:focus .pay-network-tip { display: flex; }
.pay-network-tip-names { white-space: nowrap; }
.pay-network-tip-flags { display: none; flex-wrap: wrap; justify-content: center; gap: var(--space-1); }
.pay-flag { display: inline-block; width: 1.25rem; height: .9375rem; border-radius: 2px; background: center / cover no-repeat; box-shadow: 0 0 0 1px rgb(255 255 255 / .4); }
.pay-flag-more { font-weight: 600; }
@media (max-width: 899px) {
    .pay-network-tip-names { display: none; }
    .pay-network-tip-flags { display: flex; }
}

/* The moving frame clips what leaves it; on the ways-to-pay strip it is
   made taller upwards, into the space above it, so a label fits inside. */
.tiles-loop:has(> .pay-logos) { padding-top: calc(var(--space-8) + var(--space-4)); margin-top: calc(-1 * (var(--space-8) + var(--space-4))); pointer-events: none; }
.tiles-loop > .pay-logos > li { pointer-events: auto; }

/* The line under a strip, which opens to every network and its countries. */
.pay-where { margin-top: var(--space-3); font-size: .85rem; color: var(--muted); }
.pay-where summary { cursor: pointer; display: inline-block; }
.pay-where ul { display: grid; gap: var(--space-1); margin: var(--space-2) auto 0; padding: 0; max-width: 40rem; list-style: none; text-align: start; }

/* Words for search engines and screen readers only: the rental site's
   sheets have no hidden-text rule of their own. */
.pay-network .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pay-network-name { text-transform: none; letter-spacing: normal; font-weight: 400; }