/*
 * BuyNow by KIB - the "Learn More" slide-up (product page + checkout).
 *
 * ⚠ OWNER, 22 OCT 2026: the container is OURS (Gait's coverage-modal language:
 * dimmed, blurred backdrop; white card, 14px corners; round grey close; a
 * slide-up from the bottom on phones, the same card risen to the centre on
 * wider screens). Everything INSIDE is KIB's and may be rearranged but not
 * restyled: their logo lockup, the Inter typeface, their navy / tile colours,
 * their icons and pies (cut from "Split Banner.png" / "Split Payment
 * method.png"), their white background with the faint "K" chevron
 * (BuyNow Merchant Files, "Design guidlines (BuyNow).pdf": "follow our design
 * guideline system with the color, icon and typography").
 *
 * Plain CSS, no Tailwind: one file every theme (Gait, Aigner, It's Luxury,
 * Options) loads as-is, so the sheet looks the same everywhere.
 */
@font-face { font-family: "BuyNow Inter"; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400.woff2") format("woff2"); }
@font-face { font-family: "BuyNow Inter"; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500.woff2") format("woff2"); }
@font-face { font-family: "BuyNow Inter"; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600.woff2") format("woff2"); }
@font-face { font-family: "BuyNow Inter"; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700.woff2") format("woff2"); }

/* ---- the shell (ours) ---- */
.tlg-kib-sheet { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: flex-end; justify-content: center; }
.tlg-kib-sheet[x-cloak] { display: none; }
.tlg-kib-sheet__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); cursor: pointer; }
.tlg-kib-sheet__card {
    position: relative; width: 100%; max-width: 680px; max-height: 88vh; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
    background: #fff url("../images/kib/kib-bg.svg") top left / cover no-repeat;
    border-radius: 14px 14px 0 0; box-shadow: 0 -12px 48px rgba(0, 0, 0, .18);
    padding: 10px 20px calc(28px + env(safe-area-inset-bottom, 0px));
}
.tlg-kib-sheet__card--in { animation: tlg-kib-up .32s cubic-bezier(.2, .8, .2, 1); }
@keyframes tlg-kib-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tlg-kib-sheet__card--in { animation: none; } }
@media (min-width: 768px) {
    .tlg-kib-sheet { align-items: center; padding: 24px; }
    .tlg-kib-sheet__card { border-radius: 14px; padding: 12px 28px 28px; box-shadow: 0 24px 64px rgba(0, 0, 0, .24); }
}
.tlg-kib-sheet__grab { width: 36px; height: 5px; border-radius: 3px; background: #d2d2d7; margin: 0 auto 6px; }
@media (min-width: 768px) { .tlg-kib-sheet__grab { display: none; } }
.tlg-kib-sheet__close {
    position: absolute; top: 12px; inset-inline-end: 12px; width: 32px; height: 32px; border-radius: 999px; border: 0;
    display: grid; place-items: center; color: #6e6e73; background: #f2f2f2; cursor: pointer;
}
.tlg-kib-sheet__close:hover { color: #1d1d1f; }
.tlg-kib-sheet__close:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }

/* ---- KIB's content (theirs) ---- */
.tlg-kib { font-family: "BuyNow Inter", Inter, -apple-system, system-ui, sans-serif; color: #243342; text-align: start; }
.tlg-kib__logo { display: block; height: 56px; width: auto; margin-top: 8px; }
.tlg-kib__lead { margin: 18px 0 0; color: #00366b; font-size: 15px; line-height: 1.55; font-weight: 500; }
.tlg-kib__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .tlg-kib__tiles { grid-template-columns: repeat(4, 1fr); } }
.tlg-kib__tile { display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 12px; border: 1px solid; border-radius: 12px; font-size: 13px; line-height: 1.35; font-weight: 500; color: #243342; }
.tlg-kib__tile img { flex: none; width: 26px; height: auto; }
.tlg-kib__tile--blue { background: #e5f2ff; border-color: #d3e9ff; }
.tlg-kib__tile--green { background: #d6f5f0; border-color: #adf3e8; }
.tlg-kib__tile--yellow { background: #fff2cc; border-color: #fff2cc; }
.tlg-kib__tile--peach { background: #ffdfcc; border-color: #ffcfd3; }
.tlg-kib__plan { display: grid; grid-template-columns: repeat(4, 1fr); margin: 18px 0 0; padding: 14px 8px; list-style: none; background: #e5f2ff; border-radius: 14px; text-align: center; }
.tlg-kib__plan img { display: block; width: 44px; height: 44px; margin: 0 auto 6px; }
.tlg-kib__when { font-size: 12px; color: #5b6b7f; }
.tlg-kib__amt { margin-top: 2px; font-size: 16px; font-weight: 600; color: #111; font-variant-numeric: tabular-nums; }
.tlg-kib__cur { font-size: 11px; color: #243342; }
.tlg-kib__h { margin: 22px 0 12px; color: #00366b; font-size: 20px; font-weight: 700; }
.tlg-kib__h--grad { font-size: 22px; background: linear-gradient(90deg, #01628d, #017c6a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tlg-kib__cond { margin: 0; padding-inline-start: 20px; color: #00366b; font-size: 14px; line-height: 1.6; }
.tlg-kib__steps { margin: 0; padding: 0; list-style: none; }
.tlg-kib__steps li { position: relative; display: flex; align-items: center; gap: 16px; min-height: 56px; }
.tlg-kib__steps li + li { margin-top: 8px; }
.tlg-kib__steps li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 21px; top: 44px; width: 3px; height: 20px; background: #c8f2ed; }
.tlg-kib__num { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: #e5f2ff; color: #004a94; font-size: 17px; font-weight: 600; }
.tlg-kib__step { font-size: 15px; color: #243342; }
.tlg-kib__cards { display: flex; justify-content: flex-end; margin-top: 14px; }
.tlg-kib__cards img { height: 24px; width: auto; }
/* KIB's own "Learn More." link (their widget / banner wording). */
.tlg-kib-learn { display: inline; padding: 0; border: 0; background: none; font: inherit; color: #004a94; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }