/* vk-basics.css */
/* Ventekamas basics (preview): font, sizes, spacing, corners, and no template effects.
   Layout, colours, menus and every word stay as they are. Selectors start with `html` to win over
   the CSS inlined in each page. Remove the <link> to undo. */

/* ---------- Font: Inter, weights up to 700 ---------- */
@font-face {
  font-family: "VK Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/_next/static/vk4/abe4e9739f/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "VK Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/_next/static/vk4/abe4e9739f/inter-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
html, html.__variable_d5a796 { --font-poppins: "VK Inter"; }
html body, html button, html input, html select, html textarea { font-family: "VK Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
html .font-extrabold, html .font-black { font-weight: 700; }

/* ---------- Sizes ---------- */
html .h1-hero { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
html h1, html h2, html h3, html h4 { letter-spacing: -.01em; }
html .section-title, html .section-title-dark { font-size: 30px; line-height: 36px; font-weight: 700; }
@media (max-width: 639.98px) {
  html .section-title, html .section-title-dark { font-size: 24px; line-height: 30px; }
}
html h3.text-lg, html h3.text-xl { font-size: 18px; line-height: 27px; font-weight: 700; }
html .text-sm { line-height: 21px; }

/* Labels above titles and footer headings: sentence case, normal spacing (were small, wide capitals) */
html .uppercase { text-transform: none; }
html .tracking-wide, html .tracking-wider, html .tracking-widest { letter-spacing: 0; }
html .eyebrow, html .eyebrow-dark { font-size: 14px; line-height: 21px; font-weight: 600; text-transform: none; letter-spacing: 0; }

/* ---------- Spacing ---------- */
/* Sections: 64px on a computer (already the case), 40px on a phone (was 32px) */
@media (max-width: 767.98px) {
  html section.container-vk.py-8 { padding-top: 40px; padding-bottom: 40px; }
}
/* Two white sections in a row: 64px between them, not 64 + 64 */
html section.container-vk + section.container-vk { padding-top: 0; }
/* Homepage banner: 64px above and below the text (was 96px) */
@media (min-width: 1024px) {
  html section.bg-ink > .container-vk.lg\:py-24 { padding-top: 64px; padding-bottom: 64px; }
}
/* Header: 64px tall (was 72px) */
html header > .container-vk { height: 64px; }
html { scroll-padding-top: 80px; }

/* ---------- Corners: 8px on cards, buttons and fields; 6px on small labels ---------- */
html .rounded-card, html .card-vk, html .rounded-btn, html .btn-primary, html .btn-mint, html .btn-ghost, html .btn-outline-white, html .input-vk { border-radius: 8px; }
html .pill, html .pill-dark { border-radius: 6px; }

/* ---------- Template effects removed ---------- */
/* Flat colours instead of gradients */
html .bg-hero-grad { background-image: none; background-color: #6c67de; }
html .bg-ink-grad { background-image: none; background-color: #17143f; }

/* Cards: thin border, no soft shadow; buttons: no coloured glow */
html .shadow-card, html .card-vk { box-shadow: none; }
html .shadow-brand, html .shadow-brand-sm { box-shadow: none; }

/* Icons: plain line icons, without the pastel square behind them */
html main .bg-brand-soft.text-brand.place-items-center { width: fit-content; height: auto; background: none; border-radius: 0; }
html main .bg-brand-soft.text-brand.place-items-center > svg { width: 28px; height: 28px; }

html header aside nav .bg-canvas.text-brand { background: none; }

/* Step numbers: smaller and flat */
html main .h-14.w-14.bg-hero-grad { width: 40px; height: 40px; font-size: 16px; }

/* Small badges: plain text, no background */
html .pill-dark, html .pill { padding: 0; background: none; }

/* Banners: no decorative shapes behind the text */
html section > .pointer-events-none.absolute.inset-0 > .absolute:not(.rotate-12) { display: none; }

/* Step cards: no big faded number behind the real one */
html main .text-\[5\.5rem\] { display: none; }

/* Page titles: no short coloured bar under the title */
html main .mt-3.block.h-1.w-16.bg-brand { display: none; }

/* Mock-ups in banners: no small icon squares floating on their corners */
html main .absolute.-top-4.right-5.h-11.w-11, html main .absolute.-left-4.bottom-14.h-10.w-10 { display: none; }

/* Blocks and buttons don't move when hovered */
html .hover\:-translate-y-1:hover, html .hover\:scale-110:hover { transform: none; }

/* Phone menu: plain dimmed background, no blur */
html .backdrop-blur-sm { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Very small phones (320px): logo, language and menu button fit on one line */
@media (max-width: 359.98px) {
  html header > .container-vk { gap: 8px; }
  html header > .container-vk > a:first-child { gap: 6px; }
  html header > .container-vk > a:first-child > span { font-size: 17px; }
}

/* vk-sell-common.css */
/* Sell page (preview), shared by both layouts: a compact form and a phone order that puts reviews and the
   form first. CSS only: the form's fields, checks and sending are untouched. Scoped with #sf-pay, the
   sell form's first field, so no other page is affected. */

/* ---------- Form card ---------- */
html .card-vk:has(> form #sf-pay) { padding: 20px; }
html .card-vk:has(> form #sf-pay) > h2 { font-size: 18px; line-height: 24px; }
html form:has(#sf-pay) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 12px; margin-top: 12px; }
html form:has(#sf-pay) > * { grid-column: 1 / -1; margin-top: 0 !important; }

/* Labels and fields */
html form:has(#sf-pay) .label-vk { margin-bottom: 4px; font-size: 13px; line-height: 18px; }
html form:has(#sf-pay) .input-vk { height: 42px; padding-top: 0; padding-bottom: 0; }

/* The six fields: three per row on a wide form, two on a narrower one */
html form:has(#sf-pay) > .grid:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html form:has(#sf-pay) > .grid:first-child > .space-y-5 { display: contents; }
html form:has(#sf-pay) > .grid:first-child > .space-y-5 > * { margin-top: 0; }
@media (min-width: 1200px) {
  html form:has(#sf-pay) > .grid:first-child { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 639.98px) {
  html form:has(#sf-pay) > .grid:first-child { grid-template-columns: minmax(0, 1fr); }
}

/* Help bubbles of the two-per-row form: anchored to their icon's right, so they stay inside the page */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  html form:has(#sf-pay) [role="tooltip"] { left: auto; right: -8px; transform: none; }
}

/* Servers block */
html form:has(#sf-pay) > :nth-child(2) > div:first-child { margin-bottom: 4px; }
html form:has(#sf-pay) > :nth-child(2) h3 { font-size: 13px; line-height: 18px; font-weight: 600; color: rgb(23 20 63); }
html form:has(#sf-pay) .rounded-card.bg-canvas { padding: 12px; }
html form:has(#sf-pay) .rounded-card.bg-canvas > .grid { gap: 12px; }
html form:has(#sf-pay) .rounded-card.bg-canvas > .mt-3 { margin-top: 8px; padding-top: 8px; }

/* Total and button on one line, right after the fields; the warning under them, smaller.
   The warning window the site opens before sending is untouched. */
html form:has(#sf-pay) > .border-t { order: 1; grid-column: 1; align-self: center; padding-top: 0; border-top: 0; }
html form:has(#sf-pay) > .border-t .text-base { font-size: 18px; }
html form:has(#sf-pay) > .justify-center { order: 2; grid-column: 2; padding-top: 0; }
html form:has(#sf-pay) > .justify-center > .btn-primary { min-width: 260px; min-height: 48px; font-size: 16px; }
html form:has(#sf-pay) > .border-danger-border { order: 3; padding: 10px 12px; }
html form:has(#sf-pay) > .border-danger-border h3 { font-size: 13px; line-height: 18px; }
html form:has(#sf-pay) > .border-danger-border p,
html form:has(#sf-pay) > .border-danger-border ul { margin-top: 2px; font-size: 12.5px; line-height: 18px; }
html form:has(#sf-pay) > .border-danger-border ul > li { margin-top: 0; }
@media (max-width: 639.98px) {
  html form:has(#sf-pay) > .border-t, html form:has(#sf-pay) > .justify-center { grid-column: 1 / -1; }
  html form:has(#sf-pay) > .justify-center > .btn-primary { width: 100%; }
}

/* ---------- Reviews: always in the page next to the form, not in the side rail of wide screens ---------- */
html main:has(#sf-pay) .rail\:block { display: none; }
html main:has(#sf-pay) .rail\:hidden { display: grid; }
html main:has(#sf-pay) .rail\:hidden > section { padding: 12px; }

/* ---------- Payment methods: below the form, full width, two columns ---------- */
html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > .section-title { font-size: 24px; line-height: 30px; }
@media (min-width: 1024px) {
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; margin-top: 16px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul > li { margin-top: 0; }
}

/* ---------- Phones and tablets: title, one review, form, then the rest ---------- */
@media (max-width: 1023.98px) {
  html .container-vk:has(> .gap-10 #sf-pay) { display: flex; flex-direction: column; padding-top: 16px; padding-bottom: 32px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 { display: contents; }
  html .container-vk:has(> .gap-10 #sf-pay) > h1 { margin-top: 8px; font-size: 26px; line-height: 32px; }
  html .container-vk:has(> .gap-10 #sf-pay) > p { margin-top: 8px; font-size: 14px; line-height: 21px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden { order: 3; margin-top: 12px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-2 { order: 4; margin-top: 12px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft { order: 5; margin-top: 16px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 { order: 6; margin-top: 24px; }
}

/* vk-sell-b.css */
/* Sell page, layout B: a dark band like the homepage banner, with the white form standing out on the right
   from the very top; title, compact reviews and payment methods on its left. */

/* ---------- Dark band behind the first block, full width, drawn without touching the page's markup ---------- */
html section:has(> .container-vk > .gap-10 #sf-pay) { overflow: clip; }
html .container-vk:has(> .gap-10 #sf-pay) { isolation: isolate; }
html .container-vk:has(> .gap-10 #sf-pay)::before {
  content: ""; z-index: -1; grid-column: 1 / -1; background: #17143f;
  margin: -24px calc(50% - 50vw) -32px;
}
html .container-vk:has(> .gap-10 #sf-pay) > nav,
html .container-vk:has(> .gap-10 #sf-pay) > nav a { color: rgba(255, 255, 255, .65); }
html .container-vk:has(> .gap-10 #sf-pay) > nav > :last-child { color: #fff; }
html .container-vk:has(> .gap-10 #sf-pay) > h1 { color: #fff; }
html .container-vk:has(> .gap-10 #sf-pay) > p { color: rgba(255, 255, 255, .8); }
html .container-vk:has(> .gap-10 #sf-pay) > p a { color: #b3b0ee; }

/* ---------- The form: white on the dark band, bigger title ---------- */
html .card-vk:has(> form #sf-pay) { border: 0; padding: 24px; }
html .card-vk:has(> form #sf-pay) > h2 { font-size: 20px; line-height: 28px; font-weight: 700; }
html form:has(#sf-pay) > .justify-center > .btn-primary:disabled { opacity: .7; }

/* ---------- Reviews: rating on two short lines, then one compact row per review ---------- */
html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden > section {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 12px;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .8);
}
html .rail\:hidden > section > div:first-child { grid-column: 1; grid-row: 1; }
html .rail\:hidden > section h2 { color: #fff; font-size: 13px; line-height: 18px; font-weight: 600; }
html .rail\:hidden > section > div:first-child > span { color: rgba(255, 255, 255, .6); font-size: 11px; }
html .rail\:hidden > section > div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; margin-top: 2px; color: rgba(255, 255, 255, .7); }
html .rail\:hidden > section > div:nth-child(2) * { color: inherit; }
html .rail\:hidden > section > div:nth-child(2) > :first-child { color: #fff; }
html .rail\:hidden > section svg, html .rail\:hidden > section > div:nth-child(2) svg { color: #f5b830; }
html .rail\:hidden > section > button {
  grid-column: 2; grid-row: 1; width: auto; margin: 0; padding: 0; border: 0; background: none;
  color: #b3b0ee; font-size: 12px; line-height: 18px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
}
html .rail\:hidden > section > button:hover { color: #fff; background: none; }
html .rail\:hidden > section > ul { grid-column: 1 / -1; grid-row: 3; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 8px; }
html .rail\:hidden > section > ul > li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 6px 0 0; margin-top: 6px;
  border: 0; border-top: 1px solid rgba(255, 255, 255, .1); border-radius: 0; background: none; box-shadow: none;
}
html .rail\:hidden > section > ul > li:first-child { margin-top: 0; }
html .rail\:hidden > section > ul > li > div { display: contents; }
html .rail\:hidden > section > ul > li > div > span.grid,
html .rail\:hidden > section > ul > li > div > .ml-auto { display: none; }
html .rail\:hidden > section > ul > li > div > .inline-flex { grid-column: 1; grid-row: 1; }
html .rail\:hidden > section > ul > li > div > .truncate { grid-column: 2; grid-row: 1; color: #fff; }
html .rail\:hidden > section > ul > li > div > time { grid-column: 3; grid-row: 1; color: rgba(255, 255, 255, .55); }
html .rail\:hidden > section > ul > li > p {
  grid-column: 1 / -1; grid-row: 2; margin: 0; overflow: hidden; color: rgba(255, 255, 255, .8);
  font-size: 12px; line-height: 17px; white-space: nowrap; text-overflow: ellipsis;
}

/* ---------- Payment methods: short text and the logos from the footer, on the dark band ---------- */
html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft {
  flex-wrap: wrap; gap: 8px 10px; padding: 12px;
  border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .8);
}
html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft > :last-child { flex: 1 1 0; min-width: 0; color: inherit; font-size: 13px; line-height: 19px; }
html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft > svg { color: #f2b84b; }
html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft::after {
  content: ""; flex: 0 0 100%; height: 70px;
  background:
    url(/img/pay-paypal.webp) 8px 4px / 49px 24px no-repeat,
    url(/img/pay-sepa.webp) 79px 4px / 49px 24px no-repeat,
    url(/img/pay-wise.webp) 150px 4px / 49px 24px no-repeat,
    url(/img/pay-cih.webp) 221px 4px / 49px 24px no-repeat,
    url(/img/pay-attijari.webp) 8px 42px / 49px 24px no-repeat,
    url(/img/pay-bitcoin.webp) 79px 42px / 49px 24px no-repeat,
    url(/img/pay-tether.webp) 150px 42px / 49px 24px no-repeat,
    url(/img/pay-binance.webp) 218px 42px / 55px 24px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='278' height='70'%3E%3Cg fill='%23fff'%3E%3Crect width='65' height='32' rx='6'/%3E%3Crect x='71' width='65' height='32' rx='6'/%3E%3Crect x='142' width='65' height='32' rx='6'/%3E%3Crect x='213' width='65' height='32' rx='6'/%3E%3Crect y='38' width='65' height='32' rx='6'/%3E%3Crect x='71' y='38' width='65' height='32' rx='6'/%3E%3Crect x='142' y='38' width='65' height='32' rx='6'/%3E%3Crect x='213' y='38' width='65' height='32' rx='6' fill='%230b0e11'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 278px 70px no-repeat;
}

/* ---------- Computers: form on the right, everything else on the left ---------- */
@media (min-width: 1024px) {
  html .container-vk:has(> .gap-10 #sf-pay) {
    display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); grid-template-rows: auto auto auto auto auto 1fr auto;
    column-gap: 32px; padding-top: 24px; padding-bottom: 40px;
  }
  html .container-vk:has(> .gap-10 #sf-pay)::before { grid-row: 1 / 7; }
  html .container-vk:has(> .gap-10 #sf-pay) > :not(.gap-10) { grid-column: 1; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 { display: contents; }
  html .container-vk:has(> .gap-10 #sf-pay) > nav { grid-row: 1; }
  html .container-vk:has(> .gap-10 #sf-pay) > h1 { grid-row: 2; margin-top: 12px; font-size: 30px; line-height: 36px; }
  html .container-vk:has(> .gap-10 #sf-pay) > p { grid-row: 3; margin-top: 8px; font-size: 14px; line-height: 21px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden { grid-row: 4; margin-top: 12px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft { grid-row: 5; margin-top: 12px; }
  /* Logos: four across the whole box */
  html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft::after {
    height: 80px;
    background:
      url(/img/pay-paypal.webp) 15px 4px / 57px 28px no-repeat,
      url(/img/pay-sepa.webp) 110px 4px / 57px 28px no-repeat,
      url(/img/pay-wise.webp) 205px 4px / 57px 28px no-repeat,
      url(/img/pay-cih.webp) 300px 4px / 57px 28px no-repeat,
      url(/img/pay-attijari.webp) 15px 48px / 57px 28px no-repeat,
      url(/img/pay-bitcoin.webp) 110px 48px / 57px 28px no-repeat,
      url(/img/pay-tether.webp) 205px 48px / 57px 28px no-repeat,
      url(/img/pay-binance.webp) 296px 48px / 64px 28px no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='372' height='80'%3E%3Cg fill='%23fff'%3E%3Crect width='87' height='36' rx='6'/%3E%3Crect x='95' width='87' height='36' rx='6'/%3E%3Crect x='190' width='87' height='36' rx='6'/%3E%3Crect x='285' width='87' height='36' rx='6'/%3E%3Crect y='44' width='87' height='36' rx='6'/%3E%3Crect x='95' y='44' width='87' height='36' rx='6'/%3E%3Crect x='190' y='44' width='87' height='36' rx='6'/%3E%3Crect x='285' y='44' width='87' height='36' rx='6' fill='%230b0e11'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 372px 80px no-repeat;
  }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-2 { grid-column: 2; grid-row: 1 / 7; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 { grid-column: 1 / -1; grid-row: 7; margin-top: 72px; }
}

/* ---------- Phones and tablets: title, reviews, form, payment methods on the band ---------- */
@media (max-width: 1023.98px) {
  html .container-vk:has(> .gap-10 #sf-pay) { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 16px; }
  html .container-vk:has(> .gap-10 #sf-pay)::before { grid-row: 1 / 7; margin-top: -16px; margin-bottom: -24px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 { display: contents; }
  html .container-vk:has(> .gap-10 #sf-pay) > nav { grid-row: 1; }
  html .container-vk:has(> .gap-10 #sf-pay) > h1 { grid-row: 2; }
  html .container-vk:has(> .gap-10 #sf-pay) > p { grid-row: 3; }
  html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden { grid-row: 4; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-2 { grid-row: 5; }
  html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft { grid-row: 6; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 { grid-row: 7; margin-top: 56px; }
  /* Everything in the one column, over the band (left to itself, the browser opens a second column beside it) */
  html .container-vk:has(> .gap-10 #sf-pay) > :not(.gap-10),
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > * { grid-column: 1; }
}

/* vk-sell-left.css */
/* Sell page, cleaner left column, shared by examples C, D and E. No boxes and no check icon; two text sizes only
   (14px, 12px); reviews are one line each. The form and the dark band are untouched. */

/* ---------- Reviews ---------- */
html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden { gap: 0; }
html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden > section {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; padding: 16px 0 0;
  border: 0; border-top: 1px solid rgba(255, 255, 255, .14); border-radius: 0; background: none;
}
html .rail\:hidden > section h2 { font-size: 14px; line-height: 21px; font-weight: 600; letter-spacing: 0; }
html .rail\:hidden > section > div:first-child > span { display: none; }
html .rail\:hidden > section > button { font-size: 14px; line-height: 21px; font-weight: 500; }
html .rail\:hidden > section > div:nth-child(2) { align-items: center; margin-top: 0; column-gap: 8px; }
html .rail\:hidden > section > div:nth-child(2) > :first-child { font-size: 14px; line-height: 21px; font-weight: 600; }
html .rail\:hidden > section > div:nth-child(2) > :first-child::after { content: "/5"; font-weight: 400; color: rgba(255, 255, 255, .7); }
html .rail\:hidden > section > div:nth-child(2) > :last-child { font-size: 14px; line-height: 21px; }

/* One line per review: the comment and its time */
html .rail\:hidden > section > ul { margin-top: 8px; }
html .rail\:hidden > section > ul > li {
  grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; row-gap: 0; padding: 4px 0; margin-top: 0; border-top: 0;
}
html .rail\:hidden > section > ul > li > div > .inline-flex,
html .rail\:hidden > section > ul > li > div > .truncate { display: none; }
html .rail\:hidden > section > ul > li > p {
  grid-column: 1; grid-row: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: 14px; line-height: 21px; color: rgba(255, 255, 255, .85); white-space: normal;
}
html .rail\:hidden > section > ul > li > div > time { grid-column: 2; grid-row: 1; font-size: 12px; line-height: 21px; }
/* A review without a comment shows its name instead */
html .rail\:hidden > section > ul > li:not(:has(> p)) > div > .truncate { display: block; grid-column: 1; grid-row: 1; font-size: 14px; line-height: 21px; font-weight: 400; }

/* ---------- Payment block: under the reviews on computers, under the form on phones ---------- */
html .rail\:hidden::before, html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft::before {
  content: "Paiement instantané"; display: block; color: #fff; font-size: 14px; line-height: 21px; font-weight: 600;
}
html[lang^="en"] .rail\:hidden::before, html[lang^="en"] .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft::before { content: "Instant payment"; }
html[lang="es"] .rail\:hidden::before, html[lang="es"] .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft::before { content: "Pago instantáneo"; }
html[lang="pt"] .rail\:hidden::before, html[lang="pt"] .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft::before { content: "Pagamento instantâneo"; }

@media (min-width: 1024px) {
  /* Breadcrumb at the top; title, reviews and payment as one block, centred beside the form */
  html .container-vk:has(> .gap-10 #sf-pay) { grid-template-rows: auto 1fr auto auto auto 1fr auto; }
  html .container-vk:has(> .gap-10 #sf-pay) > nav { grid-row: 1; }
  html .container-vk:has(> .gap-10 #sf-pay) > h1 { grid-row: 3; margin-top: 0; }
  html .container-vk:has(> .gap-10 #sf-pay) > p { grid-row: 4; }
  html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden { grid-row: 5; margin-top: 24px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden::before { order: 2; margin-top: 12px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); }
  html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden::after { order: 3; margin-top: 8px; }

  /* The long payment sentence moves to the payment section, under the band: same words, plain text */
  html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft {
    display: block; grid-column: 1 / -1; grid-row: 8; margin-top: 12px; padding: 0; border: 0; border-radius: 0; background: none; color: rgb(78 78 78);
  }
  html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft > svg,
  html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft::before,
  html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft::after { display: none; }
  html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft > :last-child { font-size: 14px; line-height: 21px; }
}

@media (max-width: 1023.98px) {
  html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden { margin-top: 16px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden::before,
  html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden::after { display: none; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-2 { margin-top: 16px; }

  html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft { display: block; margin-top: 24px; padding: 0; border: 0; border-radius: 0; background: none; color: rgba(255, 255, 255, .8); }
  html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft > svg,
  html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft::before { display: none; }
  html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft > :last-child { font-size: 14px; line-height: 21px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft::after { margin-top: 12px; }
}

/* vk-sell-e.css */
/* Example E, white strip: the logos keep their own colours, together on one white strip. */
html .rail\:hidden > section > div:nth-child(2) svg { color: #b3b0ee; }
html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden::after,
html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft::after {
  content: ""; display: block; flex: none; box-sizing: border-box; width: 100%; height: auto; aspect-ratio: 800 / 208; padding: 16px;
  border-radius: 8px; background: #fff url(/_next/static/vk4/abe4e9739f/pay-color.png) left center / contain no-repeat; background-origin: content-box;
}
@media (min-width: 1024px) {
  html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft::after { display: none; }
}

/* Phones and tablets: the payment logos only once, under the form */
@media (max-width: 1023.98px) {
  html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden::after { display: none; }
}

/* vk-form.css */
/* Sell form (preview), shared by both orders: one even grid so no field can be squeezed or pushed out, clean fields,
   no box inside the card. CSS only: the form's fields, checks and sending are untouched. */

/* ---------- Grid: six columns, so rows of three, two or one always line up ---------- */
html form:has(#sf-pay) { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 12px; }
html form:has(#sf-pay) > * { grid-column: 1 / -1; order: 95; }
html form:has(#sf-pay) > .grid:first-child,
html form:has(#sf-pay) > .grid:first-child > .space-y-5 { display: contents; }
html form:has(#sf-pay) .space-y-5 > * { grid-column: 1 / -1; min-width: 0; margin-top: 0; }

/* ---------- Fields ---------- */
html form:has(#sf-pay) .label-vk { margin-bottom: 4px; color: rgb(23 20 63); font-size: 13px; line-height: 18px; font-weight: 500; }
html form:has(#sf-pay) .label-vk .text-danger { display: inline; margin-left: 1px; color: #f87171; font-weight: 700; }
html form:has(#sf-pay) .input-vk {
  height: 44px; padding: 0 12px; border: 1px solid #d8d7e3; border-radius: 8px; background: #fff; color: rgb(23 20 63); font-size: 14px;
}
html form:has(#sf-pay) .input-vk::placeholder { color: #8a8998; opacity: 1; }
html form:has(#sf-pay) button.input-vk > .text-muted { color: #8a8998; }
html form:has(#sf-pay) .input-vk:hover:not(:disabled) { border-color: #b3b0ee; }
html form:has(#sf-pay) .input-vk:focus, html form:has(#sf-pay) .input-vk[aria-expanded="true"] { border-color: #6c67de; box-shadow: 0 0 0 3px rgba(108, 103, 222, .15); outline: 0; }
html form:has(#sf-pay) .input-vk:disabled { background: #f6f6f9; opacity: 1; }
html form:has(#sf-pay) .input-vk:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset; -webkit-text-fill-color: rgb(23 20 63); }

/* Help icon: a thin outline instead of a solid dark circle */
html form:has(#sf-pay) .label-vk .group > button { width: 15px; height: 15px; border: 1px solid #bdbccb; background: none; color: #6f6e7f; font-size: 10px; font-weight: 600; }
html form:has(#sf-pay) .label-vk .group > button:hover { border-color: #6c67de; color: #6c67de; }

/* ---------- Section titles ---------- */
html form:has(#sf-pay) > div:has(> .space-y-3) > div:first-child { margin-bottom: 8px; }
html form:has(#sf-pay) > div:has(> .space-y-3) h3,
html form:has(#sf-pay)::before, html form:has(#sf-pay)::after {
  color: rgb(23 20 63); font-size: 14px; line-height: 21px; font-weight: 600; text-transform: none; letter-spacing: 0;
}

/* ---------- Servers: no box inside the card ---------- */
html form:has(#sf-pay) > div:has(> .space-y-3) { position: relative; }
html form:has(#sf-pay) > div:has(> .space-y-3) > .space-y-3 > * + * { margin-top: 12px; }
html form:has(#sf-pay) .rounded-card.bg-canvas { padding: 0; border: 0; border-radius: 0; background: none; }
html form:has(#sf-pay) .rounded-card.bg-canvas > .grid { gap: 12px; }
html form:has(#sf-pay) .rounded-card.bg-canvas + .rounded-card.bg-canvas { padding-top: 12px; border-top: 1px solid #ecebf3; }
html form:has(#sf-pay) .rounded-card.bg-canvas + .rounded-card.bg-canvas .label-vk { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* "Serveur 2" and its remove button, only with several servers */
html form:has(#sf-pay) .rounded-card.bg-canvas > .mb-3 { margin-bottom: 6px; }
html form:has(#sf-pay) .rounded-card.bg-canvas > .mb-3 > span { color: rgb(23 20 63); font-size: 12px; line-height: 18px; font-weight: 600; text-transform: none; letter-spacing: 0; }
html form:has(#sf-pay) .rounded-card.bg-canvas > .mb-3 > button { padding: 0; font-size: 12px; font-weight: 500; }

/* Price line */
html form:has(#sf-pay) .rounded-card.bg-canvas > .mt-3 { column-gap: 24px; margin-top: 8px; padding-top: 0; border-top: 0; font-size: 13px; line-height: 18px; }
html form:has(#sf-pay) .rounded-card.bg-canvas > .mt-3 .text-xs { font-size: 12px; font-weight: 500; }

/* Add a server: a small link beside the title */
html form:has(#sf-pay) > div:has(> .space-y-3) > button {
  position: absolute; top: 0; right: 0; gap: 4px; margin: 0; padding: 0; border: 0; background: none; color: #5752c9;
  font-size: 13px; line-height: 21px; font-weight: 600;
}
html form:has(#sf-pay) > div:has(> .space-y-3) > button:hover { color: #6c67de; text-decoration: underline; text-underline-offset: 2px; }
html form:has(#sf-pay) > div:has(> .space-y-3) > button > svg { width: 14px; height: 14px; }

/* ---------- Contact: the method, then its details, on one line ---------- */
html form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-contact"]) { grid-column: 1 / -1; }
html form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-contact"]) > .flex-wrap { flex-wrap: nowrap; gap: 12px; }
html form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-contact"]) > .flex-wrap > :first-child { flex: none; width: calc((100% - 24px) / 3); }
html form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-contact"]) > .flex-wrap > .flex-1 { gap: 12px; }
html form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-contact"]) > .flex-wrap > .flex-1 > .shrink-0 { flex: none; width: calc((100% - 12px) / 2); }
html form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-contact"]) > .flex-wrap > .flex-1 > input.input-vk { flex: 1 1 0; min-width: 0; }

/* Until a method is chosen, the empty space says why we ask */
html form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-contact"]) > .flex-wrap:not(:has(> .flex-1))::after {
  content: "Pour vous joindre en cas d’erreur ou de question."; flex: 1 1 0; min-width: 0; align-self: center; color: #6f6e7f; font-size: 13px; line-height: 18px;
}
html[lang^="en"]:not([data-vk-lang]) form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-contact"]) > .flex-wrap:not(:has(> .flex-1))::after , html[data-vk-lang="en"] form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-contact"]) > .flex-wrap:not(:has(> .flex-1))::after { content: "So we can reach you if there’s a mistake or a question."; }
html[lang="es"]:not([data-vk-lang]) form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-contact"]) > .flex-wrap:not(:has(> .flex-1))::after , html[data-vk-lang="es"] form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-contact"]) > .flex-wrap:not(:has(> .flex-1))::after { content: "Para contactarte en caso de error o duda."; }
html[lang="pt"]:not([data-vk-lang]) form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-contact"]) > .flex-wrap:not(:has(> .flex-1))::after , html[data-vk-lang="pt"] form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-contact"]) > .flex-wrap:not(:has(> .flex-1))::after { content: "Para o contactar em caso de erro ou dúvida."; }

/* Help bubble of the exchange code: anchored to its icon's right, so it stays inside the page */
@media (min-width: 640px) {
  html form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-code"]) [role="tooltip"] { left: auto; right: -8px; transform: none; }
}

/* Crypto: the wallet address gets the room it needs, the network less */
html form:has(#sf-pay) .space-y-5 > .grid:has(label[for="sf-crypto"]) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }

/* ---------- Total and button ---------- */
html form:has(#sf-pay) > .border-t { order: 100; grid-column: 1 / 4; align-self: center; padding-top: 0; border-top: 0; }
html form:has(#sf-pay) > .border-t > * { font-size: 13px; line-height: 18px; }
html form:has(#sf-pay) > .border-t .text-base { color: rgb(23 20 63); font-size: 18px; line-height: 24px; }
html form:has(#sf-pay) > .justify-center { order: 110; grid-column: 4 / -1; align-self: center; padding-top: 0; }
html form:has(#sf-pay) > .justify-center > .btn-primary { width: 100%; min-width: 0; min-height: 48px; font-size: 16px; }
html form:has(#sf-pay) > .justify-center > .btn-primary:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Warning: same words, quieter, so the button stays the strongest thing ---------- */
html form:has(#sf-pay) > .border-danger-border { order: 120; padding: 10px 12px; border: 0; border-radius: 8px; background: #fdf5f5; }
html form:has(#sf-pay) > .border-danger-border h3 { gap: 6px; font-size: 12px; line-height: 18px; font-weight: 600; }
html form:has(#sf-pay) > .border-danger-border h3 svg { width: 14px; height: 14px; }
html form:has(#sf-pay) > .border-danger-border p,
html form:has(#sf-pay) > .border-danger-border ul { margin-top: 0; font-size: 12px; line-height: 18px; }

/* ---------- Narrow computers: the left column gives the form its room ---------- */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  html .container-vk:has(> .gap-10 #sf-pay) { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); column-gap: 24px; }
}

/* ---------- Phones: everything in one column ---------- */
@media (max-width: 639.98px) {
  html form:has(#sf-pay) > * { grid-column: 1 / -1; }
  html form:has(#sf-pay) .space-y-5 > * { grid-column: 1 / -1; }
  html form:has(#sf-pay) > .border-t, html form:has(#sf-pay) > .justify-center { grid-column: 1 / -1; }
  html form:has(#sf-pay) > div:has(> .space-y-3) > button { position: static; margin-top: 8px; }
  html form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-contact"]) > .flex-wrap:not(:has(> .flex-1))::after { flex: 1 1 100%; }
  html form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-contact"]) > .flex-wrap { flex-wrap: wrap; }
  html form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-contact"]) > .flex-wrap > :first-child { width: 100%; }
  html form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-contact"]) > .flex-wrap > .flex-1 { flex: 1 1 100%; }
  html form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-contact"]) > .flex-wrap > .flex-1 > .shrink-0 { width: 124px; }
  html form:has(#sf-pay) .space-y-5 > .grid:has(label[for="sf-crypto"]) { grid-template-columns: minmax(0, 1fr); }
}

/* vk-form-g.css */
/* Sell form, in three parts: the customer's information, then the payment, then the servers. */

/* Titles of the first two parts */
html form:has(#sf-pay)::before, html form:has(#sf-pay)::after { content: ""; display: block; grid-column: 1 / -1; }
html form:has(#sf-pay)::before { content: "Vos informations"; order: 10; }
html form:has(#sf-pay)::after { content: "Votre paiement"; order: 20; padding-top: 8px; border-top: 1px solid #ecebf3; }
html[lang^="en"]:not([data-vk-lang]) form:has(#sf-pay)::before , html[data-vk-lang="en"] form:has(#sf-pay)::before { content: "Your information"; }
html[lang^="en"]:not([data-vk-lang]) form:has(#sf-pay)::after , html[data-vk-lang="en"] form:has(#sf-pay)::after { content: "Your payment"; }
html[lang="es"]:not([data-vk-lang]) form:has(#sf-pay)::before , html[data-vk-lang="es"] form:has(#sf-pay)::before { content: "Tu información"; }
html[lang="es"]:not([data-vk-lang]) form:has(#sf-pay)::after , html[data-vk-lang="es"] form:has(#sf-pay)::after { content: "Tu pago"; }
html[lang="pt"]:not([data-vk-lang]) form:has(#sf-pay)::before , html[data-vk-lang="pt"] form:has(#sf-pay)::before { content: "As suas informações"; }
html[lang="pt"]:not([data-vk-lang]) form:has(#sf-pay)::after , html[data-vk-lang="pt"] form:has(#sf-pay)::after { content: "O seu pagamento"; }

/* The information */
html form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-nom"]) { order: 11; }
html form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-email"]) { order: 12; }
html form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-code"]) { order: 13; }
html form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-contact"]) { order: 14; }

/* The payment */
html form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-pay"]) { order: 21; }
html form:has(#sf-pay) .space-y-5 > :has(label[for="sf-addr"]),
html form:has(#sf-pay) .space-y-5 > :has(label[for="sf-crypto"]),
html form:has(#sf-pay) .space-y-5 > :has(label[for="sf-binance"]),
html form:has(#sf-pay) .space-y-5 > :has(label[for="sf-rib"]) { order: 22; }

/* The servers */
html form:has(#sf-pay) > div:has(> .space-y-3) { order: 30; padding-top: 8px; border-top: 1px solid #ecebf3; }
html form:has(#sf-pay) > div:has(> .space-y-3) > button { top: 9px; }

@media (min-width: 640px) {
  html form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-nom"]),
  html form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-email"]),
  html form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-code"]) { grid-column: span 2; }
  /* Payment row: half and half, so "Choisir un mode de paiement" fits; crypto gives the wallet address more room */
  html form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-pay"]),
  html form:has(#sf-pay) .space-y-5 > :has(label[for="sf-addr"]),
  html form:has(#sf-pay) .space-y-5 > :has(label[for="sf-binance"]),
  html form:has(#sf-pay) .space-y-5 > :has(label[for="sf-rib"]) { grid-column: span 3; }
  html form:has(#sf-crypto) .space-y-5 > :has(> label[for="sf-pay"]) { grid-column: span 2; }
  html form:has(#sf-crypto) .space-y-5 > :has(label[for="sf-crypto"]) { grid-column: span 4; }
}

/* vk-sell-white.css */
/* Sell page, version H: a plain white page. No background that grows with the form; the left column stays where
   it is whatever the form does. Dark text, and the form stands out with its navy title bar and border. */

/* ---------- No dark band ---------- */
html .container-vk:has(> .gap-10 #sf-pay)::before { display: none; }
html section:has(> .container-vk > .gap-10 #sf-pay) { overflow: visible; }

/* ---------- Left column: dark text ---------- */
html .container-vk:has(> .gap-10 #sf-pay) > nav,
html .container-vk:has(> .gap-10 #sf-pay) > nav a { color: #6f6e7f; }
html .container-vk:has(> .gap-10 #sf-pay) > nav > :last-child { color: rgb(23 20 63); }
html .container-vk:has(> .gap-10 #sf-pay) > h1 { color: rgb(23 20 63); }
html .container-vk:has(> .gap-10 #sf-pay) > p { color: rgb(78 78 78); }
html .container-vk:has(> .gap-10 #sf-pay) > p a { color: #5752c9; }

/* Reviews */
html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden > section { border-top-color: #ecebf3; color: rgb(78 78 78); }
html .rail\:hidden > section h2 { color: rgb(23 20 63); }
html .rail\:hidden > section > div:nth-child(2) { color: #6f6e7f; }
html .rail\:hidden > section > div:nth-child(2) > :first-child { color: rgb(23 20 63); }
html .rail\:hidden > section > div:nth-child(2) > :first-child::after { color: #6f6e7f; }
html .rail\:hidden > section svg, html .rail\:hidden > section > div:nth-child(2) svg { color: #6c67de; }
html .rail\:hidden > section > button { color: #5752c9; }
html .rail\:hidden > section > button:hover { color: #6c67de; }
html .rail\:hidden > section > ul > li > div > .truncate { color: rgb(23 20 63); }
html .rail\:hidden > section > ul > li > div > time { color: #8a8998; }
html .rail\:hidden > section > ul > li > p { color: rgb(58 58 70); }

/* Payment: the logos directly on the page, one size, their own colours */
html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden::before,
html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft::before { color: rgb(23 20 63); }
html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden::after,
html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft::after {
  aspect-ratio: 800 / 144; padding: 0; border-radius: 0; background: url(/_next/static/vk4/abe4e9739f/pay-color.png) left center / contain no-repeat;
}

/* ---------- The form: a border and a navy title bar ---------- */
html .card-vk:has(> form #sf-pay) { padding: 0 0 20px; border: 1px solid #d8d7e3; border-radius: 8px; box-shadow: 0 8px 28px rgba(23, 20, 63, .08); }
html .card-vk:has(> form #sf-pay) > h2 { padding: 12px 20px; border-radius: 7px 7px 0 0; background: #17143f; color: #fff; font-size: 18px; line-height: 24px; }
html .card-vk:has(> form #sf-pay) > form { margin-top: 12px; padding: 0 20px; }

/* Messages on a server line: same words, smaller */
html form:has(#sf-pay) .rounded-card.bg-canvas [class*="bg-danger-bg"] { margin-top: 6px; padding: 6px 10px; border: 0; font-size: 13px; line-height: 18px; font-weight: 500; }

/* ---------- Computers: the left column never moves ----------
   Title and text at the top, reviews and payment right under them, always in the same place. Not sticky: a sticky
   block here can slide over the sections below the form. */
@media (min-width: 1024px) {
  html .container-vk:has(> .gap-10 #sf-pay) { grid-template-rows: auto auto auto 1fr auto auto auto; padding-bottom: 32px; }
  html .container-vk:has(> .gap-10 #sf-pay) > h1 { grid-row: 2; margin-top: 12px; }
  html .container-vk:has(> .gap-10 #sf-pay) > p { grid-row: 3; }
  html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden { grid-row: 4 / 7; align-self: start; margin-top: 20px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 { margin-top: 40px; }
}

/* ---------- Phones and tablets ---------- */
@media (max-width: 1023.98px) {
  html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft { color: rgb(78 78 78); }
  html .card-vk:has(> form #sf-pay) > form { padding: 0 16px; }
  html .card-vk:has(> form #sf-pay) > h2 { padding: 12px 16px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 { margin-top: 32px; }
}

/* Phones and tablets: the payment logos only once, under the form */
@media (max-width: 1023.98px) {
  html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden::after { display: none; }
}

/* vk-sell-i.css */
/* Sell page, version I: the same white page with a short navy band behind the title only. The band's height depends
   on the title alone, so it can't grow with the form; the form sits over its lower edge. */
/* The whole first section: a very light lavender, lighter than the next section (#f4f2fc), so the white form stands out */
html section:has(> .container-vk > .gap-10 #sf-pay) { overflow: clip; background: #f9f8fe; }
html .container-vk:has(> .gap-10 #sf-pay)::before {
  content: ""; display: block; z-index: -1; grid-column: 1 / -1; grid-row: 1 / 4; background: #17143f;
  margin: -24px calc(50% - 50vw) -24px;
}
html .container-vk:has(> .gap-10 #sf-pay) > nav,
html .container-vk:has(> .gap-10 #sf-pay) > nav a { color: rgba(255, 255, 255, .65); }
html .container-vk:has(> .gap-10 #sf-pay) > nav > :last-child { color: #fff; }
html .container-vk:has(> .gap-10 #sf-pay) > h1 { color: #fff; }
html .container-vk:has(> .gap-10 #sf-pay) > p { color: rgba(255, 255, 255, .8); }
html .container-vk:has(> .gap-10 #sf-pay) > p a { color: #b3b0ee; }

/* The form keeps a plain white top on the band */
html .card-vk:has(> form #sf-pay) { padding: 20px; border-color: #d8d7e3; }
html .card-vk:has(> form #sf-pay) > h2 { padding: 0; border-radius: 0; background: none; color: rgb(23 20 63); font-size: 20px; line-height: 28px; }
html .card-vk:has(> form #sf-pay) > form { padding: 0; }

@media (min-width: 1024px) {
  html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden { margin-top: 44px; border-top: 0; }
  html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden > section { padding-top: 0; border-top: 0; }
}
@media (max-width: 1023.98px) {
  html .container-vk:has(> .gap-10 #sf-pay)::before { margin-top: -16px; margin-bottom: -16px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden { margin-top: 32px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden > section { padding-top: 0; border-top: 0; }
  html .card-vk:has(> form #sf-pay) { padding: 16px; }
}

/* vk-reviews2.css */
/* Sell page: the reviews as they were on the site: a lavender panel, white cards, scrolling on their own and pausing
   on hover (vk-reviews2.js brings the site's list here). The height is fixed, so the block ends above the form's bottom. */

/* The panel */
html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden > section {
  display: block; min-height: 302px; padding: 12px; border: 1px solid #ecebf3; border-radius: 8px; background: rgb(234 230 247);
}

/* Title and rating */
html .rail\:hidden > section h2 { font-size: 14px; line-height: 20px; font-weight: 600; }
html .rail\:hidden > section > div:first-child { display: flex; align-items: baseline; gap: 8px; }
html .rail\:hidden > section > div:first-child > span { display: inline-flex; color: #6f6e7f; font-size: 11px; }
html .rail\:hidden > section > div:nth-child(2) { display: flex; align-items: center; column-gap: 8px; margin-top: 2px; color: #6f6e7f; }
html .rail\:hidden > section > div:nth-child(2) > :first-child { font-size: 16px; line-height: 24px; font-weight: 700; }
html .rail\:hidden > section > div:nth-child(2) > :first-child::after { content: none; }
html .rail\:hidden > section > div:nth-child(2) > :last-child { font-size: 12px; line-height: 18px; }

/* The list: the site's scrolling window, a fixed height; the page's short list and its button aren't needed */
html .rail\:hidden > section > ul, html .rail\:hidden > section > button { display: none; }
html .rail\:hidden > section > .vk-rev-fenetre { height: 220px; min-height: 0; margin-top: 10px; }
html .rail\:hidden > section > .vk-rev-fenetre li { box-shadow: none; }

/* Payment, under the panel */
@media (min-width: 1024px) {
  html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden::before { margin-top: 16px; padding-top: 0; border-top: 0; }
}

/* Phones and tablets: a lower window, so the form stays near the top */
@media (max-width: 1023.98px) {
  html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden > section { min-height: 262px; }
  html .rail\:hidden > section > .vk-rev-fenetre { height: 180px; }
}

/* vk-payline.css */
/* Sell page: the reviews panel fills the left area down to the bottom of the form, and all the payment logos sit in one
   line under both, above "Méthodes de paiement". */

@media (min-width: 1024px) {
  html .container-vk:has(> .gap-10 #sf-pay) { grid-template-rows: auto auto auto 1fr auto auto auto auto; }

  /* Reviews: as tall as the space left. If the customer adds servers the form grows, but the panel stops at this height */
  html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden { grid-row: 4 / 7; align-self: stretch; display: flex; flex-direction: column; min-height: 0; max-height: 490px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden::before,
  html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden::after { display: none; }
  html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden > section { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  html .rail\:hidden > section > div { flex: none; }
  html .rail\:hidden > section > .vk-rev-fenetre { flex: 1 1 0; height: auto; min-height: 0; }

  /* Payment: one line, then the sentence */
  html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft { display: flex; flex-direction: column; grid-row: 7; margin-top: 32px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft::before { display: none; }
  html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft::after {
    content: ""; display: block; order: -1; flex: none; width: 100%; height: auto; aspect-ratio: 2304 / 64; margin: 0 0 16px; padding: 0; border-radius: 0;
    background: url(/_next/static/vk4/abe4e9739f/pay-line.png) left center / contain no-repeat;
  }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 { grid-row: 8; margin-top: 32px; }
}

/* Phones and tablets: three logos per row, then the sentence */
@media (max-width: 1023.98px) {
  html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft { display: flex; flex-direction: column; }
  html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft::after {
    content: ""; display: block; order: -1; flex: none; width: 100%; max-width: 420px; height: auto; aspect-ratio: 720 / 240; margin: 0 0 12px; padding: 0; border-radius: 0;
    background: url(/_next/static/vk4/abe4e9739f/pay-grid.png) left center / contain no-repeat;
  }
}

/* vk-table.css */
/* Sell page: the price table with the numbers lined up on the right and the stock in a small rectangle, and the
   payment methods in a panel beside it. The long list under the form is replaced by this panel. */

html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 { display: none; }

/* ---------- Table ---------- */
main:has(#sf-pay) .container-vk:has(> .mt-6 table) .overflow-x-auto { box-shadow: none; }
main:has(#sf-pay) .container-vk:has(> .mt-6 table) table { display: block; width: 100%; min-width: 770px; }
main:has(#sf-pay) .container-vk:has(> .mt-6 table) thead,
main:has(#sf-pay) .container-vk:has(> .mt-6 table) tbody { display: block; }
main:has(#sf-pay) .container-vk:has(> .mt-6 table) tr { display: grid; grid-template-columns: minmax(102px, 1fr) repeat(2, minmax(92px, 1fr)) minmax(116px, 1.2fr) minmax(122px, 1.25fr) minmax(106px, 1.1fr) minmax(140px, 1.3fr); align-items: center; }
main:has(#sf-pay) .container-vk:has(> .mt-6 table) tr:has(> td[colspan]) { display: block; }
main:has(#sf-pay) .container-vk:has(> .mt-6 table) td[colspan] { display: block; }

/* Pix is added at the end of each row and shown before the stock */
main:has(#sf-pay) .container-vk:has(> .mt-6 table) tr > .vk-pix { order: 1; }
main:has(#sf-pay) .container-vk:has(> .mt-6 table) tr > :nth-child(6) { order: 2; }
main:has(#sf-pay) .container-vk:has(> .mt-6 table) tr > :first-child { align-self: stretch; }
main:has(#sf-pay) .container-vk:has(> .mt-6 table) tr > td:first-child:not([colspan]) { display: flex; align-items: center; }
main:has(#sf-pay) .container-vk:has(> .mt-6 table) td[colspan] > div { text-align: left; font-size: 13px; padding-top: 6px; padding-bottom: 6px; }

/* Headings: all centered in their column */
main:has(#sf-pay) .container-vk:has(> .mt-6 table) th { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.3; padding: 10px 14px; font-size: 12px; color: rgb(23 20 63); }
main:has(#sf-pay) .container-vk:has(> .mt-6 table) th:nth-child(n+2):nth-child(-n+5),
main:has(#sf-pay) .container-vk:has(> .mt-6 table) th.vk-pix { padding-left: 8px; padding-right: 8px; }

/* Prices: each with its unit, the digits lined up on the right, the block under its centered heading */
main:has(#sf-pay) .container-vk:has(> .mt-6 table) td:not([colspan]) { padding-left: 14px; padding-right: 14px; }
main:has(#sf-pay) .container-vk:has(> .mt-6 table) td[colspan] > div { padding-left: 14px; padding-right: 14px; }
main:has(#sf-pay) .container-vk:has(> .mt-6 table) td.vk-pix { padding-top: 10px; padding-bottom: 10px; }
main:has(#sf-pay) .container-vk:has(> .mt-6 table) td:nth-child(n+2):nth-child(-n+5),
main:has(#sf-pay) .container-vk:has(> .mt-6 table) td.vk-pix { padding-left: 8px; padding-right: 8px; text-align: center; white-space: nowrap; color: rgb(23 20 63); font-variant-numeric: tabular-nums; }
main:has(#sf-pay) .container-vk:has(> .mt-6 table) td:nth-child(n+2):nth-child(-n+5) .text-muted,
main:has(#sf-pay) .container-vk:has(> .mt-6 table) td.vk-pix .text-muted { font-size: 12px; }
main:has(#sf-pay) .container-vk:has(> .mt-6 table) td:nth-child(n+2):nth-child(-n+5) > span,
main:has(#sf-pay) .container-vk:has(> .mt-6 table) td.vk-pix > span { display: inline-block; text-align: right; }
main:has(#sf-pay) .container-vk:has(> .mt-6 table) td:nth-child(2) > span,
main:has(#sf-pay) .container-vk:has(> .mt-6 table) td:nth-child(3) > span { min-width: 76px; }
main:has(#sf-pay) .container-vk:has(> .mt-6 table) td:nth-child(4) > span { min-width: 99px; }
main:has(#sf-pay) .container-vk:has(> .mt-6 table) td:nth-child(5) > span { min-width: 104px; }
main:has(#sf-pay) .container-vk:has(> .mt-6 table) td.vk-pix > span { min-width: 90px; }

/* Stock: last column, a small rectangle in the colour of its text */
main:has(#sf-pay) .container-vk:has(> .mt-6 table) td:nth-child(6) { padding-left: 12px; padding-right: 8px; }
main:has(#sf-pay) .container-vk:has(> .mt-6 table) td:nth-child(6) > span { padding: 3px 8px; border-radius: 4px; white-space: nowrap; background: color-mix(in srgb, currentColor 11%, transparent); }
main:has(#sf-pay) .container-vk:has(> .mt-6 table) td:nth-child(6) > .text-mint-dark { color: rgb(15 128 115); }

/* ---------- Payment panel ---------- */
#vk-methods { margin-top: 24px; border: 1px solid rgb(236 235 243); border-radius: 8px; background: #fff; overflow: hidden; }
#vk-methods h2 { margin: 0; padding: 14px 20px; border-bottom: 1px solid rgb(236 235 243); background: rgb(248 247 250); font-size: 16px; line-height: 1.35; font-weight: 700; color: rgb(23 20 63); }
#vk-methods > p { margin: 0; padding: 14px 20px 12px; font-size: 13.5px; line-height: 1.55; color: rgb(78 78 78); }
#vk-methods > p b { font-weight: 600; color: rgb(23 20 63); white-space: nowrap; }
#vk-methods ul { margin: 0; padding: 0 20px 6px; list-style: none; }
#vk-methods li { display: grid; grid-template-columns: 68px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid rgb(236 235 243); }
#vk-methods .vk-logos { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
#vk-methods .vk-logos img { display: block; max-width: 68px; height: auto; }
#vk-methods > p.vk-where { margin: 0 20px; padding: 12px 0 16px; border-top: 1px solid rgb(236 235 243); font-size: 12.5px; line-height: 1.5; color: rgb(122 122 122); }
#vk-methods strong { display: block; font-size: 13.5px; line-height: 1.35; font-weight: 600; color: rgb(23 20 63); }
#vk-methods span.vk-note { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.4; color: rgb(122 122 122); }

/* Tablets: the list on two columns, under the table */
@media (min-width: 640px) and (max-width: 1199.98px) {
  #vk-methods ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
}

/* Computers: the panel beside the table. It stays in view while the table scrolls and can't leave this section */
@media (min-width: 1200px) {
  main:has(#sf-pay) .container-vk:has(> .mt-6 table) { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 24px; align-items: start; }
  main:has(#sf-pay) .container-vk:has(> .mt-6 table) > .mx-auto { grid-column: 1 / -1; }
  main:has(#sf-pay) .container-vk:has(> .mt-6 table) > .mt-6 { grid-column: 1; }
  #vk-methods { grid-column: 2; position: sticky; top: 80px; margin-top: 20px; }
}

/* No "Prix en direct" label */
main:has(#sf-pay) .container-vk:has(> .mt-6 table) .overflow-x-auto > div:first-child { display: none; }

/* ---------- Under the form: only the logos, smaller. Their sentence moves to the payment panel ---------- */
html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft > p { display: none; }
@media (min-width: 1024px) {
  html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft { margin-top: 24px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft::after { aspect-ratio: 2304 / 44; margin: 0; background-image: url(/_next/static/vk4/abe4e9739f/pay-line-small.png); }
}
@media (max-width: 1023.98px) {
  html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft::after { max-width: 340px; aspect-ratio: 720 / 172; margin: 0; background-image: url(/_next/static/vk4/abe4e9739f/pay-grid-small.png); }
}

/* ---------- Price section: compact heading ---------- */
main:has(#sf-pay) .container-vk:has(> .mt-6 table) { padding-top: 28px; padding-bottom: 40px; }
main:has(#sf-pay) .container-vk:has(> .mt-6 table) > .mx-auto { max-width: none; }
main:has(#sf-pay) .container-vk:has(> .mt-6 table) > .mx-auto .eyebrow { font-size: 13px; line-height: 18px; }
main:has(#sf-pay) .container-vk:has(> .mt-6 table) > .mx-auto h2 { margin-top: 2px; font-size: 24px; line-height: 30px; }
main:has(#sf-pay) .container-vk:has(> .mt-6 table) > .mx-auto p { margin-top: 2px; font-size: 14px; line-height: 20px; }
main:has(#sf-pay) .container-vk:has(> .mt-6 table) > .mt-6 { margin-top: 16px; }
@media (min-width: 768px) {
  main:has(#sf-pay) .container-vk:has(> .mt-6 table) > .mt-6 { margin-top: 20px; }
}

/* vk-card-1.css */
/* Order form, example 1: a navy card on a light page. No band behind the title, so the form is the only dark block. */

/* ---------- Top of the page: light, dark text ---------- */
html .container-vk:has(> .gap-10 #sf-pay)::before { display: none; }
html .container-vk:has(> .gap-10 #sf-pay) > nav,
html .container-vk:has(> .gap-10 #sf-pay) > nav a { color: #6f6e7f; }
html .container-vk:has(> .gap-10 #sf-pay) > nav > :last-child { color: rgb(23 20 63); }
html .container-vk:has(> .gap-10 #sf-pay) > h1 { color: rgb(23 20 63); }
html .container-vk:has(> .gap-10 #sf-pay) > p { color: rgb(78 78 78); }
html .container-vk:has(> .gap-10 #sf-pay) > p a { color: #5752c9; }
@media (min-width: 1024px) {
  html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden { margin-top: 20px; }
}

/* ---------- The card ---------- */
html .card-vk:has(> form #sf-pay) { border: 0; border-radius: 10px; background: #17143f; box-shadow: 0 24px 48px -20px rgba(23, 20, 63, .6); }
html .card-vk:has(> form #sf-pay) > h2 { color: #fff; }
html form:has(#sf-pay)::before, html form:has(#sf-pay)::after,
html form:has(#sf-pay) > div:has(> .space-y-3) h3,
html form:has(#sf-pay) .rounded-card.bg-canvas > .mb-3 > span { color: #fff; }
html form:has(#sf-pay)::after, html form:has(#sf-pay) > div:has(> .space-y-3),
html form:has(#sf-pay) .rounded-card.bg-canvas + .rounded-card.bg-canvas { border-top-color: #2f2b66; }

/* Words */
html form:has(#sf-pay) .label-vk { color: #e7e6f5; }
html form:has(#sf-pay) .text-ink,
html form:has(#sf-pay) > .border-t .text-base { color: #fff; }
html form:has(#sf-pay) .text-muted { color: #b9b7d6; }
html form:has(#sf-pay) .text-danger-text { color: #fca5a5; }
html form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-contact"]) > .flex-wrap:not(:has(> .flex-1))::after { color: #b9b7d6; }

/* Fields */
html form:has(#sf-pay) .input-vk { border-color: #3a366f; background: #211d4f; color: #fff; }
html form:has(#sf-pay) .input-vk::placeholder { color: #9d9ac4; }
html form:has(#sf-pay) button.input-vk > .text-muted { color: #9d9ac4; }
html form:has(#sf-pay) .input-vk:hover:not(:disabled) { border-color: #5752c9; }
html form:has(#sf-pay) .input-vk:focus, html form:has(#sf-pay) .input-vk[aria-expanded="true"] { border-color: #6c67de; box-shadow: 0 0 0 3px rgba(108, 103, 222, .35); }
html form:has(#sf-pay) .input-vk:disabled { border-color: #2b2760; background: #1c1947; color: #8e8bb8; }
html form:has(#sf-pay) .input-vk:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #211d4f inset; -webkit-text-fill-color: #fff; }

/* Help icon and bubble */
html form:has(#sf-pay) .label-vk .group > button { border-color: #6c69a0; color: #c9c7e6; }
html form:has(#sf-pay) .label-vk .group > button:hover { border-color: #b3b0ee; color: #fff; }
html form:has(#sf-pay) [role="tooltip"] { background: #fff; color: rgb(23 20 63); }

/* Lists that open */
html form:has(#sf-pay) .absolute:has(> [role="listbox"]) { border-color: #3a366f; background: #211d4f; }
html form:has(#sf-pay) [role="listbox"] [role="option"] > button { color: #e7e6f5; }
html form:has(#sf-pay) [role="listbox"] [role="option"] > button:hover,
html form:has(#sf-pay) [role="listbox"] [role="option"][aria-selected="true"] > button { background: #2f2a6b; color: #fff; }

/* Add a server, remove a server */
html form:has(#sf-pay) > div:has(> .space-y-3) > button { color: #b3b0ee; }
html form:has(#sf-pay) > div:has(> .space-y-3) > button:hover { color: #fff; }
html form:has(#sf-pay) .rounded-card.bg-canvas > .mb-3 > button { color: #fca5a5; }

/* Button: the brightest thing on the card */
html form:has(#sf-pay) > .justify-center > .btn-primary:disabled { opacity: 1; background: #5752c9; color: rgba(255, 255, 255, .8); }

/* Warning */
html form:has(#sf-pay) > .border-danger-border { background: rgba(248, 113, 113, .12); }
html form:has(#sf-pay) .rounded-card.bg-canvas [class*="bg-danger-bg"] { background: rgba(248, 113, 113, .12); }

/* vk-theme-2.css */
/* Theme 2, Lavender: a light band with dark text, so the form is the only dark block */
html .container-vk:has(> .gap-10 #sf-pay)::before { background: #e4e0fb; }
html .container-vk:has(> .gap-10 #sf-pay) > nav,
html .container-vk:has(> .gap-10 #sf-pay) > nav a { color: #5f5d78; }
html .container-vk:has(> .gap-10 #sf-pay) > nav > :last-child { color: rgb(23 20 63); }
html .container-vk:has(> .gap-10 #sf-pay) > h1 { color: rgb(23 20 63); }
html .container-vk:has(> .gap-10 #sf-pay) > p { color: rgb(62 60 84); }
html .container-vk:has(> .gap-10 #sf-pay) > p a { color: #5752c9; }
html section:has(> .container-vk > .gap-10 #sf-pay) { background: #fff; }
main:has(#sf-pay) section.bg-surface { background: #f6f4fd; }

/* vk-card-6.css */
/* Order form: the navy card (vk-card-1) on the lavender band and white page (vk-theme-2). */

html .container-vk:has(> .gap-10 #sf-pay)::before { display: block; }
@media (min-width: 1024px) {
  html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden { margin-top: 44px; }
}

/* "Retirer ce serveur": plain text on the navy, without its pale box */
html form:has(#sf-pay) .rounded-card.bg-canvas > .mb-3 > button { background: none; }

/* vk-foot.css */
/* Sell page: what the moving review bands share, and the left column once the reviews have left it. */

/* The band runs from left to right and stops under the mouse */
.vk-run { overflow: hidden; }
.vk-track { display: flex; width: max-content; animation: vk-run 200s linear infinite; }
.vk-foot:hover .vk-track { animation-play-state: paused; }
@keyframes vk-run { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .vk-track { animation: none; }
  .vk-run { overflow-x: auto; }
}

/* Left column: the rating, then the page's own four steps */
html .rail\:hidden > section > ol.vk-steps { display: flex; flex: 1 1 0; flex-direction: column; gap: 6px; min-height: 0; margin: 10px 0 0; padding: 0; list-style: none; overflow: hidden; }
.vk-steps li { display: grid; flex: 1 1 0; grid-template-columns: 26px minmax(0, 1fr); align-content: center; align-items: start; column-gap: 10px; min-height: 0; padding: 6px 12px; border-radius: 8px; background: #fff; }
.vk-steps b { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 6px; background: #6c67de; color: #fff; font-size: 13px; font-weight: 700; }
.vk-steps strong { display: block; color: rgb(23 20 63); font-size: 13.5px; line-height: 18px; font-weight: 600; }
.vk-steps span { display: -webkit-box; overflow: hidden; color: #6f6e7f; font-size: 12px; line-height: 16px; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

/* Phones and tablets: only the rating, so the form stays near the top */
@media (max-width: 1023.98px) {
  html .rail\:hidden > section > ol.vk-steps { display: none; }
  html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden > section { min-height: 0; }
}

/* vk-dock.css */
/* Moving reviews: a dock on the bottom edge of the screen, between the Discord button and a round button. */

.vk-foot { position: fixed; right: 80px; bottom: 0; left: 80px; z-index: 45; display: flex; align-items: center; height: 72px; border-radius: 14px 14px 0 0; background: #17143f; box-shadow: 0 -8px 24px rgba(23, 20, 63, .22); transition: transform .25s ease-out; }
html.vk-dock-on body { padding-bottom: 84px; }
html.vk-dock-off .vk-foot { box-shadow: none; transform: translateY(100%); }
html.vk-dock-off body { padding-bottom: 0; }

/* While the customer fills in the form the dock goes away: no movement beside the fields, and the sell button stays clear */
html:has(main form :focus) .vk-foot { box-shadow: none; transform: translateY(100%); }

.vk-foot .vk-run { flex: 1 1 0; min-width: 0; -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.vk-card { flex: none; width: 280px; height: 56px; margin-right: 10px; padding: 7px 12px; border: 1px solid #3a366f; border-radius: 8px; background: #211d4f; }
.vk-card > div { display: flex; align-items: baseline; gap: 6px; color: #b9b7d6; font-size: 11px; line-height: 18px; white-space: nowrap; }
.vk-card strong { color: #fff; font-size: 12px; font-weight: 600; }
.vk-card em { font-style: normal; font-weight: 600; }
.vk-card time { margin-left: auto; }
.vk-card p { margin: 1px 0 0; overflow: hidden; color: #f1f0fa; font-size: 13px; line-height: 19px; text-overflow: ellipsis; white-space: nowrap; }

/* The round button, the same size and height as the Discord button */
.vk-dock-btn { position: fixed; right: 16px; bottom: 16px; z-index: 46; display: grid; align-content: center; justify-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: #5752c9; color: #dcd9fa; box-shadow: 0 6px 16px rgba(23, 20, 63, .3); cursor: pointer; }
.vk-dock-btn b { color: #fff; font-size: 14px; line-height: 16px; font-weight: 700; }
.vk-dock-btn svg { width: 11px; height: 11px; }

/* Phones: no room between the two buttons, so the dock takes the full width and they sit above it */
@media (max-width: 639.98px) {
  .vk-foot { right: 0; left: 0; height: 68px; border-radius: 12px 12px 0 0; }
  html.vk-dock-on body { padding-bottom: 68px; }
  html.vk-dock-off body { padding-bottom: 0; }
  html.vk-dock-on a.fixed[href*="discord"], .vk-dock-btn { bottom: 80px; }
  html.vk-dock-off a.fixed[href*="discord"], html.vk-dock-off .vk-dock-btn,
  html:has(main form :focus) a.fixed[href*="discord"], html:has(main form :focus) .vk-dock-btn { bottom: 16px; }
  .vk-card { width: 230px; }
}

/* vk-wave.css */
/* The dock with a shape: a long shoulder rising from the bottom-left corner of the screen, a flat top, a rounded corner on the
   right, and a tab held against the right edge of the screen. Each example sets the shoulder in --shape. */

.vk-foot { --wing: clamp(240px, 26vw, 460px); --from: .5; right: 88px; left: 0; display: block; height: 76px; border-radius: 0; background: none; box-shadow: none; pointer-events: none; }
html.vk-dock-on body { padding-bottom: 88px; }
html.vk-dock-off .vk-foot, html:has(main form :focus) .vk-foot { transform: translateY(calc(100% + 28px)); }

/* The shape: its own layer, so the moving cards don't have to redraw the shadow */
.vk-bg { position: absolute; inset: 0; filter: drop-shadow(0 -5px 12px rgba(23, 20, 63, .26)); }
.vk-bg::before { content: ""; position: absolute; inset: 0; border-top-right-radius: 20px; background: #17143f; -webkit-mask: var(--shape) left bottom / var(--wing) 100% no-repeat, linear-gradient(#000 0 0) right bottom / calc(100% - var(--wing) + 1px) 100% no-repeat; mask: var(--shape) left bottom / var(--wing) 100% no-repeat, linear-gradient(#000 0 0) right bottom / calc(100% - var(--wing) + 1px) 100% no-repeat; }

/* The reviews come out of the shoulder */
.vk-foot .vk-run { position: absolute; top: 11px; right: 14px; left: calc(var(--wing) * var(--from)); pointer-events: auto; -webkit-mask-image: linear-gradient(to right, transparent, #000 80px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 80px, #000 calc(100% - 36px), transparent); }

/* The Discord button stays on top of the shoulder */
html.vk-dock-on a.fixed[href*="discord"] { z-index: 46; }

/* The tab, against the right edge of the screen */
.vk-dock-btn { right: 0; bottom: 14px; display: flex; align-items: center; gap: 4px; width: auto; height: 48px; padding: 0 12px 0 16px; border-radius: 24px 0 0 24px; }
.vk-dock-btn b { font-size: 15px; }
.vk-dock-btn svg { width: 13px; height: 13px; }

/* Phones: the dock takes the full width, with a shorter shoulder, and the two buttons sit above it */
@media (max-width: 639.98px) {
  .vk-foot { --wing: 130px; right: 0; height: 68px; }
  html.vk-dock-on body { padding-bottom: 68px; }
  .vk-bg::before { border-radius: 0; }
  .vk-foot .vk-run { top: 7px; right: 0; left: 40px; -webkit-mask-image: linear-gradient(to right, transparent, #000 70px); mask-image: linear-gradient(to right, transparent, #000 70px); }
  .vk-dock-btn { bottom: 80px; }
  html.vk-dock-off .vk-dock-btn, html:has(main form :focus) .vk-dock-btn { bottom: 16px; }
}

/* vk-wave-3.css */
/* Shaped dock, example 3: two layers. The same curve in purple behind the navy, showing along its top and right edge. */

.vk-foot { --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100C35 100 45 0 100 0V100Z'/%3E%3C/svg%3E"); }
.vk-bg { isolation: isolate; }
.vk-bg::after { content: ""; position: absolute; inset: -9px -7px 0 -56px; z-index: -1; border-top-right-radius: 26px; background: #5752c9; -webkit-mask: var(--shape) left bottom / var(--wing) 100% no-repeat, linear-gradient(#000 0 0) right bottom / calc(100% - var(--wing) + 1px) 100% no-repeat; mask: var(--shape) left bottom / var(--wing) 100% no-repeat, linear-gradient(#000 0 0) right bottom / calc(100% - var(--wing) + 1px) 100% no-repeat; }
@media (max-width: 639.98px) {
  .vk-bg::after { right: 0; border-radius: 0; }
}

/* vk-discord.css */
/* The Discord button with its small red badge and a soft ring on hover, and the card it opens. */

a.fixed[href*="discord"]::after { content: "1"; position: absolute; top: -3px; right: -3px; display: grid; width: 18px; height: 18px; place-items: center; border: 2px solid #fff; border-radius: 50%; background: #e5484d; color: #fff; font-size: 10px; line-height: 1; font-weight: 700; }
a.fixed[href*="discord"]:hover, a.fixed[href*="discord"]:focus-visible { box-shadow: 0 0 0 6px rgba(88, 101, 242, .25); }

.vk-dc { position: fixed; z-index: 47; width: min(400px, calc(100vw - 32px)); padding: 16px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; background: #17143f; color: #fff; box-shadow: 0 18px 40px rgba(23, 20, 63, .42); opacity: 0; visibility: hidden; transition: opacity .15s ease-out, visibility .15s; }
.vk-dc.vk-dc-open { opacity: 1; visibility: visible; }
.vk-dc::after { content: ""; position: absolute; bottom: -8px; left: 18px; width: 14px; height: 14px; border-right: 1px solid rgba(255, 255, 255, .14); border-bottom: 1px solid rgba(255, 255, 255, .14); background: #17143f; transform: rotate(45deg); }

.vk-dc-x { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; padding: 0; border: 0; background: none; color: #b9b7d6; font-size: 20px; line-height: 1; cursor: pointer; }
.vk-dc-x:hover { color: #fff; }

.vk-dc-head { display: flex; align-items: center; gap: 10px; padding-right: 24px; }
.vk-dc-head img { flex: none; width: 40px; height: 40px; border-radius: 10px; }
.vk-dc-head strong { display: block; font-size: 16px; line-height: 20px; font-weight: 700; }
.vk-dc-head span { display: block; color: #b9b7d6; font-size: 13px; line-height: 18px; }
.vk-dc-head i { font-style: normal; }

.vk-dc p { margin: 12px 0 0; color: #fff; font-size: 15px; line-height: 22px; font-weight: 600; }

.vk-dc-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 10px; color: #b9b7d6; font-size: 14px; line-height: 20px; }
.vk-dc-stats[hidden] { display: none; }
.vk-dc-stats b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.vk-dc-stats em { margin: 0 4px; font-style: normal; }
.vk-dc-dot { flex: none; width: 10px; height: 10px; margin-right: 4px; border-radius: 50%; background: #23a55a; box-shadow: 0 0 0 4px rgba(35, 165, 90, .22); }

.vk-dc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.vk-dc-faces { display: flex; flex: none; }
.vk-dc-faces img { width: 28px; height: 28px; border: 2px solid #17143f; border-radius: 50%; background: #2c2876; }
.vk-dc-faces img + img { margin-left: -8px; }
.vk-dc-join { flex: none; margin-left: auto; padding: 9px 16px; border-radius: 8px; background: #5865f2; color: #fff; font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; }
.vk-dc-join:hover { background: #4752c4; color: #fff; }

/* vk-methods-plain.css */
/* Sell page: the site's own payment list, compact, in the left column under the title. No line of logos: the small logos in the
   list are enough. The reviews stay in the dock at the bottom of the screen, and the price table has the full width. */

html .container-vk:has(> .gap-10 #sf-pay) > .rail\:hidden,
html .container-vk:has(> .gap-10 #sf-pay) > .bg-mint-soft { display: none; }

html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 { display: block; align-self: start; }
html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > h2.section-title { font-size: 16px; line-height: 21px; font-weight: 700; }
html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > h2 + p { margin-top: 4px; font-size: 13px; line-height: 18px; }
html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul { display: block; margin-top: 12px; }
html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul > li { align-items: center; gap: 12px; font-size: 13px; line-height: 18px; }
html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul > li + li { margin-top: 8px; }
html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul > li > span:first-child { gap: 3px; width: 60px; }
html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul > li > span:first-child > img { width: 100%; height: 26px; padding: 1px 3px; object-fit: contain; }
html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul > li > span:first-child > img.vk-pix-logo { padding: 6px 14px; }
html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul > li > span:first-child > img.vk-coin-logo { padding: 2px 5px; }
html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul > li > span:first-child > img.vk-binance-logo { padding: 0; background: #0c0e12; object-fit: cover; }
html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul > li > span:first-child > img.vk-btc-logo { padding: 2px; }
html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > p:last-child { margin-top: 12px; font-size: 12px; line-height: 17px; }

/* Computers: in the left column, under the title and clear of the band */
@media (min-width: 1024px) {
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 { grid-column: 1; grid-row: 4 / 7; margin-top: 40px; }
}

/* Narrow computers: a narrower left column, so slightly smaller text */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 { margin-top: 36px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > h2.section-title { font-size: 15px; line-height: 19px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > h2 + p { font-size: 12px; line-height: 16px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul > li { gap: 8px; font-size: 11.5px; line-height: 15px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul > li + li { margin-top: 6px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul > li > span:first-child { width: 46px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul > li > span:first-child > img { height: 20px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > p:last-child { font-size: 11px; line-height: 14px; }
}

/* Phones and tablets: under the form, so the form stays near the top */
@media (max-width: 1023.98px) {
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 { margin-top: 20px; }
}

/* ---------- Price section: the table alone, with the sentence under it ---------- */
@media (min-width: 1200px) {
  main:has(#sf-pay) .container-vk:has(> .mt-6 table) { display: block; }
}
main:has(#sf-pay) .container-vk:has(> .mt-6 table) > p.vk-where { max-width: 900px; margin: 14px auto 0; color: #6f6e7f; font-size: 12.5px; line-height: 18px; text-align: center; }

/* Until the short wording is in place these stay hidden, so the site's old text never flashes on load */
html:not(.vk-list-ready) .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 { display: none; }
html:not(.vk-list-ready) main:has(#sf-pay) .container-vk:has(> .mt-6 table) .overflow-x-auto { visibility: hidden; }

/* vk-calm.css */
/* A calmer sell page: no red badge on the Discord button, and the warning on one line, its full text one click away. */

a.fixed[href*="discord"]::after { display: none; }

html form:has(#sf-pay) > .border-danger-border { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
html form:has(#sf-pay) > .border-danger-border > p,
html form:has(#sf-pay) > .border-danger-border > ul { flex: 1 1 100%; }
html:not(.vk-warn-open) form:has(#sf-pay) > .border-danger-border > p,
html:not(.vk-warn-open) form:has(#sf-pay) > .border-danger-border > ul { display: none; }
.vk-warn-sum { color: #fca5a5; font-size: 12px; line-height: 18px; }
.vk-warn-more { margin-left: auto; padding: 0; border: 0; background: none; color: #fecaca; font-size: 12px; line-height: 18px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; cursor: pointer; }
.vk-warn-more:hover { color: #fff; }

/* vk-calm-more.css */
/* The calmest version, on the sell page only: the moving reviews stay away while the page is at its very top or while they
   would cover the sell button, and a server's price line stays invisible until that server is chosen. It keeps its place, so nothing jumps when it appears. The Total line
   always shows. */

html:has(#sf-pay):not(.vk-scrolled) .vk-foot { transform: translateY(calc(100% + 28px)); }
@media (max-width: 639.98px) {
  html:has(#sf-pay):not(.vk-scrolled) a.fixed[href*="discord"], html:has(#sf-pay):not(.vk-scrolled) .vk-dock-btn { bottom: 16px; }
}

html form:has(#sf-pay) .rounded-card.bg-canvas:has(button.input-vk > span.text-muted) > .mt-3 { visibility: hidden; }

/* vk-p-base.css */
/* Shared by the five page directions: one large title size, the same room around every section, and nothing that floats on a shadow. */
html:has(#sf-pay) body { background: #17143f; }

html main:has(#sf-pay) > .relative > :is(#tarifs, #etapes, section:nth-of-type(n+4)) .section-title { font-size: 38px; line-height: 44px; letter-spacing: -.02em; }
html main:has(#sf-pay) > .relative > :is(#tarifs, #etapes, section:nth-of-type(n+4)) .mx-auto > p.text-muted { margin-top: 8px; font-size: 15px; line-height: 22px; }
html main:has(#sf-pay) > .relative > :is(#tarifs, #etapes, section:nth-of-type(n+4)) .eyebrow { font-size: 13px; line-height: 18px; }
html main:has(#sf-pay) .container-vk:has(> .mt-6 table) { padding-top: 56px; padding-bottom: 56px; }
html main:has(#sf-pay) .container-vk:has(> .mt-6 table) > .mt-6 { margin-top: 28px; }
html main:has(#sf-pay) .container-vk:has(> .mt-6 table) .overflow-x-auto { box-shadow: none; }
html main:has(#sf-pay) > .relative > #etapes .card-vk > span.bg-brand { box-shadow: none; }

@media (max-width: 639.98px) {
  html main:has(#sf-pay) > .relative > :is(#tarifs, #etapes, section:nth-of-type(n+4)) .section-title { font-size: 26px; line-height: 32px; }
  html main:has(#sf-pay) .container-vk:has(> .mt-6 table) { padding-top: 40px; padding-bottom: 40px; }
}

/* vk-p5-dessin.css */
/* Direction 5, Dessin: our own drawings do the work the boxes used to do. One white page, no cards, centred blocks under a drawing made in the site's colours, so it can't look like a template. */
html main:has(#sf-pay) > .relative { background: #fff; }
html main:has(#sf-pay) > .relative > section { background: none; }
html .container-vk:has(> .gap-10 #sf-pay)::before { background: none; }
html main:has(#sf-pay) > .relative > section:has(#sf-pay) { position: relative; z-index: 1; overflow: visible; background: linear-gradient(#e4e0fb 120px, #fff 340px); }

/* Price table: everything centred under its heading */
html main:has(#sf-pay) .container-vk:has(> .mt-6 table) tr > td:first-child:not([colspan]) { justify-content: center; text-align: center; }
html main:has(#sf-pay) .container-vk:has(> .mt-6 table) td[colspan] > div { text-align: center; }
html main:has(#sf-pay) .container-vk:has(> .mt-6 table) td:not([colspan]) > span { min-width: 0; text-align: center; }
html main:has(#sf-pay) .container-vk:has(> .mt-6 table) td:nth-child(6) { padding-left: 8px; padding-right: 8px; text-align: center; }

/* Reading: no boxes, centred, darker words */
html main:has(#sf-pay) > .relative > :is(#etapes, section:nth-of-type(n+4)) .eyebrow { color: #5752c9; }
html main:has(#sf-pay) > .relative > #tarifs .eyebrow { color: #5752c9; }
html main:has(#sf-pay) > .relative > :is(#etapes, section:nth-of-type(4), section:nth-of-type(6)) .card-vk { padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; text-align: center; }
html main:has(#sf-pay) > .relative > :is(#etapes, section:nth-of-type(4), section:nth-of-type(6)) .card-vk .text-muted { color: #5f5d78; }
html main:has(#sf-pay) > .relative > :is(#etapes, section:nth-of-type(n+4)) > .grid,
html main:has(#sf-pay) > .relative > section:nth-of-type(n+4) > .container-vk > .grid { column-gap: 40px; }

/* Steps: the drawing replaces the number's square, the number goes before the title */
html main:has(#sf-pay) > .relative > #etapes > .grid { counter-reset: step; }
html main:has(#sf-pay) > .relative > #etapes .card-vk { counter-increment: step; }
html main:has(#sf-pay) > .relative > #etapes .card-vk > span.bg-brand { display: block; width: 112px; height: 112px; margin: 0 auto; border-radius: 0; background: none center / contain no-repeat; color: transparent; font-size: 0; }
html main:has(#sf-pay) > .relative > #etapes .card-vk:nth-child(1) > span.bg-brand { background-image: url(/_next/static/vk4/abe4e9739f/ill-devis.svg); }
html main:has(#sf-pay) > .relative > #etapes .card-vk:nth-child(2) > span.bg-brand { background-image: url(/_next/static/vk4/abe4e9739f/ill-agent.svg); }
html main:has(#sf-pay) > .relative > #etapes .card-vk:nth-child(3) > span.bg-brand { background-image: url(/_next/static/vk4/abe4e9739f/ill-sac.svg); }
html main:has(#sf-pay) > .relative > #etapes .card-vk:nth-child(4) > span.bg-brand { background-image: url(/_next/static/vk4/abe4e9739f/ill-portefeuille.svg); }
html main:has(#sf-pay) > .relative > #etapes .card-vk > h3::before { content: counter(step) ". "; color: #5752c9; }

/* Reasons: the same */
html main:has(#sf-pay) > .relative > section:nth-of-type(6) .card-vk > .bg-mint-soft { display: block; width: 112px; height: 112px; margin: 0 auto; border-radius: 0; background: none center / contain no-repeat; }
html main:has(#sf-pay) > .relative > section:nth-of-type(6) .card-vk > .bg-mint-soft svg { display: none; }
html main:has(#sf-pay) > .relative > section:nth-of-type(6) .card-vk:nth-child(1) > .bg-mint-soft { background-image: url(/_next/static/vk4/abe4e9739f/ill-instant.svg); }
html main:has(#sf-pay) > .relative > section:nth-of-type(6) .card-vk:nth-child(2) > .bg-mint-soft { background-image: url(/_next/static/vk4/abe4e9739f/ill-prix.svg); }
html main:has(#sf-pay) > .relative > section:nth-of-type(6) .card-vk:nth-child(3) > .bg-mint-soft { background-image: url(/_next/static/vk4/abe4e9739f/ill-monde.svg); }
html main:has(#sf-pay) > .relative > section:nth-of-type(6) .card-vk:nth-child(4) > .bg-mint-soft { background-image: url(/_next/static/vk4/abe4e9739f/ill-casque.svg); }
html main:has(#sf-pay) > .relative > section:nth-of-type(6) .card-vk > h3 { margin-top: 12px; font-size: 18px; line-height: 27px; font-weight: 700; }

/* Games: the real pictures, nothing around them */
html main:has(#sf-pay) > .relative > section:nth-of-type(4) .card-vk > .relative { border-radius: 8px; overflow: hidden; }
html main:has(#sf-pay) > .relative > section:nth-of-type(4) .card-vk > .p-6 { padding: 14px 0 0; }
html main:has(#sf-pay) > .relative > section:nth-of-type(4) .card-vk .pill { color: #5752c9; }

/* Safety */
html main:has(#sf-pay) > .relative > section:nth-of-type(5) > .container-vk > .flex:first-child { justify-content: center; text-align: center; }
html main:has(#sf-pay) > .relative > section:nth-of-type(5) .bg-brand-soft { display: none; }
html main:has(#sf-pay) > .relative > section:nth-of-type(5) .rounded-card.bg-canvas { padding: 0; border: 0; border-radius: 0; background: none; }

/* Questions: rows split by a line */
html main:has(#sf-pay) > .relative > section:nth-of-type(7) .space-y-4 > * + * { margin-top: 0; }
html main:has(#sf-pay) > .relative > section:nth-of-type(7) details.card-vk { padding: 18px 0; border: 0; border-top: 1px solid #dcdae8; border-radius: 0; background: none; }
html main:has(#sf-pay) > .relative > section:nth-of-type(7) details.card-vk:last-child { border-bottom: 1px solid #dcdae8; }

/* Last call: the sack, on the navy */
html main:has(#sf-pay) > section.bg-ink-grad > .container-vk::before { content: ""; display: block; width: 104px; height: 104px; margin: 0 auto 16px; background: url(/_next/static/vk4/abe4e9739f/ill-sac-nuit.svg) center / contain no-repeat; }

@media (max-width: 639.98px) {
  html main:has(#sf-pay) > .relative > #etapes .card-vk > span.bg-brand,
  html main:has(#sf-pay) > .relative > section:nth-of-type(6) .card-vk > .bg-mint-soft { width: 92px; height: 92px; }
}

/* vk-ex-page.css */
/* Exchange page, the same look as the sell page (Dessin): the short lavender melt, a navy form, one white page, no cards, and the same drawings. Every word stays. */
html:has(#ex-depart) body { background: #17143f; }
html main:has(#ex-depart) { background: #fff; }

/* The reviews dock waits for the first scroll, as on the sell page */
html:has(#ex-depart):not(.vk-scrolled) .vk-foot { transform: translateY(calc(100% + 28px)); }
@media (max-width: 639.98px) {
  html:has(#ex-depart):not(.vk-scrolled) a.fixed[href*="discord"], html:has(#ex-depart):not(.vk-scrolled) .vk-dock-btn { bottom: 16px; }
}

/* ---------- Top ---------- */
html main:has(#ex-depart) > section:nth-of-type(1) { position: relative; z-index: 1; overflow: visible; background: linear-gradient(#e4e0fb 120px, #fff 340px); color: rgb(62 60 84); }
html main:has(#ex-depart) > section:nth-of-type(1) > .pointer-events-none { display: none; }
html main:has(#ex-depart) > section:nth-of-type(1) nav,
html main:has(#ex-depart) > section:nth-of-type(1) nav a { color: #5f5d78; }
html main:has(#ex-depart) > section:nth-of-type(1) nav > :last-child { color: rgb(23 20 63); }
html main:has(#ex-depart) > section:nth-of-type(1) nav > span:not(:last-child) { color: #a3a1b8; }
html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) > .eyebrow { display: block; color: #5752c9; font-size: 13px; line-height: 18px; }
html main:has(#ex-depart) > section:nth-of-type(1) h1 { margin-top: 4px; color: rgb(23 20 63); font-size: 30px; line-height: 36px; text-wrap: balance; }
html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) > p { margin-top: 12px; max-width: none; color: rgb(62 60 84); font-size: 14px; line-height: 21px; }
html main:has(#ex-depart) > section:nth-of-type(1) ul:not(.vk-ex-list) { row-gap: 4px; column-gap: 10px; margin-top: 12px; color: rgb(62 60 84); font-size: 12.5px; line-height: 18px; }
html main:has(#ex-depart) > section:nth-of-type(1) ul:not(.vk-ex-list) li { gap: 4px; white-space: nowrap; }
html main:has(#ex-depart) > section:nth-of-type(1) ul:not(.vk-ex-list) svg { width: 15px; height: 15px; color: #0f8073; }

/* ---------- The form: navy ---------- */
html main:has(#ex-depart) #simulateur > .rounded-card { border-radius: 10px; background: #17143f; color: #fff; box-shadow: 0 24px 48px -20px rgba(23, 20, 63, .6); padding: 20px; }
html main:has(#ex-depart) #simulateur h2 { color: #fff; font-size: 20px; line-height: 28px; font-weight: 700; }
html main:has(#ex-depart) #simulateur .pill { color: #f2b84b; font-size: 12px; font-weight: 600; }
html main:has(#ex-depart) #simulateur > .rounded-card > p { margin-top: 2px; color: #b9b7d6; font-size: 13px; line-height: 18px; }
html main:has(#ex-depart) #simulateur .label-vk { margin-bottom: 4px; color: #e7e6f5; font-size: 13px; line-height: 18px; font-weight: 500; }
html main:has(#ex-depart) #simulateur .input-vk { height: 44px; padding: 0 12px; border: 1px solid #3a366f; border-radius: 8px; background: #211d4f; color: #fff; font-size: 14px; }
html main:has(#ex-depart) #simulateur .input-vk::placeholder { color: #9d9ac4; opacity: 1; }
html main:has(#ex-depart) #simulateur button.input-vk > span { color: #fff; }
html main:has(#ex-depart) #simulateur button.input-vk > .text-muted, html main:has(#ex-depart) #simulateur button.input-vk > svg { color: #9d9ac4; }
html main:has(#ex-depart) #simulateur input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
html main:has(#ex-depart) #simulateur input[type="number"]::-webkit-inner-spin-button, html main:has(#ex-depart) #simulateur input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
html main:has(#ex-depart) #simulateur .input-vk:hover:not(:disabled) { border-color: #5752c9; }
html main:has(#ex-depart) #simulateur .input-vk:focus, html main:has(#ex-depart) #simulateur .input-vk[aria-expanded="true"] { border-color: #6c67de; box-shadow: 0 0 0 3px rgba(108, 103, 222, .35); outline: 0; }
html main:has(#ex-depart) #simulateur .input-vk:disabled { border-color: #2b2760; background: #1c1947; color: #8e8bb8; opacity: 1; }
html main:has(#ex-depart) #simulateur .input-vk:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #211d4f inset; -webkit-text-fill-color: #fff; }
html main:has(#ex-depart) #simulateur .absolute:has(> [role="listbox"]) { border-color: #3a366f; background: #211d4f; }
html main:has(#ex-depart) #simulateur [role="listbox"] [role="option"] > button { color: #e7e6f5; }
html main:has(#ex-depart) #simulateur [role="listbox"] [role="option"] > button:hover,
html main:has(#ex-depart) #simulateur [role="listbox"] [role="option"][aria-selected="true"] > button { background: #2f2a6b; color: #fff; }

/* Minimum quantity: invisible until a server is chosen, it keeps its place so nothing jumps */
html main:has(#ex-depart) #simulateur form div:has(> #ex-qte-payer) > p { display: flex; justify-content: flex-end; min-height: 0; height: 18px; margin-top: 2px; font-size: 11.5px; line-height: 18px; white-space: nowrap; text-align: right; }
html main:has(#ex-depart) #simulateur form div:has(> #ex-qte-payer) > p.text-muted { color: #b9b7d6; }
html main:has(#ex-depart) #simulateur form div:has(> #ex-qte-payer) > p.text-red-600 { color: #fca5a5; }
html main:has(#ex-depart) #simulateur form:has(#ex-depart > span.text-muted) div:has(> #ex-qte-payer) > p { visibility: hidden; }

/* Rate and result */
html main:has(#ex-depart) #simulateur form > .bg-mint-soft { padding: 0; border-radius: 0; background: none; align-self: center; }
html main:has(#ex-depart) #simulateur form > .bg-mint-soft .text-muted { color: #b9b7d6; font-size: 13px; line-height: 18px; }
html main:has(#ex-depart) #simulateur form > .bg-mint-soft .text-mint-dark { color: #f2b84b; font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; }
html main:has(#ex-depart) #simulateur form > .bg-mint-soft .text-ink { color: #fff; font-size: 13px; line-height: 18px; }
html main:has(#ex-depart) #simulateur form > .bg-mint-soft .text-2xl { color: #fff; font-size: 18px; line-height: 24px; font-variant-numeric: tabular-nums; }
html main:has(#ex-depart) #simulateur form > .bg-mint-soft > .mt-2 { margin-top: 2px; padding-top: 0; border-top: 0; }

/* The button */
html main:has(#ex-depart) #simulateur form > .btn-primary { min-height: 48px; background: #5752c9; color: #fff; font-size: 16px; align-self: center; }
html main:has(#ex-depart) #simulateur form > .btn-primary:hover:not(:disabled) { background: #6c67de; }
html main:has(#ex-depart) #simulateur form > .btn-primary:disabled { opacity: 1; color: rgba(255, 255, 255, .8); cursor: not-allowed; }

/* ---------- Reading: the same as the sell page ---------- */
html main:has(#ex-depart) > section.bg-surface { background: none; }
html main:has(#ex-depart) > section:nth-of-type(n+2):nth-of-type(-n+5) .section-title { font-size: 38px; line-height: 44px; letter-spacing: -.02em; }
html main:has(#ex-depart) > section:nth-of-type(n+2):nth-of-type(-n+5) .eyebrow { color: #5752c9; font-size: 13px; line-height: 18px; }
html main:has(#ex-depart) > section:nth-of-type(n+2):nth-of-type(-n+3) .mx-auto > p { margin-top: 8px; color: #5f5d78; font-size: 15px; line-height: 22px; }
html main:has(#ex-depart) > section:nth-of-type(n+2):nth-of-type(-n+3) h2 { margin-top: 2px; }

/* Steps: the drawing replaces the number's square, the number goes before the title */
html main:has(#ex-depart) > section:nth-of-type(2) > .grid { column-gap: 40px; counter-reset: step; }
html main:has(#ex-depart) > section:nth-of-type(2) .card-vk { padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; text-align: center; counter-increment: step; }
html main:has(#ex-depart) > section:nth-of-type(2) .card-vk > span.bg-brand { display: block; width: 112px; height: 112px; margin: 0 auto; border-radius: 0; background: none center / contain no-repeat; box-shadow: none; color: transparent; font-size: 0; }
html main:has(#ex-depart) > section:nth-of-type(2) .card-vk:nth-child(1) > span.bg-brand { background-image: url(/_next/static/vk4/abe4e9739f/ill-devis.svg); }
html main:has(#ex-depart) > section:nth-of-type(2) .card-vk:nth-child(2) > span.bg-brand { background-image: url(/_next/static/vk4/abe4e9739f/ill-sac.svg); }
html main:has(#ex-depart) > section:nth-of-type(2) .card-vk:nth-child(3) > span.bg-brand { background-image: url(/_next/static/vk4/abe4e9739f/ill-pieces.svg); }
html main:has(#ex-depart) > section:nth-of-type(2) .card-vk > h3 { margin-top: 12px; }
html main:has(#ex-depart) > section:nth-of-type(2) .card-vk > h3::before { content: counter(step) ". "; color: #5752c9; }
html main:has(#ex-depart) > section:nth-of-type(2) .card-vk > p { color: #5f5d78; font-size: 14px; line-height: 21px; }

/* Reasons: the same */
html main:has(#ex-depart) > section:nth-of-type(3) .grid { column-gap: 40px; }
html main:has(#ex-depart) > section:nth-of-type(3) .card-vk { padding: 0; border: 0; border-radius: 0; background: none; text-align: center; }
html main:has(#ex-depart) > section:nth-of-type(3) .card-vk > span { display: block; width: 112px; height: 112px; margin: 0 auto; border-radius: 0; background: none center / contain no-repeat; }
html main:has(#ex-depart) > section:nth-of-type(3) .card-vk > span svg { display: none; }
html main:has(#ex-depart) > section:nth-of-type(3) .card-vk:nth-child(1) > span { background-image: url(/_next/static/vk4/abe4e9739f/ill-instant.svg); }
html main:has(#ex-depart) > section:nth-of-type(3) .card-vk:nth-child(2) > span { background-image: url(/_next/static/vk4/abe4e9739f/ill-bouclier.svg); }
html main:has(#ex-depart) > section:nth-of-type(3) .card-vk:nth-child(3) > span { background-image: url(/_next/static/vk4/abe4e9739f/ill-prix.svg); }
html main:has(#ex-depart) > section:nth-of-type(3) .card-vk:nth-child(4) > span { background-image: url(/_next/static/vk4/abe4e9739f/ill-casque.svg); }
html main:has(#ex-depart) > section:nth-of-type(3) .card-vk > h3 { margin-top: 12px; }
html main:has(#ex-depart) > section:nth-of-type(3) .card-vk > p { color: #5f5d78; font-size: 14px; line-height: 21px; }

/* The long text: no grey boxes, one width, a thin line between its parts */
html main:has(#ex-depart) > section:nth-of-type(4) > .eyebrow { display: block; text-align: center; }
html main:has(#ex-depart) > section:nth-of-type(4) > h2 { margin-top: 2px; text-align: center; }
html main:has(#ex-depart) > section:nth-of-type(4) > .grid { max-width: none; margin-top: 16px; }
html main:has(#ex-depart) > section:nth-of-type(4) > .grid > p { color: rgb(62 60 84); font-size: 14px; line-height: 21px; }
html main:has(#ex-depart) > section:nth-of-type(4) > .mt-8:not(.bg-danger-bg) { margin-top: 32px; padding: 32px 0 0; border: 0; border-top: 1px solid #ecebf3; border-radius: 0; background: none; }
html main:has(#ex-depart) > section:nth-of-type(4) .bg-brand-soft { display: none; }
html main:has(#ex-depart) > section:nth-of-type(4) > .mt-8 h3:not(.text-danger-text) { font-size: 20px; line-height: 28px; font-weight: 700; }
html main:has(#ex-depart) > section:nth-of-type(4) > .mt-8 p.text-body { color: rgb(62 60 84); }
html main:has(#ex-depart) > section:nth-of-type(4) > .bg-danger-bg { margin-top: 32px; }

/* The games in the text: the real pictures, nothing around them */
html main:has(#ex-depart) > section:nth-of-type(4) .grid:has(> .card-vk) { column-gap: 40px; margin-top: 20px; }
html main:has(#ex-depart) > section:nth-of-type(4) .card-vk { padding: 0; border: 0; border-radius: 0; background: none; text-align: center; }
html main:has(#ex-depart) > section:nth-of-type(4) .card-vk > .flex { display: block; }
html main:has(#ex-depart) > section:nth-of-type(4) .card-vk img { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 8px; }
html main:has(#ex-depart) > section:nth-of-type(4) .card-vk h4 { margin-top: 14px; font-size: 18px; line-height: 27px; font-weight: 700; }
html main:has(#ex-depart) > section:nth-of-type(4) .card-vk p { margin-top: 4px; color: #5f5d78; font-size: 14px; line-height: 21px; }

/* Questions: one column, rows split by a line */
html main:has(#ex-depart) > section:nth-of-type(5) .grid { display: block; max-width: 768px; margin-left: auto; margin-right: auto; }
html main:has(#ex-depart) > section:nth-of-type(5) .divide-y { border: 0; border-radius: 0; background: none; overflow: visible; }
html main:has(#ex-depart) > section:nth-of-type(5) .divide-y > details { padding: 0; border: 0; border-top: 1px solid #dcdae8; }
html main:has(#ex-depart) > section:nth-of-type(5) .divide-y:last-child > details:last-child { border-bottom: 1px solid #dcdae8; }
html main:has(#ex-depart) > section:nth-of-type(5) summary { padding-top: 18px; padding-bottom: 18px; font-size: 16px; line-height: 24px; }
html main:has(#ex-depart) > section:nth-of-type(5) details > p { color: #5f5d78; font-size: 14px; line-height: 21px; }

/* Last call: the sack, on the navy, and a title as large as the sell page's */
html main:has(#ex-depart) > section:nth-of-type(6) .mx-auto::before { content: ""; display: block; width: 104px; height: 104px; margin: 0 auto 16px; background: url(/_next/static/vk4/abe4e9739f/ill-sac-nuit.svg) center / contain no-repeat; }
html main:has(#ex-depart) > section:nth-of-type(6) h2 { font-size: 36px; line-height: 40px; font-weight: 700; }
html main:has(#ex-depart) > section:nth-of-type(6) p { color: rgba(255, 255, 255, .8); font-size: 16px; line-height: 24px; }

@media (max-width: 639.98px) {
  html main:has(#ex-depart) > section:nth-of-type(n+2):nth-of-type(-n+5) .section-title { font-size: 26px; line-height: 32px; }
  html main:has(#ex-depart) > section:nth-of-type(2) .card-vk > span.bg-brand,
  html main:has(#ex-depart) > section:nth-of-type(3) .card-vk > span { width: 92px; height: 92px; }
  html main:has(#ex-depart) > section:nth-of-type(6) h2 { font-size: 28px; line-height: 34px; }
}

/* vk-ex-rows.css */
/* Exchange form, laid out like the sell form: the title on the left, a wide form on the right. Your code first, then what you give and what you receive on two matching rows. The field order is only visual: the form's fields and sending are untouched. */
@media (min-width: 1024px) {
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk { display: grid; grid-template-columns: 400px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 40px; padding-top: 24px; padding-bottom: 32px; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > nav { grid-column: 1; grid-row: 1; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid { display: contents; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) { grid-column: 1; grid-row: 2; margin-top: 16px; }
  html main:has(#ex-depart) #simulateur { grid-column: 2; grid-row: 1 / span 4; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); column-gap: 24px; }
}
@media (max-width: 1023.98px) {
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk { padding-top: 20px; padding-bottom: 24px; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid { margin-top: 12px; gap: 16px; }
}

/* One grid of six columns */
html main:has(#ex-depart) #simulateur form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 12px; margin-top: 12px; }
html main:has(#ex-depart) #simulateur form > * { min-width: 0; margin-top: 0; order: 95; }
html main:has(#ex-depart) #simulateur form > .grid { display: contents; }

/* Your code */
html main:has(#ex-depart) #simulateur form > div:has(> #ex-code) { order: 10; }

/* What you give */
html main:has(#ex-depart) #simulateur form > .grid:has(#ex-depart)::before,
html main:has(#ex-depart) #simulateur form > .grid:has(#ex-arrivee)::before { content: "Vous donnez"; display: block; grid-column: 1 / -1; order: 20; padding-top: 8px; border-top: 1px solid #2f2b66; color: #fff; font-size: 14px; line-height: 21px; font-weight: 600; }
html main:has(#ex-depart) #simulateur form > .grid > div:has(#ex-depart) { order: 21; min-width: 0; }
html main:has(#ex-depart) #simulateur form > div:has(> #ex-donneur) { order: 22; }
html main:has(#ex-depart) #simulateur form > .grid > div:has(#ex-qte-payer) { order: 23; min-width: 0; }

/* What you receive */
html main:has(#ex-depart) #simulateur form > .grid:has(#ex-arrivee)::before { content: "Vous recevez"; order: 30; }
html main:has(#ex-depart) #simulateur form > .grid > div:has(#ex-arrivee) { order: 31; min-width: 0; }
html main:has(#ex-depart) #simulateur form > div:has(> #ex-recepteur) { order: 32; }
html main:has(#ex-depart) #simulateur form > .grid > div:has(#ex-qte-recevoir) { order: 33; min-width: 0; }

/* Words, in the language the site is showing */
html[lang^="en"]:not([data-vk-lang]) main:has(#ex-depart) #simulateur form > .grid:has(#ex-depart)::before, html[data-vk-lang="en"] main:has(#ex-depart) #simulateur form > .grid:has(#ex-depart)::before { content: "You give"; }
html[lang^="en"]:not([data-vk-lang]) main:has(#ex-depart) #simulateur form > .grid:has(#ex-arrivee)::before, html[data-vk-lang="en"] main:has(#ex-depart) #simulateur form > .grid:has(#ex-arrivee)::before { content: "You receive"; }
html[lang="es"]:not([data-vk-lang]) main:has(#ex-depart) #simulateur form > .grid:has(#ex-depart)::before, html[data-vk-lang="es"] main:has(#ex-depart) #simulateur form > .grid:has(#ex-depart)::before { content: "Entregas"; }
html[lang="es"]:not([data-vk-lang]) main:has(#ex-depart) #simulateur form > .grid:has(#ex-arrivee)::before, html[data-vk-lang="es"] main:has(#ex-depart) #simulateur form > .grid:has(#ex-arrivee)::before { content: "Recibes"; }
html[lang="pt"]:not([data-vk-lang]) main:has(#ex-depart) #simulateur form > .grid:has(#ex-depart)::before, html[data-vk-lang="pt"] main:has(#ex-depart) #simulateur form > .grid:has(#ex-depart)::before { content: "Entrega"; }
html[lang="pt"]:not([data-vk-lang]) main:has(#ex-depart) #simulateur form > .grid:has(#ex-arrivee)::before, html[data-vk-lang="pt"] main:has(#ex-depart) #simulateur form > .grid:has(#ex-arrivee)::before { content: "Recebe"; }

/* Result and button */
html main:has(#ex-depart) #simulateur form > .bg-mint-soft { order: 100; }
html main:has(#ex-depart) #simulateur form > .btn-primary { order: 110; width: 100%; }

@media (min-width: 640px) {
  html main:has(#ex-depart) #simulateur form { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  html main:has(#ex-depart) #simulateur form > * { grid-column: 1 / -1; }
  html main:has(#ex-depart) #simulateur form > .grid > div { grid-column: span 2; }
  html main:has(#ex-depart) #simulateur form > div:has(> #ex-donneur),
  html main:has(#ex-depart) #simulateur form > div:has(> #ex-recepteur) { grid-column: span 2; }
  html main:has(#ex-depart) #simulateur form > .bg-mint-soft { grid-column: 1 / 4; }
  html main:has(#ex-depart) #simulateur form > .btn-primary { grid-column: 4 / -1; }
}

/* vk-ex-games.css */
/* The games list on the exchange page: the same sizes as the payment list on the sell page */
.vk-ex-games { margin-top: 20px; }
.vk-ex-title { margin: 0; color: rgb(23 20 63); font-size: 16px; line-height: 21px; font-weight: 700; letter-spacing: -.01em; }
.vk-ex-text { margin: 4px 0 0; color: rgb(23 20 63); font-size: 13px; line-height: 18px; font-weight: 600; }
.vk-ex-list { display: block; margin: 12px 0 0; padding: 0; list-style: none; }
.vk-ex-list li { display: flex; align-items: center; gap: 12px; color: rgb(78 78 78); font-size: 13px; line-height: 18px; }
.vk-ex-list li + li { margin-top: 8px; }
.vk-ex-list img { flex: none; width: 60px; height: 34px; border-radius: 6px; object-fit: cover; }
.vk-ex-list strong { color: rgb(23 20 63); font-weight: 600; }
@media (min-width: 1024px) {
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .vk-ex-games { grid-column: 1; grid-row: 3; align-self: start; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .vk-ex-list li { gap: 8px; font-size: 11.5px; line-height: 15px; }
  .vk-ex-list img { width: 46px; height: 26px; }
}

/* vk-or.css */
/* Palette 5, Or: gold for the money action, purple for the rest, navy unchanged. */
html main .btn-primary { background: #f2b84b; color: #17143f; }
html main .btn-primary:hover:not(:disabled) { background: #e5a937; }
html main .btn-primary:disabled { opacity: 1; background: #e0aa45; color: rgba(23, 20, 63, .8); }

html form:has(#sf-pay) > .justify-center > .btn-primary { background: #f2b84b; color: #17143f; }
html form:has(#sf-pay) > .justify-center > .btn-primary:hover:not(:disabled) { background: #e5a937; }
html form:has(#sf-pay) > .justify-center > .btn-primary:disabled { opacity: 1; background: #e0aa45; color: rgba(23, 20, 63, .8); }

html main:has(#ex-depart) #simulateur form > .btn-primary { background: #f2b84b; color: #17143f; }
html main:has(#ex-depart) #simulateur form > .btn-primary:hover:not(:disabled) { background: #e5a937; }
html main:has(#ex-depart) #simulateur form > .btn-primary:disabled { opacity: 1; background: #e0aa45; color: rgba(23, 20, 63, .8); }

/* The palette's pale page colour at the top */
html main:has(#sf-pay) > .relative > section:has(#sf-pay) { background: linear-gradient(#f6f4fd 120px, #fff 340px); }
html main:has(#ex-depart) > section:nth-of-type(1) { background: linear-gradient(#f6f4fd 120px, #fff 340px); }

/* Green that means "in stock" or "done" stays green */
.text-success { color: rgb(34 184 166); }
.bg-success-bg { background-color: rgb(230 251 246); }
.border-success-border { border-color: rgb(184 237 225); }
html main table td > .text-mint-dark > .bg-mint-dark { background-color: rgb(34 184 166); }

/* vk-blocks.css */
/* Blocks: one page colour from top to bottom, everything else sits in white blocks of the same width, with small titles on the left and small gaps. Same words, only their place and size change. */
html main:has(#sf-pay) > .relative { background: #efecfb; }
html main:has(#sf-pay) > .relative > section:has(#sf-pay) { background: none; }
html main:has(#sf-pay) > .relative > section { background: none; }

/* The closed phone menu waits just off the screen: its shadow must not show on the page */
html .fixed.inset-0.z-\[60\].pointer-events-none * { box-shadow: none; }

/* A lone "?" never sits on its own line */
html main details summary, html main > section:last-of-type h2 { text-wrap: balance; }

/* Sections: small gaps */
html main:has(#sf-pay) .container-vk:has(> .mt-6 table),
html main:has(#sf-pay) > .relative > #etapes,
html main:has(#sf-pay) > .relative > section:nth-of-type(n+4):nth-of-type(-n+6) > .container-vk,
html main:has(#sf-pay) > .relative > section:nth-of-type(7) { padding-top: 32px; padding-bottom: 0; }

/* Titles: small, on the left */
html main:has(#sf-pay) > .relative > :is(#tarifs, #etapes, section:nth-of-type(n+4)) .mx-auto.max-w-2xl { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; max-width: none; margin: 0; text-align: left; }
html main:has(#sf-pay) > .relative > :is(#tarifs, #etapes, section:nth-of-type(n+4)) .mx-auto > h2 { order: 1; margin: 0; }
html main:has(#sf-pay) > .relative > :is(#tarifs, #etapes, section:nth-of-type(n+4)) .section-title { font-size: 22px; line-height: 28px; text-align: left; }
html main:has(#sf-pay) > .relative > :is(#tarifs, #etapes, section:nth-of-type(n+4)) .eyebrow { order: 2; color: #5752c9; font-size: 11px; line-height: 16px; }
html main:has(#sf-pay) > .relative > :is(#tarifs, #etapes, section:nth-of-type(n+4)) .mx-auto > p.text-muted { order: 3; flex: 1 1 100%; margin: 2px 0 0; color: #5f5d78; font-size: 14px; line-height: 20px; }

/* Price table: the same table, as a block */
html main:has(#sf-pay) .container-vk:has(> .mt-6 table) > .mt-6 { margin-top: 12px; }
html main:has(#sf-pay) .container-vk:has(> .mt-6 table) .rounded-card { border-color: #e1dcf6; box-shadow: none; }
html main:has(#sf-pay) .container-vk:has(> .mt-6 table) > p.vk-where { max-width: none; margin: 10px 0 0; color: #5f5d78; font-size: 13px; line-height: 19px; text-align: left; }

/* Steps: one block, four columns */
html main:has(#sf-pay) > .relative > #etapes > .grid { gap: 20px 32px; margin-top: 12px; padding: 24px; border: 1px solid #e1dcf6; border-radius: 8px; background: #fff; }
html main:has(#sf-pay) > .relative > :is(#etapes, section:nth-of-type(4), section:nth-of-type(6)) .card-vk { text-align: left; }
html main:has(#sf-pay) > .relative > #etapes .card-vk > span.bg-brand { width: 56px; height: 56px; margin: 0 0 12px; }
html main:has(#sf-pay) > .relative > #etapes .card-vk > h3 { margin: 0; font-size: 16px; line-height: 22px; }
html main:has(#sf-pay) > .relative > #etapes .card-vk > p { margin-top: 4px; font-size: 14px; line-height: 20px; }

/* Games and reasons: one wide block beside one narrow block */
html main:has(#sf-pay) > .relative > section:nth-of-type(4) > .container-vk > .grid,
html main:has(#sf-pay) > .relative > section:nth-of-type(6) > .container-vk > .grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 0; margin-top: 12px; border: 1px solid #e1dcf6; border-radius: 8px; background: #fff; }
html main:has(#sf-pay) > .relative > :is(#x, section:nth-of-type(4)) .card-vk,
html main:has(#sf-pay) > .relative > :is(#x, section:nth-of-type(6)) .card-vk { display: grid; align-items: center; height: auto; padding: 14px 20px; }
html main:has(#sf-pay) > .relative > :is(#x, section:nth-of-type(4)) .card-vk + .card-vk,
html main:has(#sf-pay) > .relative > :is(#x, section:nth-of-type(6)) .card-vk + .card-vk { border-top: 1px solid #ece9f8; }

html main:has(#sf-pay) > .relative > :is(#x, section:nth-of-type(4)) .card-vk { grid-template-columns: 128px minmax(0, 1fr); column-gap: 16px; }
html main:has(#sf-pay) > .relative > :is(#x, section:nth-of-type(4)) .card-vk > .relative { border-radius: 6px; }
html main:has(#sf-pay) > .relative > :is(#x, section:nth-of-type(4)) .card-vk > .p-6 { padding: 0; }
html main:has(#sf-pay) > .relative > :is(#x, section:nth-of-type(4)) .card-vk h3 { font-size: 16px; line-height: 22px; }
html main:has(#sf-pay) > .relative > :is(#x, section:nth-of-type(4)) .card-vk p { margin-top: 2px; font-size: 14px; line-height: 20px; }
html main:has(#sf-pay) > .relative > :is(#x, section:nth-of-type(4)) .card-vk .pill { margin-top: 2px; padding: 0; font-size: 12px; }

html main:has(#sf-pay) > .relative > :is(#x, section:nth-of-type(6)) .card-vk { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; }
html main:has(#sf-pay) > .relative > :is(#x, section:nth-of-type(6)) .card-vk > .bg-mint-soft { grid-row: 1 / span 2; width: 48px; height: 48px; margin: 0; }
html main:has(#sf-pay) > .relative > :is(#x, section:nth-of-type(6)) .card-vk > h3 { margin: 0; font-size: 15px; line-height: 21px; }
html main:has(#sf-pay) > .relative > :is(#x, section:nth-of-type(6)) .card-vk > p { margin-top: 2px; font-size: 13px; line-height: 18px; }

/* Safety: the text in one block, the warning beside it */
html main:has(#sf-pay) > .relative > section:nth-of-type(5) > .container-vk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
html main:has(#sf-pay) > .relative > section:nth-of-type(5) > .container-vk > .flex:first-child { grid-column: 1 / -1; justify-content: flex-start; text-align: left; }
html main:has(#sf-pay) > .relative > section:nth-of-type(5) .rounded-card.bg-canvas { margin: 0; padding: 24px; border: 1px solid #e1dcf6; border-radius: 8px; background: #fff; }
html main:has(#sf-pay) > .relative > section:nth-of-type(5) .rounded-card.bg-canvas > .grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
html main:has(#sf-pay) > .relative > section:nth-of-type(5) .bg-danger-bg { margin: 0; padding: 24px; border-radius: 8px; }
html main:has(#sf-pay) > .relative > section:nth-of-type(5) .bg-danger-bg ul { grid-template-columns: minmax(0, 1fr); gap: 12px; }

/* Questions: one block with rows, the last sentence closes it */
html main:has(#sf-pay) > .relative > section:nth-of-type(7) .space-y-4 { max-width: none; margin-top: 12px; border: 1px solid #e1dcf6; border-radius: 8px 8px 0 0; background: #fff; }
html main:has(#sf-pay) > .relative > :is(#x, section:nth-of-type(7)) details.card-vk { padding: 14px 24px; border: 0; border-top: 1px solid #ece9f8; }
html main:has(#sf-pay) > .relative > :is(#x, section:nth-of-type(7)) details.card-vk:first-child { border-top: 0; }
html main:has(#sf-pay) > .relative > :is(#x, section:nth-of-type(7)) details.card-vk:last-child { border-bottom: 0; }
html main:has(#sf-pay) > .relative > section:nth-of-type(7) > p { width: 100%; max-width: none; margin: 0; padding: 14px 24px; border: 1px solid #e1dcf6; border-top: 0; border-radius: 0 0 8px 8px; background: #fbfaff; font-size: 14px; line-height: 20px; text-align: left; }

/* Last call: one strip with the button on the right */
html main:has(#sf-pay) > section.bg-ink-grad { padding: 32px 24px 48px; background: #efecfb; }
html main:has(#sf-pay) > section.bg-ink-grad > .container-vk { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 16px; align-items: center; max-width: 1152px; padding: 20px 24px; border-radius: 8px; background: #17143f; text-align: left; }
html main:has(#sf-pay) > section.bg-ink-grad > .container-vk::before { grid-column: 1; grid-row: 1 / span 2; width: 56px; height: 56px; margin: 0; }
html main:has(#sf-pay) > section.bg-ink-grad h2 { grid-column: 2; font-size: 22px; line-height: 28px; }
html main:has(#sf-pay) > section.bg-ink-grad p { grid-column: 2; max-width: none; margin: 2px 0 0; font-size: 14px; line-height: 20px; }
html main:has(#sf-pay) > section.bg-ink-grad .mt-8 { grid-column: 3; grid-row: 1 / span 2; margin: 0; flex-wrap: nowrap; }

/* The same order at every width: games and reasons together, then safety. The page's code keeps its own order */
html main:has(#sf-pay) > .relative { display: flex; flex-direction: column; }
html main:has(#sf-pay) > .relative > * { min-width: 0; order: 9; }
html main:has(#sf-pay) > .relative > section:nth-of-type(1) { order: 1; }
html main:has(#sf-pay) > .relative > section:nth-of-type(2) { order: 2; }
html main:has(#sf-pay) > .relative > section:nth-of-type(3) { order: 3; }
html main:has(#sf-pay) > .relative > section:nth-of-type(4) { order: 4; }
html main:has(#sf-pay) > .relative > section:nth-of-type(6) { order: 5; }
html main:has(#sf-pay) > .relative > section:nth-of-type(5) { order: 6; }
html main:has(#sf-pay) > .relative > section:nth-of-type(7) { order: 7; }

@media (max-width: 1023.98px) {
  html main:has(#sf-pay) > .relative > section:nth-of-type(5) > .container-vk { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1023.98px) {
  html main:has(#sf-pay) > section.bg-ink-grad > .container-vk { grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; padding: 16px; }
  html main:has(#sf-pay) > section.bg-ink-grad > .container-vk::before { grid-row: 1; width: 48px; height: 48px; }
  html main:has(#sf-pay) > section.bg-ink-grad h2 { font-size: 20px; line-height: 26px; }
  html main:has(#sf-pay) > section.bg-ink-grad p { grid-column: 1 / -1; margin-top: 10px; }
  html main:has(#sf-pay) > section.bg-ink-grad .mt-8 { grid-column: 1 / -1; grid-row: auto; margin-top: 12px; flex-wrap: wrap; }
  html main:has(#sf-pay) > section.bg-ink-grad .mt-8 > a { flex: 1 1 auto; }
}

/* Phones: every row has its small picture on the left */
@media (max-width: 639.98px) {
  html main:has(#sf-pay) > section.bg-ink-grad { padding: 24px 16px 32px; }
  html main:has(#sf-pay) > .relative > #etapes > .grid { padding: 16px; }
  html main:has(#sf-pay) > .relative > #etapes .card-vk { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  html main:has(#sf-pay) > .relative > #etapes .card-vk > span.bg-brand { grid-row: 1 / span 2; width: 48px; height: 48px; margin: 0; }
  html main:has(#sf-pay) > .relative > #etapes .card-vk > :is(h3, p) { grid-column: 2; }
  html main:has(#sf-pay) > .relative > :is(#x, section:nth-of-type(4)) .card-vk,
  html main:has(#sf-pay) > .relative > :is(#x, section:nth-of-type(6)) .card-vk { align-items: start; padding: 14px 16px; }
  html main:has(#sf-pay) > .relative > :is(#x, section:nth-of-type(4)) .card-vk { grid-template-columns: 88px minmax(0, 1fr); column-gap: 12px; }
  html main:has(#sf-pay) > .relative > section:nth-of-type(5) .rounded-card.bg-canvas,
  html main:has(#sf-pay) > .relative > section:nth-of-type(5) .bg-danger-bg { padding: 16px; }
  html main:has(#sf-pay) > .relative > :is(#x, section:nth-of-type(7)) details.card-vk,
  html main:has(#sf-pay) > .relative > section:nth-of-type(7) > p { padding-left: 16px; padding-right: 16px; }
}

@media (min-width: 1200px) {
  html main:has(#sf-pay) > .relative { display: grid; grid-template-columns: max(24px, calc((100% - 1152px) / 2)) minmax(0, 2fr) 24px minmax(0, 1fr) max(24px, calc((100% - 1152px) / 2)); }
  html main:has(#sf-pay) > .relative > * { grid-column: 1 / -1; }
  html main:has(#sf-pay) > .relative > section:nth-of-type(4) { grid-column: 2; }
  html main:has(#sf-pay) > .relative > section:nth-of-type(6) { grid-column: 4; }
  html main:has(#sf-pay) > .relative > section:is(:nth-of-type(4), :nth-of-type(6)) > .container-vk { display: flex; flex-direction: column; height: 100%; max-width: none; padding-left: 0; padding-right: 0; }
  html main:has(#sf-pay) > .relative > section:is(:nth-of-type(4), :nth-of-type(6)) .mx-auto.max-w-2xl { min-height: 50px; align-content: flex-start; }
  html main:has(#sf-pay) > .relative > section:is(:nth-of-type(4), :nth-of-type(6)) > .container-vk > .grid { flex: 1; }
}

/* The top: the title on one line across the page, then the list and the form in two blocks of the same height */
html form:has(#sf-pay) > .justify-center > .btn-primary:disabled { background: #f2b84b; color: rgba(23, 20, 63, .75); }
html .card-vk:has(> form #sf-pay) { box-shadow: none; }
html .container-vk:has(> .gap-10 #sf-pay) { padding-bottom: 0; }
html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 { padding: 20px; border: 1px solid #e1dcf6; border-radius: 8px; background: #fff; }
@media (max-width: 639.98px) {
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 { padding: 16px; }
}
@media (min-width: 1024px) {
  html .container-vk:has(> .gap-10 #sf-pay) { grid-template-rows: auto auto auto 1fr; padding-top: 12px; }
  html .container-vk:has(> .gap-10 #sf-pay) > nav.flex { grid-column: 1 / -1; grid-row: 1; }
  html .container-vk:has(> .gap-10 #sf-pay) > h1.font-bold { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; font-size: 30px; line-height: 36px; }
  html main .container-vk:has(> .gap-10 #sf-pay) > p.max-w-3xl.text-body { grid-column: 1 / -1; grid-row: 3; width: auto; max-width: none; margin-top: 2px; text-wrap: pretty; }
  html .card-vk:has(> form #sf-pay) { flex: 1; min-width: 0; }
  html .card-vk:has(> form #sf-pay) > h2 { font-size: 18px; line-height: 24px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-2 { grid-column: 2; grid-row: 4; display: flex; margin-top: 12px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 { grid-column: 1; grid-row: 4; display: flex; align-self: stretch; flex-direction: column; margin-top: 12px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul { display: flex; flex: 1; flex-direction: column; justify-content: space-between; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul > li { margin-top: 0; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > :not(ul, p) { text-wrap: balance; }
}

/* The sell page with the home page's separation: full-width bands of lavender and white, with the same space inside them. Everything else stays. */
html main:has(#sf-pay) > .relative { background: #fff; }
html main:has(#sf-pay) > .relative > section:has(#sf-pay),
html main:has(#sf-pay) > .relative > section:nth-of-type(5) { background: #f4f2fc; }
html main:has(#sf-pay) > .relative > #etapes { background: #f4f2fc; box-shadow: 0 0 0 100vmax #f4f2fc; clip-path: inset(0 -100vmax); }
html main:has(#sf-pay) > section.bg-ink-grad { padding-top: 0; padding-bottom: 40px; background: #fff; }

/* Phones: 32px inside lavender bands, 40px inside white ones, as on the home page */
html .container-vk:has(> .gap-10 #sf-pay) { padding-bottom: 32px; }
html main:has(#sf-pay) .container-vk:has(> .mt-6 table) { padding-top: 40px; padding-bottom: 40px; }
html main:has(#sf-pay) > .relative > #etapes,
html main:has(#sf-pay) > .relative > section:nth-of-type(5):nth-of-type(n):nth-of-type(n) > .container-vk { padding-top: 32px; padding-bottom: 32px; }
html main:has(#sf-pay) > .relative > section:nth-of-type(4):nth-of-type(n):nth-of-type(n) > .container-vk { padding-top: 40px; padding-bottom: 0; }
html main:has(#sf-pay) > .relative > section:nth-of-type(6):nth-of-type(n):nth-of-type(n) > .container-vk { padding-top: 32px; padding-bottom: 40px; }
html main:has(#sf-pay) > .relative > section:nth-of-type(7) { padding-top: 40px; padding-bottom: 40px; }

@media (min-width: 768px) {
  html .container-vk:has(> .gap-10 #sf-pay) { padding-bottom: 64px; }
  html main:has(#sf-pay) .container-vk:has(> .mt-6 table),
  html main:has(#sf-pay) > .relative > #etapes,
  html main:has(#sf-pay) > .relative > section:nth-of-type(5):nth-of-type(n):nth-of-type(n) > .container-vk,
  html main:has(#sf-pay) > .relative > section:nth-of-type(7) { padding-top: 64px; padding-bottom: 64px; }
  html main:has(#sf-pay) > .relative > section:nth-of-type(4):nth-of-type(n):nth-of-type(n) > .container-vk { padding-top: 64px; padding-bottom: 0; }
  html main:has(#sf-pay) > .relative > section:nth-of-type(6):nth-of-type(n):nth-of-type(n) > .container-vk { padding-bottom: 64px; }
  html main:has(#sf-pay) > section.bg-ink-grad { padding-bottom: 64px; }
}

/* Games and reasons side by side: one white band, the same space above and below both */
@media (min-width: 1200px) {
  html main:has(#sf-pay) > .relative > section:nth-of-type(4):nth-of-type(n):nth-of-type(n) > .container-vk,
  html main:has(#sf-pay) > .relative > section:nth-of-type(6):nth-of-type(n):nth-of-type(n) > .container-vk { padding-top: 64px; padding-bottom: 64px; }
}

/* Where one section meets the next, and every line is different: map tiles, a drawing, a trail, sometimes two together. Decoration only, it takes no room and can't be clicked */
html main:has(#sf-pay) > .relative { overflow-x: clip; --seam-top: -32px; --seam-height: 84px; --seam-gap: 32px; }
html main:has(#sf-pay) > .relative > :is(#etapes, section:nth-of-type(5), section:nth-of-type(7)),
html main:has(#sf-pay) > .relative > #etapes > .grid { position: relative; }
html main:has(#sf-pay) > .relative > #etapes { isolation: isolate; background: none; box-shadow: none; clip-path: none; }
html main:has(#sf-pay) > .relative > #etapes::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; background: #f4f2fc; z-index: -1; }
html main:has(#sf-pay) > .relative > section:has(#sf-pay)::before,
html main:has(#sf-pay) > .relative > :is(#etapes, section:nth-of-type(5), section:nth-of-type(7))::before,
html main:has(#sf-pay) > .relative > #etapes > .grid::after { content: ""; position: absolute; left: calc(50% - 50vw); width: 100vw; height: var(--seam-height); pointer-events: none; z-index: 1; background-repeat: no-repeat; }
html main:has(#sf-pay) > .relative > :is(#etapes, section:nth-of-type(5), section:nth-of-type(7))::before { top: var(--seam-top); }
html main:has(#sf-pay) > .relative > #etapes > .grid::after { top: calc(100% + var(--seam-gap) + var(--seam-top)); }

/* 1. Form to prices: only the tiles. Painted first, so the form's open lists stay on top */
html main:has(#sf-pay) > .relative > section:has(#sf-pay)::before { top: calc(100% + var(--seam-top)); z-index: 0; background-image: url(/_next/static/vk4/abe4e9739f/seam-tiles-lav.svg); background-size: 1440px 45px; background-position: center 23px; }
/* 2. Prices to steps: only the drawing */
html main:has(#sf-pay) > .relative > #etapes::before { background-image: url(/_next/static/vk4/abe4e9739f/ill-devis.svg); background-size: 64px 64px; background-position: right 16px top 0; }
/* 3. Steps to games: only the trail */
html main:has(#sf-pay) > .relative > #etapes > .grid::after { background-image: url(/_next/static/vk4/abe4e9739f/seam-trail-a.svg); background-size: 300px 63px; background-position: center 10px; }
/* 4. Games to safety: the tiles and the drawing */
html main:has(#sf-pay) > .relative > section:nth-of-type(5)::before { background-image: url(/_next/static/vk4/abe4e9739f/ill-bouclier.svg), url(/_next/static/vk4/abe4e9739f/seam-tiles-white.svg); background-size: 64px 64px, 1440px 45px; background-position: right 16px top 0, calc(50% + 40px) 23px; }
/* 5. Safety to questions: the drawing and the trail */
html main:has(#sf-pay) > .relative > section:nth-of-type(7)::before { background-image: url(/_next/static/vk4/abe4e9739f/ill-agent.svg), url(/_next/static/vk4/abe4e9739f/seam-trail-b.svg); background-size: 64px 64px, 200px 42px; background-position: right 16px top 0, right 84px top 11px; }

/* The trail ends on the treasure: a gold X above the sack in the last call */
html main:has(#sf-pay) > section.bg-ink-grad { position: relative; }

@media (min-width: 768px) {
  html main:has(#sf-pay) > .relative { --seam-top: -56px; --seam-height: 136px; --seam-gap: 64px; }
  html main:has(#sf-pay) > .relative > section:has(#sf-pay)::before { background-size: 2400px 75px; background-position: center 41px; }
  html main:has(#sf-pay) > .relative > #etapes::before { background-size: 96px 96px; background-position: right 48px top 8px; }
  html main:has(#sf-pay) > .relative > #etapes > .grid::after { background-image: url(/_next/static/vk4/abe4e9739f/seam-trail-long.svg); background-size: calc(100% - 96px) auto; background-position: center 20px; }
  html main:has(#sf-pay) > .relative > section:nth-of-type(5)::before { background-size: 96px 96px, 2400px 75px; background-position: right 48px top 8px, calc(50% - 120px) 41px; }
  html main:has(#sf-pay) > .relative > section:nth-of-type(7)::before { background-size: 96px 96px, 360px 75px; background-position: right 48px top 8px, right 148px top 18px; }
  html main:has(#sf-pay) > section.bg-ink-grad::before { content: ""; position: absolute; top: -64px; left: calc(50% - 544px); width: 40px; height: 64px; background: url(/_next/static/vk4/abe4e9739f/seam-x.svg) center / contain no-repeat; pointer-events: none; z-index: 1; }
}

@media (min-width: 1200px) {
  html main:has(#sf-pay) > .relative > #etapes::before { background-position: left calc(50% + 504px) top 8px; }
  html main:has(#sf-pay) > .relative > #etapes > .grid::after { background-size: 1100px 96px; }
  html main:has(#sf-pay) > .relative > section:nth-of-type(5)::before { background-position: left calc(50% + 300px) top 8px, calc(50% - 120px) 41px; }
  html main:has(#sf-pay) > .relative > section:nth-of-type(7)::before { background-size: 96px 96px, 460px 96px; background-position: left calc(50% + 504px) top 8px, left calc(50% + 234px) top 8px; }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
  html main:has(#sf-pay) > section.bg-ink-grad::before { left: 56px; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  html main:has(#sf-pay) > section.bg-ink-grad::before { left: 44px; }
}

/* The form comes forward: the logo's violet, navy edge and hard shadow like our drawings. The edge takes 3px from the padding, so the form keeps its size */
html .card-vk:has(> form #sf-pay) { padding: 17px; border: 3px solid #17143f; background: #6c67de; box-shadow: -10px 10px 0 #17143f; }
html form:has(#sf-pay)::after, html form:has(#sf-pay) > div:has(> .space-y-3), html form:has(#sf-pay) .rounded-card.bg-canvas + .rounded-card.bg-canvas { border-top-color: rgba(255, 255, 255, .32); }

/* Words */
html form:has(#sf-pay) .label-vk, html form:has(#sf-pay) .text-muted, html form:has(#sf-pay) .text-danger-text { color: #fff; }
html form:has(#sf-pay) .space-y-5 > :has(> label[for="sf-contact"]) > .flex-wrap:not(:has(> .flex-1))::after { color: #fff; }

/* Fields */
html form:has(#sf-pay) .input-vk { border-color: #fff; background: #fff; color: #17143f; }
html form:has(#sf-pay) .input-vk .text-ink { color: #17143f; }
html form:has(#sf-pay) .input-vk::placeholder, html form:has(#sf-pay) button.input-vk > .text-muted, html form:has(#sf-pay) button.input-vk svg { color: #6f6c92; }
html form:has(#sf-pay) .input-vk:hover:not(:disabled) { border-color: #17143f; }
html form:has(#sf-pay) .input-vk:focus, html form:has(#sf-pay) .input-vk[aria-expanded="true"] { border-color: #17143f; box-shadow: 0 0 0 2px #17143f; }
html form:has(#sf-pay) .input-vk:disabled { border-color: #d8d6f7; background: #d8d6f7; color: #5f5d78; }
html form:has(#sf-pay) .input-vk:disabled::placeholder { color: #5f5d78; }
html form:has(#sf-pay) .input-vk:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset; -webkit-text-fill-color: #17143f; }
html form:has(#sf-pay) .input-vk:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 40px #fff inset, 0 0 0 2px #17143f; }

/* Help icon and bubble: navy, because a white bubble would melt into the white fields */
html form:has(#sf-pay) .label-vk .group > button { border-color: #fff; color: #fff; }
html form:has(#sf-pay) .label-vk .group > button:hover { border-color: #fff; background: #fff; color: #17143f; }
html form:has(#sf-pay) [role="tooltip"] { background: #17143f; color: #fff; }

/* Lists that open */
html form:has(#sf-pay) .absolute:has(> [role="listbox"]) { border-color: #17143f; background: #fff; }
html form:has(#sf-pay) [role="listbox"] [role="option"] > button { color: #17143f; }
html form:has(#sf-pay) [role="listbox"] [role="option"] > button:hover,
html form:has(#sf-pay) [role="listbox"] [role="option"][aria-selected="true"] > button { background: #eeedfb; color: #17143f; }

/* Add a server, remove a server */
html form:has(#sf-pay) > div:has(> .space-y-3) > button, html form:has(#sf-pay) .rounded-card.bg-canvas > .mb-3 > button { color: #fff; }
html form:has(#sf-pay) > div:has(> .space-y-3) > button:hover, html form:has(#sf-pay) .rounded-card.bg-canvas > .mb-3 > button:hover { color: #fff; text-decoration: underline; }

/* Warning */
html form:has(#sf-pay) .bg-danger-bg, html form:has(#sf-pay) .rounded-card.bg-canvas .bg-danger-bg.bg-danger-bg { border-color: rgba(23, 20, 63, .28); background: rgba(23, 20, 63, .28); }
html form:has(#sf-pay) > .border-danger-border h3, html form:has(#sf-pay) .vk-warn-sum, html form:has(#sf-pay) .vk-warn-more { color: #fff; }

/* The top: a navy band joined to the header holds the title. Its height comes only from the title, so the form can never make it grow */
html .container-vk:has(> .gap-10 #sf-pay) { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding-top: 12px; }
html .container-vk:has(> .gap-10 #sf-pay)::before { content: ""; display: block; position: relative; inset: auto; z-index: 0; width: auto; height: auto; grid-column: 1 / -1; grid-row: 1 / span 3; margin: -12px calc((100% - 100vw) / 2) 0; transform: none; pointer-events: none; background: url(/_next/static/vk4/abe4e9739f/seam-tiles-navy.svg) center bottom -8px / 1440px 45px repeat-x, #17143f; }
html .container-vk:has(> .gap-10 #sf-pay) > nav.flex { position: relative; z-index: 1; grid-column: 1; grid-row: 1; }
html .container-vk:has(> .gap-10 #sf-pay) > nav.flex, html .container-vk:has(> .gap-10 #sf-pay) > nav.flex a, html .container-vk:has(> .gap-10 #sf-pay) > nav.flex span { color: #c9c7e6; }
html .container-vk:has(> .gap-10 #sf-pay) > h1.font-bold { position: relative; z-index: 1; grid-column: 1; grid-row: 2; margin-top: 10px; padding-left: 68px; color: #fff; font-size: 26px; line-height: 32px; text-wrap: balance; background: url(/_next/static/vk4/abe4e9739f/ill-sac-nuit.svg) left center / 56px 56px no-repeat; }
html main .container-vk:has(> .gap-10 #sf-pay) > p.max-w-3xl.text-body { position: relative; z-index: 1; grid-column: 1; grid-row: 3; width: auto; max-width: none; margin-top: 8px; padding-bottom: 44px; color: #d9d7ef; font-size: 14px; line-height: 21px; }
html main .container-vk:has(> .gap-10 #sf-pay) > p.max-w-3xl.text-body a { color: #f2b84b; }
html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-2 { position: relative; z-index: 2; grid-column: 1; grid-row: 4; margin-top: 16px; }
html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 { position: relative; z-index: 1; grid-column: 1; grid-row: 5; margin-top: 24px; }

/* From laptops: the title and the list on the left, the form across the band on the right. The list has a fixed gap between rows and never follows the form */
@media (min-width: 1024px) {
  html .container-vk:has(> .gap-10 #sf-pay) { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 24px; }
  html .container-vk:has(> .gap-10 #sf-pay) > h1.font-bold { margin-top: 12px; padding-left: 84px; font-size: 26px; line-height: 32px; background-size: 72px 72px; background-position: left top; min-height: 72px; }
  html main .container-vk:has(> .gap-10 #sf-pay) > p.max-w-3xl.text-body { margin-top: 10px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-2 { grid-column: 2; grid-row: 1 / span 4; margin-top: 6px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 { grid-column: 1; grid-row: 4; align-self: start; margin-top: 16px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul { flex: none; justify-content: flex-start; row-gap: 12px; }
  html .card-vk:has(> form #sf-pay) { padding: 21px; }
  html .card-vk:has(> form #sf-pay) > h2 { font-size: 20px; line-height: 28px; }
  html form:has(#sf-pay) { row-gap: 18px; margin-top: 14px; }
  html form:has(#sf-pay) .input-vk { height: 46px; }
}
@media (min-width: 1200px) {
  html .container-vk:has(> .gap-10 #sf-pay) { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); column-gap: 32px; }
  html .container-vk:has(> .gap-10 #sf-pay) > h1.font-bold { padding-left: 88px; font-size: 30px; line-height: 38px; }
}

/* The list's rows are spaced per language, so its bottom meets the form's when the page opens. Long hints in the fields get a little more room */
@media (min-width: 1024px) {
  html form:has(#sf-pay) .input-vk::placeholder { font-size: 13px; }
  html[data-vk-lang="en"] .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul { row-gap: 16px; }
  html[data-vk-lang="pt"] .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul { row-gap: 6px; }
}
@media (min-width: 1200px) {
  html .container-vk:has(> .gap-10 #sf-pay) { grid-template-columns: minmax(0, .76fr) minmax(0, 1fr); }
  html[data-vk-lang="en"] .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul { row-gap: 14px; }
  html:is([data-vk-lang="es"], [data-vk-lang="pt"]) .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul { row-gap: 8px; }
}

/* The drawing always fits beside the title, even on one line. Hints in the fields and lists get every pixel they can */
html .container-vk:has(> .gap-10 #sf-pay) > h1.font-bold { display: flex; align-items: center; min-height: 56px; }
@media (min-width: 1024px) {
  html .container-vk:has(> .gap-10 #sf-pay) > h1.font-bold { min-height: 72px; background-position: left center; }
  html form:has(#sf-pay) .input-vk { padding-left: 10px; padding-right: 10px; }
  html form:has(#sf-pay) button.input-vk > .text-muted { font-size: 13px; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
  html .container-vk:has(> .gap-10 #sf-pay)::before { background-position: left -420px bottom -8px, 0 0; }
}

/* The form floats above the page: a dark violet edge, a lit top and a soft shadow */
html .card-vk:has(> form #sf-pay) { border-color: #4f49ad; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 8px 14px rgba(10, 8, 40, .35), 0 34px 60px -8px rgba(10, 8, 40, .7); }
@media (min-width: 1024px) {
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-2 { margin-top: 2px; }
}

/* A test, sell page only: an Enutrof runs along the band's tiles with his sack, coins falling, an Iop behind him. Below the title's words and behind the form, it can't be clicked, and it stays away for people who ask for less motion */
html .container-vk:has(> .gap-10 #sf-pay)::after { content: ""; display: block; position: relative; z-index: 0; grid-column: 1 / -1; grid-row: 1 / span 3; align-self: end; height: 66px; margin: 0 calc((100% - 100vw) / 2); pointer-events: none; background: url(/_next/static/vk4/abe4e9739f/chase-small.svg) left bottom no-repeat; }
@media (min-width: 768px) {
  html .container-vk:has(> .gap-10 #sf-pay)::after { background-image: url(/_next/static/vk4/abe4e9739f/chase.svg); }
}
@media (prefers-reduced-motion: reduce) {
  html .container-vk:has(> .gap-10 #sf-pay)::after { display: none; }
}

/* A test, sell page only: safety to questions, a Cra and an Iop fight the Bouftou Royal, in place of the drawing and trail. It can't be clicked, and people who ask for less motion keep the drawing and trail */
@media (prefers-reduced-motion: no-preference) {
  html main:has(#sf-pay) > .relative > section:nth-of-type(7) { padding-top: 52px; }
  html main:has(#sf-pay) > .relative > section:nth-of-type(7)::before { top: -32px; height: 73px; background-image: url(/_next/static/vk4/abe4e9739f/fight.svg); background-size: 300px 73px; background-position: center top; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  html main:has(#sf-pay) > .relative > section:nth-of-type(7) { padding-top: 64px; }
  html main:has(#sf-pay) > .relative > section:nth-of-type(7)::before { top: -56px; height: 136px; background-size: 560px 136px; background-position: right 24px top 0; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1200px) {
  html main:has(#sf-pay) > .relative > section:nth-of-type(7)::before { background-position: left calc(50% + 16px) top 0; }
}

@media (max-width: 639.98px), (min-width: 1024px) and (max-width: 1199.98px) {
}

/* The Discord button hops and wiggles now and then, every 9 seconds. It stays still while the customer points at it or types in a form, or if they ask for less motion */
@keyframes vk-dc-nudge {
  0%, 84%, 100% { transform: none; }
  86% { transform: translateY(-12px) rotate(-10deg); }
  88% { transform: translateY(0) rotate(0deg); }
  90% { transform: translateY(-7px) rotate(9deg); }
  92% { transform: translateY(0) rotate(-6deg); }
  94% { transform: rotate(5deg); }
  96% { transform: rotate(-3deg); }
  98% { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  a.fixed[href*="discord"] { animation: vk-dc-nudge 9s ease-in-out infinite; }
  a.fixed[href*="discord"]:hover, a.fixed[href*="discord"]:focus-visible, html:has(main form :focus) a.fixed[href*="discord"] { animation: none; }
}

html .container-vk:has(> .gap-10 #sf-pay)::after { height: 110px; background-position: left calc(100vw - 450px) bottom; }
@media (min-width: 768px) {
  html .container-vk:has(> .gap-10 #sf-pay)::after { background-position: left calc(100vw - 784px) bottom; }
}
@media (min-width: 1024px) {
  html .container-vk:has(> .gap-10 #sf-pay)::after { background-position: left -376px bottom; }
}
@media (min-width: 1200px) {
  html .container-vk:has(> .gap-10 #sf-pay)::after { background-position: left calc(50vw - 876px) bottom; }
}

/* Exchange page: the three short promises sit under the games list, not on the band */
html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) > ul:not(.vk-ex-list) { display: none; }
html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk:has(> .vk-ex-games > ul.vk-ex-ticks) > ul.lg\:hidden { display: none; }
html main:has(#ex-depart) > section:nth-of-type(1) ul.vk-ex-ticks { display: flex; flex-wrap: wrap; flex: none; column-gap: 16px; row-gap: 4px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #e4e0f6; color: #3e3c54; font-size: 12.5px; line-height: 18px; font-weight: 500; }
html main:has(#ex-depart) > section:nth-of-type(1) ul.vk-ex-ticks li { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
html main:has(#ex-depart) > section:nth-of-type(1) ul.vk-ex-ticks svg { width: 15px; height: 15px; color: #a8720c; }
html main:has(#ex-depart) > section:nth-of-type(1) ul.vk-ex-ticks li, html main:has(#ex-depart) > section:nth-of-type(1) ul.vk-ex-ticks li * { color: #3e3c54; }
html main:has(#ex-depart) > section:nth-of-type(1) ul.vk-ex-ticks li svg { color: #a8720c; }

/* The Discord button keeps its size, and grows only while it moves: up from its corner, a wiggle, back to normal */
a.fixed[href*="discord"] { transform-origin: 30% 80%; }
@keyframes vk-dc-nudge {
  0%, 84%, 100% { transform: none; }
  86% { transform: translateY(-8px) scale(1.4) rotate(-10deg); }
  88% { transform: translateY(-2px) scale(1.4) rotate(0deg); }
  90% { transform: translateY(-6px) scale(1.4) rotate(9deg); }
  92% { transform: scale(1.4) rotate(-7deg); }
  94% { transform: scale(1.4) rotate(5deg); }
  96% { transform: scale(1.2) rotate(-2deg); }
  98% { transform: scale(1.05); }
}

@media (min-width: 640px) and (max-width: 1023.98px), (min-width: 1200px) {
}
@media (min-width: 640px) {
}
/* Small laptops: the badge takes a line of its own, so the rows give up the room */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul { row-gap: 7px; }
  html[data-vk-lang="en"] .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul { row-gap: 11px; }
  html[data-vk-lang="pt"] .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul { row-gap: 3px; }
}

/* The runners go straight again, there's nothing to jump over */
html .container-vk:has(> .gap-10 #sf-pay)::after { height: 66px; background-position: left bottom; }
@media (min-width: 768px) {
  html .container-vk:has(> .gap-10 #sf-pay)::after { background-position: left bottom; }
}
@media (min-width: 1200px) {
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul { row-gap: 11.6px; }
  html[data-vk-lang="en"] .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul { row-gap: 11px; }
  html:is([data-vk-lang="es"], [data-vk-lang="pt"]) .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul { row-gap: 7.6px; }
}

/* Trustpilot: the last row of the white box on both pages, with the same tile, font and colours as the box's own rows */
.vk-trust { display: flex; flex: none; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e4e0f6; color: #4e4e4e; font-size: 13px; line-height: 18px; font-weight: 400; }
.vk-trust strong { color: #17143f; font-weight: 600; }
.vk-trust:hover strong { text-decoration: underline; text-underline-offset: 2px; }
.vk-trust-tile { display: grid; flex: none; width: 60px; height: 26px; place-items: center; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px #ecebf3; }
.vk-trust-go { flex: none; margin-left: auto; color: #5752c9; }

/* On the exchange page the tile lines up with the game pictures, and the pictures give up a little room */
html main:has(#ex-depart) > section:nth-of-type(1) ul.vk-ex-ticks { margin-top: 10px; padding-top: 10px; }
html main:has(#ex-depart) > section:nth-of-type(1) .vk-ex-games > .vk-trust { margin-top: 10px; padding-top: 10px; }
@media (min-width: 1024px) {
  html main:has(#ex-depart) > section:nth-of-type(1) .vk-ex-games > .vk-trust .vk-trust-tile { width: 80px; }
  html main:has(#ex-depart) > section:nth-of-type(1) .vk-ex-list li img { width: 80px; height: 45px; }
}
@media (min-width: 1200px) {
  html main:has(#ex-depart) > section:nth-of-type(1) .vk-ex-games > .vk-trust .vk-trust-tile { width: 96px; }
  html main:has(#ex-depart) > section:nth-of-type(1) .vk-ex-list li img { width: 96px; height: 54px; }
}

/* The payment rows sit a little closer, so the box still ends level with the form */
@media (min-width: 1024px) {
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > p:last-of-type { margin-top: 10px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul { row-gap: 5px; }
  html[data-vk-lang="en"] .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul { row-gap: 6.5px; }
  html[data-vk-lang="es"] .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul { row-gap: 3px; }
  html[data-vk-lang="pt"] .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul { row-gap: 3px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > .vk-trust { margin-top: 10px; padding-top: 10px; }
}

/* The reviews bar: each review's own stars in green squares, on indigo cards */
.vk-card { border-color: #3f3a86; background: #2b2678; }
.vk-card p { font-weight: 500; }
.vk-st { display: inline-flex; flex: none; gap: 1px; align-self: center; }
.vk-st i { display: block; width: 13px; height: 13px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20rx%3D%222%22%20fill%3D%22%2300b67a%22/%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M12%202.5l2.9%206.3%206.9.8-5.1%204.7%201.4%206.8L12%2016.9%205.9%2020.3l1.4-6.8L2.2%209.6l6.9-.8z%22/%3E%3C/svg%3E") center / contain no-repeat; }
.vk-st i.off { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20rx%3D%222%22%20fill%3D%22%234a4684%22/%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M12%202.5l2.9%206.3%206.9.8-5.1%204.7%201.4%206.8L12%2016.9%205.9%2020.3l1.4-6.8L2.2%209.6l6.9-.8z%22/%3E%3C/svg%3E"); }
@media (max-width: 639.98px) {
  .vk-card { width: 270px; }
}

/* Even spacing at the top: 24px under the header on both sides, 24px from the band to the list */
@media (min-width: 1024px) {
  html .container-vk:has(> .gap-10 #sf-pay) { padding-top: 24px; }
  html .container-vk:has(> .gap-10 #sf-pay)::before { margin-top: -24px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-2 { margin-top: 0; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 { margin-top: 24px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul { row-gap: 3px; }
  html[data-vk-lang="en"] .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul { row-gap: 5px; }
  html[data-vk-lang="es"] .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul { row-gap: 2px; }
  html[data-vk-lang="pt"] .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul { row-gap: 2px; }
}

/* The same 24px from the header to the breadcrumb, to the title, to the description */
@media (min-width: 1024px) {
  html .container-vk:has(> .gap-10 #sf-pay) > h1.font-bold { margin-top: 24px; }
  html main .container-vk:has(> .gap-10 #sf-pay) > p.max-w-3xl.text-body { margin-top: 24px; padding-bottom: 32px; }
}
/* The form uses the height it gained as a little more air between its rows */
@media (min-width: 1024px) {
  html form:has(#sf-pay) { row-gap: 20px; }
  html:is([data-vk-lang="es"], [data-vk-lang="pt"]) form:has(#sf-pay) { row-gap: 22px; }
}

/* Sell form in the login page's colours: dark box, dark fields, gold button */
html .card-vk:has(> form #sf-pay) { border: 3px solid #4f49ad; background: #262160; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), 0 8px 14px rgba(10, 8, 40, .35), 0 34px 60px -8px rgba(10, 8, 40, .7); }
html form:has(#sf-pay)::after, html form:has(#sf-pay) > div:has(> .space-y-3), html form:has(#sf-pay) .rounded-card.bg-canvas + .rounded-card.bg-canvas { border-top-color: rgba(255, 255, 255, .2); }
html form:has(#sf-pay) .input-vk { border-color: rgba(255, 255, 255, .28); background: #17143f; color: #fff; }
html form:has(#sf-pay) .input-vk .text-ink { color: #fff; }
html form:has(#sf-pay) .input-vk::placeholder, html form:has(#sf-pay) button.input-vk > .text-muted, html form:has(#sf-pay) button.input-vk svg { color: #a9a6d0; }
html form:has(#sf-pay) .input-vk:hover:not(:disabled) { border-color: rgba(255, 255, 255, .55); }
html form:has(#sf-pay) .input-vk:focus, html form:has(#sf-pay) .input-vk[aria-expanded="true"] { border-color: #f2b84b; box-shadow: 0 0 0 1px #f2b84b; }
html form:has(#sf-pay) .input-vk:disabled { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .07); color: #c9c7e6; }
html form:has(#sf-pay) .input-vk:disabled::placeholder { color: #c9c7e6; }
html form:has(#sf-pay) .input-vk:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #17143f inset; -webkit-text-fill-color: #fff; }
html form:has(#sf-pay) .input-vk:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 40px #17143f inset, 0 0 0 1px #f2b84b; }
html form:has(#sf-pay) .label-vk .group > button:hover { border-color: #fff; background: #fff; color: #17143f; }
html form:has(#sf-pay) [role="tooltip"] { background: #fff; color: #17143f; }
html form:has(#sf-pay) .absolute:has(> [role="listbox"]) { border-color: #4f49ad; background: #17143f; }
html form:has(#sf-pay) [role="listbox"] [role="option"] > button, html form:has(#sf-pay) [role="listbox"] [role="option"] > button * { color: #fff; }
html form:has(#sf-pay) [role="listbox"] [role="option"] > button:hover,
html form:has(#sf-pay) [role="listbox"] [role="option"][aria-selected="true"] > button { background: #262160; color: #fff; }
html form:has(#sf-pay) .bg-danger-bg, html form:has(#sf-pay) .rounded-card.bg-canvas .bg-danger-bg.bg-danger-bg { border-color: rgba(255, 255, 255, .12); background: #17143f; }

/* Sell form: violet title bar and flat fields, like the exchange form */
html .card-vk:has(> form #sf-pay) { border-color: #6c67de; box-shadow: 0 8px 14px rgba(10, 8, 40, .35), 0 34px 60px -8px rgba(10, 8, 40, .7); }
@media (min-width: 1024px) { html .card-vk:has(> form #sf-pay) > h2 { margin: -21px -21px 0; padding: 10px 21px 11px; border-radius: 7px 7px 0 0; background: #6c67de; color: #fff; } }
html form:has(#sf-pay) .input-vk { border-color: transparent; }
html form:has(#sf-pay) .input-vk:hover:not(:disabled) { border-color: #6c67de; }
html form:has(#sf-pay) .input-vk:focus, html form:has(#sf-pay) .input-vk[aria-expanded="true"] { border-color: #f2b84b; box-shadow: 0 0 0 1px #f2b84b; }
html form:has(#sf-pay) .input-vk:disabled { border-color: transparent; }

/* Header's second row: for every visitor, with language and light/dark on the right, no boxes. It stays with the header on laptops */
html .vk-mb-slot { position: relative; z-index: 40; min-height: 29px; border-bottom: 1px solid rgba(255, 255, 255, .1); background: #17143f; }
html .vk-mb-slot > div:not(.vk-tools) { border-bottom: 0; }
html .vk-mb-slot > div:not(.vk-tools) > .container-vk { padding-right: 126px; }
html .vk-tools { position: absolute; top: 0; left: 0; right: 0; z-index: 1; display: flex; justify-content: flex-end; align-items: center; column-gap: 4px; height: 28px; margin: 0 auto; pointer-events: none; }
html .vk-mb-slot > .vk-tools { background: none; }
html .vk-tools > * { pointer-events: auto; }
html .vk-tools > .relative > button { height: 28px; padding: 0 4px; border: 0; color: #fff; font-size: 13px; }
html .vk-tools > .vk-lang-large { display: none; }
html .vk-tools > .relative > button > span { display: inline-flex; align-items: center; height: 16px; line-height: 16px; }
html .vk-theme-btn { display: grid; place-items: center; flex: none; width: 30px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
html .vk-theme-btn:focus-visible { outline: 2px solid #f2b84b; outline-offset: -2px; border-radius: 4px; }
@media (max-width: 359.98px) {
  html .vk-mb-slot > div:not(.vk-tools) > .container-vk { padding-right: 104px; }
  html .vk-tools > .relative > button > svg:first-child { display: none; }
}
@media (min-width: 768px) {
  html .vk-mb-slot > div:not(.vk-tools) > .container-vk { padding-right: 160px; }
  html .vk-tools > .relative > button > span { font-size: 0; }
  html .vk-tools > .relative > button > span::after { font-size: 13px; content: "Français"; }
  html[data-vk-lang="en"] .vk-tools > .relative > button > span::after { content: "English"; }
  html[data-vk-lang="es"] .vk-tools > .relative > button > span::after { content: "Español"; }
  html[data-vk-lang="pt"] .vk-tools > .relative > button > span::after { content: "Português"; }
}
@media (min-width: 1024px) {
  html .vk-mb-slot { position: sticky; top: 65px; }
  html .vk-tools > .vk-lang-large { display: block; }
  html .vk-tools > .vk-lang-small { display: none; }
}

/* vk-blocks-ex.css */
/* Exchange page in blocks, the same as the sell page: one page colour, white blocks, small titles on the left. Same words, only their place and size change. */
html main:has(#ex-depart) { background: #efecfb; }
html main:has(#ex-depart) > section:nth-of-type(1) { background: none; }
html main:has(#ex-depart) > section.bg-surface { background: none; }

/* Sections: small gaps */
html main:has(#ex-depart) > section:nth-of-type(2),
html main:has(#ex-depart) > section:nth-of-type(3) > .container-vk,
html main:has(#ex-depart) > section:nth-of-type(4),
html main:has(#ex-depart) > section:nth-of-type(5) > .container-vk { padding-top: 32px; padding-bottom: 0; }

/* Titles: small, on the left */
html main:has(#ex-depart) > section:nth-of-type(n+2):nth-of-type(-n+3) .mx-auto.max-w-2xl,
html main:has(#ex-depart) > section:nth-of-type(5) .text-center:first-child { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; max-width: none; margin: 0; text-align: left; }
html main:has(#ex-depart) > section:nth-of-type(n+2):nth-of-type(-n+5) .section-title { order: 1; margin: 0; font-size: 22px; line-height: 28px; letter-spacing: normal; text-align: left; }
html main:has(#ex-depart) > section:nth-of-type(n+2):nth-of-type(-n+5) .eyebrow { order: 2; color: #5752c9; font-size: 11px; line-height: 16px; text-align: left; }
html main:has(#ex-depart) > section:nth-of-type(n+2):nth-of-type(-n+3) .mx-auto > p { order: 3; flex: 1 1 100%; margin: 2px 0 0; color: #5f5d78; font-size: 14px; line-height: 20px; }

/* Steps and reasons: one block each */
html main:has(#ex-depart) > section:nth-of-type(2) > .grid,
html main:has(#ex-depart) > section:nth-of-type(3) > .container-vk > .grid { gap: 20px 32px; margin-top: 12px; padding: 24px; border: 1px solid #e1dcf6; border-radius: 8px; background: #fff; }
html main:has(#ex-depart) > section:nth-of-type(2) .card-vk,
html main:has(#ex-depart) > section:nth-of-type(3) .card-vk { text-align: left; }
html main:has(#ex-depart) > section:nth-of-type(2) .card-vk > span.bg-brand,
html main:has(#ex-depart) > section:nth-of-type(3) .card-vk > span { width: 56px; height: 56px; margin: 0 0 12px; }
html main:has(#ex-depart) > section:nth-of-type(2) .card-vk > h3,
html main:has(#ex-depart) > section:nth-of-type(3) .card-vk > h3 { margin: 0; font-size: 16px; line-height: 22px; }
html main:has(#ex-depart) > section:nth-of-type(2) .card-vk > p,
html main:has(#ex-depart) > section:nth-of-type(3) .card-vk > p { margin-top: 4px; font-size: 14px; line-height: 20px; }

/* The long text: two blocks side by side, the games in a wide one, then two more */
html main:has(#ex-depart) > section:nth-of-type(4) { display: flex; flex-wrap: wrap; align-items: stretch; gap: 24px; }
html main:has(#ex-depart) > section:nth-of-type(4) > h2 { flex: 0 1 auto; margin: 0 0 -12px; }
html main:has(#ex-depart) > section:nth-of-type(4) > .eyebrow { display: block; flex: 1 1 0; min-width: 120px; align-self: center; margin-bottom: -12px; }
html main:has(#ex-depart) > section:nth-of-type(4) > .grid { order: 3; flex: 1 1 100%; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; max-width: none; margin: 0; padding: 24px; border: 1px solid #e1dcf6; border-radius: 8px; background: #fff; }
html main:has(#ex-depart) > section:nth-of-type(4) > .mt-8:not(.bg-danger-bg) { order: 3; flex: 1 1 100%; margin: 0; padding: 24px; border: 1px solid #e1dcf6; border-radius: 8px; background: #fff; }
html main:has(#ex-depart) > section:nth-of-type(4) > .bg-danger-bg { order: 3; flex: 1 1 100%; margin: 0; padding: 24px; border-radius: 8px; }
html main:has(#ex-depart) > section:nth-of-type(4) > .bg-danger-bg ul { grid-template-columns: minmax(0, 1fr); gap: 12px; }
html main:has(#ex-depart) > section:nth-of-type(4) > .mt-8 h3:not(.text-danger-text) { font-size: 16px; line-height: 22px; }
html main:has(#ex-depart) > section:nth-of-type(4) > .mt-8 > .grid:not(:has(> .card-vk)) { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 8px; }
@media (min-width: 1024px) {
  html main:has(#ex-depart) > section:nth-of-type(4) > .grid,
  html main:has(#ex-depart) > section:nth-of-type(4) > .mt-8:nth-child(4):not(.bg-danger-bg),
  html main:has(#ex-depart) > section:nth-of-type(4) > .mt-8:nth-child(6):not(.bg-danger-bg),
  html main:has(#ex-depart) > section:nth-of-type(4) > .bg-danger-bg { flex: 0 0 calc(50% - 12px); min-width: 0; }
}

/* The games in the text: rows with a small picture, as on the sell page */
html main:has(#ex-depart) > section:nth-of-type(4) .grid:has(> .card-vk) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; margin-top: 12px; }
html main:has(#ex-depart) > section:nth-of-type(4) .card-vk { display: grid; grid-template-columns: 128px minmax(0, 1fr); column-gap: 16px; align-content: start; text-align: left; }
html main:has(#ex-depart) > section:nth-of-type(4) .card-vk > .flex { display: contents; }
html main:has(#ex-depart) > section:nth-of-type(4) .card-vk img { grid-row: 1 / span 2; width: 128px; border-radius: 6px; }
html main:has(#ex-depart) > section:nth-of-type(4) .card-vk h4 { margin: 0; font-size: 16px; line-height: 22px; }
html main:has(#ex-depart) > section:nth-of-type(4) .card-vk p { grid-column: 2; margin-top: 2px; font-size: 14px; line-height: 20px; }

/* Questions: one block with rows, the last sentence closes it */
html main:has(#ex-depart) > section:nth-of-type(5) .grid { max-width: none; margin-top: 12px; border: 1px solid #e1dcf6; border-radius: 8px 8px 0 0; background: #fff; }
html main:has(#ex-depart) > section:nth-of-type(5) .divide-y { border-radius: 0; }
html main:has(#ex-depart) > section:nth-of-type(5) .divide-y > details { padding: 0 24px; border-top: 1px solid #ece9f8; }
html main:has(#ex-depart) > section:nth-of-type(5) .divide-y:first-child > details:first-child { border-top: 0; }
html main:has(#ex-depart) > section:nth-of-type(5) .divide-y:last-child > details:last-child { border-bottom: 0; }
html main:has(#ex-depart) > section:nth-of-type(5) summary { padding-top: 14px; padding-bottom: 14px; }
html main:has(#ex-depart) > section:nth-of-type(5) > .container-vk > p { margin: 0; padding: 14px 24px; border: 1px solid #e1dcf6; border-top: 0; border-radius: 0 0 8px 8px; background: #fbfaff; font-size: 14px; line-height: 20px; text-align: left; }

/* Last call: one strip with the button on the right */
html main:has(#ex-depart) > section:nth-of-type(6) { padding: 32px 24px 48px; background: #efecfb; }
html main:has(#ex-depart) > section:nth-of-type(6) > .container-vk { max-width: 1152px; padding: 0; }
html main:has(#ex-depart) > section:nth-of-type(6) .mx-auto { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 16px; align-items: center; max-width: none; padding: 20px 24px; border-radius: 8px; background: #17143f; text-align: left; }
html main:has(#ex-depart) > section:nth-of-type(6) .mx-auto::before { grid-column: 1; grid-row: 1 / span 2; width: 56px; height: 56px; margin: 0; }
html main:has(#ex-depart) > section:nth-of-type(6) h2 { grid-column: 2; font-size: 22px; line-height: 28px; }
html main:has(#ex-depart) > section:nth-of-type(6) p { grid-column: 2; margin: 2px 0 0; font-size: 14px; line-height: 20px; }
html main:has(#ex-depart) > section:nth-of-type(6) .mt-8 { grid-column: 3; grid-row: 1 / span 2; margin: 0; flex-wrap: nowrap; }

@media (max-width: 767.98px) {
  html main:has(#ex-depart) > section:nth-of-type(4) .grid:has(> .card-vk) { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1023.98px) {
  html main:has(#ex-depart) > section:nth-of-type(6) .mx-auto { grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; padding: 16px; }
  html main:has(#ex-depart) > section:nth-of-type(6) .mx-auto::before { grid-row: 1; width: 48px; height: 48px; }
  html main:has(#ex-depart) > section:nth-of-type(6) h2 { font-size: 20px; line-height: 26px; }
  html main:has(#ex-depart) > section:nth-of-type(6) p { grid-column: 1 / -1; margin-top: 10px; }
  html main:has(#ex-depart) > section:nth-of-type(6) .mt-8 { grid-column: 1 / -1; grid-row: auto; margin-top: 12px; flex-wrap: wrap; }
  html main:has(#ex-depart) > section:nth-of-type(6) .mt-8 > a { flex: 1 1 auto; }
}

/* Phones: every row has its small picture on the left */
@media (max-width: 639.98px) {
  html main:has(#ex-depart) > section:nth-of-type(6) { padding: 24px 16px 32px; }
  html main:has(#ex-depart) > section:nth-of-type(n+2):nth-of-type(-n+5) .section-title { font-size: 22px; line-height: 28px; }
  html main:has(#ex-depart) > section:nth-of-type(2) > .grid,
  html main:has(#ex-depart) > section:nth-of-type(3) .grid,
  html main:has(#ex-depart) > section:nth-of-type(4) > .grid,
  html main:has(#ex-depart) > section:nth-of-type(4) > .mt-8:not(.bg-danger-bg),
  html main:has(#ex-depart) > section:nth-of-type(4) > .bg-danger-bg { padding: 16px; }
  html main:has(#ex-depart) > section:nth-of-type(2) .card-vk,
  html main:has(#ex-depart) > section:nth-of-type(3) .card-vk { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  html main:has(#ex-depart) > section:nth-of-type(2) .card-vk > span.bg-brand,
  html main:has(#ex-depart) > section:nth-of-type(3) .card-vk > span { grid-row: 1 / span 2; width: 48px; height: 48px; margin: 0; }
  html main:has(#ex-depart) > section:nth-of-type(2) .card-vk > :is(h3, p),
  html main:has(#ex-depart) > section:nth-of-type(3) .card-vk > :is(h3, p) { grid-column: 2; }
  html main:has(#ex-depart) > section:nth-of-type(4) .card-vk { grid-template-columns: 88px minmax(0, 1fr); column-gap: 12px; }
  html main:has(#ex-depart) > section:nth-of-type(4) .card-vk img { width: 88px; }
  html main:has(#ex-depart) > section:nth-of-type(5) .divide-y > details,
  html main:has(#ex-depart) > section:nth-of-type(5) > .container-vk > p { padding-left: 16px; padding-right: 16px; }
}

/* The top, the same as the sell page: the title on one line across the page, then the games and the form in two blocks of the same height */
html main:has(#ex-depart) #simulateur form > .btn-primary:disabled { background: #f2b84b; color: rgba(23, 20, 63, .75); }
html main:has(#ex-depart) #simulateur > .rounded-card { box-shadow: none; }
html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) > h1 { order: 1; margin: 0; }
html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) > .eyebrow { order: 2; color: #5752c9; font-size: 11px; line-height: 16px; }
html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) > p { order: 3; flex: 1 1 100%; max-width: none; margin-top: 4px; text-wrap: pretty; }
html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) > ul { order: 4; flex: 1 1 100%; margin-top: 8px; }
html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk { padding-bottom: 0; }
html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .vk-ex-games { padding: 20px; border: 1px solid #e1dcf6; border-radius: 8px; background: #fff; }
@media (max-width: 1023.98px) {
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk { padding-top: 16px; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid { margin-top: 8px; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) { margin-top: 0; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) > h1 { font-size: 26px; line-height: 32px; }
}
@media (max-width: 639.98px) {
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .vk-ex-games { padding: 16px; }
}
@media (min-width: 1024px) {
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk { grid-template-rows: auto auto 1fr; padding-top: 12px; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > nav { grid-column: 1 / -1; grid-row: 1; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) > h1 { font-size: 30px; line-height: 36px; }
  html main:has(#ex-depart) #simulateur { grid-column: 2; grid-row: 3; display: flex; margin-top: 12px; }
  html main:has(#ex-depart) #simulateur > .rounded-card { flex: 1; min-width: 0; }
  html main:has(#ex-depart) #simulateur h2 { font-size: 18px; line-height: 24px; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .vk-ex-games { grid-column: 1; grid-row: 3; display: flex; align-self: start; flex-direction: column; margin-top: 12px; }
  html main:has(#ex-depart) > section:nth-of-type(1) .vk-ex-list { display: flex; flex-direction: column; row-gap: 12px; }
  html main:has(#ex-depart) > section:nth-of-type(1) .vk-ex-list li { gap: 12px; font-size: 13px; line-height: 18px; }
  html main:has(#ex-depart) > section:nth-of-type(1) .vk-ex-list li + li { margin-top: 0; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .vk-ex-games > :not(ul) { text-wrap: balance; }
  html main:has(#ex-depart) > section:nth-of-type(1) .vk-ex-list img { width: 96px; height: 54px; }
}
@media (min-width: 1200px) {
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk { grid-template-columns: 400px minmax(0, 1fr); column-gap: 32px; }
  html main:has(#ex-depart) > section:nth-of-type(1) .vk-ex-list img { width: 112px; height: 64px; }
}

/* Full-width bands of lavender and white, and a different line where each section meets the next: its own mix, not the sell page's. Decoration only, it takes no room and can't be clicked */
html main:has(#ex-depart) { --seam-top: -32px; --seam-height: 84px; background: #fff; overflow-x: clip; }
html main:has(#ex-depart) > section:nth-of-type(1),
html main:has(#ex-depart) > section:nth-of-type(3),
html main:has(#ex-depart) > section:nth-of-type(5) { background: #f4f2fc; }
html main:has(#ex-depart) > section:nth-of-type(1) { overflow: visible; }
html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk { padding-bottom: 32px; }
html main:has(#ex-depart) > section:nth-of-type(2),
html main:has(#ex-depart) > section:nth-of-type(4) { padding-top: 40px; padding-bottom: 40px; }
html main:has(#ex-depart) > section:nth-of-type(3) > .container-vk,
html main:has(#ex-depart) > section:nth-of-type(5) > .container-vk { padding-top: 32px; padding-bottom: 32px; }
html main:has(#ex-depart) > section:nth-of-type(6) { padding: 40px 16px; background: #fff; }

html main:has(#ex-depart) > section:nth-of-type(n+2):nth-of-type(-n+6) { position: relative; }
html main:has(#ex-depart) > section:is(:nth-of-type(1), :nth-of-type(3), :nth-of-type(4), :nth-of-type(5), :nth-of-type(6))::before { content: ""; position: absolute; left: calc(50% - 50vw); width: 100vw; height: var(--seam-height); pointer-events: none; background-repeat: no-repeat; }
html main:has(#ex-depart) > section:nth-of-type(n+3)::before { top: var(--seam-top); z-index: 1; }

/* Form to steps: only the long trail. Painted first, so the form's open lists stay on top */
html main:has(#ex-depart) > section:nth-of-type(1)::before { top: calc(100% + var(--seam-top)); z-index: 0; background-image: url(/_next/static/vk4/abe4e9739f/seam-trail-b.svg); background-size: 300px 63px; background-position: center 10px; }
/* Steps to reasons: the tiles and the drawing */
html main:has(#ex-depart) > section:nth-of-type(3)::before { background-image: url(/_next/static/vk4/abe4e9739f/ill-echange.svg), url(/_next/static/vk4/abe4e9739f/seam-tiles-white.svg); background-size: 64px 64px, 1440px 45px; background-position: right 16px top 0, calc(50% + 40px) 23px; }
/* Reasons to the long text: only the tiles */
html main:has(#ex-depart) > section:nth-of-type(4)::before { background-image: url(/_next/static/vk4/abe4e9739f/seam-tiles-lav.svg); background-size: 1440px 45px; background-position: calc(50% - 40px) 23px; }
/* The long text to questions: only the drawing */
html main:has(#ex-depart) > section:nth-of-type(5)::before { background-image: url(/_next/static/vk4/abe4e9739f/ill-agent.svg); background-size: 64px 64px; background-position: right 16px top 0; }
/* Questions to the last call: the trail and the drawing */
html main:has(#ex-depart) > section:nth-of-type(6)::before { background-image: url(/_next/static/vk4/abe4e9739f/ill-pieces.svg), url(/_next/static/vk4/abe4e9739f/seam-trail-a.svg); background-size: 64px 64px, 200px 42px; background-position: right 16px top 0, right 84px top 11px; }

@media (min-width: 768px) {
  html main:has(#ex-depart) { --seam-top: -56px; --seam-height: 136px; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk { padding-bottom: 64px; }
  html main:has(#ex-depart) > section:nth-of-type(2),
  html main:has(#ex-depart) > section:nth-of-type(4) { padding-top: 64px; padding-bottom: 64px; }
  html main:has(#ex-depart) > section:nth-of-type(3) > .container-vk,
  html main:has(#ex-depart) > section:nth-of-type(5) > .container-vk { padding-top: 64px; padding-bottom: 64px; }
  html main:has(#ex-depart) > section:nth-of-type(6) { padding: 64px 24px; }
  html main:has(#ex-depart) > section:nth-of-type(1)::before { background-image: url(/_next/static/vk4/abe4e9739f/seam-trail-long.svg); background-size: calc(100% - 96px) auto; background-position: center 20px; }
  html main:has(#ex-depart) > section:nth-of-type(3)::before { background-size: 96px 96px, 2400px 75px; background-position: right 48px top 8px, calc(50% + 200px) 41px; }
  html main:has(#ex-depart) > section:nth-of-type(4)::before { background-size: 2400px 75px; background-position: calc(50% - 240px) 41px; }
  html main:has(#ex-depart) > section:nth-of-type(5)::before { background-size: 96px 96px; background-position: right 48px top 8px; }
  html main:has(#ex-depart) > section:nth-of-type(6)::before { background-size: 96px 96px, 360px 75px; background-position: right 48px top 8px, right 148px top 18px; }
}

@media (min-width: 1200px) {
  html main:has(#ex-depart) > section:nth-of-type(1)::before { background-size: 1100px 96px; }
  html main:has(#ex-depart) > section:nth-of-type(3)::before { background-position: left calc(50% + 300px) top 8px, calc(50% + 200px) 41px; }
  html main:has(#ex-depart) > section:nth-of-type(5)::before { background-position: left calc(50% + 504px) top 8px; }
  html main:has(#ex-depart) > section:nth-of-type(6)::before { background-size: 96px 96px, 460px 96px; background-position: left calc(50% + 504px) top 8px, left calc(50% + 234px) top 8px; }
}

/* The top, the same as the sell page: a navy band joined to the header holds the title, the violet form sits across it */
html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding-top: 12px; }
html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid { display: contents; }
html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk::before { content: ""; display: block; position: relative; z-index: 0; grid-column: 1 / -1; grid-row: 1 / span 2; margin: -12px calc((100% - 100vw) / 2) 0; pointer-events: none; background: url(/_next/static/vk4/abe4e9739f/seam-tiles-navy.svg) center bottom -8px / 1440px 45px repeat-x, #17143f; }
html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > nav { position: relative; z-index: 1; grid-column: 1; grid-row: 1; }
html main:has(#ex-depart) > section:nth-of-type(1) nav, html main:has(#ex-depart) > section:nth-of-type(1) nav a, html main:has(#ex-depart) > section:nth-of-type(1) nav > :last-child, html main:has(#ex-depart) > section:nth-of-type(1) nav > span:not(:last-child) { color: #c9c7e6; }
html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) { position: relative; z-index: 1; grid-column: 1; grid-row: 2; margin-top: 10px; padding-bottom: 44px; background: url(/_next/static/vk4/abe4e9739f/ill-echange-nuit.svg) left top / 56px 56px no-repeat; }
html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) > .eyebrow { order: 0; flex: 1 1 100%; padding-left: 68px; color: #f2b84b; font-size: 12px; line-height: 16px; }
html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) > h1 { order: 1; flex: 1 1 100%; margin: 0; padding-left: 68px; color: #fff; font-size: 26px; line-height: 32px; }
html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) > p { order: 3; margin-top: 10px; color: #d9d7ef; font-size: 14px; line-height: 21px; }
html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) > p a { color: #f2b84b; }
html main:has(#ex-depart) > section:nth-of-type(1) ul:not(.vk-ex-list) { color: #d9d7ef; }
html main:has(#ex-depart) > section:nth-of-type(1) ul:not(.vk-ex-list) svg { color: #f2b84b; }
html main:has(#ex-depart) #simulateur { position: relative; z-index: 2; grid-column: 1; grid-row: 3; margin-top: 16px; }
html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .vk-ex-games { position: relative; z-index: 1; grid-column: 1; grid-row: 4; margin-top: 24px; }

/* The form: the logo's violet, navy edge and hard shadow */
html main:has(#ex-depart) #simulateur > .rounded-card { display: flex; flex-direction: column; padding: 17px; border: 3px solid #17143f; background: #6c67de; box-shadow: -10px 10px 0 #17143f; }
html main:has(#ex-depart) #simulateur .pill { padding: 2px 8px; border-radius: 4px; background: #17143f; color: #f2b84b; }
html main:has(#ex-depart) #simulateur > .rounded-card > p, html main:has(#ex-depart) #simulateur .label-vk { color: #fff; }
html main:has(#ex-depart) #simulateur form > .grid:has(#ex-depart)::before, html main:has(#ex-depart) #simulateur form > .grid:has(#ex-arrivee)::before { border-top-color: rgba(255, 255, 255, .32); }

/* Fields */
html main:has(#ex-depart) #simulateur .input-vk { border-color: #fff; background: #fff; color: #17143f; }
html main:has(#ex-depart) #simulateur .input-vk::placeholder, html main:has(#ex-depart) #simulateur button.input-vk > .text-muted, html main:has(#ex-depart) #simulateur button.input-vk > svg { color: #6f6c92; }
html main:has(#ex-depart) #simulateur button.input-vk > span:not(.text-muted) { color: #17143f; }
html main:has(#ex-depart) #simulateur .input-vk:hover:not(:disabled) { border-color: #17143f; }
html main:has(#ex-depart) #simulateur .input-vk:focus, html main:has(#ex-depart) #simulateur .input-vk[aria-expanded="true"] { border-color: #17143f; box-shadow: 0 0 0 2px #17143f; }
html main:has(#ex-depart) #simulateur .input-vk:disabled { border-color: #d8d6f7; background: #d8d6f7; color: #5f5d78; }
html main:has(#ex-depart) #simulateur .input-vk:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset; -webkit-text-fill-color: #17143f; }
html main:has(#ex-depart) #simulateur .input-vk:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 40px #fff inset, 0 0 0 2px #17143f; }

/* Lists that open */
html main:has(#ex-depart) #simulateur .absolute:has(> [role="listbox"]) { border-color: #17143f; background: #fff; }
html main:has(#ex-depart) #simulateur [role="listbox"] [role="option"] > button { color: #17143f; }
html main:has(#ex-depart) #simulateur [role="listbox"] [role="option"] > button:hover,
html main:has(#ex-depart) #simulateur [role="listbox"] [role="option"][aria-selected="true"] > button { background: #eeedfb; color: #17143f; }

/* Hints, rate and result */
html main:has(#ex-depart) #simulateur form div:has(> #ex-qte-payer) > p.text-muted { color: #fff; }
html main:has(#ex-depart) #simulateur form div:has(> #ex-qte-payer) > p.text-red-600 { color: #fff; font-weight: 700; }
html main:has(#ex-depart) #simulateur form > .bg-mint-soft .text-muted, html main:has(#ex-depart) #simulateur form > .bg-mint-soft .text-mint-dark { color: #fff; }

/* Two fields, then the character on its own line, which is also the order the keyboard's next key follows. The long hints fit */
html main:has(#ex-depart) #simulateur form > div:has(> #ex-donneur) { order: 24; }
html main:has(#ex-depart) #simulateur form > div:has(> #ex-recepteur) { order: 34; }
@media (min-width: 640px) {
  html main:has(#ex-depart) #simulateur form > .grid > div { grid-column: span 3; }
  html main:has(#ex-depart) #simulateur form > div:has(> #ex-donneur), html main:has(#ex-depart) #simulateur form > div:has(> #ex-recepteur) { grid-column: 1 / -1; }
}

/* From laptops: the same columns as the sell page, and the form the same size */
@media (min-width: 1024px) {
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 24px; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > nav { grid-column: 1; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) { margin-top: 12px; background-size: 72px 72px; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) > :is(.eyebrow, h1) { padding-left: 84px; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) > h1 { font-size: 26px; line-height: 32px; }
  html main:has(#ex-depart) #simulateur { grid-column: 2; grid-row: 1 / span 3; margin-top: 6px; }
  html main:has(#ex-depart) #simulateur > .rounded-card { min-height: 694px; padding: 21px; }
  html main:has(#ex-depart) #simulateur h2 { font-size: 20px; line-height: 28px; }
  html main:has(#ex-depart) #simulateur form { flex: 1; align-content: space-between; row-gap: 18px; margin-top: 14px; }
  html main:has(#ex-depart) #simulateur .input-vk { height: 46px; padding-left: 10px; padding-right: 10px; }
  html main:has(#ex-depart) #simulateur .input-vk::placeholder, html main:has(#ex-depart) #simulateur button.input-vk > .text-muted { font-size: 13px; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .vk-ex-games { grid-column: 1; grid-row: 3; margin-top: 16px; }
}
@media (min-width: 1200px) {
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk { grid-template-columns: minmax(0, .76fr) minmax(0, 1fr); column-gap: 32px; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) > :is(.eyebrow, h1) { padding-left: 88px; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) > h1 { font-size: 30px; line-height: 38px; }
  html main:has(#ex-depart) #simulateur > .rounded-card { min-height: 710px; }
  html:is([data-vk-lang="en"], [data-vk-lang="es"], [data-vk-lang="pt"]) main:has(#ex-depart) #simulateur > .rounded-card { min-height: 687px; }
}

/* The other languages' forms are a little shorter on the sell page, so the two forms stay the same size */
@media (min-width: 1024px) {
  html:is([data-vk-lang="en"], [data-vk-lang="es"], [data-vk-lang="pt"]) main:has(#ex-depart) #simulateur form { row-gap: 16px; }
}

/* Small laptops: the gold tile stays clear of the form. Phones: the title and its tag keep apart */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk::before { background-position: left -420px bottom -8px, 0 0; }
}
html main:has(#ex-depart) #simulateur > .rounded-card > .flex { gap: 8px; }
@media (max-width: 639.98px) {
  html main:has(#ex-depart) #simulateur h2 { font-size: 18px; line-height: 24px; }
  html main:has(#ex-depart) #simulateur .pill { flex: none; font-size: 11px; }
}

/* The form floats above the page, the same as the sell form: a dark violet edge, a lit top and a soft shadow */
html main:has(#ex-depart) #simulateur > .rounded-card { border-color: #4f49ad; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 8px 14px rgba(10, 8, 40, .35), 0 34px 60px -8px rgba(10, 8, 40, .7); }
@media (min-width: 1024px) {
  html main:has(#ex-depart) #simulateur { margin-top: 2px; }
}
@media (min-width: 1200px) {
  html main:has(#ex-depart) #simulateur > .rounded-card { min-height: 714px; }
  html:is([data-vk-lang="en"], [data-vk-lang="es"], [data-vk-lang="pt"]) main:has(#ex-depart) #simulateur > .rounded-card { min-height: 688px; }
}

/* A test, exchange page only: a Dofus Iop and a Wakfu Iop on their planets throw coins to each other. Below the title's words and behind the form, it can't be clicked, and it stays away for people who ask for less motion */
html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk::after { content: ""; display: block; position: relative; z-index: 0; grid-column: 1 / -1; grid-row: 1 / span 2; align-self: end; height: 66px; margin: 0 calc((100% - 100vw) / 2); pointer-events: none; background: url(/_next/static/vk4/abe4e9739f/worlds-small.svg) left bottom no-repeat; }
@media (min-width: 768px) {
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk::after { background-position: left 24px bottom; }
}
@media (min-width: 1200px) {
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk::after { background-image: url(/_next/static/vk4/abe4e9739f/worlds.svg); background-position: left calc(50vw - 576px) bottom; }
}
@media (prefers-reduced-motion: reduce) {
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk::after { display: none; }
}

/* Even spacing at the top, the same as the sell page: 24px under the header on both sides, 24px from the band to the list */
@media (min-width: 1024px) {
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk { padding-top: 24px; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk::before { margin-top: -24px; }
  html main:has(#ex-depart) #simulateur { margin-top: 0; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .vk-ex-games { margin-top: 24px; }
}
/* The game pictures give up a little more room, so the form stays the same size as the sell form */
@media (min-width: 1200px) {
  html main:has(#ex-depart) > section:nth-of-type(1) .vk-ex-list li img { width: 90px; height: 50px; }
  html main:has(#ex-depart) > section:nth-of-type(1) .vk-ex-games > .vk-trust .vk-trust-tile { width: 90px; }
  html main:has(#ex-depart) #simulateur > .rounded-card { min-height: 713px; }
  html[data-vk-lang="en"] main:has(#ex-depart) #simulateur > .rounded-card { min-height: 688px; }
  html:is([data-vk-lang="es"], [data-vk-lang="pt"]) main:has(#ex-depart) #simulateur > .rounded-card { min-height: 707px; }
}

/* The same 24px from the header to the breadcrumb, to the title, to the description */
@media (min-width: 1024px) {
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) { margin-top: 24px; padding-bottom: 32px; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) > p { margin-top: 24px; }
}
@media (min-width: 1200px) {
  html main:has(#ex-depart) #simulateur > .rounded-card { min-height: 727px; }
  html[data-vk-lang="en"] main:has(#ex-depart) #simulateur > .rounded-card { min-height: 702px; }
  html:is([data-vk-lang="es"], [data-vk-lang="pt"]) main:has(#ex-depart) #simulateur > .rounded-card { min-height: 721px; }
}

/* The small Iops stand on their planets clear of the words, with a little more room under the description. The game pictures make up for it */
@media (min-width: 1024px) {
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) { padding-bottom: 44px; }
}
@media (min-width: 1200px) {
  html main:has(#ex-depart) > section:nth-of-type(1) .vk-ex-list li img { width: 84px; height: 47px; }
  html main:has(#ex-depart) > section:nth-of-type(1) .vk-ex-games > .vk-trust .vk-trust-tile { width: 84px; }
}

/* The navy band ends where the sell page's does. Its small gold title moves up beside the breadcrumb, and the Iops stand in the tile strip, the same size as the sell page's runners. The words can still make it taller, so they never run out of the band */
html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) { align-content: flex-start; padding-bottom: 66px; }
html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) > .eyebrow { position: absolute; top: -31px; right: 0; padding-left: 0; line-height: 21px; white-space: nowrap; }
@media (max-width: 639.98px) {
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) { padding-bottom: 44px; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk::after { background-position: center bottom; }
}
@media (min-width: 1024px) {
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) { min-height: 212px; padding-bottom: 12px; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) > .eyebrow { top: -45px; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) > p { font-size: 13.5px; line-height: 20px; text-wrap: wrap; }
}
@media (min-width: 1200px) {
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) { min-height: 195px; padding-bottom: 44px; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) > p { margin-top: 15px; margin-right: -12px; }
  /* The shorter band leaves room for the game pictures */
  html main:has(#ex-depart) > section:nth-of-type(1) .vk-ex-list li img { width: 96px; height: 54px; }
  html main:has(#ex-depart) > section:nth-of-type(1) .vk-ex-games > .vk-trust .vk-trust-tile { width: 96px; }
}
/* Spanish words are too long for that row on the narrowest screens, so the gold title stays above the heading there */
@media (max-width: 639.98px), (min-width: 1024px) and (max-width: 1199.98px) {
  html[data-vk-lang="es"] main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .grid > div:not(#simulateur) > .eyebrow { position: static; padding-left: 68px; line-height: 16px; }
}
/* Small laptops: the words fill the band right down to the tiles, so the Iops stay away instead of standing on them */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk::after { display: none; }
}

/* Exchange form with the dark mode's look, in light mode too: violet title bar, dark box, flat fields */
html main:has(#ex-depart) #simulateur > .rounded-card { border-color: #6c67de; background: #262160; box-shadow: 0 8px 14px rgba(10, 8, 40, .35), 0 34px 60px -8px rgba(10, 8, 40, .7); }
html main:has(#ex-depart) #simulateur h2 { color: #fff; }
@media (min-width: 1024px) {
  html main:has(#ex-depart) #simulateur > .rounded-card > .flex:first-child { margin: -21px -21px 0; padding: 10px 21px 11px; border-radius: 7px 7px 0 0; background: #6c67de; }
  html main:has(#ex-depart) #simulateur > .rounded-card > p { margin-top: 10px; }
}
html main:has(#ex-depart) #simulateur .input-vk { border-color: transparent; background: #17143f; color: #fff; }
html main:has(#ex-depart) #simulateur .input-vk::placeholder, html main:has(#ex-depart) #simulateur button.input-vk > .text-muted, html main:has(#ex-depart) #simulateur button.input-vk > svg { color: #a9a6d0; }
html main:has(#ex-depart) #simulateur button.input-vk > span:not(.text-muted) { color: #fff; }
html main:has(#ex-depart) #simulateur .input-vk:hover:not(:disabled) { border-color: #6c67de; }
html main:has(#ex-depart) #simulateur .input-vk:focus, html main:has(#ex-depart) #simulateur .input-vk[aria-expanded="true"] { border-color: #f2b84b; box-shadow: 0 0 0 1px #f2b84b; }
html main:has(#ex-depart) #simulateur .input-vk:disabled { border-color: transparent; background: rgba(255, 255, 255, .08); color: #c9c7e6; }
html main:has(#ex-depart) #simulateur .input-vk:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #17143f inset; -webkit-text-fill-color: #fff; }
html main:has(#ex-depart) #simulateur .input-vk:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 40px #17143f inset, 0 0 0 1px #f2b84b; }
html main:has(#ex-depart) #simulateur .absolute:has(> [role="listbox"]) { border-color: #4f49ad; background: #262160; }
html main:has(#ex-depart) #simulateur [role="listbox"] [role="option"] > button { color: #fff; }
html main:has(#ex-depart) #simulateur [role="listbox"] [role="option"] > button:hover,
html main:has(#ex-depart) #simulateur [role="listbox"] [role="option"][aria-selected="true"] > button { background: #17143f; color: #fff; }

/* vk-blocks-home.css */
/* Home page: its own layout and colours stay. Only the old icons change, for our own drawings. */
html main:has(> #faq) > section .card-vk > span.grid,
html main:has(> #faq) > section:nth-of-type(3) .relative > span.grid,
html main:has(> #faq) > section:nth-of-type(5) .max-w-3xl > span.grid { display: block; width: 56px; height: 56px; border-radius: 0; background: none center / contain no-repeat; color: transparent; font-size: 0; box-shadow: none; }
html main:has(> #faq) > section .card-vk > span.grid svg,
html main:has(> #faq) > section:nth-of-type(5) .max-w-3xl > span.grid svg { display: none; }

/* The four reasons under the top */
html main:has(> #faq) > section:nth-of-type(1) .card-vk > span.grid { margin: 0 auto; }
html main:has(> #faq) > section:nth-of-type(1) .card-vk:nth-child(1) > span.grid { background-image: url(/_next/static/vk4/abe4e9739f/ill-prix.svg); }
html main:has(> #faq) > section:nth-of-type(1) .card-vk:nth-child(2) > span.grid { background-image: url(/_next/static/vk4/abe4e9739f/ill-instant.svg); }
html main:has(> #faq) > section:nth-of-type(1) .card-vk:nth-child(3) > span.grid { background-image: url(/_next/static/vk4/abe4e9739f/ill-avis.svg); }
html main:has(> #faq) > section:nth-of-type(1) .card-vk:nth-child(4) > span.grid { background-image: url(/_next/static/vk4/abe4e9739f/ill-casque.svg); }

/* The three services */
html main:has(> #faq) > section:nth-of-type(2) .card-vk > span.grid { margin: 0; }
html main:has(> #faq) > section:nth-of-type(2) .card-vk:nth-child(1) > span.grid { background-image: url(/_next/static/vk4/abe4e9739f/ill-pieces.svg); }
html main:has(> #faq) > section:nth-of-type(2) .card-vk:nth-child(2) > span.grid { background-image: url(/_next/static/vk4/abe4e9739f/ill-echange.svg); }
html main:has(> #faq) > section:nth-of-type(2) .card-vk:nth-child(3) > span.grid { background-image: url(/_next/static/vk4/abe4e9739f/ill-compte.svg); }

/* The steps: the drawing replaces the number's circle, the number goes before the heading */
html main:has(> #faq) > section:nth-of-type(3) .card-vk > .grid { counter-reset: step; }
html main:has(> #faq) > section:nth-of-type(3) .card-vk > .grid > .relative { counter-increment: step; }
html main:has(> #faq) > section:nth-of-type(3) .relative > span.grid { margin: 0 auto; }
html main:has(> #faq) > section:nth-of-type(3) .relative:nth-child(1) > span.grid { background-image: url(/_next/static/vk4/abe4e9739f/ill-devis.svg); }
html main:has(> #faq) > section:nth-of-type(3) .relative:nth-child(2) > span.grid { background-image: url(/_next/static/vk4/abe4e9739f/ill-sac.svg); }
html main:has(> #faq) > section:nth-of-type(3) .relative:nth-child(3) > span.grid { background-image: url(/_next/static/vk4/abe4e9739f/ill-portefeuille.svg); }
html main:has(> #faq) > section:nth-of-type(3) .relative > h3::before { content: counter(step) ". "; color: #5752c9; }

/* Payment abroad, in short, and the last call */
html main:has(> #faq) > section:nth-of-type(4) > .rounded-card > .flex::before { content: ""; flex: none; width: 72px; height: 72px; background: url(/_next/static/vk4/abe4e9739f/ill-monde.svg) center / contain no-repeat; }
@media (min-width: 1024px) {
  html main:has(> #faq) > section:nth-of-type(4) > .rounded-card > .flex { justify-content: flex-start; }
  html main:has(> #faq) > section:nth-of-type(4) > .rounded-card > .flex > a { margin-left: auto; }
}
html main:has(> #faq) > section:nth-of-type(5) .max-w-3xl > span.grid { margin: 0 auto 16px; background-image: url(/_next/static/vk4/abe4e9739f/ill-bouclier.svg); }
html main:has(> #faq) > section:nth-of-type(7) > .rounded-card::before { content: ""; display: block; width: 72px; height: 72px; margin: 0 auto 12px; background: url(/_next/static/vk4/abe4e9739f/ill-sac-nuit.svg) center / contain no-repeat; }

/* The footer's payment logos: the same ones as the sell page's list, in the same order. No Wise, one USDT / USDC coin, Pix added */
html footer img[src*="pay-"] { width: 65px; object-fit: contain; }
html footer img[src*="pay-paypal"] { order: 1; content: url(/_next/static/vk4/abe4e9739f/logo-paypal.png); }
html footer img[src*="pay-sepa"] { order: 2; content: url(/_next/static/vk4/abe4e9739f/logo-sepa.png); }
html footer img[src*="pay-bitcoin"] { order: 3; content: url(/_next/static/vk4/abe4e9739f/logo-btc.svg); }
html footer img[src*="pay-tether"] { order: 4; content: url(/_next/static/vk4/abe4e9739f/logo-usdt-usdc.png); }
html footer img[src*="pay-binance"] { order: 5; padding: 0; background: #000; content: url(/_next/static/vk4/abe4e9739f/logo-binance-black.png); }
html footer img[src*="pay-cih"] { order: 7; content: url(/_next/static/vk4/abe4e9739f/logo-cih.png); }
html footer img[src*="pay-attijari"] { order: 8; content: url(/_next/static/vk4/abe4e9739f/logo-attijari.png); }

/* The first section always fills the screen, nothing below it shows until you scroll. The header is 65px. On low screens its sizes shrink with the screen's height */
html main:has(> #faq) > section:nth-of-type(1) { display: flex; flex-direction: column; min-height: calc(100vh - 65px); min-height: calc(100svh - 65px); }
html main:has(> #faq) > section:nth-of-type(1) > .container-vk { flex: none; width: 100%; }
html main:has(> #faq) > section:nth-of-type(1) > .container-vk.grid { flex: 1 1 auto; align-content: center; padding-top: clamp(12px, 3.4vh, 48px); padding-bottom: clamp(12px, 3.4vh, 48px); }
html main:has(> #faq) > section:nth-of-type(1) .pill-dark { line-height: 16px; }
html main:has(> #faq) > section:nth-of-type(1) h1 { margin-top: clamp(4px, 1.4vh, 20px); font-size: clamp(24px, min(7.2vw, 4.2vh), 34px); line-height: 1.12; }
html main:has(> #faq) > section:nth-of-type(1) h1 + p { margin-top: clamp(6px, 1.4vh, 20px); font-size: clamp(13px, 2vh, 15px); line-height: 1.5; }
html main:has(> #faq) > section:nth-of-type(1) h1 ~ .mt-7.flex-col { gap: clamp(6px, 1.2vh, 12px); margin-top: clamp(10px, 2.2vh, 28px); }
html main:has(> #faq) > section:nth-of-type(1) h1 ~ .mt-7.flex-col > a { min-height: clamp(38px, 5.6vh, 46px); padding-top: 0; padding-bottom: 0; }
html main:has(> #faq) > section:nth-of-type(1) h1 ~ ul { row-gap: clamp(4px, 1.2vh, 16px); margin-top: clamp(10px, 2vh, 28px); font-size: 13px; line-height: 18px; }

@media (min-width: 640px) {
  html main:has(> #faq) > section:nth-of-type(1) h1 { font-size: clamp(30px, 5.4vh, 48px); }
}

/* Upright tablets have room to spare: the four cards show there too, two by two */
@media (min-width: 640px) and (max-width: 1023.98px) and (min-height: 800px) {
  html main:has(> #faq) > section:nth-of-type(1) h1 ~ ul { display: none; }
  html main:has(> #faq) > section:nth-of-type(1) h1 ~ .mt-7.hidden { display: flex; justify-content: center; margin-top: 20px; }
  html main:has(> #faq) > section:nth-of-type(1) > .container-vk.hidden { display: block; padding-bottom: 32px; }
  html main:has(> #faq) > section:nth-of-type(1) > .container-vk.hidden > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  html main:has(> #faq) > section:nth-of-type(1) > .container-vk.hidden .card-vk > span.grid { margin-bottom: 12px; }
  html main:has(> #faq) > section:nth-of-type(1) > .container-vk.hidden .card-vk > h3 { margin-top: 0; }
}

@media (min-width: 1024px) {
  html main:has(> #faq) > section:nth-of-type(1) > .container-vk.hidden { padding-bottom: clamp(12px, 3.4vh, 64px); }
  html main:has(> #faq) > section:nth-of-type(1) h1 { font-size: clamp(30px, min(6.6vh, 4.1vw), 50px); line-height: 1.06; }
  html main:has(> #faq) > section:nth-of-type(1) h1 + p { font-size: clamp(13px, 2.1vh, 16px); }
  html main:has(> #faq) > section:nth-of-type(1) h1 ~ .mt-7.hidden { margin-top: clamp(8px, 2vh, 28px); font-size: clamp(12px, 1.8vh, 14px); }

  /* The example card */
  html main:has(> #faq) > section:nth-of-type(1) .max-w-sm .card-vk { padding: clamp(12px, 2.8vh, 25px); }
  html main:has(> #faq) > section:nth-of-type(1) .max-w-sm .card-vk > .flex:first-child img { width: clamp(28px, 5vh, 40px); height: clamp(28px, 5vh, 40px); }
  html main:has(> #faq) > section:nth-of-type(1) .max-w-sm .bg-canvas { padding: clamp(6px, 1.6vh, 16px) clamp(10px, 2vh, 16px); }
  html main:has(> #faq) > section:nth-of-type(1) .max-w-sm .card-vk > .bg-canvas { margin-top: clamp(8px, 2vh, 20px); }
  html main:has(> #faq) > section:nth-of-type(1) .max-w-sm .card-vk > .bg-canvas > .my-3 { margin-top: clamp(2px, 1vh, 12px); margin-bottom: clamp(2px, 1vh, 12px); }
  html main:has(> #faq) > section:nth-of-type(1) .max-w-sm .card-vk > .bg-canvas > .mt-3 { margin-top: clamp(4px, 1.2vh, 12px); }
  html main:has(> #faq) > section:nth-of-type(1) .max-w-sm .card-vk > .grid { margin-top: clamp(6px, 1.4vh, 12px); gap: clamp(6px, 1.4vh, 12px); }

  /* The four cards */
  html main:has(> #faq) > section:nth-of-type(1) > .container-vk.hidden > .grid { gap: clamp(10px, 2vh, 20px); }
  html main:has(> #faq) > section:nth-of-type(1) > .container-vk.hidden .card-vk { padding: clamp(10px, 2.4vh, 25px) clamp(12px, 1.6vw, 25px); }
  html main:has(> #faq) > section:nth-of-type(1) > .container-vk.hidden .card-vk > span.grid { width: clamp(30px, 6.6vh, 56px); height: clamp(30px, 6.6vh, 56px); }
  html main:has(> #faq) > section:nth-of-type(1) > .container-vk.hidden .card-vk > h3 { margin-top: clamp(4px, 1.4vh, 16px); font-size: clamp(14px, 2.1vh, 16px); line-height: 1.3; }
  html main:has(> #faq) > section:nth-of-type(1) > .container-vk.hidden .card-vk > p { margin-top: clamp(2px, .8vh, 8px); font-size: clamp(12px, 1.8vh, 14px); line-height: 1.45; }
}

/* Account page: its own layout stays. It has two sections, so one line between them: the tiles and our drawing. Decoration only, it takes no room and can't be clicked */
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) { overflow-x: clip; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(2) { position: relative; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(2)::before { content: ""; position: absolute; top: -32px; left: 0; width: 100%; height: 84px; pointer-events: none; z-index: 1; background: url(/_next/static/vk4/abe4e9739f/ill-compte.svg) right 16px top 0 / 64px 64px no-repeat, url(/_next/static/vk4/abe4e9739f/seam-tiles-white.svg) calc(50% + 40px) 23px / 1440px 45px no-repeat; }
@media (min-width: 768px) {
  html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(2)::before { top: -56px; height: 136px; background-size: 96px 96px, 2400px 75px; background-position: right 48px top 8px, calc(50% - 120px) 41px; }
  html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(2) > .container-vk { padding-top: 64px; }
  html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(1) > .container-vk { padding-bottom: 64px; }
}
@media (min-width: 1200px) {
  html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(2)::before { background-position: left calc(50% + 504px) top 8px, calc(50% - 120px) 41px; }
}

/* Home page: a different line where each section meets the next, its own mix. Decoration only, it takes no room and can't be clicked */
html main:has(> #faq) { overflow-x: clip; }
html main:has(> #faq) > section:nth-of-type(n+2) { position: relative; }
html main:has(> #faq) > section:nth-of-type(n+2):nth-of-type(-n+7)::before { content: ""; position: absolute; left: calc(50% - 50vw); width: 100vw; pointer-events: none; z-index: 0; background-repeat: no-repeat; }
html main:has(> #faq) > section:nth-of-type(n+2) > * { position: relative; z-index: 1; }
/* Hero to services: navy and violet tiles hanging from the hero's edge */
html main:has(> #faq) > section:nth-of-type(2)::before { top: 0; height: 45px; background: url(/_next/static/vk4/abe4e9739f/seam-tiles-ink.svg) center top / 1440px 45px repeat-x; }
/* Services to steps: the sack only */
html main:has(> #faq) > section:nth-of-type(3)::before { top: -28px; height: 64px; background-image: url(/_next/static/vk4/abe4e9739f/ill-sac.svg); background-size: 56px 56px; background-position: right 12px top 0; }
/* Steps to the purple block: the coin trail only */
html main:has(> #faq) > section:nth-of-type(4) { padding-top: 72px; }
html main:has(> #faq) > section:nth-of-type(4)::before { top: 4px; height: 63px; background-image: url(/_next/static/vk4/abe4e9739f/seam-trail-a.svg); background-size: 300px 63px; background-position: center top; }
/* Purple block to in brief: lavender tiles climbing out of the band */
html main:has(> #faq) > section:nth-of-type(5)::before { top: -44px; height: 45px; transform: scaleY(-1); background: url(/_next/static/vk4/abe4e9739f/seam-tiles-lav.svg) center top / 1440px 45px repeat-x; }
/* In brief to questions: the agent and a short trail */
html main:has(> #faq) > section:nth-of-type(6)::before { top: -28px; height: 64px; background-image: url(/_next/static/vk4/abe4e9739f/ill-agent.svg), url(/_next/static/vk4/abe4e9739f/seam-trail-b.svg); background-size: 56px 56px, 200px 42px; background-position: left 12px top 0, left 72px top 8px; }
/* Questions to the last call: a short trail only */
html main:has(> #faq) > section:nth-of-type(7) { padding-top: 64px; }
html main:has(> #faq) > section:nth-of-type(7)::before { top: 4px; height: 50px; background-image: url(/_next/static/vk4/abe4e9739f/seam-trail-a.svg); background-size: 240px 50px; background-position: center top; }

@media (min-width: 768px) {
  html main:has(> #faq) > section:nth-of-type(3)::before { top: -44px; height: 96px; background-size: 88px 88px; background-position: right 48px top 0; }
  html main:has(> #faq) > section:nth-of-type(4) { padding-top: 96px; }
  html main:has(> #faq) > section:nth-of-type(4)::before { top: -8px; height: 96px; background-image: url(/_next/static/vk4/abe4e9739f/seam-trail-long.svg); background-size: min(1100px, 92vw) 96px; }
  html main:has(> #faq) > section:nth-of-type(6)::before { top: -36px; height: 96px; background-size: 88px 88px, 460px 96px; background-position: left 32px top 0, left 132px top 8px; }
  html main:has(> #faq) > section:nth-of-type(7) { padding-top: 88px; }
  html main:has(> #faq) > section:nth-of-type(7)::before { top: -8px; height: 96px; background-size: 460px 96px; background-position: left calc(50% + 40px) top 0; }
}
@media (min-width: 1200px) {
  html main:has(> #faq) > section:nth-of-type(3)::before { background-position: left calc(50% + 500px) top 0; }
  html main:has(> #faq) > section:nth-of-type(6)::before { background-position: left calc(50% - 500px) top 0, left calc(50% - 400px) top 8px; }
}

/* Home page: touches of the new colours. The hero's example card and the purple block take the forms' look */
html main:has(> #faq) > section:nth-of-type(1) .max-w-sm .card-vk { border: 3px solid #17143f; background: #6c67de; box-shadow: -10px 10px 0 #37327f; }
html main:has(> #faq) > section:nth-of-type(1) .max-w-sm .card-vk > .flex:first-child * { color: #fff; }
html main:has(> #faq) > section:nth-of-type(1) .max-w-sm .card-vk .bg-canvas { background: #fff; }
html main:has(> #faq) > section:nth-of-type(1) .max-w-sm .card-vk > .grid .text-brand { color: #5752c9; }
html main:has(> #faq) > section:nth-of-type(4) > .rounded-card { border: 3px solid #17143f; background: #6c67de; box-shadow: -10px 10px 0 #17143f; }
html main:has(> #faq) > section:nth-of-type(4) .pill-dark { padding: 2px 8px; border-radius: 4px; background: #17143f; color: #f2b84b; }
html main:has(> #faq) > section:nth-of-type(4) p { color: #fff; }
html main:has(> #faq) > section:nth-of-type(7) > .rounded-card { box-shadow: -10px 10px 0 #6c67de; }

/* The main service in violet, navy edges and hard shadows on the cards, gold on the step numbers */
html main:has(> #faq) > section:nth-of-type(2) .card-vk { border: 2px solid #17143f; box-shadow: -6px 6px 0 #17143f; }
html main:has(> #faq) > section:nth-of-type(2) .card-vk:nth-child(1) { background: #6c67de; }
html main:has(> #faq) > section:nth-of-type(2) .card-vk:nth-child(1) * { color: #fff; }
html main:has(> #faq) > section:nth-of-type(3) > .card-vk { border: 2px solid #17143f; box-shadow: -6px 6px 0 #f2b84b; }
html main:has(> #faq) > section:nth-of-type(3) .relative > h3::before { color: #a8720c; }
html main:has(> #faq) > section:nth-of-type(5) .max-w-4xl { border: 2px solid #17143f; box-shadow: -6px 6px 0 #6c67de; }

/* Phones: the title under the hero's tiles keeps its distance */
@media (max-width: 767.98px) {
  html main:has(> #faq) > section:nth-of-type(2) > .container-vk { padding-top: 60px; }
}

/* Account page: the breadcrumb, with the same 24px from the header to the breadcrumb to the title to the description as the other pages */
.vk-crumb { color: #5f5d78; line-height: 21px; }
.vk-crumb a:hover { color: #5752c9; }
.vk-crumb > :last-child { color: #17143f; font-weight: 500; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(1) > .container-vk:has(> .vk-crumb) { padding-top: 16px; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(1) > .container-vk > .vk-crumb { margin-bottom: 12px; }
@media (min-width: 1024px) {
  html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(1) > .container-vk:has(> .vk-crumb) { padding-top: 24px; }
  html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(1) > .container-vk > .vk-crumb { margin-bottom: 20px; }
  html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(1) > .container-vk > h1 + p { margin-top: 24px; }
}

/* Account page: the navy band with the title, the first card in the floating violet across its edge, like the sell and exchange pages. The page keeps its own two columns */
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(1) { background: url(/_next/static/vk4/abe4e9739f/seam-tiles-navy.svg) center bottom -8px / 1440px 45px repeat-x, #17143f; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(1) > .container-vk { padding-bottom: 72px; background: url(/_next/static/vk4/abe4e9739f/ill-compte.svg) 16px 47px / 56px 56px no-repeat; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .vk-crumb, html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .vk-crumb > :last-child { color: #c9c7e6; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .vk-crumb a:hover { color: #fff; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(1) .eyebrow { display: block; padding-left: 68px; color: #f2b84b; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(1) h1 { margin-top: 4px; padding-left: 68px; color: #fff; font-size: 24px; line-height: 30px; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(1) h1 + p { margin-top: 14px; color: #d9d7ef; font-size: 14px; line-height: 21px; }

/* The two columns come up over the band's edge; the old line between the sections goes */
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(2) { position: relative; z-index: 1; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(2)::before { display: none; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(2) > .container-vk { margin-top: -28px; padding-top: 0; }

/* The first card: the violet form */
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk { border: 3px solid #4f49ad; background: #6c67de; color: #fff; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 8px 14px rgba(10, 8, 40, .35), 0 34px 60px -8px rgba(10, 8, 40, .7); }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk :is(h2, h3, p, label, .text-ink, .text-body, .text-muted) { color: #fff; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk .input-vk { border-color: #fff; background: #fff; color: #17143f; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk .input-vk :is(.text-ink, .text-body) { color: #17143f; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk .input-vk .text-muted, html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk .input-vk::placeholder { color: #6f6c92; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk .input-vk:focus { border-color: #17143f; box-shadow: 0 0 0 2px #17143f; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk [role="listbox"] * { color: #17143f; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk [role="option"] > button:hover { background: #eeedfb; }

@media (min-width: 768px) {
  html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(1) > .container-vk { padding-bottom: 88px; background-position: 24px 69px; background-size: 72px 72px; }
  html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(1) .eyebrow, html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(1) h1 { padding-left: 88px; }
  html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(1) h1 { font-size: 30px; line-height: 38px; }
  html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(1) h1 + p { margin-top: 24px; max-width: none; }
  html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(2) > .container-vk { margin-top: -40px; padding-top: 0; }
}
/* The band runs behind the cards: the next section starts over it, see-through at its top */
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(2) { margin-top: -28px; background: linear-gradient(transparent 28px, #f4f2fc 28px); }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(2) > .container-vk { margin-top: 0; padding-top: 0; }
@media (min-width: 768px) {
  html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(2) { margin-top: -40px; background: linear-gradient(transparent 40px, #f4f2fc 40px); }
  html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(2) > .container-vk { margin-top: 0; padding-top: 0; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(1) > .container-vk { background-position: 24px 49px; }
}

/* Home page, first section on laptops: the same space under the header, above the four cards and under them */
@media (min-width: 1024px) {
  html main:has(> #faq) > section:nth-of-type(1) { justify-content: space-evenly; row-gap: 12px; padding-top: 12px; padding-bottom: 12px; }
  html main:has(> #faq) > section:nth-of-type(1) > .container-vk.grid { flex: none; padding-top: 0; padding-bottom: 0; }
  html main:has(> #faq) > section:nth-of-type(1) > .container-vk.hidden { padding-bottom: 0; }
}

/* The header's second row takes 29px of the first screen, so the home page's first section gives them back */
html main:has(> #faq) > section:nth-of-type(1) { min-height: calc(100vh - 94px); min-height: calc(100svh - 94px); }

/* Home page, the four points: no boxes, straight on the navy, a gold line above each, drawings with white lines so they show */
html main:has(> #faq) > section:nth-of-type(1) > .container-vk.hidden .card-vk { padding: clamp(8px, 1.6vh, 16px) 0 0; border: 0; border-top: 3px solid #f2b84b; border-radius: 0; background: transparent; box-shadow: none; text-align: left; }
html main:has(> #faq) > section:nth-of-type(1) > .container-vk.hidden .card-vk > span.grid { width: clamp(30px, 5.4vh, 52px); height: clamp(30px, 5.4vh, 52px); margin: 0 0 clamp(4px, 1vh, 10px); }
html main:has(> #faq) > section:nth-of-type(1) > .container-vk.hidden .card-vk > h3 { margin: 0; color: #fff; font-size: clamp(14px, 1.9vh, 16px); line-height: 1.35; }
html main:has(> #faq) > section:nth-of-type(1) > .container-vk.hidden .card-vk > p { margin-top: clamp(2px, .6vh, 6px); color: #c9c7e6; font-size: clamp(12px, 1.7vh, 14px); line-height: 1.5; }
html main:has(> #faq) > section:nth-of-type(1) > .container-vk.hidden .card-vk:nth-child(1) > span.grid { background-image: url(/_next/static/vk4/abe4e9739f/ill-prix-nuit.svg); }
html main:has(> #faq) > section:nth-of-type(1) > .container-vk.hidden .card-vk:nth-child(2) > span.grid { background-image: url(/_next/static/vk4/abe4e9739f/ill-instant-nuit.svg); }
html main:has(> #faq) > section:nth-of-type(1) > .container-vk.hidden .card-vk:nth-child(3) > span.grid { background-image: url(/_next/static/vk4/abe4e9739f/ill-avis-nuit.svg); }
html main:has(> #faq) > section:nth-of-type(1) > .container-vk.hidden .card-vk:nth-child(4) > span.grid { background-image: url(/_next/static/vk4/abe4e9739f/ill-casque-nuit.svg); }
@media (min-width: 1024px) {
  html main:has(> #faq) > section:nth-of-type(1) > .container-vk.hidden > .grid { gap: 32px; }
}

/* The MoonBot strip takes the header's navy */
html.vk-mb .vk-mb-slot, html .vk-mb-slot > div { background: #17143f; }

/* Upright tablets: the same equal gaps, and room between the two rows of points */
@media (min-width: 640px) and (max-width: 1023.98px) and (min-height: 800px) {
  html main:has(> #faq) > section:nth-of-type(1) { justify-content: space-evenly; row-gap: 12px; padding-top: 12px; padding-bottom: 12px; }
  html main:has(> #faq) > section:nth-of-type(1) > .container-vk.grid { flex: none; padding-top: 0; padding-bottom: 0; }
  html main:has(> #faq) > section:nth-of-type(1) > .container-vk.hidden { padding-bottom: 0; }
  html main:has(> #faq) > section:nth-of-type(1) > .container-vk.hidden > .grid { gap: 28px 24px; }
}

/* vk-blocks-rest.css */

/* The remaining pages: the navy band with the title, joined to the header, our drawings, the same lines between sections. Each page keeps its own layout */
:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card), html main:has(> section:first-child > nav + .grid.rounded-card), html main:has(> section:first-of-type > .container-vk > nav + .rounded-card:not(.grid)), html main:has(> section:first-child > nav + h1), html main:has(> section:only-child.container-vk .card-vk), html main:has(> div > section .btn-primary[href*="connexion"])) { overflow-x: clip; }

/* Guides: procedure pages and giveaway. The white box goes, its words sit on the navy */
html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) > section:first-child { background: url(/_next/static/vk4/abe4e9739f/seam-tiles-navy.svg) center bottom -8px / 1440px 45px repeat-x, #17143f; }
html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) > section:first-child > .container-vk { padding-top: 24px; padding-bottom: 72px; }
:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) > section:first-child > .container-vk, html main:has(> section:first-child > nav + .grid.rounded-card) > section:first-child, html main:has(> section:first-of-type > .container-vk > nav + .rounded-card:not(.grid)) > section:first-of-type > .container-vk, html main:has(> section:first-child > nav + h1) > section:first-child, html main:has(> div > section .btn-primary[href*="connexion"]) section) > nav { margin-bottom: 20px; color: #c9c7e6; }
:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) > section:first-child > .container-vk, html main:has(> section:first-child > nav + .grid.rounded-card) > section:first-child, html main:has(> section:first-of-type > .container-vk > nav + .rounded-card:not(.grid)) > section:first-of-type > .container-vk, html main:has(> section:first-child > nav + h1) > section:first-child, html main:has(> div > section .btn-primary[href*="connexion"]) section) > nav :is(.text-ink, .text-muted\/70) { color: #fff; }
:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) > section:first-child > .container-vk, html main:has(> section:first-child > nav + .grid.rounded-card) > section:first-child, html main:has(> section:first-of-type > .container-vk > nav + .rounded-card:not(.grid)) > section:first-of-type > .container-vk, html main:has(> section:first-child > nav + h1) > section:first-child, html main:has(> div > section .btn-primary[href*="connexion"]) section) > nav a:hover { color: #fff; }

:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) > section:first-child > .container-vk, html main:has(> section:first-child > nav + .grid.rounded-card) > section:first-child) > .grid.rounded-card { gap: 32px; padding: 0; border: 0; border-radius: 0; background: transparent; }
:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) > section:first-child > .container-vk, html main:has(> section:first-child > nav + .grid.rounded-card) > section:first-child) > .grid > div:first-child .eyebrow { display: block; color: #f2b84b; }
:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) > section:first-child > .container-vk, html main:has(> section:first-child > nav + .grid.rounded-card) > section:first-child) > .grid > div:first-child h1 { margin-top: 4px; color: #fff; font-size: 26px; line-height: 32px; }
:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) > section:first-child > .container-vk, html main:has(> section:first-child > nav + .grid.rounded-card) > section:first-child) > .grid > div:first-child > p { color: #d9d7ef; }
:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) > section:first-child > .container-vk, html main:has(> section:first-child > nav + .grid.rounded-card) > section:first-child) > .grid > div:first-child .btn-ghost { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); color: #fff; }
:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) > section:first-child > .container-vk, html main:has(> section:first-child > nav + .grid.rounded-card) > section:first-child) > .grid > div:first-child .btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .14); color: #fff; }

/* A drawing beside the title, one per page */
:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) > section:first-child > .container-vk, html main:has(> section:first-child > nav + .grid.rounded-card) > section:first-child) > .grid > div:first-child { background: url(/_next/static/vk4/abe4e9739f/ill-devis-nuit.svg) 0 0 / 56px 56px no-repeat; }
:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) > section:first-child > .container-vk, html main:has(> section:first-child > nav + .grid.rounded-card) > section:first-child) > .grid > div:first-child :is(.eyebrow, h1) { padding-left: 68px; }
:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) > section:first-child > .container-vk, html main:has(> section:first-child > nav + .grid.rounded-card) > section:first-child) > .grid > div:first-child:has(.btn-primary[href*="echange-kamas"]) { background-image: url(/_next/static/vk4/abe4e9739f/ill-echange-nuit.svg); }
:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) > section:first-child > .container-vk, html main:has(> section:first-child > nav + .grid.rounded-card) > section:first-child) > .grid > div:first-child:has(.btn-primary[href*="discord"]) { background-image: url(/_next/static/vk4/abe4e9739f/ill-pieces-nuit.svg); }
:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) > section:first-child > .container-vk, html main:has(> section:first-child > nav + .grid.rounded-card) > section:first-child) > .grid > div:first-child:not(:has(.btn-primary)) { background-image: url(/_next/static/vk4/abe4e9739f/ill-agent-nuit.svg); }

/* The example on the right: the violet card with the hard shadow, like the home page's */
html main:is(:has(> section:first-child > .container-vk > nav + .grid.rounded-card), :has(> section:first-child > nav + .grid.rounded-card)) > section:first-child .grid.rounded-card > div:last-child > div.rounded-card:first-of-type { border: 3px solid #17143f; background: #6c67de; box-shadow: -10px 10px 0 #37327f; }
:is(html main:is(:has(> section:first-child > .container-vk > nav + .grid.rounded-card), :has(> section:first-child > nav + .grid.rounded-card)) > section:first-child .grid.rounded-card > div:last-child > div.rounded-card:first-of-type) :is(.text-ink, .text-muted, .text-body, .text-brand, .text-mint-dark):not(.bg-canvas):not(.bg-canvas *):not(.bg-brand) { color: #fff; }
:is(html main:is(:has(> section:first-child > .container-vk > nav + .grid.rounded-card), :has(> section:first-child > nav + .grid.rounded-card)) > section:first-child .grid.rounded-card > div:last-child > div.rounded-card:first-of-type) .border-line:not(.bg-canvas) { border-color: rgba(255, 255, 255, .35); }
:is(html main:is(:has(> section:first-child > .container-vk > nav + .grid.rounded-card), :has(> section:first-child > nav + .grid.rounded-card)) > section:first-child .grid.rounded-card > div:last-child > div.rounded-card:first-of-type) .bg-mint-dark { background: #f2b84b; }
:is(html main:is(:has(> section:first-child > .container-vk > nav + .grid.rounded-card), :has(> section:first-child > nav + .grid.rounded-card)) > section:first-child .grid.rounded-card > div:last-child > div.rounded-card:first-of-type) .bg-canvas { background: #fff; }
:is(html main:is(:has(> section:first-child > .container-vk > nav + .grid.rounded-card), :has(> section:first-child > nav + .grid.rounded-card)) > section:first-child .grid.rounded-card > div:last-child > div.rounded-card:first-of-type) .bg-brand { background: #17143f; }
:is(html main:is(:has(> section:first-child > .container-vk > nav + .grid.rounded-card), :has(> section:first-child > nav + .grid.rounded-card)) > section:first-child .grid.rounded-card > div:last-child > div.rounded-card:first-of-type) .bg-brand-soft { background: rgba(255, 255, 255, .18); }

/* Contact: the section is a container, so the navy reaches out from its blocks without taking room */
html main:has(> section:first-child > nav + .grid.rounded-card) > section:first-child { position: relative; padding-top: 24px; padding-bottom: 72px; border-image: linear-gradient(#17143f 0 0) fill 0 / / 0 100vmax; }
html main:has(> section:first-child > nav + .grid.rounded-card) > section:first-child::after { content: ""; position: absolute; left: calc(50% - 50vw); bottom: 0; width: 100vw; height: 37px; background: url(/_next/static/vk4/abe4e9739f/seam-tiles-navy.svg) center bottom -8px / 1440px 45px repeat-x; pointer-events: none; }
html main:has(> section:first-child > nav + .grid.rounded-card) > section:first-child > * { position: relative; z-index: 1; }
html main:has(> section:first-child > nav + .grid.rounded-card) > section:first-child .grid > div:first-child .rounded-btn.border { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); color: #fff; }
html main:has(> section:first-child > nav + .grid.rounded-card) > section:first-child .grid > div:first-child .text-muted { color: #c9c7e6; }

/* The account sale page: its big box floats across the band */
html main:has(> section:first-of-type > .container-vk > nav + .rounded-card:not(.grid)) > section:first-of-type { background: url(/_next/static/vk4/abe4e9739f/seam-tiles-navy.svg) center 148px / 1440px 45px repeat-x, linear-gradient(#17143f 190px, #f3f1fc 190px); }
html main:has(> section:first-of-type > .container-vk > nav + .rounded-card:not(.grid)) > section:first-of-type > .container-vk { padding-top: 24px; }
html main:has(> section:first-of-type > .container-vk > nav + .rounded-card:not(.grid)) > section:first-of-type > .container-vk > nav + .rounded-card { border: 3px solid #4f49ad; box-shadow: 0 8px 14px rgba(10, 8, 40, .18), 0 24px 44px -8px rgba(10, 8, 40, .32); }

/* Legal pages: breadcrumb, title and date on the navy. Every block paints the navy past its edges, so nothing moves */
html main:has(> section:first-child > nav + h1) > section:first-child { position: relative; padding-top: 24px; }
html main:has(> section:first-child > nav + h1) > section:first-child > :is(nav, h1, h1 + p.mt-2, p.flex.items-center) { border-image: linear-gradient(#17143f 0 0) fill 0 / / 24px 100vmax; }
html main:has(> section:first-child > nav + h1) > section:first-child > h1 { display: flex; align-items: center; gap: 16px; margin-bottom: 0; color: #fff; font-size: 26px; line-height: 32px; }
html main:has(> section:first-child > nav + h1) > section:first-child > h1::before { content: ""; flex: none; width: 56px; height: 56px; background: url(/_next/static/vk4/abe4e9739f/ill-bouclier-nuit.svg) center / contain no-repeat; }
html main:has(> section:first-child > nav + h1) > section:first-child > h1 + p.mt-2 { color: #d9d7ef; }
html main:has(> section:first-child > nav + h1) > section:first-child > p.flex.items-center { position: relative; margin-top: 12px; padding-bottom: 44px; color: #c9c7e6; border-image-outset: 12px 100vmax 0; }
html main:has(> section:first-child > nav + h1) > section:first-child > p.flex.items-center::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 200vw; height: 37px; margin-left: -100vw; background: url(/_next/static/vk4/abe4e9739f/seam-tiles-navy.svg) center bottom -8px / 1440px 45px repeat-x; pointer-events: none; }
html main:has(> section:first-child > nav + h1) > section:first-child > p.flex.items-center ~ p:first-of-type { margin-top: 32px; }
html main:has(> section:first-child > nav + h1) .bg-canvas { background: #f4f2fc; }
html main:has(> section:first-child > nav + h1) .bg-canvas.rounded-card { border-color: #dcdaf0; }

/* Short notes: confirmation, expired link, order, my account. A short band, the first card floating across it in violet */
:is(html main:has(> section:only-child.container-vk .card-vk) > section, html main:has(> div > section .btn-primary[href*="connexion"]) section) { position: relative; z-index: 0; }
:is(html main:has(> section:only-child.container-vk .card-vk) > section, html main:has(> div > section .btn-primary[href*="connexion"]) section)::before { content: ""; position: absolute; z-index: -1; top: 0; left: calc(50% - 50vw); width: 100vw; height: 170px; background: url(/_next/static/vk4/abe4e9739f/seam-tiles-navy.svg) center bottom -8px / 1440px 45px repeat-x, #17143f; pointer-events: none; }
html main:has(> section:only-child.container-vk .card-vk) > section { padding-top: 40px; }
:is(html main:has(> section:only-child.container-vk .card-vk) .mx-auto > .card-vk:first-child, html main:has(> section:only-child.container-vk .card-vk) > section > .card-vk.mx-auto, html main:has(> div > section .btn-primary[href*="connexion"]) section .card-vk) { border: 3px solid #4f49ad; background: #6c67de; color: #fff; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 8px 14px rgba(10, 8, 40, .35), 0 34px 60px -8px rgba(10, 8, 40, .55); }
:is(html main:has(> section:only-child.container-vk .card-vk) .mx-auto > .card-vk:first-child, html main:has(> section:only-child.container-vk .card-vk) > section > .card-vk.mx-auto, html main:has(> div > section .btn-primary[href*="connexion"]) section .card-vk) :is(h1, p, .text-ink, .text-body, .text-muted) { color: #fff; }
html main:has(> section:only-child.container-vk .card-vk) .mx-auto > .card-vk:first-child .eyebrow { color: #fff; }
html main:has(> section:only-child.container-vk .card-vk) .mx-auto > .card-vk:first-child .bg-mint { background: #f2b84b; color: #17143f; }
html main:has(> section:only-child.container-vk .card-vk) .mx-auto > .card-vk:first-child { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 6px 12px rgba(10, 8, 40, .28); }
html main:has(> section:only-child.container-vk .card-vk) .btn-ghost { border-color: #17143f; }
html main:has(> section:only-child.container-vk .card-vk) .text-brand { color: #5752c9; }
html main:has(> div > section .btn-primary[href*="connexion"]) section > .container-vk, html main:has(> div > section .btn-primary[href*="connexion"]) section { background: none; }
html main:has(> div > section .btn-primary[href*="connexion"]) section > :is(.container-vk) > nav { margin-bottom: 20px; color: #c9c7e6; }
html main:has(> div > section .btn-primary[href*="connexion"]) section > .container-vk > nav .text-ink { color: #fff; }

/* Login and sign-up: the navy page and the violet card, the same as the forms */
html main section.min-h-\[100svh\] { padding-bottom: 48px; background: url(/_next/static/vk4/abe4e9739f/seam-tiles-navy.svg) center bottom -8px / 1440px 45px repeat-x, #17143f; }
html main section.min-h-\[100svh\] .max-w-md > .rounded-card { border: 1px solid #4f49ad; background: #262160; color: #fff; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), 0 8px 14px rgba(10, 8, 40, .35), 0 34px 60px -8px rgba(10, 8, 40, .7); }
html main section.min-h-\[100svh\] .max-w-md > .rounded-card :is(h1, h2, label, .text-ink, .text-body, .text-muted, .text-danger) { color: #fff; }
html main section.min-h-\[100svh\] .max-w-md > .rounded-card .input-vk { border-color: rgba(255, 255, 255, .28); background: #17143f; color: #fff; }
html main section.min-h-\[100svh\] .max-w-md > .rounded-card .input-vk:-webkit-autofill { -webkit-text-fill-color: #fff; box-shadow: inset 0 0 0 100px #17143f; caret-color: #fff; }
html main section.min-h-\[100svh\] .max-w-md > .rounded-card .input-vk::placeholder { color: #a9a6d0; }
html main section.min-h-\[100svh\] .max-w-md > .rounded-card .input-vk:focus { border-color: #f2b84b; box-shadow: 0 0 0 1px #f2b84b; }
html main section.min-h-\[100svh\] .max-w-md > .rounded-card :is(a, button).text-brand, html main section.min-h-\[100svh\] .max-w-md > .rounded-card :is(a, button).text-brand:hover { color: #fff; text-decoration: underline; }
html main section.min-h-\[100svh\] .max-w-md > .rounded-card button.rounded-btn:not(.btn-primary) { border-color: #fff; background: #fff; color: #17143f; }
html main section.min-h-\[100svh\] .max-w-md > .rounded-card .bg-line { background: rgba(255, 255, 255, .4); }
html main section.min-h-\[100svh\] .max-w-md > :not(.rounded-card) :is(a, button), html main section.min-h-\[100svh\] .max-w-md > :not(.rounded-card) :is(a, button):hover { color: #fff; }
html main section.min-h-\[100svh\] .max-w-md > :not(.rounded-card) { color: #c9c7e6; }
html main section.min-h-\[100svh\] > p { color: #c9c7e6; }
/* Sign-up's left side: written for a light page, so its words and icons change here */
html main section.min-h-\[100svh\] .lg\:block > h2, html main section.min-h-\[100svh\] .lg\:block > ul > li { color: #fff; }
html main section.min-h-\[100svh\] .lg\:block > span.bg-brand { background: #f2b84b; }
html main section.min-h-\[100svh\] .lg\:block > ul > li > span { background: none; color: #f2b84b; }
html main section.min-h-\[100svh\] .lg\:block .relative > .-rotate-1 { border: 1px solid #4f49ad; background: #262160; box-shadow: 0 8px 14px rgba(10, 8, 40, .35), 0 24px 44px -8px rgba(10, 8, 40, .6); }
html main section.min-h-\[100svh\] .lg\:block .relative > .-rotate-1 :is(.text-ink, .text-muted, .text-body) { color: #fff; }
html main section.min-h-\[100svh\] .lg\:block .relative > .-rotate-1 .bg-canvas { background: rgba(255, 255, 255, .08); }
html main section.min-h-\[100svh\] .lg\:block .relative > .-rotate-1 .border-t { border-color: rgba(255, 255, 255, .2); }
html main section.min-h-\[100svh\] .lg\:block .relative > .-rotate-1 .bg-mint-soft { background: rgba(242, 184, 75, .16); color: #f2b84b; }
html main section.min-h-\[100svh\] .lg\:block .relative > .-rotate-1 span.bg-brand-soft { background: rgba(255, 255, 255, .12); color: #fff; }
html main section.min-h-\[100svh\] > p a, html main section.min-h-\[100svh\] > p a:hover { color: #fff; }

/* Not found: the same navy, its words readable */
html body:has(.next-error-h1) { background: #17143f; color: #fff; }
html main > div:has(> div > .next-error-h1), html main > div:has(> div > div > .next-error-h1) { background: url(/_next/static/vk4/abe4e9739f/seam-tiles-navy.svg) center bottom -8px / 1440px 45px repeat-x, #17143f !important; height: 480px !important; color: #fff; }
html .next-error-h1 { border-right-color: rgba(255, 255, 255, .3) !important; color: #f2b84b; }
html main > div:has(.next-error-h1) h2 { color: #fff; }

/* Steps: one card colour, a drawing in each */
html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) ol > li > .rounded-card { position: relative; border-color: #dcdaf0; background: #fff; box-shadow: none; }
html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) ol > li > .rounded-card::before { content: ""; float: right; width: 56px; height: 56px; margin: 0 0 8px 16px; background: url(/_next/static/vk4/abe4e9739f/ill-devis.svg) center / contain no-repeat; }
html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) ol > li:nth-child(2) > .rounded-card::before { background-image: url(/_next/static/vk4/abe4e9739f/ill-agent.svg); }
html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) ol > li:nth-child(3) > .rounded-card::before { background-image: url(/_next/static/vk4/abe4e9739f/ill-portefeuille.svg); }
html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) ol > li > .flex-col > .w-px { background: #c9c5ec; }
html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) ol.grid > li.card-vk { box-shadow: none; }

/* The rules box and other grey boxes take the lavender */
:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card), html main:has(> section:first-child > nav + .grid.rounded-card)) .bg-canvas.rounded-card { border-color: #dcdaf0; border-left: 4px solid #6c67de; background: #f4f2fc; }
html main:has(> section:first-child > nav + .grid.rounded-card) > section:first-child .bg-canvas.rounded-card { border-left: 0; }

html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) > section.pb-2 { padding-top: 32px; }
html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) > section.pb-2:has(+ .bg-surface) { padding-bottom: 72px; }

/* Our drawings instead of the small icons */
:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card), html main:has(> section:first-child > nav + .grid.rounded-card)) .card-vk > span.grid:has(> svg) { display: block; width: 56px; height: 56px; border-radius: 0; background: url(/_next/static/vk4/abe4e9739f/ill-devis.svg) center / contain no-repeat; color: transparent; }
:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card), html main:has(> section:first-child > nav + .grid.rounded-card)) .card-vk > span.grid:has(> svg) > svg { display: none; }
:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card), html main:has(> section:first-child > nav + .grid.rounded-card)) .sm\:grid-cols-2 > .card-vk:nth-child(2) > span.grid { background-image: url(/_next/static/vk4/abe4e9739f/ill-bouclier.svg); }
:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card), html main:has(> section:first-child > nav + .grid.rounded-card)) .sm\:grid-cols-2 > .card-vk:nth-child(3) > span.grid { background-image: url(/_next/static/vk4/abe4e9739f/ill-agent.svg); }
:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card), html main:has(> section:first-child > nav + .grid.rounded-card)) .sm\:grid-cols-2 > .card-vk:nth-child(4) > span.grid { background-image: url(/_next/static/vk4/abe4e9739f/ill-compte.svg); }
html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) .md\:grid-cols-3 > .card-vk:nth-child(1) > span.grid:has(> svg) { background-image: url(/_next/static/vk4/abe4e9739f/ill-echange.svg); }
html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) .md\:grid-cols-3 > .card-vk:nth-child(2) > span.grid:has(> svg) { background-image: url(/_next/static/vk4/abe4e9739f/ill-sac.svg); }
html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) .md\:grid-cols-3 > .card-vk:nth-child(3) > span.grid:has(> svg) { background-image: url(/_next/static/vk4/abe4e9739f/ill-instant.svg); }
html main:has(> section:first-child > nav + .grid.rounded-card) .md\:grid-cols-3 > .card-vk:nth-child(1) > span.grid:has(> svg) { background-image: url(/_next/static/vk4/abe4e9739f/ill-casque.svg); }
html main:has(> section:first-child > nav + .grid.rounded-card) .md\:grid-cols-3 > .card-vk:nth-child(2) > span.grid:has(> svg) { background-image: url(/_next/static/vk4/abe4e9739f/ill-devis.svg); }
html main:has(> section:first-child > nav + .grid.rounded-card) .md\:grid-cols-3 > .card-vk:nth-child(3) > span.grid:has(> svg) { background-image: url(/_next/static/vk4/abe4e9739f/ill-avis.svg); }

/* Payment block: real logos instead of the same card icon six times */
html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) .lg\:grid-cols-2 > .grid > .rounded-btn > svg, html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) .lg\:grid-cols-2 > .grid > .rounded-btn > span:first-child:has(svg) { display: none; }
html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) .lg\:grid-cols-2 > .grid > .rounded-btn::before { content: ""; flex: none; width: 44px; height: 28px; background: url(/_next/static/vk4/abe4e9739f/logo-sepa.png) center / contain no-repeat; }
html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) .lg\:grid-cols-2 > .grid > .rounded-btn:nth-child(2)::before { background-image: url(/_next/static/vk4/abe4e9739f/logo-paypal.png); }
html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) .lg\:grid-cols-2 > .grid > .rounded-btn:nth-child(3)::before { background-image: url(/_next/static/vk4/abe4e9739f/logo-cih.png); }
html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) .lg\:grid-cols-2 > .grid > .rounded-btn:nth-child(4)::before { background-image: url(/_next/static/vk4/abe4e9739f/logo-wise.png); }
html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) .lg\:grid-cols-2 > .grid > .rounded-btn:nth-child(5)::before { background-image: url(/_next/static/vk4/abe4e9739f/logo-bitcoin.png); }
html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) .lg\:grid-cols-2 > .grid > .rounded-btn:nth-child(6)::before { background-image: url(/_next/static/vk4/abe4e9739f/ill-portefeuille.svg); }

/* The contact form: violet and floating, like the sell and exchange forms */
html main:has(> section:first-child > nav + .grid.rounded-card) #formulaire .card-vk:has(> form) { border: 3px solid #4f49ad; background: #6c67de; color: #fff; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 8px 14px rgba(10, 8, 40, .35), 0 34px 60px -8px rgba(10, 8, 40, .55); }
html main:has(> section:first-child > nav + .grid.rounded-card) #formulaire .card-vk:has(> form) :is(label, .label-vk, p, .text-muted, .text-body, .text-danger) { color: #fff; }
html main:has(> section:first-child > nav + .grid.rounded-card) #formulaire .card-vk:has(> form) .input-vk { border-color: #fff; background: #fff; color: #17143f; }
html main:has(> section:first-child > nav + .grid.rounded-card) #formulaire .card-vk:has(> form) .input-vk::placeholder { color: #6f6c92; }
html main:has(> section:first-child > nav + .grid.rounded-card) #formulaire .card-vk:has(> form) .input-vk:focus { border-color: #17143f; box-shadow: 0 0 0 2px #17143f; }

/* Lines between sections: each its own, decoration only, they take no room and can't be clicked */
:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card), html main:has(> section:first-child > nav + .grid.rounded-card), html main:has(> section:first-of-type > .container-vk > nav + .rounded-card:not(.grid))) > section { position: relative; }
:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card), html main:has(> section:first-child > nav + .grid.rounded-card), html main:has(> section:first-of-type > .container-vk > nav + .rounded-card:not(.grid))) > section::before { pointer-events: none; }
:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card), html main:has(> section:first-child > nav + .grid.rounded-card)) > section:nth-of-type(n+2) > * { position: relative; z-index: 1; }
/* White to lavender: lavender tiles climbing out of the band */
:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card), html main:has(> section:first-child > nav + .grid.rounded-card), html main:has(> section:first-of-type > .container-vk > nav + .rounded-card:not(.grid))) > section.bg-surface:nth-of-type(n+3)::before { content: ""; position: absolute; left: calc(50% - 50vw); top: -44px; width: 100vw; height: 45px; transform: scaleY(-1); background: url(/_next/static/vk4/abe4e9739f/seam-tiles-lav.svg) center top / 1440px 45px repeat-x; }
/* Lavender to white with cards: the shield */
:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card), html main:has(> section:first-of-type > .container-vk > nav + .rounded-card:not(.grid))) > section:is(.container-vk, .bg-white):has(.card-vk)::before { content: ""; position: absolute; right: 0; top: -36px; width: 88px; height: 88px; background: url(/_next/static/vk4/abe4e9739f/ill-bouclier.svg) center / contain no-repeat; }
/* Questions: the agent and a short trail */
:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card), html main:has(> section:first-child > nav + .grid.rounded-card), html main:has(> section:first-of-type > .container-vk > nav + .rounded-card:not(.grid))) > section:has(.divide-y):not(.bg-surface)::before { content: ""; position: absolute; left: 0; top: -36px; width: 100%; height: 96px; background: url(/_next/static/vk4/abe4e9739f/ill-agent.svg) left 8px top 0 / 88px 88px no-repeat, url(/_next/static/vk4/abe4e9739f/seam-trail-b.svg) left 104px top 8px / 460px 96px no-repeat; }
/* The last call: navy tiles climbing, and the sack above its words */
:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card), html main:has(> section:first-child > nav + .grid.rounded-card), html main:has(> section:first-of-type > .container-vk > nav + .rounded-card:not(.grid)), html main:has(> section:first-child > nav + h1)) > section.bg-ink { position: relative; }
:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card), html main:has(> section:first-child > nav + .grid.rounded-card), html main:has(> section:first-of-type > .container-vk > nav + .rounded-card:not(.grid)), html main:has(> section:first-child > nav + h1)) > section.bg-ink::before { content: ""; position: absolute; left: calc(50% - 50vw); top: -44px; width: 100vw; height: 45px; transform: scaleY(-1); background: url(/_next/static/vk4/abe4e9739f/seam-tiles-ink.svg) center top / 1440px 45px repeat-x; pointer-events: none; }
:is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card), html main:has(> section:first-child > nav + .grid.rounded-card), html main:has(> section:first-of-type > .container-vk > nav + .rounded-card:not(.grid)), html main:has(> section:first-child > nav + h1)) > section.bg-ink > .container-vk::before { content: ""; display: block; width: 72px; height: 72px; margin: 0 auto 12px; background: url(/_next/static/vk4/abe4e9739f/ill-sac-nuit.svg) center / contain no-repeat; }

@media (min-width: 768px) {
  html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) > section:first-child > .container-vk { padding-bottom: 88px; }
  html main:has(> section:first-child > nav + .grid.rounded-card) > section:first-child { padding-bottom: 88px; }
  :is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) > section:first-child > .container-vk, html main:has(> section:first-child > nav + .grid.rounded-card) > section:first-child) > .grid > div:first-child { background-size: 72px 72px; }
  :is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) > section:first-child > .container-vk, html main:has(> section:first-child > nav + .grid.rounded-card) > section:first-child) > .grid > div:first-child :is(.eyebrow, h1) { padding-left: 88px; }
  :is(html main:has(> section:first-child > .container-vk > nav + .grid.rounded-card) > section:first-child > .container-vk, html main:has(> section:first-child > nav + .grid.rounded-card) > section:first-child) > .grid > div:first-child h1 { font-size: 34px; line-height: 42px; }
  html main:has(> section:first-child > nav + h1) > section:first-child > h1 { font-size: 34px; line-height: 42px; }
  html main:has(> section:first-child > nav + h1) > section:first-child > h1::before { width: 72px; height: 72px; }
}

/* Account, Mes informations: billing details, on the right from laptops */
html .vk-billing form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
html .vk-billing select.input-vk { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238f8da8' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
html .vk-billing-foot { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 8px; }
html .vk-billing-foot > p { min-height: 20px; }
@media (min-width: 640px) {
  html .vk-billing form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .vk-billing-wide, html .vk-billing-foot { grid-column: 1 / -1; }
}

/* Sell page warning: always open, short and in red, in the page's language. Three lines, the example names in bold on
   their own line. The long text stays in the page's code */
html form:has(#sf-pay) > .border-danger-border { display: block; border: 1px solid #f87171; border-radius: 8px; background: #fee2e2; }
html form:has(#sf-pay) > .border-danger-border h3, html form:has(#sf-pay) > .border-danger-border h3 svg { color: #b91c1c; }
html form:has(#sf-pay) > .border-danger-border > p { display: none; }
html:not(.vk-warn-open):not(.vk-no) form:has(#sf-pay) > .border-danger-border > ul { display: block; margin: 4px 0 0; padding: 0; list-style: none; font-size: 0; line-height: 0; }
html:not(.vk-warn-open):not(.vk-no) form:has(#sf-pay) > .border-danger-border > ul > li { display: none; }
html:not(.vk-warn-open):not(.vk-no) form:has(#sf-pay) > .border-danger-border > ul::before, html:not(.vk-warn-open):not(.vk-no) form:has(#sf-pay) > .border-danger-border > ul::after, html form:has(#sf-pay) > .border-danger-border::after { display: block; color: #991b1b; font-size: 12.5px; line-height: 18px; }
html:not(.vk-warn-open):not(.vk-no) form:has(#sf-pay) > .border-danger-border > ul::after { font-weight: 700; }
html:not(.vk-warn-open):not(.vk-no) form:has(#sf-pay) > .border-danger-border > ul::before { content: "Des arnaqueurs utilisent des pseudos proches de ceux de nos livreurs."; }
html:not(.vk-warn-open):not(.vk-no) form:has(#sf-pay) > .border-danger-border > ul::after { content: "Par exemple : Armin, Arnin, Armim ou Arnim."; }
html:not(.vk-warn-open):not(.vk-no) form:has(#sf-pay) > .border-danger-border::after { content: "Lancez l\2019 \e9 change uniquement avec celui qui vous a envoy\e9  le message avec le code."; }
html:not(.vk-warn-open):not(.vk-no):is([data-vk-lang="en"], :not([data-vk-lang])[lang="en"]) form:has(#sf-pay) > .border-danger-border > ul::before { content: "Scammers use names close to those of our delivery agents."; }
html:not(.vk-warn-open):not(.vk-no):is([data-vk-lang="en"], :not([data-vk-lang])[lang="en"]) form:has(#sf-pay) > .border-danger-border > ul::after { content: "For example: Armin, Arnin, Armim or Arnim."; }
html:not(.vk-warn-open):not(.vk-no):is([data-vk-lang="en"], :not([data-vk-lang])[lang="en"]) form:has(#sf-pay) > .border-danger-border::after { content: "Only start the trade with the person who sent you the message with the code."; }
html:not(.vk-warn-open):not(.vk-no):is([data-vk-lang="es"], :not([data-vk-lang])[lang="es"]) form:has(#sf-pay) > .border-danger-border > ul::before { content: "Hay estafadores que usan nombres parecidos a los de nuestros repartidores."; }
html:not(.vk-warn-open):not(.vk-no):is([data-vk-lang="es"], :not([data-vk-lang])[lang="es"]) form:has(#sf-pay) > .border-danger-border > ul::after { content: "Por ejemplo: Armin, Arnin, Armim o Arnim."; }
html:not(.vk-warn-open):not(.vk-no):is([data-vk-lang="es"], :not([data-vk-lang])[lang="es"]) form:has(#sf-pay) > .border-danger-border::after { content: "Inicia el intercambio solo con quien te envi\f3  el mensaje con el c\f3 digo."; }
html:not(.vk-warn-open):not(.vk-no):is([data-vk-lang="pt"], :not([data-vk-lang])[lang="pt"]) form:has(#sf-pay) > .border-danger-border > ul::before { content: "H\e1  burl\f5 es que usam nomes parecidos com os dos nossos entregadores."; }
html:not(.vk-warn-open):not(.vk-no):is([data-vk-lang="pt"], :not([data-vk-lang])[lang="pt"]) form:has(#sf-pay) > .border-danger-border > ul::after { content: "Por exemplo: Armin, Arnin, Armim ou Arnim."; }
html:not(.vk-warn-open):not(.vk-no):is([data-vk-lang="pt"], :not([data-vk-lang])[lang="pt"]) form:has(#sf-pay) > .border-danger-border::after { content: "Inicie a troca apenas com quem lhe enviou a mensagem com o c\f3 digo."; }

/* Number fields: our two arrows instead of the browser's */
main form input[type=number] { -moz-appearance: textfield; appearance: textfield; }
main form input[type=number]::-webkit-inner-spin-button, main form input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.vk-step-box { position: relative; }
.vk-step-box > input[type=number] { padding-right: 40px; }
.vk-step { position: absolute; right: 8px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.vk-step[hidden] { display: none; }
.vk-step button { width: 24px; height: 18px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .06); color: #b9b6e3; cursor: pointer; touch-action: manipulation; }
.vk-step button:hover { background: rgba(242, 184, 75, .16); color: #f2b84b; }
.vk-step button:active { background: rgba(242, 184, 75, .28); }

/* Payment card on laptops: as tall as the closed form, lines spread over it, larger and darker type */
@media (min-width: 1024px) {
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1.vk-pay-fit { display: flex; flex-direction: column; padding: 20px 22px; border-color: #d6d0f4; box-shadow: 0 1px 2px rgba(23, 20, 63, .06), 0 8px 24px rgba(23, 20, 63, .07); }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1.vk-pay-big > h2.section-title { font-size: 18px; line-height: 24px; color: #17143f; text-wrap: wrap; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1.vk-pay-big > h2 + p { margin-top: 4px; font-size: 13.5px; line-height: 19px; color: #17143f; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1.vk-pay-fit > ul { flex: 1; justify-content: space-between; row-gap: 6px; margin-top: 12px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1.vk-pay-measure > ul { flex: none; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1.vk-pay-big > ul > li { gap: 12px; font-size: 13.5px; line-height: 18px; color: #3a3768; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1.vk-pay-big > ul > li strong { color: #17143f; font-weight: 700; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1.vk-pay-big > ul > li > span:first-child { width: 68px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1.vk-pay-big > ul > li > span:first-child > img { height: 26px; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1.vk-pay-big > p:last-of-type { margin-top: 12px; font-size: 13px; line-height: 18px; color: #55527d; }
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1.vk-pay-big > .vk-trust { margin-top: 12px; padding-top: 12px; font-size: 13.5px; }
  /* The form keeps its own height: the card never stretches it */
  html .container-vk:has(> .gap-10 #sf-pay) > .gap-10:has(> .vk-pay-fit) > .lg\:order-2 { align-self: start; }
}

/* The round rating button beside the moving reviews is gone: the live chat sits in that corner */
html .vk-dock-btn { display: none !important; }

/* Home page: the moving reviews wait for the first scroll, as on the sell and exchange pages */
html:has(main > #faq):not(.vk-scrolled) .vk-foot { transform: translateY(calc(100% + 28px)); }
@media (max-width: 639.98px) {
  html:has(main > #faq):not(.vk-scrolled) a.fixed[href*="discord"] { bottom: 16px; }
}

/* Exchange form: what you give first, then what you receive, the exchange code last (before the rate and the button) */
html main:has(#ex-depart) #simulateur form > .grid:has(#ex-depart)::before { content: "Vous donnez des Kamas sur"; padding-top: 0; border-top: 0; }
html main:has(#ex-depart) #simulateur form > .grid:has(#ex-arrivee)::before { content: "Vous recevez des Kamas sur"; }
html main:has(#ex-depart) #simulateur form > div:has(> #ex-code) { order: 40; grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .32); }
html[data-vk-lang="en"] main:has(#ex-depart) #simulateur form > .grid:has(#ex-depart)::before { content: "You give Kamas on"; }
html[data-vk-lang="en"] main:has(#ex-depart) #simulateur form > .grid:has(#ex-arrivee)::before { content: "You receive Kamas on"; }
html[data-vk-lang="es"] main:has(#ex-depart) #simulateur form > .grid:has(#ex-depart)::before { content: "Entregas Kamas en"; }
html[data-vk-lang="es"] main:has(#ex-depart) #simulateur form > .grid:has(#ex-arrivee)::before { content: "Recibes Kamas en"; }
html[data-vk-lang="pt"] main:has(#ex-depart) #simulateur form > .grid:has(#ex-depart)::before { content: "Entrega Kamas em"; }
html[data-vk-lang="pt"] main:has(#ex-depart) #simulateur form > .grid:has(#ex-arrivee)::before { content: "Recebe Kamas em"; }

/* Exchange form: the line under the quantity to give only takes room once a server is chosen and it has something to say (minimum, error) */
html main:has(#ex-depart) #simulateur form:has(#ex-depart > span.text-muted) div:has(> #ex-qte-payer) > p,
html main:has(#ex-depart) #simulateur form div:has(> #ex-qte-payer) > p:empty { display: none; }

/* Account page, the sell form's look: navy card, violet title band, dark fields, gold button */
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk { padding: 21px; border: 3px solid #6c67de; border-radius: 10px; background: #262160; color: #fff; box-shadow: 0 8px 14px rgba(10, 8, 40, .35), 0 34px 60px -8px rgba(10, 8, 40, .7); }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk > h2:first-child { margin: -21px -21px 0; padding: 10px 21px 11px; border-radius: 7px 7px 0 0; background: #6c67de; color: #fff; font-size: 20px; line-height: 28px; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk > h2:first-child + * { margin-top: 20px; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk :is(h2, h3, p, label, strong, .text-ink, .text-body) { color: #fff; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk .text-muted { color: #b9b6e3; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk .label-vk { margin-bottom: 4px; color: #fff; font-size: 13px; font-weight: 500; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk .input-vk { height: 46px; border: 1px solid transparent; border-radius: 8px; background-color: #17143f; color: #fff; box-shadow: none; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk .input-vk::placeholder { color: #a9a6d0; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk .input-vk:hover:not(:disabled) { border-color: rgba(255, 255, 255, .18); }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk .input-vk:focus { border-color: #f2b84b; outline: none; box-shadow: none; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk select.input-vk { appearance: none; -webkit-appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9b6e3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-position: right 12px center; background-size: 18px 18px; background-repeat: no-repeat; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk select.input-vk option { background: #17143f; color: #fff; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk .input-vk:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #17143f inset; -webkit-text-fill-color: #fff; }
/* Where the payment goes: a quiet gold line */
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk > .bg-mint-soft { border: 1px solid rgba(242, 184, 75, .4); border-radius: 8px; background: rgba(242, 184, 75, .1); color: #fff; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk > .bg-mint-soft strong { color: #f2b84b; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk > .bg-mint-soft button { color: #f2b84b; }
/* Conditions and declaration: boxes a shade lighter than the card */
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk > .rounded-card { border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; background: rgba(255, 255, 255, .05); }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk > .rounded-card label { color: #dedcf5; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk > .rounded-card .border-t { border-top-color: rgba(255, 255, 255, .14); }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk > .rounded-card p.text-muted { color: #b9b6e3; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk input[type="checkbox"] { width: 16px; height: 16px; accent-color: #f2b84b; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk a { color: #f2b84b; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk .text-danger-text { color: #fca5a5; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk .btn-primary { min-height: 48px; border-radius: 8px; background: #f2b84b; color: #17143f; font-size: 16px; font-weight: 600; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk .btn-primary:hover:not(:disabled) { background: #f5c66a; }
/* The price strip in the navy band */
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(1) .rounded-card.bg-canvas { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(1) .rounded-card.bg-canvas .text-muted { color: #b9b6e3; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(1) .rounded-card.bg-canvas .text-ink { color: #fff; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(1) .rounded-card.bg-canvas .text-mint-dark { color: #f2b84b; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(1) .rounded-card.bg-canvas .bg-line { background: rgba(255, 255, 255, .16); }

/* Account page: the sworn statement box gives way to one short line under the conditions */
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk > .rounded-card:has(#ba-declaration) { display: none; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk > .rounded-card:has(input[type="checkbox"]):not(:has(#ba-declaration))::after { content: "En vendant ce compte, vous confirmez qu’il vous appartient."; display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .14); color: #fff; font-size: 13px; line-height: 19px; font-weight: 600; }
html[data-vk-lang="en"] main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk > .rounded-card:has(input[type="checkbox"]):not(:has(#ba-declaration))::after { content: "By selling this account, you confirm it is yours."; }
html[data-vk-lang="es"] main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk > .rounded-card:has(input[type="checkbox"]):not(:has(#ba-declaration))::after { content: "Al vender esta cuenta, confirmas que es tuya."; }
html[data-vk-lang="pt"] main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk > .rounded-card:has(input[type="checkbox"]):not(:has(#ba-declaration))::after { content: "Ao vender esta conta, confirma que é sua."; }

/* Account page: our dropdowns over the hidden real ones */
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) select.input-vk:has(+ .vk-sel) { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) :has(> select.input-vk + .vk-sel) { position: relative; }
.vk-sel { position: relative; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .vk-sel-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; cursor: pointer; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .vk-sel-btn > .vk-sel-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .vk-sel-btn > .vk-sel-ph { color: #a9a6d0; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .vk-sel-btn > svg { flex: none; color: #b9b6e3; transition: transform .15s; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .vk-sel-btn[aria-expanded="true"] { border-color: #f2b84b !important; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .vk-sel-btn[aria-expanded="true"] > svg { transform: rotate(180deg); }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .vk-sel-btn:disabled { opacity: .6; cursor: not-allowed; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .vk-sel-btn.vk-sel-bad { border-color: #fca5a5 !important; }
.vk-sel-list { position: absolute; top: calc(100% + 6px); right: 0; left: 0; z-index: 40; max-height: 296px; overflow-y: auto; padding: 6px; border: 1px solid #3b3680; border-radius: 8px; background: #17143f; box-shadow: 0 16px 32px rgba(10, 8, 40, .45); }
.vk-sel-list[hidden] { display: none; }
.vk-sel-list > [role="option"] { padding: 9px 10px; border-radius: 6px; color: #fff; font-size: 14px; line-height: 20px; cursor: pointer; }
.vk-sel-list > [role="option"].vk-sel-ph { color: #a9a6d0; }
.vk-sel-list > [role="option"].vk-sel-on { background: rgba(255, 255, 255, .08); }
.vk-sel-list > [role="option"][aria-selected="true"] { color: #f2b84b; font-weight: 600; }
.vk-sel-list > [role="option"][aria-disabled="true"] { color: #6f6b9e; cursor: default; }
.vk-sel-list > [role="option"][aria-disabled="true"].vk-sel-on { background: none; }
/* Account page: the line about proof of ownership goes */
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk > .rounded-card > p.mt-2.text-xs { display: none; }
/* The page's older rule paints any list's text navy: the account dropdowns keep their own colours */
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .vk-sel-list > [role="option"] { color: #fff !important; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .vk-sel-list > [role="option"].vk-sel-ph { color: #a9a6d0 !important; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .vk-sel-list > [role="option"][aria-selected="true"] { color: #f2b84b !important; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .vk-sel-list > [role="option"][aria-disabled="true"] { color: #6f6b9e !important; }

/* Account page, "Your price and places": a white band under the lavender one, edged with its tiles */
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(3) { position: relative; background: #fff; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(3)::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 45px; background: url(/_next/static/vk4/abe4e9739f/seam-tiles-lav.svg) center top / 1440px 45px repeat-x; pointer-events: none; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(3) > .container-vk { padding-top: 72px; padding-bottom: 64px; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(3) .card-vk { padding: 0; border: 0; background: none; box-shadow: none; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(3) .card-vk > h2 { color: #17143f; font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.01em; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(3) .card-vk > h2 + p { margin-top: 6px; color: #55527d; font-size: 15px; line-height: 22px; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(3) .card-vk > .mt-4 { margin-top: 24px; padding: 20px 24px; border: 1px solid #e1dcf6; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(23, 20, 63, .05), 0 8px 24px rgba(23, 20, 63, .06); }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(3) .card-vk > .mt-4 > div > span:first-child { color: #17143f; letter-spacing: .04em; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(3) .card-vk > .mt-4 > div.border-b { border-bottom-color: #ece9f8; }
/* Chips */
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(3) .card-vk button.rounded-btn { min-height: 40px; border-radius: 8px; border-color: #e1dcf6; background: #fff; color: #17143f; font-size: 13px; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(3) .card-vk button.rounded-btn:not(.vk-full):hover { transform: none; border-color: #6c67de; color: #6c67de; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(3) .card-vk button.rounded-btn.bg-brand { border-color: #6c67de; background: #6c67de; color: #fff; box-shadow: 0 4px 12px rgba(108, 103, 222, .3); }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(3) .card-vk button.rounded-btn.vk-full { border-color: #efedf6; background: #f6f5fa; color: #b4b1c9; text-decoration: line-through; text-decoration-color: rgba(180, 177, 201, .7); cursor: not-allowed; }
/* The result: the form's navy, the price in gold */
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(3) .card-vk > .mt-5 { min-height: 0; margin-top: 20px; padding-top: 0; border-top: 0; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(3) .card-vk > .mt-5 > .bg-ink { border: 3px solid #6c67de; border-radius: 10px; background: #262160; box-shadow: 0 8px 20px rgba(23, 20, 63, .25); }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(3) .card-vk > .mt-5 > .bg-ink > div > span:last-child { color: #f2b84b; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(3) .card-vk > .mt-5 > p { color: #55527d; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(3) .card-vk > .mt-5 .btn-primary { min-height: 44px; border-radius: 8px; background: #f2b84b; color: #17143f; }
/* The result, second take: one quiet strip under the picker, details on the left, price and places in the middle, button on the right */
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(3) .card-vk > .mt-5 { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 16px; padding: 14px 20px; border: 1px solid #e1dcf6; border-radius: 10px; background: #f6f5fd; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(3) .card-vk > .mt-5:has(> p:only-child) { justify-content: center; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(3) .card-vk > .mt-5 > p { order: 1; margin: 0; color: #17143f; font-size: 14px; font-weight: 600; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(3) .card-vk > .mt-5 > p:only-child { color: #55527d; font-weight: 400; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(3) .card-vk > .mt-5 > .bg-ink { order: 2; min-width: 0; gap: 28px; padding: 0; border: 0; border-radius: 0; background: none; color: #17143f; box-shadow: none; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(3) .card-vk > .mt-5 > .bg-ink > div { flex-direction: row; align-items: baseline; gap: 8px; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(3) .card-vk > .mt-5 > .bg-ink > div > span:first-child { color: #6f6c92; font-size: 12px; letter-spacing: .04em; opacity: 1; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(3) .card-vk > .mt-5 > .bg-ink > div > span:last-child { color: #17143f; font-size: 22px; line-height: 28px; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(3) .card-vk > .mt-5 > .bg-ink > div:last-child > span:last-child { color: #6c67de; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(3) .card-vk > .mt-5 > .bg-ink > .w-px { background: #e1dcf6; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(3) .card-vk > .mt-5 > .btn-primary { order: 3; margin: 0; padding: 0 22px; }

/* Account page, "My deposits": the list leaves the form's column for the right one, under a short line that opens it */
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\]:has(> div:first-child > .card-vk.mt-6) { align-items: start; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\]:has(> div:first-child > .card-vk.mt-6) > div:first-child { display: contents; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\]:has(> div:first-child > .card-vk.mt-6) > div:first-child > form { order: 1; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\]:has(> div:first-child > .card-vk.mt-6) > div.space-y-6 { order: 2; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk.mt-6 { order: 3; display: none; }
html.vk-mine-open main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk.mt-6 { display: block; }
@media (min-width: 1024px) {
  html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\]:has(> div:first-child > .card-vk.mt-6) { grid-template-rows: auto 1fr; }
  html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\]:has(> div:first-child > .card-vk.mt-6) > div:first-child > form { grid-column: 1; grid-row: 1 / span 2; }
  html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\]:has(> div:first-child > .card-vk.mt-6) > div.space-y-6 { grid-column: 2; grid-row: 1; }
  html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk.mt-6 { grid-column: 2; grid-row: 2; }
  html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk.mt-6.mt-6 { margin-top: -20px; }
}
.vk-mine-line { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border: 1px solid #e1dcf6; border-radius: 10px; background: #fff; color: #17143f; font-size: 14px; text-align: left; cursor: pointer; box-shadow: 0 1px 2px rgba(23, 20, 63, .05), 0 8px 24px rgba(23, 20, 63, .06); }
.vk-mine-line strong { font-weight: 700; }
.vk-mine-what > span { color: #6f6c92; font-size: 13px; }
.vk-mine-go { display: inline-flex; flex: none; align-items: center; gap: 4px; color: #6c67de; font-weight: 700; }
.vk-mine-go svg { transition: transform .15s; }
.vk-mine-line[aria-expanded="true"] .vk-mine-go svg { transform: rotate(180deg); }
.vk-mine-line:hover { border-color: #6c67de; }
/* The list as a white card with coloured tags */
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk.mt-6.mt-6 { margin-top: 12px; padding: 20px; border: 1px solid #e1dcf6; border-radius: 10px; background: #fff; color: #17143f; box-shadow: 0 1px 2px rgba(23, 20, 63, .05), 0 8px 24px rgba(23, 20, 63, .06); }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk.mt-6.mt-6 > h2:first-child { display: none; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk.mt-6.mt-6 > h2:first-child + * { margin-top: 0; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk.mt-6.mt-6 table { font-size: 12.5px; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk.mt-6.mt-6 th { color: #6f6c92 !important; font-size: 10.5px; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk.mt-6.mt-6 td, html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk.mt-6.mt-6 td * { color: #17143f !important; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk.mt-6.mt-6 tr { border-color: #ece9f8 !important; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk.mt-6.mt-6 td:last-child > span { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #eeedfb; color: #5752c9 !important; font-size: 11px; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk.mt-6.mt-6 td:last-child > span.text-mint-dark { background: #e3f6ee; color: #0f8a5f !important; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk.mt-6.mt-6 td:last-child > span.text-danger-text { background: #fdecec; color: #c43838 !important; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk.mt-6.mt-6 td:last-child > p { color: #6f6c92 !important; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk.mt-6.mt-6 > p:last-child { display: none; }
@media (min-width: 1024px) {
  html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk.mt-6.mt-6 { margin-top: -20px; }
}

/* Account page status tags: rectangles with small corners */
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk.mt-6.mt-6 td:last-child > span { border-radius: 4px; }

/* Sell form: what the customer receives, larger and in gold, once there is an amount */
html form:has(#sf-pay) .vk-recv { align-items: baseline; gap: 10px; }
html form:has(#sf-pay) .vk-recv-label { color: #fff !important; font-size: 15px; font-weight: 600; }
html form:has(#sf-pay) .vk-recv-amt { color: #f2b84b !important; font-size: 26px; line-height: 32px; font-weight: 800; letter-spacing: -.01em; }
/* Server list: the price per million on the right of each server */
html form:has(#sf-pay) [role="listbox"] .vk-opt-hint { color: #f2b84b; }

/* The amount received in white, not gold */
html form:has(#sf-pay) .vk-recv-amt { color: #fff !important; }

/* Sell form: the total sits in the sell button, larger and centred; the separate total line goes */
html form:has(#sf-pay) > .border-t { display: none; }
html form:has(#sf-pay) > .justify-center { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 420px; }
html form:has(#sf-pay) > .justify-center > .btn-primary { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: 10px 24px; border-radius: 10px; }
html form:has(#sf-pay) > .justify-center > .btn-primary > .vk-btn-main { font-size: 19px; line-height: 24px; font-weight: 700; }
html form:has(#sf-pay) > .justify-center > .btn-primary > .vk-btn-total { font-size: 14px; line-height: 18px; font-weight: 600; opacity: .8; }
/* The sell button on one line: "Sell Kamas | Total : …" */
html form:has(#sf-pay) > .justify-center > .btn-primary { flex-direction: row; flex-wrap: wrap; column-gap: 14px; min-height: 58px; }
html form:has(#sf-pay) > .justify-center > .btn-primary > .vk-btn-main { font-size: 18px; }
html form:has(#sf-pay) > .justify-center > .btn-primary > .vk-btn-total { display: inline-flex; align-items: center; gap: 14px; font-size: 16px; line-height: 24px; font-weight: 600; opacity: .85; }
html form:has(#sf-pay) > .justify-center > .btn-primary > .vk-btn-total::before { content: ""; width: 1px; height: 20px; background: currentColor; opacity: .35; }
@media (max-width: 479.98px) {
  html form:has(#sf-pay) > .justify-center > .btn-primary { flex-direction: column; gap: 0; }
  html form:has(#sf-pay) > .justify-center > .btn-primary > .vk-btn-total { font-size: 14px; line-height: 20px; }
  html form:has(#sf-pay) > .justify-center > .btn-primary > .vk-btn-total::before { display: none; }
}

/* Exchange form, like the sell form: what you receive sits in the button, larger and centred; the rate stays as one line */
html main:has(#ex-depart) #simulateur form > .bg-mint-soft { grid-column: 1 / -1; }
html main:has(#ex-depart) #simulateur form > .bg-mint-soft > .mt-2 { display: none; }
html main:has(#ex-depart) #simulateur form > .bg-mint-soft > :first-child { justify-content: center; gap: 8px; }
html main:has(#ex-depart) #simulateur form > .btn-primary { grid-column: 1 / -1; justify-self: center; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 14px; width: 100%; max-width: 540px; min-height: 58px; padding: 10px 24px; border-radius: 10px; }
html main:has(#ex-depart) #simulateur form > .btn-primary > .vk-btn-main { font-size: 18px; line-height: 24px; font-weight: 700; }
html main:has(#ex-depart) #simulateur form > .btn-primary > .vk-btn-total { display: inline-flex; align-items: center; gap: 14px; font-size: 16px; line-height: 24px; font-weight: 600; opacity: .85; }
html main:has(#ex-depart) #simulateur form > .btn-primary > .vk-btn-total::before { content: ""; width: 1px; height: 20px; background: currentColor; opacity: .35; }
@media (max-width: 519.98px) {
  html main:has(#ex-depart) #simulateur form > .btn-primary { flex-direction: column; gap: 0; }
  html main:has(#ex-depart) #simulateur form > .btn-primary > .vk-btn-total { font-size: 14px; line-height: 20px; }
  html main:has(#ex-depart) #simulateur form > .btn-primary > .vk-btn-total::before { display: none; }
}

/* Discord button: sparks on hover, and with each hop the "1" pops and a ring pings out, like a new notification */
.vk-fx { position: fixed; z-index: 48; width: 0; height: 0; pointer-events: none; }
.vk-fx > i { position: absolute; top: -3px; left: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); animation: vk-fx-fly .75s cubic-bezier(.15, .7, .3, 1) forwards; }
.vk-fx > i.vk-fx-star { top: -5px; left: -5px; width: 10px; height: 10px; border-radius: 0; background: none; box-shadow: none; }
.vk-fx > i.vk-fx-star::before { content: ""; position: absolute; inset: 0; background: var(--c); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
@keyframes vk-fx-fly {
  0% { opacity: 1; transform: translate(0, 0) scale(.4); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1); }
}
html a.fixed[href*="discord"]::after { display: grid; z-index: 1; }
a.fixed[href*="discord"]::before { content: ""; position: absolute; top: -3px; right: -3px; width: 18px; height: 18px; border-radius: 50%; background: #e5484d; opacity: 0; pointer-events: none; }
@keyframes vk-dc-ping {
  0%, 85%, 100% { opacity: 0; transform: scale(1); }
  86% { opacity: .7; transform: scale(1); }
  95% { opacity: 0; transform: scale(3.2); }
}
@keyframes vk-dc-badge {
  0%, 84%, 100% { transform: scale(1); }
  87% { transform: scale(1.45); }
  90% { transform: scale(.9); }
  92% { transform: scale(1.1); }
  94% { transform: scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  a.fixed[href*="discord"]::before { animation: vk-dc-ping 9s ease-out infinite; }
  a.fixed[href*="discord"]::after { animation: vk-dc-badge 9s ease-in-out infinite; }
  a.fixed[href*="discord"]:hover::before, a.fixed[href*="discord"]:hover::after,
  html:has(main form :focus) a.fixed[href*="discord"]::before, html:has(main form :focus) a.fixed[href*="discord"]::after { animation: none; }
}

/* The Discord button waits a second after the page, then grows in (with a burst of sparks from the script) */
html:not(.vk-dc-in) a.fixed[href*="discord"] { opacity: 0; scale: .3; pointer-events: none; }
a.fixed[href*="discord"] { transition: opacity .25s ease-out, scale .35s cubic-bezier(.3, 1.6, .5, 1); }

/* Mon compte: page numbers under the orders */
.vk-mc-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 18px; }
.vk-mc-pages button { display: inline-grid; min-width: 36px; height: 36px; place-items: center; padding: 0 10px; border: 1px solid #e1dcf6; border-radius: 8px; background: #fff; color: #17143f; font-size: 14px; font-weight: 600; cursor: pointer; }
.vk-mc-pages button:hover:not(:disabled):not([aria-current]) { border-color: #6c67de; color: #6c67de; }
.vk-mc-pages button[aria-current="page"] { border-color: #6c67de; background: #6c67de; color: #fff; }
.vk-mc-pages button:disabled { opacity: .4; cursor: default; }

/* Exchange page: the games card as tall as the untouched form, its lines spread over it, larger type where it fits */
@media (min-width: 1024px) {
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .vk-ex-games.vk-ex-fit { display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(23, 20, 63, .05), 0 8px 24px rgba(23, 20, 63, .06); }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .vk-ex-games.vk-ex-fit > .vk-ex-list { flex: 1; justify-content: space-between; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .vk-ex-games.vk-ex-fit.vk-ex-measure > .vk-ex-list { flex: none; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .vk-ex-games.vk-ex-big > .vk-ex-title { font-size: 19px; line-height: 25px; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .vk-ex-games.vk-ex-big > .vk-ex-text { margin-top: 5px; font-size: 14px; line-height: 20px; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .vk-ex-games.vk-ex-big > .vk-ex-list li { gap: 14px; font-size: 14.5px; line-height: 20px; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .vk-ex-games.vk-ex-big > .vk-ex-list li img { width: 104px; height: 58px; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .vk-ex-games.vk-ex-big > .vk-ex-ticks { font-size: 13.5px; }
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk > .vk-ex-games.vk-ex-big > .vk-trust { font-size: 14px; }
}

/* Header, logged in: one square with the initials and a small arrow; the name is in the menu */
html header button[aria-haspopup="true"]:has(> span.grid) { height: 40px; gap: 6px; padding: 0; border: 0; border-radius: 6px; background: none; }
html header button[aria-haspopup="true"]:has(> span.grid) > span.grid { position: relative; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 6px; background: #241f5c; color: transparent; font-size: 0; transition: border-color .15s; }
html header button[aria-haspopup="true"]:has(> span.grid) > span.grid > img { display: none; }
html header button[aria-haspopup="true"]:has(> span.grid) > span.grid::before { content: attr(data-ini); position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .02em; }
html header button[aria-haspopup="true"]:has(> span.grid) > span.truncate { display: none; }
html header button[aria-haspopup="true"]:has(> span.grid) > svg { color: #b9b6e3; }
html header button[aria-haspopup="true"]:has(> span.grid):hover > span.grid, html header button[aria-haspopup="true"]:has(> span.grid)[aria-expanded="true"] > span.grid { border-color: rgba(255, 255, 255, .5); }
/* Header account square: the arrow beside it gives way to a small violet corner with a mini arrow, which turns when open */
html header button[aria-haspopup="true"]:has(> span.grid) > svg { display: none; }
html header button[aria-haspopup="true"]:has(> span.grid) { gap: 0; }
html header button[aria-haspopup="true"]:has(> span.grid) > span.grid { overflow: visible; }
html header button[aria-haspopup="true"]:has(> span.grid) > span.grid::after { content: ""; position: absolute; right: -6px; bottom: -6px; width: 17px; height: 17px; border: 2px solid #17143f; border-radius: 4px; background: #6c67de url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 9px 9px no-repeat; transition: transform .15s; }
html header button[aria-haspopup="true"][aria-expanded="true"]:has(> span.grid) > span.grid::after { transform: rotate(180deg); }
/* Payment list: the two Moroccan bank logos share one tile */
html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul > li > span:first-child:has(> img + img) { gap: 2px; padding: 4px 3px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px #e1dcf6; }
html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul > li > span:first-child:has(> img + img) > img { height: 20px; padding: 0 2px; border-radius: 0; background: none; box-shadow: none; --tw-ring-shadow: 0 0 #0000; }
html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul > li > span:first-child:has(> img + img) > img + img { border-top: 1px solid #ece9f8; padding-top: 2px; height: 22px; }
html .container-vk:has(> .gap-10 #sf-pay) > .gap-10 > .lg\:order-1 > ul > li > span:first-child > img.vk-pix-logo { padding: 2px 4px; }

/* Sell form: a small logo before each payment method, in its list and in the chosen value */
html form:has(#sf-pay) [data-v="PAYPAL"], html form:has(#sf-pay) [data-v="Skrill"], html form:has(#sf-pay) [data-v="BTC"], html form:has(#sf-pay) [data-v="USDT"], html form:has(#sf-pay) [data-v="USDC"], html form:has(#sf-pay) [data-v^="BINANCE"] { display: inline-flex; align-items: center; gap: 9px; }
html form:has(#sf-pay) [data-v="PAYPAL"]::before, html form:has(#sf-pay) [data-v="Skrill"]::before, html form:has(#sf-pay) [data-v="BTC"]::before, html form:has(#sf-pay) [data-v="USDT"]::before, html form:has(#sf-pay) [data-v="USDC"]::before, html form:has(#sf-pay) [data-v^="BINANCE"]::before { content: ""; flex: none; width: 18px; height: 18px; background: center / contain no-repeat; }
html form:has(#sf-pay) [data-v="PAYPAL"]::before { width: 16px; background-color: #fff; background-size: 13px 13px; border-radius: 4px; padding: 0 1px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23003087' d='M7.3 21.5H3.6L6.8 2.5h6.4c3.6 0 5.6 1.9 5 5.2-.7 3.9-3.4 5.6-7.1 5.6H9z'/%3E%3Cpath fill='%23009cde' d='M9.9 22.5H6.6l2.1-12.3h4.1c2.9 0 4.6-1.2 5.3-3.6 1.6.9 2.3 2.6 1.9 4.8-.6 3.4-3 5.1-6.4 5.1h-2.2z'/%3E%3C/svg%3E"); }
html form:has(#sf-pay) [data-v="Skrill"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='6' fill='%23862165'/%3E%3Cpath fill='%23fff' d='M15.6 8.6c-.3-.9-1.6-1.6-3.5-1.6-2.1 0-3.5.9-3.5 2.3 0 1.5 1.3 2 3.4 2.4 1.5.3 2 .5 2 1s-.6.9-1.8.9c-1.3 0-2.1-.5-2.3-1.2l-1.9.6c.4 1.5 2 2.4 4.2 2.4 2.3 0 3.9-1 3.9-2.6 0-1.6-1.4-2.1-3.5-2.5-1.4-.3-1.9-.5-1.9-.9 0-.4.6-.7 1.5-.7 1 0 1.5.3 1.7.8z'/%3E%3C/svg%3E"); }
html form:has(#sf-pay) [data-v="BTC"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23f7931a'/%3E%3Cpath fill='%23fff' d='M16.6 10.4c.2-1.5-.9-2.3-2.5-2.8l.5-2-1.2-.3-.5 2-1-.2.5-2-1.2-.3-.5 2-.8-.2-1.7-.4-.3 1.3s.9.2.9.2c.5.1.6.5.6.7l-.6 2.3.1.1h-.1l-.8 3.2c-.1.2-.2.4-.6.3l-.9-.2-.6 1.4 1.6.4.9.2-.5 2.1 1.2.3.5-2.1 1 .2-.5 2 1.2.3.5-2.1c2.1.4 3.7.2 4.3-1.7.5-1.5 0-2.4-1.1-3 .8-.2 1.4-.7 1.6-1.8zm-2.8 4c-.4 1.5-3 .7-3.8.5l.7-2.7c.8.2 3.5.6 3.1 2.2zm.4-4c-.3 1.4-2.5.7-3.2.5l.6-2.5c.7.2 2.9.5 2.6 2z'/%3E%3C/svg%3E"); }
html form:has(#sf-pay) [data-v="USDT"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2326a17b'/%3E%3Cpath fill='%23fff' d='M13.3 10.4V8.6h4.1V5.9H6.6v2.7h4.1v1.8c-3.3.2-5.8.8-5.8 1.6s2.5 1.5 5.8 1.6v5.6h2.6v-5.6c3.3-.2 5.8-.8 5.8-1.6s-2.5-1.5-5.8-1.6zm0 2.6c-.1 0-.6.1-1.3.1s-1.2 0-1.3-.1c-2.9-.1-5-.6-5-1.1s2.1-1 5-1.1v1.8h2.6v-1.8c2.9.1 5 .6 5 1.1s-2.1 1-5 1.1z'/%3E%3C/svg%3E"); }
html form:has(#sf-pay) [data-v="USDC"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%232775ca'/%3E%3Cpath fill='%23fff' d='M14.9 13.6c0-1.6-1-2.1-2.9-2.4-1.4-.2-1.7-.5-1.7-1.1s.5-1 1.4-1c.8 0 1.3.3 1.5.9.1.1.2.2.3.2h.8c.2 0 .3-.1.3-.3-.2-.9-.9-1.6-1.9-1.7v-1c0-.2-.1-.3-.3-.3h-.7c-.2 0-.3.1-.3.3v.9c-1.3.2-2.2 1.1-2.2 2.2 0 1.5.9 2.1 2.8 2.3 1.3.2 1.7.5 1.7 1.2s-.6 1.1-1.5 1.1c-1.1 0-1.5-.5-1.6-1.1 0-.1-.2-.2-.3-.2h-.8c-.2 0-.3.1-.3.3.2 1 .8 1.7 2.2 1.9v1c0 .2.1.3.3.3h.7c.2 0 .3-.1.3-.3v-1c1.3-.2 2.2-1.1 2.2-2.3z'/%3E%3Cpath fill='%23fff' d='M9.6 18.1c-3.4-1.2-5.1-5-3.9-8.3.6-1.8 2-3.2 3.9-3.9.2-.1.3-.2.3-.4v-.7c0-.2-.1-.3-.3-.3h-.1C5.4 5.8 3.1 10.3 4.4 14.4c.8 2.4 2.7 4.3 5.1 5.1.2.1.3 0 .4-.2v-.8c0-.2-.1-.4-.3-.4zm4.9-14.6c-.2-.1-.3 0-.4.2v.7c0 .2.1.4.3.5 3.4 1.2 5.1 5 3.9 8.3-.6 1.8-2 3.2-3.9 3.9-.2.1-.3.2-.3.4v.7c0 .2.1.3.3.3h.1c4.1-1.3 6.4-5.8 5.1-9.9-.8-2.5-2.7-4.4-5.1-5.1z'/%3E%3C/svg%3E"); }
html form:has(#sf-pay) [data-v^="BINANCE"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='6' fill='%2314151a'/%3E%3Cg fill='%23f0b90b'%3E%3Cpath d='M12 4.5l2.4 2.4L12 9.3 9.6 6.9z'/%3E%3Cpath d='M12 14.7l2.4 2.4L12 19.5l-2.4-2.4z'/%3E%3Cpath d='M6.9 9.6l2.4 2.4-2.4 2.4L4.5 12z'/%3E%3Cpath d='M17.1 9.6l2.4 2.4-2.4 2.4-2.4-2.4z'/%3E%3Cpath d='M12 10.2l1.8 1.8L12 13.8 10.2 12z'/%3E%3C/g%3E%3C/svg%3E"); }
/* Server list: the price per million smaller and lighter */
html form:has(#sf-pay) [role="listbox"] .vk-opt-hint { color: rgba(255, 255, 255, .55); font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Sell form: a small logo before each crypto network, in its list and in the chosen value */
html form:has(#sf-pay) [data-v="TRC-20"], html form:has(#sf-pay) [data-v="ERC-20"], html form:has(#sf-pay) [data-v="BEP-20"], html form:has(#sf-pay) [data-v="SOL"] { display: inline-flex; align-items: center; gap: 9px; }
html form:has(#sf-pay) [data-v="TRC-20"]::before, html form:has(#sf-pay) [data-v="ERC-20"]::before, html form:has(#sf-pay) [data-v="BEP-20"]::before, html form:has(#sf-pay) [data-v="SOL"]::before { content: ""; flex: none; width: 18px; height: 18px; background: center / contain no-repeat; }
html form:has(#sf-pay) [data-v="TRC-20"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23eb0029'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round' d='M6 6.5l12.2 2.6-6.6 9.4z M6 6.5l5.6 12 M6 6.5l9.3 4.9 2.9-2.3 M15.3 11.4l-3.7 7.1'/%3E%3C/svg%3E"); }
html form:has(#sf-pay) [data-v="ERC-20"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23627eea'/%3E%3Cpath fill='%23fff' fill-opacity='.6' d='M12 3.5v6.3l5.3 2.4z'/%3E%3Cpath fill='%23fff' d='M12 3.5 6.7 12.2 12 9.8z'/%3E%3Cpath fill='%23fff' fill-opacity='.6' d='M12 16.3v4.2l5.3-7.4z'/%3E%3Cpath fill='%23fff' d='M12 20.5v-4.2l-5.3-3.2z'/%3E%3Cpath fill='%23fff' fill-opacity='.2' d='M12 15.3l5.3-3.1L12 9.8z'/%3E%3Cpath fill='%23fff' fill-opacity='.6' d='M6.7 12.2l5.3 3.1V9.8z'/%3E%3C/svg%3E"); }
html form:has(#sf-pay) [data-v="BEP-20"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23f0b90b'/%3E%3Cg fill='%23fff'%3E%3Cpath d='M12 5l2.2 2.2L12 9.4 9.8 7.2z'/%3E%3Cpath d='M12 14.6l2.2 2.2L12 19l-2.2-2.2z'/%3E%3Cpath d='M7.2 9.8l2.2 2.2-2.2 2.2L5 12z'/%3E%3Cpath d='M16.8 9.8L19 12l-2.2 2.2-2.2-2.2z'/%3E%3Cpath d='M12 10.3l1.7 1.7-1.7 1.7-1.7-1.7z'/%3E%3C/g%3E%3C/svg%3E"); }
html form:has(#sf-pay) [data-v="SOL"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%239945ff'/%3E%3Cstop offset='1' stop-color='%2314f195'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='12' fill='%2314151a'/%3E%3Cg fill='url%28%23g%29'%3E%3Cpath d='M7.6 15.3h9.6l-1.8 1.9H5.8z'/%3E%3Cpath d='M7.6 6.8h9.6l-1.8 1.9H5.8z'/%3E%3Cpath d='M15.4 11.1H5.8l1.8 1.8h9.6z'/%3E%3C/g%3E%3C/svg%3E"); }
/* Server list prices: small and grey, whatever colours the list's own rules give its text */
html form:has(#sf-pay) [role="listbox"] [role="option"] .vk-opt-hint { color: #9a97c2 !important; font-size: 11px !important; font-weight: 400 !important; letter-spacing: .01em; }
/* Exchange band: the calmer loop (heroes drop in, trade, jump out, pause) */
html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk::after { background-image: url(/_next/static/vk4/abe4e9739f/worlds-ex-small.svg?v=2); }
@media (min-width: 1200px) {
  html main:has(#ex-depart) > section:nth-of-type(1) > .container-vk::after { background-image: url(/_next/static/vk4/abe4e9739f/worlds-ex.svg?v=2); }
}

/* Account page: a quiet navy card while the saved payment method is on its way */
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk.vk-ba-wait { min-height: 560px; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .05) 50%, transparent 70%) 0 0 / 300% 100% no-repeat, #262160; animation: vk-ba-wait 1.4s linear infinite; }
@keyframes vk-ba-wait { from { background-position: 150% 0, 0 0; } to { background-position: -150% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk.vk-ba-wait { animation: none; } }
/* Payment method buttons (PayPal, Crypto) and the crypto choices (Binance Pay, address) on the navy card */
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk button.rounded-btn.bg-white { border-color: rgba(255, 255, 255, .2); background: #17143f; color: #fff; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk button.rounded-btn.bg-white:hover { border-color: #6c67de; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk button.rounded-btn.bg-brand { border-color: #6c67de; background: #6c67de; color: #fff; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk button.rounded-btn.bg-brand-soft { border-color: #f2b84b; background: rgba(242, 184, 75, .12); color: #f2b84b; }

/* Account page, while the saved payment method is on its way: the card already looks like the form (title band, fields,
   conditions, button), at the form's height; and the price strip's place is kept so nothing moves when it arrives */
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk.vk-ba-wait { min-height: 790px; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk.vk-ba-wait::before { content: ""; display: block; height: 49px; margin: -21px -21px 20px; border-radius: 7px 7px 0 0; background: #6c67de; }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk.vk-ba-wait::after { content: ""; display: block; height: 648px; background: linear-gradient(rgba(242,184,75,.22), rgba(242,184,75,.22)) 0 0 / 100% 46px, linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)) 0 70px / 70px 12px, linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)) calc(50% + 10px) 70px / 130px 12px, linear-gradient(#17143f, #17143f) 0 90px / calc(50% - 10px) 46px, linear-gradient(#17143f, #17143f) 100% 90px / calc(50% - 10px) 46px, linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)) 0 160px / 200px 12px, linear-gradient(#17143f, #17143f) 0 180px / 100% 46px, linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)) 0 252px / 110px 12px, linear-gradient(#17143f, #17143f) 0 272px / 100% 46px, linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.05)) 0 344px / 100% 230px, linear-gradient(rgba(242,184,75,.22), rgba(242,184,75,.22)) 0 600px / 100% 48px; background-repeat: no-repeat; }
@media (max-width: 1023.98px) { html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) .lg\:grid-cols-\[1\.15fr_1fr\] > div:first-child > .card-vk.vk-ba-wait { min-height: 700px; } }
html main:has(.lg\:grid-cols-\[1\.15fr_1fr\]) > section:nth-of-type(1) > .container-vk:not(:has(> .rounded-card)) > h1 + p { margin-bottom: 106px; }

/* Home page: the four buttons as a neat 2 by 2 grid, each with its icon; "Buy Kamas" (to 1Kamas) in purple */
@media (min-width: 480px) {
  html main:has(> #faq) > section:first-of-type div:has(> a[href$="/rachat-compte-dofus/"]) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 520px; }
}
@media (min-width: 480px) and (max-width: 1023.98px) { html main:has(> #faq) > section:first-of-type div:has(> a[href$="/rachat-compte-dofus/"]) { margin-left: auto; margin-right: auto; } }
html main:has(> #faq) > section:first-of-type div:has(> a[href$="/rachat-compte-dofus/"]) > a { display: inline-flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; min-height: 54px; margin: 0; padding: 0 18px; border-radius: 10px; font-size: 15px; font-weight: 600; text-align: left; transition: transform .15s, background-color .15s, border-color .15s, box-shadow .15s; }
html main:has(> #faq) > section:first-of-type div:has(> a[href$="/rachat-compte-dofus/"]) > a::before { content: ""; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--vk-ico) center / contain no-repeat; mask: var(--vk-ico) center / contain no-repeat; }
html main:has(> #faq) > section:first-of-type div:has(> a[href$="/rachat-compte-dofus/"]) > a:hover { transform: translateY(-1px); }
html main:has(> #faq) > section:first-of-type div:has(> a[href$="/rachat-compte-dofus/"]) > a[href$="/vendre-des-kamas/"] { --vk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9.5 8.5v7M9.5 12l4.5-3.5M9.5 12l4.5 3.5'/%3E%3C/svg%3E"); box-shadow: 0 6px 18px rgba(242, 184, 75, .25); }
html main:has(> #faq) > section:first-of-type div:has(> a[href$="/rachat-compte-dofus/"]) > a[href$="/echange-kamas/"] { --vk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13l-3.5-3.5M20 16H7l3.5 3.5'/%3E%3C/svg%3E"); border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .04); }
html main:has(> #faq) > section:first-of-type div:has(> a[href$="/rachat-compte-dofus/"]) > a[href$="/rachat-compte-dofus/"] { --vk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Ccircle cx='9' cy='11' r='2.4'/%3E%3Cpath d='M5.8 16.5c.6-1.6 1.8-2.4 3.2-2.4s2.6.8 3.2 2.4M14.5 10h4M14.5 13.5h3'/%3E%3C/svg%3E"); border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .04); }
html main:has(> #faq) > section:first-of-type div:has(> a[href$="/rachat-compte-dofus/"]) > a[href$="/echange-kamas/"]:hover, html main:has(> #faq) > section:first-of-type div:has(> a[href$="/rachat-compte-dofus/"]) > a[href$="/rachat-compte-dofus/"]:hover { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .08); }
html main:has(> #faq) > section:first-of-type div:has(> a[href$="/rachat-compte-dofus/"]) > a.vk-buy-hero { --vk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8h13l-1 12.5h-11z'/%3E%3Cpath d='M9 10.5V7a3 3 0 0 1 6 0v3.5'/%3E%3C/svg%3E"); border: 1px solid #9a47bf; background: #7a2d9c; color: #fff; box-shadow: 0 6px 18px rgba(122, 45, 156, .35); }
html main:has(> #faq) > section:first-of-type div:has(> a[href$="/rachat-compte-dofus/"]) > a.vk-buy-hero:hover { background: #8e37b4; border-color: #b05fd4; color: #fff; }
html main:has(> #faq) > section:first-of-type div:has(> a[href$="/rachat-compte-dofus/"]) > a.vk-buy-hero > svg { display: none; }

/* Warning popup: the example names in a red box, like the sell page's warning */
html .vk-scam-box { margin: 16px 0 0; padding: 10px 12px 10px 38px; border: 1px solid #f87171; border-radius: 8px; background: #fee2e2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2.5 20h19L12 3Z'/%3E%3Cpath d='M12 10v4'/%3E%3Ccircle cx='12' cy='17' r='.6'/%3E%3C/svg%3E") 12px 11px / 17px 17px no-repeat; color: #991b1b; font-size: 13px; line-height: 19px; }
html .vk-scam-box > p { margin: 0; }
html .vk-scam-box + div { margin-top: 10px; }
html .vk-scam-box > .vk-scam-ex { margin-top: 2px; font-weight: 700; color: #b91c1c; }

/* vk-bank-order.css: SEPA / Pix fields beside the payment choice, the holder's address right under the payment */
html form:has(#sf-pay) .space-y-5 > :has(label[for="sf-iban"]),
html form:has(#sf-pay) .space-y-5 > :has(label[for="sf-pix"]) { order: 22; }
html form:has(#sf-pay) > fieldset { order: 25; }
@media (min-width: 640px) {
  html form:has(#sf-pay) .space-y-5 > :has(label[for="sf-iban"]) { grid-column: span 3; }
  html form:has(#sf-pix) .space-y-5 > :has(> label[for="sf-pay"]) { grid-column: span 2; }
  html form:has(#sf-pay) .space-y-5 > :has(label[for="sf-pix"]) { grid-column: span 4; }
}

/* vk-mes-infos.css: Mon compte > Mes informations, compact, one line per section */
html .card-vk:has(#pw-cur) { position: relative; padding: 0 !important; overflow: hidden; }
html .card-vk:has(#pw-cur)::before { display: block; padding: 14px 22px; background: #6c67de; color: #fff; font-size: 17px; font-weight: 700; line-height: 24px; }
html .card-vk:has(#pw-cur)::after { position: absolute; top: 14px; right: 22px; max-width: 50%; color: rgba(255,255,255,.82); font-size: 13px; line-height: 24px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html .card-vk:has(#pw-cur)::before { content: "Mes informations"; }
html .card-vk:has(#pw-cur)::after { content: "Nécessaires pour vendre, échanger et vendre un compte"; }
html .card-vk .max-w-md:has(#pw-cur)::before { content: "Identité"; }
html[lang^="en"]:not([data-vk-lang]) .card-vk:has(#pw-cur)::before, html[data-vk-lang="en"] .card-vk:has(#pw-cur)::before { content: "My information"; }
html[lang^="en"]:not([data-vk-lang]) .card-vk:has(#pw-cur)::after, html[data-vk-lang="en"] .card-vk:has(#pw-cur)::after { content: "Needed to sell, exchange and sell an account"; }
html[lang^="en"]:not([data-vk-lang]) .card-vk .max-w-md:has(#pw-cur)::before, html[data-vk-lang="en"] .card-vk .max-w-md:has(#pw-cur)::before { content: "Identity"; }
html[lang="es"]:not([data-vk-lang]) .card-vk:has(#pw-cur)::before, html[data-vk-lang="es"] .card-vk:has(#pw-cur)::before { content: "Mis datos"; }
html[lang="es"]:not([data-vk-lang]) .card-vk:has(#pw-cur)::after, html[data-vk-lang="es"] .card-vk:has(#pw-cur)::after { content: "Necesarios para vender, intercambiar y vender una cuenta"; }
html[lang="es"]:not([data-vk-lang]) .card-vk .max-w-md:has(#pw-cur)::before, html[data-vk-lang="es"] .card-vk .max-w-md:has(#pw-cur)::before { content: "Identidad"; }
html[lang="pt"]:not([data-vk-lang]) .card-vk:has(#pw-cur)::before, html[data-vk-lang="pt"] .card-vk:has(#pw-cur)::before { content: "Os meus dados"; }
html[lang="pt"]:not([data-vk-lang]) .card-vk:has(#pw-cur)::after, html[data-vk-lang="pt"] .card-vk:has(#pw-cur)::after { content: "Necessários para vender, trocar e vender uma conta"; }
html[lang="pt"]:not([data-vk-lang]) .card-vk .max-w-md:has(#pw-cur)::before, html[data-vk-lang="pt"] .card-vk .max-w-md:has(#pw-cur)::before { content: "Identidade"; }
html .card-vk .max-w-md:has(#pw-cur) { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 14px; max-width: none; padding: 0 22px 4px; }
html .card-vk .max-w-md:has(#pw-cur) > * { grid-column: 1 / -1; margin: 0 !important; }
html .card-vk .max-w-md:has(#pw-cur)::before { grid-column: 1 / -1; padding: 16px 0 10px; color: #17143f; font-size: 14px; font-weight: 700; }
html .card-vk:has(#pw-cur) .label-vk { margin-bottom: 5px; font-size: 12.5px; font-weight: 600; }
html .card-vk:has(#pw-cur) .input-vk { height: 40px; padding-top: 0; padding-bottom: 0; border-radius: 8px; font-size: 14px; }
html .card-vk:has(#pw-cur) .btn-primary { height: 40px; min-height: 40px; padding: 0 18px; border-radius: 8px; white-space: nowrap; }
/* Identité: name and e-mail side by side, read-only boxes with a lock */
html .card-vk .max-w-md:has(#pw-cur) > div.flex { display: block; grid-column: auto; padding: 0; border: 0; }
html .card-vk .max-w-md:has(#pw-cur) > div.flex > span:first-child { display: block; margin-bottom: 5px; color: #3b3769; font-size: 12.5px; font-weight: 600; }
html .card-vk .max-w-md:has(#pw-cur) > div.flex > span:last-child { display: flex; align-items: center; height: 40px; padding: 0 36px 0 12px; overflow: hidden; border: 1px solid #e3e1ee; border-radius: 8px; background: #fbfbfd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a97c2' stroke-width='2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") right 12px center / 14px 14px no-repeat; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; }
html .card-vk .max-w-md:has(#pw-cur) > p { padding: 8px 0 16px; font-size: 12.5px; }
/* Coordonnées: country, postal code, phone and the button on one line */
html .card-vk .max-w-md:has(#pw-cur) > form[data-vk-profil-bloc] { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.8fr) minmax(0,1.6fr) auto; gap: 10px 14px; align-items: start; padding: 16px 0 !important; border-top: 1px solid #f0eff6; }
html .card-vk .max-w-md:has(#pw-cur) > form[data-vk-profil-bloc] > * { grid-column: 1 / -1; margin: 0 !important; }
html .card-vk .max-w-md:has(#pw-cur) > form[data-vk-profil-bloc] > h3, html .card-vk .max-w-md:has(#pw-cur) > form[data-vk-profil-bloc] > [data-vk-profil-adresse] > h3, html .card-vk .max-w-md:has(#pw-cur) > form:has(#pw-cur) > h3, html .card-vk .max-w-md:has(#pw-cur) > section > div:first-child h3 { display: flex; align-items: center; gap: 8px; color: #17143f; font-size: 14px; font-weight: 700; }
html .card-vk .max-w-md:has(#pw-cur) > form[data-vk-profil-bloc] > h3 + p, html .card-vk .max-w-md:has(#pw-cur) > form[data-vk-profil-bloc] > [data-vk-profil-adresse] > h3 + p { display: none; }
html .card-vk .max-w-md:has(#pw-cur) > form[data-vk-profil-bloc] > [data-vkp-champ] { grid-column: auto; }
html .card-vk .max-w-md:has(#pw-cur) > form[data-vk-profil-bloc] > p:empty { display: none; }
html .card-vk .max-w-md:has(#pw-cur) > form[data-vk-profil-bloc] > button[data-vkp="enregistrer"] { grid-column: auto; margin-top: 22px !important; }
html .card-vk .max-w-md:has(#pw-cur) > form[data-vk-profil-bloc] [data-vkp-champ="tel"] .flex > select, html .card-vk .max-w-md:has(#pw-cur) > form[data-vk-profil-bloc] [data-vkp-champ="tel"] .flex > .vkpick-btn { flex: 0 0 122px !important; width: 122px !important; }
html .card-vk .max-w-md:has(#pw-cur) > form[data-vk-profil-bloc] > h3[data-vk-chip]::after { content: attr(data-vk-chip); padding: 2px 8px; border-radius: 5px; background: #fff4e0; color: #9a5b00; font-size: 11.5px; font-weight: 600; }
/* Adresse SEPA / Pix: one dashed line with its button; the fields three by three when it's being edited */
html .card-vk .max-w-md:has(#pw-cur) > form[data-vk-profil-bloc] > [data-vk-profil-adresse] { padding-top: 16px !important; margin-top: 6px !important; border-top: 1px solid #f0eff6 !important; }
html .card-vk .max-w-md:has(#pw-cur) > form[data-vk-profil-bloc] > [data-vk-profil-adresse] > * { margin-top: 0 !important; }
html .card-vk .max-w-md:has(#pw-cur) > form[data-vk-profil-bloc] > [data-vk-profil-adresse] > div.flex { margin-top: 10px !important; padding: 8px 8px 8px 12px; border: 1px dashed #d6d3ee; border-radius: 8px; }
html .card-vk .max-w-md:has(#pw-cur) > form[data-vk-profil-bloc] > [data-vk-profil-adresse] > div.flex > p { font-size: 13px; }
html .card-vk .max-w-md:has(#pw-cur) > form[data-vk-profil-bloc] > [data-vk-profil-adresse] > div.flex > button { height: 36px; padding: 0 16px; border-radius: 8px; background: #fff; }
html .card-vk .max-w-md:has(#pw-cur) > form[data-vk-profil-bloc] > [data-vk-profil-adresse] > div.space-y-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px 14px; margin-top: 12px !important; }
html .card-vk .max-w-md:has(#pw-cur) > form[data-vk-profil-bloc] > [data-vk-profil-adresse] > div.space-y-3[hidden] { display: none; }
html .card-vk .max-w-md:has(#pw-cur) > form[data-vk-profil-bloc] > [data-vk-profil-adresse] > div.space-y-3 > * { margin: 0 !important; }
html .card-vk .max-w-md:has(#pw-cur) > form[data-vk-profil-bloc] > [data-vk-profil-adresse] > div.space-y-3 > [data-vkp-champ="a-rue"] { grid-column: span 2; }
html .card-vk .max-w-md:has(#pw-cur) > form[data-vk-profil-bloc] > [data-vk-profil-adresse] > div.space-y-3 > div.flex { grid-column: 1 / -1; }
/* Mot de passe: the three fields and the button on one line */
html .card-vk .max-w-md:has(#pw-cur) > form:has(#pw-cur) { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)) auto; gap: 10px 14px; align-items: start; padding: 16px 0 !important; border-top: 1px solid #f0eff6; }
html .card-vk .max-w-md:has(#pw-cur) > form:has(#pw-cur) > * { grid-column: auto; margin: 0 !important; }
html .card-vk .max-w-md:has(#pw-cur) > form:has(#pw-cur) > h3, html .card-vk .max-w-md:has(#pw-cur) > form:has(#pw-cur) > p { grid-column: 1 / -1; }
html .card-vk .max-w-md:has(#pw-cur) > form:has(#pw-cur) > button { margin-top: 22px !important; }
/* Notifications Discord: text on the left, the button on the right */
html .card-vk .max-w-md:has(#pw-cur) > section { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 20px; padding: 16px 0 18px !important; border-top: 1px solid #f0eff6; }
html .card-vk .max-w-md:has(#pw-cur) > section > * { grid-column: 1; margin: 0 !important; }
html .card-vk .max-w-md:has(#pw-cur) > section > div:first-child { grid-column: 1 / -1; }
html .card-vk .max-w-md:has(#pw-cur) > section > p.text-body { margin-top: 8px !important; font-size: 13px; }
html .card-vk .max-w-md:has(#pw-cur) > section > ul { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px !important; }
html .card-vk .max-w-md:has(#pw-cur) > section > ul > li { margin: 0 !important; font-size: 12.5px; }
html .card-vk .max-w-md:has(#pw-cur) > section > div.mt-4 { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
html .card-vk .max-w-md:has(#pw-cur) > section > div.mt-4 > button { height: 40px; border-radius: 8px; }
html .card-vk .max-w-md:has(#pw-cur) > section > div.rounded-card { grid-column: 1 / -1; margin-top: 12px !important; }
html .card-vk .max-w-md:has(#pw-cur) > section > p.text-xs { grid-column: 1 / -1; margin-top: 10px !important; }
@media (max-width: 767.98px) {
  html .card-vk:has(#pw-cur)::after { display: none; }
  html .card-vk .max-w-md:has(#pw-cur) > form[data-vk-profil-bloc] { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  html .card-vk .max-w-md:has(#pw-cur) > form[data-vk-profil-bloc] > [data-vkp-champ="tel"], html .card-vk .max-w-md:has(#pw-cur) > form[data-vk-profil-bloc] > button[data-vkp="enregistrer"] { grid-column: 1 / -1; }
  html .card-vk .max-w-md:has(#pw-cur) > form[data-vk-profil-bloc] > button[data-vkp="enregistrer"] { margin-top: 0 !important; justify-self: start; }
  html .card-vk .max-w-md:has(#pw-cur) > form:has(#pw-cur) { grid-template-columns: minmax(0,1fr); }
  html .card-vk .max-w-md:has(#pw-cur) > form:has(#pw-cur) > button { margin-top: 0 !important; justify-self: start; }
  html .card-vk .max-w-md:has(#pw-cur) > form[data-vk-profil-bloc] > [data-vk-profil-adresse] > div.space-y-3 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  html .card-vk .max-w-md:has(#pw-cur) > section { grid-template-columns: minmax(0,1fr); }
  html .card-vk .max-w-md:has(#pw-cur) > section > div.mt-4 { grid-column: 1; grid-row: auto; margin-top: 12px !important; justify-self: start; }
}
@media (max-width: 519.98px) {
  html .card-vk .max-w-md:has(#pw-cur) { grid-template-columns: minmax(0,1fr); padding: 0 16px 4px; }
  html .card-vk:has(#pw-cur)::before { padding: 12px 16px; }
  html .card-vk .max-w-md:has(#pw-cur) > div.flex { margin-bottom: 10px !important; }
  html .card-vk .max-w-md:has(#pw-cur) > form[data-vk-profil-bloc] > [data-vk-profil-adresse] > div.space-y-3 { grid-template-columns: minmax(0,1fr); }
  html .card-vk .max-w-md:has(#pw-cur) > form[data-vk-profil-bloc] > [data-vk-profil-adresse] > div.space-y-3 > [data-vkp-champ="a-rue"] { grid-column: auto; }
}

/* Mon compte page numbers: the … between far pages */
html .vk-mc-pages .vk-mc-gap { display: inline-grid; place-items: center; min-width: 22px; color: #9a97c2; font-weight: 600; }

/* vk-mc-dash.css: Mon compte, layout B (welcome card, totals, side menu, one card per tab) */
html .vk-mc-wrap { padding-top: 18px; padding-bottom: 44px; }
html .vk-mc-wrap > .vk-mc-crumb { margin-bottom: 14px; }
html .vk-mc-wrap .vk-mc-hero { padding: 0 !important; overflow: hidden; }
html .vk-mc-wrap .vk-mc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; padding: 16px 20px; }
html .vk-mc-wrap .vk-mc-av { position: relative; display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 10px; background: #17143f; color: #fff; font-size: 17px; font-weight: 700; }
html .vk-mc-wrap .vk-mc-av img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; }
html .vk-mc-wrap .vk-mc-av::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 4px; background: #6c67de; }
html .vk-mc-wrap .vk-mc-who { flex: 1 1 200px; min-width: 0; }
html .vk-mc-wrap .vk-mc-who h1 { margin: 0; color: #17143f; font-size: 18px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
html .vk-mc-wrap .vk-mc-who p { margin: 2px 0 0; color: #6b6890; font-size: 13px; overflow-wrap: anywhere; }
html .vk-mc-wrap .vk-mc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
html .vk-mc-wrap .vk-mc-acts .btn-primary, html .vk-mc-wrap .vk-mc-acts .btn-ghost { height: 40px; border-radius: 8px; }
html .vk-mc-wrap .vk-mc-out { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; color: #6b6890; font-size: 13px; font-weight: 600; }
html .vk-mc-wrap .vk-mc-out::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h4v16h-4M10 8l-4 4 4 4M6 12h10'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h4v16h-4M10 8l-4 4 4 4M6 12h10'/%3E%3C/svg%3E") center / contain no-repeat; }
html .vk-mc-wrap .vk-mc-out:hover { color: #6c67de; }
html .vk-mc-wrap .vk-mc-hero > div.border-warn-border { margin: 0 !important; padding: 8px 8px 8px 16px; border: 0; border-top: 1px solid #f0eff6; border-radius: 0; background: #faf9ff; }
html .vk-mc-wrap .vk-mc-hero > div.border-warn-border p { color: #3b3769; font-size: 13px; font-weight: 500; }
html .vk-mc-wrap .vk-mc-hero > div.border-warn-border a { padding: 7px 14px; border-radius: 7px; font-size: 13px; }
html .vk-mc-wrap .vk-mc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 16px 0; }
html .vk-mc-wrap .vk-mc-st { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 84px; padding: 14px 16px 14px 70px !important; }
html .vk-mc-wrap .vk-mc-st::before { content: ""; position: absolute; left: 16px; top: 50%; width: 38px; height: 38px; margin-top: -19px; border-radius: 9px; background: #f1f0fe; }
html .vk-mc-wrap .vk-mc-st::after { content: ""; position: absolute; left: 26px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: #6c67de; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
html .vk-mc-wrap .vk-mc-st > div:first-child { color: #6b6890; font-size: 12px; font-weight: 500; }
html .vk-mc-wrap .vk-mc-st > div:nth-child(2) { margin-top: 1px; font-size: 20px; font-weight: 700; }
html .vk-mc-wrap .vk-mc-sub { margin-top: 1px; color: #9a97c2; font-size: 11.5px; }
html .vk-mc-wrap .vk-mc-hero + .vk-mc-grid { margin-top: 16px; }
html .vk-mc-wrap .vk-mc-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
html .vk-mc-wrap .vk-mc-side { position: sticky; top: 112px; display: grid; gap: 12px; }
html .vk-mc-wrap .vk-mc-nav { display: flex; flex-direction: column; gap: 2px; padding: 8px !important; }
html .vk-mc-wrap .vk-mc-tab { display: flex; align-items: center; gap: 12px; width: 100%; height: 46px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #3b3769; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; transition: background-color .15s, color .15s; }
html .vk-mc-wrap .vk-mc-tab:hover { background: #f6f5fd; }
html .vk-mc-wrap .vk-mc-tab.on { background: #6c67de; color: #fff; }
html .vk-mc-wrap .vk-mc-ic { flex: none; width: 18px; height: 18px; background: #6c67de; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
html .vk-mc-wrap .vk-mc-tab.on .vk-mc-ic { background: #fff; }
html .vk-mc-wrap .vk-mc-lb { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html .vk-mc-wrap .vk-mc-n { padding: 2px 7px; border-radius: 5px; background: #f4f3f8; color: #6b6890; font-size: 12px; }
html .vk-mc-wrap .vk-mc-tab.on .vk-mc-n { background: rgba(255,255,255,.2); color: #fff; }
html .vk-mc-wrap .vk-mc-tab[data-k="infos"] { position: relative; margin-top: 9px; }
html .vk-mc-wrap .vk-mc-tab[data-k="infos"]::before { content: ""; position: absolute; left: 4px; right: 4px; top: -6px; border-top: 1px solid #f0eff6; }
html .vk-mc-wrap .vk-mc-tab[data-k="vente"] .vk-mc-ic { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9.5 8.5v7M9.5 12l4.5-3.5M9.5 12l4.5 3.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9.5 8.5v7M9.5 12l4.5-3.5M9.5 12l4.5 3.5'/%3E%3C/svg%3E"); }
html .vk-mc-wrap .vk-mc-tab[data-k="echange"] .vk-mc-ic { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13l-3.5-3.5M20 16H7l3.5 3.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13l-3.5-3.5M20 16H7l3.5 3.5'/%3E%3C/svg%3E"); }
html .vk-mc-wrap .vk-mc-tab[data-k="compte"] .vk-mc-ic { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Ccircle cx='9' cy='11' r='2.4'/%3E%3Cpath d='M5.8 16.5c.6-1.6 1.8-2.4 3.2-2.4s2.6.8 3.2 2.4M14.5 10h4M14.5 13.5h3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Ccircle cx='9' cy='11' r='2.4'/%3E%3Cpath d='M5.8 16.5c.6-1.6 1.8-2.4 3.2-2.4s2.6.8 3.2 2.4M14.5 10h4M14.5 13.5h3'/%3E%3C/svg%3E"); }
html .vk-mc-wrap .vk-mc-tab[data-k="infos"] .vk-mc-ic { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c1.5-3.5 4.5-5 8-5s6.5 1.5 8 5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c1.5-3.5 4.5-5 8-5s6.5 1.5 8 5'/%3E%3C/svg%3E"); }
html .vk-mc-wrap .vk-mc-st[data-k="eur"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 6.5A6.5 6.5 0 1 0 17 17.5M5 10.5h8M5 13.5h8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 6.5A6.5 6.5 0 1 0 17 17.5M5 10.5h8M5 13.5h8'/%3E%3C/svg%3E"); }
html .vk-mc-wrap .vk-mc-st[data-k="usd"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M16.5 7.5c-.8-1.3-2.4-2-4.5-2-2.6 0-4.3 1.3-4.3 3.2 0 4.6 9 2.4 9 7 0 1.9-1.9 3.3-4.7 3.3-2.3 0-4-.8-4.8-2.3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M16.5 7.5c-.8-1.3-2.4-2-4.5-2-2.6 0-4.3 1.3-4.3 3.2 0 4.6 9 2.4 9 7 0 1.9-1.9 3.3-4.7 3.3-2.3 0-4-.8-4.8-2.3'/%3E%3C/svg%3E"); }
html .vk-mc-wrap .vk-mc-st[data-k="mad"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E"); }
html .vk-mc-wrap .vk-mc-st[data-k="n"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l9-5 9 5v8l-9 5-9-5z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l9-5 9 5v8l-9 5-9-5z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E"); }
html .vk-mc-wrap .vk-mc-help { padding: 14px 16px !important; }
html .vk-mc-wrap .vk-mc-help b { display: block; color: #17143f; font-size: 13.5px; }
html .vk-mc-wrap .vk-mc-help p { margin: 4px 0 10px; color: #6b6890; font-size: 12.5px; line-height: 1.45; }
html .vk-mc-wrap .vk-mc-helpbtn { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid #e3e1ee; border-radius: 7px; color: #17143f; font-size: 13px; font-weight: 600; }
html .vk-mc-wrap .vk-mc-helpbtn:hover { border-color: #6c67de; color: #6c67de; }
html .vk-mc-wrap .vk-mc-main { min-width: 0; padding: 0 !important; overflow: hidden; }
html .vk-mc-wrap .vk-mc-band { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 0 20px; background: #6c67de; }
html .vk-mc-wrap .vk-mc-band h2 { margin: 0; color: #fff; font-size: 16px; font-weight: 700; }
html .vk-mc-wrap .vk-mc-band span { color: rgba(255,255,255,.85); font-size: 13px; text-align: right; }
html .vk-mc-wrap .vk-mc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid #f0eff6; }
html .vk-mc-wrap .vk-mc-q { flex: 1 1 220px; max-width: 340px; height: 36px; padding: 0 12px 0 34px; border: 1px solid #e3e1ee; border-radius: 8px; background: #f8f7fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6890' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E") 11px center / 15px 15px no-repeat; color: #17143f; font-size: 13px; outline: none; }
html .vk-mc-wrap .vk-mc-q:focus { border-color: #6c67de; box-shadow: 0 0 0 3px rgba(108,103,222,.15); }
html .vk-mc-wrap .vk-mc-filt { display: flex; flex-wrap: wrap; gap: 6px; }
html .vk-mc-wrap .vk-mc-filt button { height: 30px; padding: 0 10px; border: 1px solid #e3e1ee; border-radius: 7px; background: #fff; color: #3b3769; font-size: 12.5px; font-weight: 600; cursor: pointer; }
html .vk-mc-wrap .vk-mc-filt button:hover { border-color: #6c67de; color: #6c67de; }
html .vk-mc-wrap .vk-mc-filt button.on { border-color: #6c67de; background: #f4f3fe; color: #6c67de; }
html .vk-mc-wrap .vk-mc-none { padding: 22px 20px; color: #6b6890; font-size: 13.5px; }
html .vk-mc-wrap .vk-mc-body > p { padding: 20px; }
html .vk-mc-wrap .vk-mc-body > .overflow-x-auto { margin: 0; }
html .vk-mc-wrap .vk-mc-body table th { padding: 10px 14px; border-bottom: 1px solid #f0eff6; background: #fbfbfd; color: #6b6890; font-size: 11.5px; letter-spacing: .04em; }
html .vk-mc-wrap .vk-mc-body table td { padding: 11px 14px; vertical-align: middle; }
html .vk-mc-wrap .vk-mc-body table th:first-child, html .vk-mc-wrap .vk-mc-body table td:first-child { padding-left: 20px; }
html .vk-mc-wrap .vk-mc-body table th:last-child, html .vk-mc-wrap .vk-mc-body table td:last-child { padding-right: 20px; white-space: nowrap; }
html .vk-mc-wrap .vk-mc-body table tbody tr { border-color: #f4f3f8; }
html .vk-mc-wrap .vk-mc-body table td > span.text-xs.font-semibold { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 4px; background: #f4f3f8; white-space: nowrap; }
html .vk-mc-wrap .vk-mc-body table td > span.text-xs.font-semibold::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: currentColor; }
html .vk-mc-wrap .vk-mc-body table td > span.text-mint-dark { background: #e6f7ef; color: #137a4b; }
html .vk-mc-wrap .vk-mc-body table td > span.text-red-600 { background: #fdecec; color: #b42318; }
html .vk-mc-wrap .vk-mc-body table td > span.text-amber-700 { background: #fff4e0; color: #9a5b00; }
html .vk-mc-wrap .vk-mc-body table td > span.text-brand { background: #f1f0fe; color: #5a55c9; }
html .vk-mc-wrap .vk-mc-body .vk-mc-pages { align-items: center; justify-content: flex-end; gap: 6px; margin: 0; padding: 12px 20px; border-top: 1px solid #f0eff6; }
html .vk-mc-wrap .vk-mc-body .vk-mc-pages .vk-mc-info { margin-right: auto; color: #6b6890; font-size: 12.5px; }
/* Mes informations inside the tab's card: the band above names it, its own band goes */
html .card-vk.vk-mc-main:has(#pw-cur)::before, html .card-vk.vk-mc-main:has(#pw-cur)::after { content: none !important; display: none !important; }
@media (max-width: 1023.98px) {
  html .vk-mc-wrap .vk-mc-grid { grid-template-columns: minmax(0, 1fr); }
  html .vk-mc-wrap .vk-mc-side { position: static; }
  html .vk-mc-wrap .vk-mc-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  html .vk-mc-wrap .vk-mc-tab { flex: none; width: auto; height: 40px; }
  html .vk-mc-wrap .vk-mc-tab[data-k="infos"] { margin-top: 0; }
  html .vk-mc-wrap .vk-mc-tab[data-k="infos"]::before { display: none; }
  html .vk-mc-wrap .vk-mc-help { display: none; }
  html .vk-mc-wrap .vk-mc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639.98px) {
  html .vk-mc-wrap .vk-mc-top { padding: 14px 16px; }
  html .vk-mc-wrap .vk-mc-acts { width: 100%; }
  html .vk-mc-wrap .vk-mc-acts .btn-primary, html .vk-mc-wrap .vk-mc-acts .btn-ghost { flex: 1 1 140px; justify-content: center; }
  html .vk-mc-wrap .vk-mc-st { min-height: 72px; padding: 12px 12px 12px 60px !important; }
  html .vk-mc-wrap .vk-mc-st::before { left: 12px; width: 34px; height: 34px; margin-top: -17px; }
  html .vk-mc-wrap .vk-mc-st::after { left: 20px; }
  html .vk-mc-wrap .vk-mc-st > div:nth-child(2) { font-size: 17px; }
  html .vk-mc-wrap .vk-mc-band span { display: none; }
  html .vk-mc-wrap .vk-mc-tools { padding: 12px 16px; }
  html .vk-mc-wrap .vk-mc-q { max-width: none; }
}

/* Mon compte: phone buttons on their own line; the info tab's content keeps its own padding inside the card */
@media (max-width: 519.98px) { html .vk-mc-wrap .vk-mc-acts .btn-primary, html .vk-mc-wrap .vk-mc-acts .btn-ghost { flex: 1 1 100%; white-space: nowrap; } }
html .vk-mc-wrap .vk-mc-body > .max-w-md:has(#pw-cur) { margin-top: 0; }
/* Mes informations: password labels on one line so the three boxes stay level */
html .card-vk .max-w-md:has(#pw-cur) > form:has(#pw-cur) > div > label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* vk-sell-miss.css: missing fields in red after a press on "Vendre les Kamas" */
html :is(form:has(#sf-pay), form:has(#ex-depart)) button[type="submit"]:disabled { pointer-events: none; }
html :is(form:has(#sf-pay), form:has(#ex-depart)) div:has(> button[type="submit"]) { flex-wrap: wrap; }
html :is(form:has(#sf-pay), form:has(#ex-depart)) div:has(> button[type="submit"]):has(> button:disabled) { cursor: not-allowed; }
html :is(form:has(#sf-pay), form:has(#ex-depart)) .vk-miss, html :is(form:has(#sf-pay), form:has(#ex-depart)) .vk-miss-h { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.25) !important; }
html :is(form:has(#sf-pay), form:has(#ex-depart)) .vk-miss-l, html :is(form:has(#sf-pay), form:has(#ex-depart)) .vk-miss-hl { color: #f87171 !important; }
html :is(form:has(#sf-pay), form:has(#ex-depart)) div[data-vk-miss]::after { content: attr(data-vk-miss); flex: 0 0 100%; margin-top: 10px; color: #f87171; font-size: 13px; font-weight: 600; text-align: center; }

html form:has(#ex-depart)[data-vk-miss]::after { grid-column: 1 / -1; order: 9999; width: 100%; content: attr(data-vk-miss); display: block; margin-top: 10px; color: #f87171; font-size: 13px; font-weight: 600; text-align: center; }

/* Compulsory fields: a red star after their label (the sell form's own stars, shown again; the exchange form's added) */
html form:has(#ex-depart) label[for="ex-depart"]::after, html form:has(#ex-depart) label[for="ex-qte-payer"]::after, html form:has(#ex-depart) label[for="ex-donneur"]::after, html form:has(#ex-depart) label[for="ex-arrivee"]::after, html form:has(#ex-depart) label[for="ex-qte-recevoir"]::after, html form:has(#ex-depart) label[for="ex-recepteur"]::after { content: "*"; margin-left: 4px; color: #f87171; font-weight: 700; }

/* Sell form, "Moyen de contact": each choice with its logo (WhatsApp, Discord, Telegram, Microsoft Teams, Facebook) */
html form:has(#sf-pay) [data-v="WhatsApp"], html form:has(#sf-pay) [data-v="Discord"], html form:has(#sf-pay) [data-v="Telegram"], html form:has(#sf-pay) [data-v="Teams"], html form:has(#sf-pay) [data-v="Facebook"] { display: inline-flex; align-items: center; gap: 9px; }
html form:has(#sf-pay) [data-v="WhatsApp"]::before, html form:has(#sf-pay) [data-v="Discord"]::before, html form:has(#sf-pay) [data-v="Telegram"]::before, html form:has(#sf-pay) [data-v="Teams"]::before, html form:has(#sf-pay) [data-v="Facebook"]::before { content: ""; flex: none; width: 18px; height: 18px; background: center / contain no-repeat; }
html form:has(#sf-pay) [data-v="WhatsApp"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2325d366'/%3E%3Cpath fill='%23fff' d='M12 5.2a6.8 6.8 0 0 0-5.9 10.2L5.2 18.8l3.5-.9A6.8 6.8 0 1 0 12 5.2zm3.9 9.5c-.2.5-1 .9-1.4 1-.4 0-.8.2-2.5-.5-2.1-.8-3.4-2.9-3.5-3.1-.1-.1-.8-1.1-.8-2.1s.5-1.5.7-1.7c.2-.2.4-.2.5-.2h.4c.1 0 .3 0 .4.3l.6 1.4c0 .1.1.3 0 .4l-.3.5-.3.3c-.1.1-.2.2-.1.4.1.2.6.9 1.2 1.5.8.7 1.5.9 1.7 1 .2.1.3.1.4-.1l.6-.7c.1-.2.3-.2.4-.1l1.3.6c.2.1.3.2.4.2.1.2.1.6-.1 1.1z'/%3E%3C/svg%3E"); }
html form:has(#sf-pay) [data-v="Discord"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='6' fill='%235865f2'/%3E%3Cpath fill='%23fff' d='M17.3 7.2a12 12 0 0 0-3-.9l-.4.8a11 11 0 0 0-3.8 0l-.4-.8a12 12 0 0 0-3 .9C4.8 10 4.3 12.8 4.5 15.5a12 12 0 0 0 3.7 1.8l.8-1.2c-.4-.2-.9-.4-1.3-.6l.3-.2a8.6 8.6 0 0 0 8 0l.3.2c-.4.2-.8.4-1.3.6l.8 1.2a12 12 0 0 0 3.7-1.8c.3-3.1-.5-5.9-2.2-8.3zM9.6 13.9c-.7 0-1.3-.7-1.3-1.5s.6-1.5 1.3-1.5 1.4.7 1.3 1.5c0 .8-.6 1.5-1.3 1.5zm4.8 0c-.7 0-1.3-.7-1.3-1.5s.6-1.5 1.3-1.5 1.4.7 1.3 1.5c0 .8-.6 1.5-1.3 1.5z'/%3E%3C/svg%3E"); }
html form:has(#sf-pay) [data-v="Telegram"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2329a9eb'/%3E%3Cpath fill='%23fff' d='M5.4 11.7l11.1-4.3c.5-.2 1 .1.8.9l-1.9 8.9c-.1.6-.5.8-1 .5l-2.9-2.1-1.4 1.3c-.2.2-.3.3-.6.3l.2-2.9 5.4-4.9c.2-.2 0-.3-.3-.1L8.2 13.5l-2.8-.9c-.6-.2-.6-.6.1-.9z'/%3E%3C/svg%3E"); }
html form:has(#sf-pay) [data-v="Teams"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='6' fill='%235059c9'/%3E%3Ccircle cx='17.2' cy='7.6' r='1.9' fill='%23fff' opacity='.85'/%3E%3Cpath fill='%23fff' opacity='.85' d='M15.4 10.4h3.8c.5 0 .8.4.8.8v3.4a2.3 2.3 0 0 1-3.7 1.8z'/%3E%3Crect x='4' y='6.5' width='11' height='11' rx='1.6' fill='%23fff'/%3E%3Cpath fill='%235059c9' d='M7 9.2h5v1.3h-1.8v4.8H8.8v-4.8H7z'/%3E%3C/svg%3E"); }
html form:has(#sf-pay) [data-v="Facebook"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%231877f2'/%3E%3Cpath fill='%23fff' d='M13.3 19.9v-5.8h1.9l.3-2.3h-2.2v-1.4c0-.6.2-1.1 1.1-1.1h1.2V7.2c-.2 0-.9-.1-1.7-.1-1.7 0-2.9 1-2.9 3v1.7H9.1v2.3H11v5.8z'/%3E%3C/svg%3E"); }

/* vk-ready.css: hovering the send button shows whether the form can go: brighter gold if so, reddish if not */
html :is(form:has(#sf-pay), form:has(#ex-depart)) button[type="submit"][data-vk-ready] { transition: background-color .2s, box-shadow .2s, color .2s; }
html :is(form:has(#sf-pay), form:has(#ex-depart)) button[type="submit"][data-vk-ready="1"][data-vk-hover] { background: #ffc94f !important; color: #17143f !important; box-shadow: 0 0 0 1px rgba(255,214,120,.7), 0 10px 26px rgba(247,192,77,.55) !important; }
html :is(form:has(#sf-pay), form:has(#ex-depart)) button[type="submit"][data-vk-ready="0"][data-vk-hover] { background: #d9846f !important; color: #3a1620 !important; opacity: 1 !important; box-shadow: 0 0 0 1px rgba(217,132,111,.6) !important; }
html :is(form:has(#sf-pay), form:has(#ex-depart)) button[type="submit"][data-vk-ready="0"][data-vk-hover] * { color: inherit !important; border-color: rgba(58,22,32,.25) !important; }
/* Warning popup open: the reviews dock hides and the page behind blurs */
html:has(body div.fixed.inset-0.z-\[100\] > .shadow-card, vk-profil-fenetre) body > .vk-rv, html:has(body div.fixed.inset-0.z-\[100\] > .shadow-card, vk-profil-fenetre) body > .vk-dock-btn { display: none !important; }
html body div.fixed.inset-0.z-\[100\]:has(> .shadow-card) { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* Confirmation page: readable reference, the steps in a card with a violet band, the alert under step 2 */
html main:has(> section:only-child.container-vk .card-vk) .mx-auto > .card-vk:first-child .bg-brand-soft { background: #fff; box-shadow: 0 6px 16px rgba(10,8,40,.18); }
html main:has(> section:only-child.container-vk .card-vk) .mx-auto > .card-vk:first-child .bg-brand-soft > span:first-child { color: #6b6890 !important; }
html main:has(> section:only-child.container-vk .card-vk) .mx-auto > .card-vk:first-child .bg-brand-soft .text-ink, html main:has(> section:only-child.container-vk .card-vk) .mx-auto > .card-vk:first-child .bg-brand-soft > span:nth-child(2) { color: #2b2670 !important; }
html main:has(> section:only-child.container-vk .card-vk) .mx-auto > .card-vk:first-child .bg-brand-soft .text-body, html main:has(> section:only-child.container-vk .card-vk) .mx-auto > .card-vk:first-child .bg-brand-soft .text-muted { color: #6b6890 !important; }
html main:has(> section:only-child.container-vk .card-vk) .mx-auto > .card-vk:nth-child(2) { padding: 0 !important; overflow: hidden; }
html main:has(> section:only-child.container-vk .card-vk) .mx-auto > .card-vk:nth-child(2) > h2 { margin: 0; padding: 14px 22px; background: #6c67de; color: #fff !important; font-size: 16px; }
html main:has(> section:only-child.container-vk .card-vk) .mx-auto > .card-vk:nth-child(2) > ol { position: relative; margin: 0 !important; padding: 20px 22px 22px; }
html main:has(> section:only-child.container-vk .card-vk) .mx-auto > .card-vk:nth-child(2) > ol > li { position: relative; }
html main:has(> section:only-child.container-vk .card-vk) .mx-auto > .card-vk:nth-child(2) > ol > li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 36px; bottom: -14px; width: 2px; border-radius: 2px; background: #e3e1f6; }
html main:has(> section:only-child.container-vk .card-vk) .mx-auto > .card-vk:nth-child(2) > ol > li > span { position: relative; background: #f2b84b !important; color: #17143f !important; }
html main:has(> section:only-child.container-vk .card-vk) .mx-auto .vk-conf-alert { margin-top: 10px; padding: 10px 12px; border: 1px solid #f87171; border-radius: 8px; background: #fee2e2; color: #991b1b; font-size: 13px; line-height: 19px; }
html main:has(> section:only-child.container-vk .card-vk) .mx-auto .vk-conf-alert p { margin: 0; color: #991b1b !important; }
html main:has(> section:only-child.container-vk .card-vk) .mx-auto .vk-conf-alert p.ex { font-weight: 700; color: #b91c1c !important; }

/* vk-short-lists: short dropdowns (10 choices or fewer) show every choice, no inner scroll */
html :is(form:has(#sf-pay), form:has(#ex-depart)) ul[role="listbox"]:not(:has(> li:nth-child(11))) { max-height: none !important; overflow: visible !important; }

/* vk-order-pop.css: the order pop-up of Mon compte, in the site's look */
html.vko-open { overflow: hidden; }
.vko-bg { position: fixed; inset: 0; z-index: 200; background: rgba(12,10,40,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; }
.vko { width: 660px; max-width: 100%; margin: auto; background: #221d5c; border: 1px solid #3a3590; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 70px rgba(5,4,25,.6); color: #fff; text-align: left; }
.vko-wait { padding: 34px 24px; text-align: center; color: #c9c6f0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.vko-top { background: #6c69e0; padding: 18px 22px 30px; display: flex; align-items: center; gap: 14px; position: relative; overflow: hidden; }
.vko-top:after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 22px; background: url(/_next/static/vk4/abe4e9739f/seam-tiles-navy.svg) left bottom / auto 22px repeat-x; }
.vko-ic { width: 46px; height: 46px; border-radius: 12px; background: #fff url(/_next/static/vk4/abe4e9739f/ill-devis.svg) center / 30px no-repeat; box-shadow: 0 6px 14px rgba(23,20,63,.25); flex: none; }
.vko-tt small { display: block; font-size: 12.5px; color: #e6e4ff; font-weight: 600; }
.vko-tt b { display: block; font-size: 22px; font-weight: 800; letter-spacing: .2px; color: #fff; }
.vko-scene { position: absolute; right: 62px; top: 6px; width: 150px; height: 62px; background: center / contain no-repeat; }
.vko-x { position: absolute; right: 16px; top: 16px; width: 32px; height: 32px; border: 0; border-radius: 10px; background: rgba(23,20,63,.25); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 19px; cursor: pointer; }
.vko-x:hover { background: rgba(23,20,63,.45); }
.vko-pill { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #ede9ff; color: #3b358f; }
.vko-pill:before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6c69e0; }
.vko-pill.vko-ko { background: #fee2e2; color: #b91c1c; } .vko-pill.vko-ko:before { background: #dc2626; }
.vko-pill.vko-ok { background: #dcfce7; color: #166534; } .vko-pill.vko-ok:before { background: #16a34a; }
.vko-pill.vko-run { background: #fff4d6; color: #8a5a00; } .vko-pill.vko-run:before { background: #f2b84b; }
.vko-steps { display: flex; padding: 14px 22px 4px; }
.vko-steps div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #b9b6e6; position: relative; text-align: center; }
.vko-steps i { width: 26px; height: 26px; border-radius: 50%; background: #2f2a74; color: #b9b6e6; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; font-size: 12px; z-index: 1; border: 2px solid #3a3590; }
.vko-steps .ok i { background: #f2b84b; color: #17143f; border-color: #f2b84b; } .vko-steps .ok { color: #fff; }
.vko-steps .now i { background: #221d5c; color: #f2b84b; border-color: #f2b84b; } .vko-steps .now { color: #fff; }
.vko-steps .ko i { background: #dc2626; color: #fff; border-color: #dc2626; } .vko-steps .ko { color: #ffb4b4; }
.vko-steps div:not(:last-child):after { content: ""; position: absolute; top: 13px; left: calc(50% + 15px); right: calc(-50% + 15px); height: 2px; background: #3a3590; }
.vko-steps .ok:not(:last-child):after { background: #f2b84b; }
.vko-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 22px 4px; }
.vko-box { background: #17143f; border: 1px solid #2f2a74; border-radius: 12px; padding: 12px 14px; min-width: 0; }
.vko-box h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 800; color: #fff; }
.vko-box h4 i { width: 24px; height: 24px; flex: none; background: center / contain no-repeat; }
.vko-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; padding: 5px 0; border-top: 1px dashed #2a2566; }
.vko-box h4 + .vko-row, .vko-box h4 + .vko-line { border-top: 0; }
.vko-row span { color: #a9a6d6; flex: none; } .vko-row b { color: #fff; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.vko-line { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 6px 0; border-top: 1px dashed #2a2566; color: #c9c6f0; }
.vko-line b { color: #fff; font-weight: 600; margin-left: 8px; } .vko-line small { display: block; color: #8f8cc4; font-size: 11.5px; }
.vko-total { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: linear-gradient(90deg, #2b2675, #221d5c); border: 1px solid #3a3590; border-radius: 12px; padding: 12px 16px; }
.vko-total span { font-size: 13px; color: #c9c6f0; } .vko-total small { color: #8f8cc4; font-size: 12px; margin-left: 8px; }
.vko-total b { font-size: 26px; font-weight: 800; color: #f2b84b; white-space: nowrap; }
.vko-reason { grid-column: 1 / -1; background: rgba(185,28,28,.16); border: 1px solid rgba(248,113,113,.5); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: #ffb4b4; }
.vko-foot { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 22px 20px; }
.vko-btn { height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; font-weight: 700; font-size: 14px; border: 0; cursor: pointer; text-decoration: none; font-family: inherit; }
.vko-gold { background: #f2b84b; color: #17143f !important; flex: 1; box-shadow: 0 8px 20px rgba(242,184,75,.25); } .vko-gold:hover { background: #ffc94f; }
.vko-ghost { border: 1px solid #4a4599; color: #fff !important; background: #1d1950; } .vko-ghost:hover { background: #2b2675; }
@media (max-width: 600px) {
  .vko-bg { padding: 10px; align-items: flex-start; }
  .vko-body { grid-template-columns: 1fr; padding: 12px 14px 4px; }
  .vko-top { padding: 16px 14px 28px; } .vko-tt b { font-size: 18px; } .vko-scene { display: none; }
  .vko-steps { padding: 12px 10px 4px; } .vko-foot { padding: 12px 14px 16px; } .vko-foot .vko-btn { flex: 1 1 100%; }
}