/* Campania tbi bank „Intră în noul an la volanul unui BYD” (10.11–20.12.2026).
   Fisier COMUN, aceeasi copie in rca.asiguraricontactless.ro si asiguraricontactless.ro
   (assets/css/campanie-tbi-byd.css). Se incarca doar pe paginile cu bannerul campaniei.
   Componente: .tbiByd-hero (banner mare), .tbiByd-strip (banda de pe pagina de oferte),
   .tbiByd-pill (eticheta de pe fiecare oferta eligibila), .tbiByd-buy (linia din plata),
   .tbiByd-modal (fereastra cu detalii, <dialog> nativ). Prefix tbiByd- ca sa nu atinga
   Bootstrap sau stilurile paginilor. */

.tbiByd { margin: 22px auto 8px; max-width: 960px; text-align: left; }
.tbiByd[hidden] { display: none !important; }

/* ── banner mare (prima pagina rca, calculatorul RCA) ── */
.tbiByd-hero {
	position: relative; display: grid; grid-template-columns: 1fr minmax(0, 46%); align-items: center;
	width: 100%; min-height: 200px; padding: 0; margin: 0; border: 0; border-radius: 20px; overflow: hidden;
	background: linear-gradient(100deg, #0c0505 0%, #1d0508 48%, #3b0d17 100%);
	color: #fff; text-align: left; cursor: pointer; font: inherit;
	box-shadow: 0 10px 28px rgba(40, 6, 14, .22);
}
.tbiByd-hero:focus-visible { outline: 3px solid #ffb4bd; outline-offset: 3px; }
.tbiByd-hero-txt { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; padding: 26px 8px 26px 30px; }
.tbiByd-hero-h { font-size: 30px; line-height: 1.12; font-weight: 800; letter-spacing: -.01em; }
.tbiByd-hero-p { font-size: 17px; line-height: 1.45; color: #f4e6e8; }
.tbiByd-tag { display: inline-block; padding: 1px 10px; border-radius: 999px; background: #e3262f; color: #fff; font-weight: 800; white-space: nowrap; }
.tbiByd-hero-btn {
	align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; margin-top: 4px;
	padding: 11px 22px; border-radius: 999px; background: #fff; color: #1d0508; font-weight: 800; font-size: 16px;
}
.tbiByd-hero:hover .tbiByd-hero-btn { background: #ffe9ec; }
.tbiByd-hero-img { position: relative; z-index: 1; display: block; height: 100%; }
.tbiByd-hero-img img {
	display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%); mask-image: linear-gradient(to right, transparent 0, #000 9%);
}
.tbiByd-meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 10px 4px 0;
	font-size: 14px; line-height: 1.4; color: #526373;
}
.tbiByd-meta-org { display: inline-flex; align-items: center; gap: 8px; }
.tbiByd-meta img { height: 22px; width: auto; }
.tbiByd-meta b { color: #1A2B3C; font-weight: 700; }
.tbiByd-dot { color: #9aa8b5; }

@media (max-width: 640px) {
	.tbiByd-hero { display: block; min-height: 0; }
	.tbiByd-hero-img { position: absolute; top: 0; right: 0; bottom: 0; width: 72%; height: auto; opacity: .42; }
	.tbiByd-hero-img img { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 55%); mask-image: linear-gradient(to right, transparent 0, #000 55%); }
	.tbiByd-hero-txt { padding: 20px 18px; text-shadow: 0 1px 8px rgba(12, 5, 5, .85); }
	.tbiByd-hero-btn, .tbiByd-tag { text-shadow: none; }
	.tbiByd-meta { flex-direction: column; align-items: flex-start; gap: 2px; }
	.tbiByd-meta .tbiByd-dot { display: none; }
	.tbiByd-hero-h { font-size: 23px; max-width: 15em; }
	.tbiByd-hero-p { font-size: 15px; max-width: 19em; }
	.tbiByd-hero-btn { padding: 9px 18px; font-size: 15px; }
	.tbiByd-meta { font-size: 13px; }
}

/* ── banda de pe pagina de oferte ── */
.tbiByd-strip {
	display: flex; align-items: center; gap: 14px; width: 100%; margin: 14px 0 0; padding: 10px 16px 10px 10px;
	border: 1px solid #f1cdd2; border-radius: 16px; background: #fff7f8; color: #1A2B3C;
	font: inherit; font-size: 15px; line-height: 1.4; text-align: left; cursor: pointer;
}
.tbiByd-strip:hover { background: #fff0f2; }
.tbiByd-strip:focus-visible { outline: 3px solid #e3262f; outline-offset: 2px; }
.tbiByd-strip img { flex: 0 0 auto; width: 72px; height: 38px; object-fit: cover; border-radius: 9px; }
.tbiByd-strip-txt { flex: 1 1 auto; }
.tbiByd-strip-txt b { color: #b3121c; }
.tbiByd-strip-go { flex: 0 0 auto; font-weight: 700; color: #1A2B3C; white-space: nowrap; }
@media (max-width: 575px) {
	.tbiByd-strip { font-size: 13.5px; gap: 10px; padding: 8px 12px 8px 8px; }
	.tbiByd-strip img { width: 56px; height: 30px; }
}

/* ── eticheta de pe fiecare oferta eligibila ── */
.tbiByd-pill {
	align-self: flex-start;
	display: inline-flex; align-items: center; gap: 7px; margin: 8px 0 0; padding: 3px 12px 3px 4px;
	border: 1px solid #f1cdd2; border-radius: 999px; background: #fff7f8; color: #8f0f17;
	font: inherit; font-size: 13px; font-weight: 600; line-height: 1.3; cursor: pointer; white-space: nowrap;
}
.tbiByd-pill:hover { background: #ffe9ec; }
.tbiByd-pill:focus-visible { outline: 2px solid #e3262f; outline-offset: 2px; }
.tbiByd-pill img { width: 34px; height: 18px; object-fit: cover; border-radius: 999px; }

/* ── linia din pagina de plata, sub ratele tbi ── */
.tbiByd-buy {
	display: flex; align-items: center; gap: 10px; margin: 8px 0 0; padding: 9px 12px;
	border-radius: 12px; background: #fff7f8; border: 1px solid #f1cdd2; color: #1A2B3C; font-size: 14px; line-height: 1.4;
}
.tbiByd-buy img { width: 56px; height: 30px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.tbiByd-buy button { border: 0; background: none; padding: 0; color: #b3121c; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* ── fereastra cu detalii ── */
.tbiByd-modal {
	/* centrare explicita: resetarile globale (* { margin: 0 }) anuleaza centrarea nativa a <dialog> */
	position: fixed; inset: 0; margin: auto; height: fit-content;
	width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 20px;
	background: #fff; color: #1A2B3C; overflow: auto; box-shadow: 0 24px 60px rgba(10, 20, 35, .35);
}
.tbiByd-modal::backdrop { background: rgba(10, 20, 35, .55); }
html:has(.tbiByd-modal[open]) { overflow: hidden; }
.tbiByd-modal-top { position: relative; background: #0c0505; }
.tbiByd-modal-top img { display: block; width: 100%; height: auto; }
.tbiByd-x {
	position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border: 0; border-radius: 50%;
	background: rgba(12, 5, 5, .72); color: #fff; font-size: 24px; line-height: 38px; text-align: center; cursor: pointer;
}
.tbiByd-x:hover { background: rgba(12, 5, 5, .92); }
.tbiByd-org { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; padding: 9px 22px; background: #f5f7fa; font-size: 13px; color: #526373; }
.tbiByd-org img { height: 18px; width: auto; }
.tbiByd-org b { color: #1A2B3C; }
.tbiByd-body { padding: 18px 22px 20px; }
.tbiByd-body h2 { margin: 0 0 8px; font-size: 23px; line-height: 1.2; font-weight: 800; color: #1A2B3C; }
.tbiByd-body h3 { margin: 18px 0 6px; font-size: 17px; font-weight: 800; color: #1A2B3C; }
.tbiByd-body p { margin: 0 0 10px; font-size: 15px; line-height: 1.5; }
.tbiByd-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.tbiByd-facts li { padding: 10px 12px; border-radius: 12px; background: #f5f7fa; font-size: 13px; line-height: 1.35; color: #526373; }
.tbiByd-facts b { display: block; margin-bottom: 2px; font-size: 15px; color: #1A2B3C; }
.tbiByd-steps { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.5; }
.tbiByd-steps li + li { margin-top: 4px; }
.tbiByd-note { margin-top: 12px !important; color: #526373; }
.tbiByd-cta {
	display: block; width: 100%; margin: 14px 0 0; padding: 13px 18px; border: 0; border-radius: 12px;
	background: #0e2a47; color: #fff !important; font: inherit; font-size: 16px; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer;
}
.tbiByd-cta:hover { background: #163a60; }
.tbiByd-small { margin: 14px 0 0 !important; padding-top: 12px; border-top: 1px solid #e1e8ef; font-size: 12px !important; line-height: 1.5 !important; color: #6b7a88; }
.tbiByd-small a { color: #1A2B3C; text-decoration: underline; }
@media (max-width: 420px) {
	.tbiByd-facts li { padding: 9px 10px; font-size: 12px; }
	.tbiByd-facts b { font-size: 14px; }
	.tbiByd-org .tbiByd-dot { display: none; }
	.tbiByd-body { padding: 16px 16px 18px; }
	.tbiByd-body h2 { font-size: 20px; }
	.tbiByd-org { padding: 8px 16px; }
}
@media (max-width: 330px) {
	.tbiByd-facts { grid-template-columns: 1fr; }
}

/* ── rca: brand-skin.css forteaza culoarea textului in paginile cu id „…-page”
   ([id$="-page"] p, span, li { color: var(--brand-text) !important }), deci textul alb din
   banner iesea bleumarin. :not(#tbiByd) da specificitate de id, ca sa castige culorile noastre. ── */
.tbiByd-hero-h:not(#tbiByd), .tbiByd-tag:not(#tbiByd) { color: #fff !important; }
.tbiByd-hero-p:not(#tbiByd) { color: #f4e6e8 !important; }
.tbiByd-hero-btn:not(#tbiByd) { color: #1d0508 !important; }
.tbiByd-meta:not(#tbiByd), .tbiByd-meta span:not(#tbiByd), .tbiByd-org:not(#tbiByd), .tbiByd-org span:not(#tbiByd),
.tbiByd-facts li:not(#tbiByd), .tbiByd-note:not(#tbiByd) { color: #526373 !important; }
.tbiByd-meta b:not(#tbiByd), .tbiByd-org b:not(#tbiByd), .tbiByd-facts b:not(#tbiByd),
.tbiByd-body h2:not(#tbiByd), .tbiByd-body h3:not(#tbiByd), .tbiByd-steps li:not(#tbiByd), .tbiByd-body > p:not(.tbiByd-note):not(.tbiByd-small):not(#tbiByd) { color: #1A2B3C !important; }
.tbiByd-meta .tbiByd-dot:not(#tbiByd), .tbiByd-org .tbiByd-dot:not(#tbiByd) { color: #9aa8b5 !important; }
.tbiByd-small:not(#tbiByd) { color: #6b7a88 !important; }
.tbiByd-small a:not(#tbiByd) { color: #1A2B3C !important; }
.tbiByd-strip-txt:not(#tbiByd), .tbiByd-strip-go:not(#tbiByd), .tbiByd-buy span:not(#tbiByd) { color: #1A2B3C !important; }
.tbiByd-strip-txt b:not(#tbiByd), .tbiByd-buy button:not(#tbiByd) { color: #b3121c !important; }
.tbiByd-pill:not(#tbiByd), .tbiByd-pill span:not(#tbiByd) { color: #8f0f17 !important; }