/** Repair Center — Ưu đãi thanh toán (payment-offers module). Only ever
 * used inside .vnt39-rc-services-row's left column right now (see
 * category-sua-chua.php + repair-center.css) — no side padding of its
 * own on purpose, that row already supplies the page-margin padding, same
 * reasoning case-search's own style.css documents for the same slot.
 *
 * Compact by design — NOT stretched to match the case-search column's own
 * height (tried that, reverted on request: banners stretched tall "nhìn
 * nặng và không cân với khu bệnh án bên phải" — a short natural-height
 * cluster reads better than banners stretched to fill unrelated leftover
 * space). repair-center.css no longer forces align-self:stretch on this
 * module's grid item either, for the same reason.
 *
 * 2 banners now (was 3 — "Hoá đơn minh bạch" dropped on request, see
 * template.php's own comment). min-height/gap bumped up slightly from the
 * 3-banner values (115px/13px → 132px/16px) so the pair still reads as a
 * deliberately-sized pair, not just the old 3-slot layout with one slot
 * silently missing.
 *
 * margin-top:8px here is the STANDALONE/mobile default (this module
 * rendered on its own, outside the desktop 2-column row). Inside
 * .vnt39-rc-services-row at desktop width, repair-center.css overrides
 * this to a (negative) value instead, tuned so this module's own
 * "Ưu đãi thanh toán" title lands flush with case-search's "Các bệnh án
 * thực tế liên quan" title — see that file's own comment on
 * `[data-vnt39-repair-module="payment-offers"]` for why and the exact
 * number; don't change 8px here to chase that alignment, it isn't used
 * in that context. */
.vnt39-rc-payment-offers { margin-top: 8px; }
/* NOTE: the card below is the SAME element as .container (template.php:
 * `<div class="container vnt39-rc-payment-offers__card">`) — there used
 * to be a separate `.vnt39-rc-payment-offers .container { padding: 0; }`
 * rule here meant to zero out Flatsome's own default .container side-
 * padding; its specificity (0,2,0) was HIGHER than .vnt39-rc-payment-
 * offers__card's own padding rule below (0,1,0), so it silently won and
 * the card's declared 16px padding never actually applied — title flush
 * against the top border, banners flush against the sides (caught live:
 * computed padding was 0px on the real page). Fixed by just deleting
 * that rule: .container isn't used anywhere else in this module, so the
 * card's own padding below is the only padding declaration this element
 * needs — it already replaces Flatsome's default AND sets the real
 * value, no separate zero-out required. */
.vnt39-rc-payment-offers__card { border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; background: #fff; }
/* width:auto resets Flatsome's blanket h1-h6{width:100%} — same fix every
 * other module heading in this plugin needs. Icon sits before the text,
 * same row, vertically centered against it (flex align-items:center).
 *
 * Font-size/weight/line-height/color + icon size/color/gap are kept
 * byte-identical to case-search/style.css's own
 * .vnt39-rc-case-search__related-title rule on purpose — these two headers
 * sit side by side atop the same row and need to read as one matched
 * pair. If one changes, change the other the same way. */
.vnt39-rc-payment-offers__card h3 { display: flex; align-items: center; gap: 11px; width: auto; margin: 0 0 12px; color: #171717; font-size: 25px; font-weight: 700; line-height: 1.2; }
.vnt39-rc-payment-offers__title-icon { display: inline-flex; flex-shrink: 0; }
.vnt39-rc-payment-offers__title-icon .vnt39-rc-icon { width: 28px; height: 28px; color: #a30d1b; }
.vnt39-rc-payment-offers__list { display: flex; flex-direction: column; gap: 16px; }
/* min-height (not height) — each banner is only ever as tall as it needs
 * to be, this just sets a floor so both read as the same size regardless
 * of minor text-length differences; padding 22px + icon/text
 * vertical-centered via align-items:center on the row. flex:1 1 0 makes
 * the 2 banners split the list's own height evenly (equal basis, ignoring
 * each other's natural content height) — with only 2 left, matching each
 * other exactly reads better than each defaulting to its own natural
 * (possibly slightly different) content height. */
/* Renders as an <a> instead of a <div> when a button URL is configured
 * (template.php) — same class either way, plus a reset for the handful of
 * properties a real link needs undone (color/underline/cursor already
 * inherited correctly by a div, only an <a> needs them stated). */
.vnt39-rc-payment-offers__banner { display: flex; flex: 1 1 0; align-items: center; gap: 12px; min-height: 132px; border-radius: 8px; padding: 22px; background: linear-gradient(120deg, #8f0b18, #a30d1b 60%, #6e0812); color: inherit; text-decoration: none; }
a.vnt39-rc-payment-offers__banner { cursor: pointer; }
.vnt39-rc-payment-offers__banner .vnt39-rc-icon { flex-shrink: 0; width: 22px; height: 22px; color: #ffd9a8; }
.vnt39-rc-payment-offers__banner div { min-width: 0; }
.vnt39-rc-payment-offers__banner b { display: block; margin-bottom: 5px; overflow-wrap: anywhere; color: #fff; font-size: 12.5px; font-weight: 800; }
.vnt39-rc-payment-offers__banner span { display: block; overflow-wrap: anywhere; color: #f6dcdd; font-size: 11px; line-height: 1.45; }
/* Optional per-offer button text (Repair Center → Payment Offers) — a
 * small pill instead of a full second button, since the whole banner is
 * already the clickable area when a URL is set. */
.vnt39-rc-payment-offers__banner-cta { display: inline-block; margin-top: 8px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; padding: 3px 10px; color: #fff; font-size: 10.5px; font-weight: 700; font-style: normal; }

/* Mirrors case-search/style.css's own mobile override for
 * .vnt39-rc-case-search__related-title — same reasoning, kept in sync.
 * 20px (not 21) because that sibling title needs it to avoid an
 * orphan-word wrap — see that file's own comment; kept equal here since
 * these two headers must stay byte-identical in size. */
@media (max-width: 849px) {
	.vnt39-rc-payment-offers__card h3 { gap: 10px; font-size: 20px; }
	.vnt39-rc-payment-offers__title-icon .vnt39-rc-icon { width: 23px; height: 23px; }
}

/* ---------------------------------------------------------------------
 * PHONES (<= 560px): the offers become ONE row, one card at a time. The list is a native scroll-snap row (a swipe is the browser's own), both
 * cards fill the full width and the row stretches them to the same height, so nothing jumps when it advances. script.js adds the slow
 * auto-advance + the dots. Card content / colours / radius are untouched; only padding is trimmed. Desktop keeps the stacked cards.
 * ------------------------------------------------------------------- */
.vnt39-rc-payment-offers__dots { display: none; }
@media (max-width: 560px) {
	.vnt39-rc-payment-offers__card { padding: 14px; }
	.vnt39-rc-payment-offers__card h3 { margin-bottom: 10px; }
	.vnt39-rc-payment-offers__slider { position: relative; }
	.vnt39-rc-payment-offers__list { flex-direction: row; align-items: stretch; gap: 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.vnt39-rc-payment-offers__list::-webkit-scrollbar { display: none; }
	.vnt39-rc-payment-offers__banner { flex: 0 0 100%; min-width: 0; min-height: 0; padding: 16px 16px 26px; scroll-snap-align: start; }
	/* dots: position / shape / colours come from the shared slider-control standard (assets/css/repair-center.css); the card only leaves room for them */
	.vnt39-rc-payment-offers__dots { display: flex; }
}