/*
 * bdr-carret.css · Estils del carret nou de la botiga (web3): cistella, pagament, dades del domini i factura · bdr-efg · 2026-10-07
 *
 * QUE FA
 * Dona forma a les plantilles noves del carret (bdr_viewcart.tpl, bdr_checkout.tpl, bdr_confdomains.tpl, el resum
 * bdr_resum.tpl) i a la factura nova (includes/bdr_factura_nova.tpl): blocs, camps amb etiqueta visible, opcions amb
 * radios i caselles natius, formes de pagament, resum amb «Avui pagues» i «Despres pagaras», errors i avisos. Tot
 * penja de body.bdrw (nomes existeix amb la web nova) i porta el prefix bdrx-pag- o bdrx-factura-. Els colors son els
 * del brandbook 2026 de Hosting Andorra (decisio H45, validada per marqueting el 08/10/2026; valors de
 * 07_Web/Brandbook_2026/propuesta_brandbook.css): #EB5420 i #F4A000, el neutre #3D3D3D, blanc i el gris calid
 * #F8F7F5, amb les mateixes variables de bdr-botiga.css (--bdrx-*), redefinides aqui per si aquella fulla no es a la
 * pagina. La lletra es BdrPoppins (el @font-face es a bdr-web.css). La barra de passos, l'ajuda minima i la forma dels
 * botons son els de bdr-botiga.css (bdrx-btn, bdrx-progres, bdrx-ajuda-mini); els colors i la mida del principal es
 * fixen tambe aqui, perque el seu contrast depen de la mida (seccio Arrel).
 * Al final, uns retocs als passos de WHMCS que no son de les plantilles noves (configurar el producte i triar-ne el
 * domini, la via sense JavaScript): els camps visibles que abans donava bdr_estils_carret.php, ara amb la paleta nova.
 *
 * PER QUE EXISTEIX
 * Especificacio de web3, 6.1: una fulla propia amb ?v=, sense heretar els !important de custom.css de l'orderform
 * (les plantilles noves ni el carreguen: bdr_sc/common.tpl). Accessibilitat (9.2): focus visible de 3 px, seleccio
 * mai nomes per color, objectius de 44 px, camps de 16 px (sense zoom a iOS). Contrast (WCAG 2.2 AA, mesurat a
 * proves/pagament.test.js, seccio 8): el text petit sempre gris fosc sobre clar (#3D3D3D sobre blanc 10,86:1, sobre
 * #F8F7F5 10,15:1; secundari #636363, 6,01:1 i 5,61:1); el boto principal, #EB5420 amb text blanc nomes en negreta
 * de 19 px o mes (text gran, 3,61:1; en passar-hi #D2461A, 4,53:1); els botons petits, #F4A000 amb text #3D3D3D
 * (5,11:1; en passar-hi #E89500, 4,52:1); cap text taronja; el degradat, nomes en barres d'accent, mai darrere d'un text.
 *
 * COM ES DESACTIVA
 * Sense bdrWebNova no es pinta cap plantilla nova ni es carrega aquesta fulla (la carreguen bdr_sc/common.tpl, la
 * factura nova i bdr_pagament.php nomes amb la web nova). Treure el fitxer deixa les pagines noves sense estils.
 */

/* =========================================================================================================
   Tokens (els mateixos valors que bdr-botiga.css; si totes dues hi son, coincideixen). Brandbook 2026: els noms es
   queden i canvien els valors (navy ja no es el blau mari, es el neutre #3D3D3D). Els d'estat no canvien: son
   informacio, no marca
   ========================================================================================================= */
body.bdrw {
  --bdrx-navy: #3D3D3D;
  --bdrx-navy-hover: #2A2A2A;
  --bdrx-taronja: #EB5420;
  --bdrx-taronja-fons-hover: #D2461A;
  --bdrx-ambre: #F4A000;
  --bdrx-ambre-hover: #E89500;
  --bdrx-degradat: linear-gradient(90deg, #EB5420 0%, #F4A000 100%);
  --bdrx-boto-mida: 19px;
  --bdrx-enllac: #3D3D3D;
  --bdrx-enllac-hover: #111111;
  --bdrx-fons: #FFFFFF;
  --bdrx-alterna: #F8F7F5;
  --bdrx-blanc: #FFFFFF;
  --bdrx-vora: #E1DEDA;
  --bdrx-vora-suau: #EFEEEB;
  --bdrx-vora-camp: #8A8580;
  --bdrx-secundari: #636363;
  --bdrx-exemple: #707070;
  --bdrx-clar-navy: #D9D6D1;
  --bdrx-linia-navy: #575757;
  --bdrx-exit: #1F6F46;
  --bdrx-exit-fons: #E7F4EC;
  --bdrx-perill: #B42318;
  --bdrx-perill-fons: #FDECEC;
  --bdrx-avis: #8A5A00;
  --bdrx-avis-fons: #FFF6E0;
  --bdrx-info-fons: #F3F1EE;
  --bdrx-ombra: 0 8px 24px rgba(61, 61, 61, 0.08);
  --bdrx-marge: clamp(16px, 2.5vw, 24px);
}

/* =========================================================================================================
   Arrel, reinici del tema dins dels blocs i utilitats
   ========================================================================================================= */
body.bdrw .bdrx-pag {
  color: var(--bdrx-navy);
  font-family: 'BdrPoppins', 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  padding: clamp(16px, 3vw, 32px) 0 clamp(32px, 5vw, 64px);
}
body.bdrw .bdrx-pag *,
body.bdrw .bdrx-pag *::before,
body.bdrw .bdrx-pag *::after { box-sizing: border-box; }
body.bdrw .bdrx-pag :where(h1, h2, h3, p, ul, ol, dl, dd, fieldset, legend, address, table, caption) { margin: 0; padding: 0; }
body.bdrw .bdrx-pag :where(h1, h2, h3) { font-family: inherit; color: inherit; font-weight: 700; letter-spacing: -0.01em; }
body.bdrw .bdrx-pag :where(ul, ol) { list-style: none; }
body.bdrw .bdrx-pag :where(fieldset) { min-width: 0; border: 0; }
body.bdrw .bdrx-pag :where(legend) { width: auto; max-width: 100%; font-size: inherit; line-height: inherit; color: inherit; white-space: normal; }
/* Les etiquetes prenen el color del text de la pagina: bdr-web.css en dona un a totes les de la web nova (label, amb
   :where, 0,0,1) i les opcions (formes de pagament, novetats) no han de dependre de quin. bdr-efg 08/10/2026 */
body.bdrw .bdrx-pag :where(label) { margin: 0; font-weight: inherit; color: inherit; }
body.bdrw .bdrx-pag :where(address) { font-style: normal; }
/* Enllacos: gris fosc com el text i subratllat taronja (brandbook 2026). El color es el del text: el que els distingeix
   es el subratllat, que no es treu mai (WCAG 1.4.1) */
body.bdrw .bdrx-pag :where(a:not(.bdrx-btn)) { color: var(--bdrx-enllac); text-decoration: underline; text-decoration-color: var(--bdrx-taronja); text-decoration-thickness: 2px; text-underline-offset: 4px; }
body.bdrw .bdrx-pag :where(a:not(.bdrx-btn):hover) { color: var(--bdrx-enllac-hover); text-decoration-thickness: 3px; }
body.bdrw .bdrx-pag a.bdrx-btn { text-decoration: none; }
/* Els botons d'aspecte d'enllac de bdr-botiga.css («Segueix comprant», «Buida la cistella», «Genera'n una»), igual */
body.bdrw .bdrx-pag .bdrx-btn-text { text-decoration-color: var(--bdrx-taronja); text-decoration-thickness: 2px; text-underline-offset: 4px; }
body.bdrw .bdrx-pag .bdrx-btn-text:hover { text-decoration-thickness: 3px; }
/* El boto principal del carret i de la factura («Continua al pagament», «Paga ... amb targeta», «Ves al banc ara» i el
   de confirmar dels dialegs): #EB5420 amb text blanc en negreta a 19 px. El blanc sobre #EB5420 fa 3,61:1 i nomes val
   com a text gran (negreta des de 18,66 px); en passar-hi, #D2461A (4,53:1). La forma ve de bdr-botiga.css; el color i
   la mida es fixen aqui (0,3,1, guanya a .bdrx-btn-pri i .bdrx-btn-gran, 0,2,1) perque el contrast no depengui de la
   versio d'aquella fulla que hi hagi a la pagina. Els inactius (:disabled, aria-disabled) queden fora i es pinten com
   sempre. bdr-efg 08/10/2026 */
body.bdrw .bdrx-pag .bdrx-btn-pri:where(:not(:disabled, [aria-disabled="true"])) { background: var(--bdrx-taronja); color: var(--bdrx-blanc); font-size: var(--bdrx-boto-mida); font-weight: 700; box-shadow: none; }
body.bdrw .bdrx-pag .bdrx-btn-pri:where(:not(:disabled, [aria-disabled="true"])):hover { background: var(--bdrx-taronja-fons-hover); color: var(--bdrx-blanc); }
/* Reinici dels camps i dels botons del tema: amb .bdrx-pag dins de :where() queda a 0,1,1 i perd davant dels botons
   de la casa de bdr-botiga.css (body.bdrw .bdrx-btn i variants, 0,2,1, carregada abans). A 0,2,1 hi guanyava per
   ordre: «Si, treu-la», «Si, buida-la» i «Entra» sortien navy sobre navy i cap <button class="bdrx-btn"> no tenia
   la negreta ni la mida (QA del 07/10). bdr-efg */
body.bdrw :where(.bdrx-pag) :where(button, input, select, textarea) { font: inherit; color: inherit; }
body.bdrw .bdrx-pag [hidden] { display: none !important; }
body.bdrw .bdrx-pag :focus-visible { outline: 3px solid var(--bdrx-navy); outline-offset: 2px; }
body.bdrw .bdrx-pag [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
body.bdrw .bdrx-pag .d-none { display: none !important; }
body.bdrw .bdrx-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
body.bdrw .bdrx-pag-cont { width: 100%; max-width: calc(1240px + 2 * var(--bdrx-marge)); margin: 0 auto; padding: 0 var(--bdrx-marge); }
body.bdrw .bdrx-pag-cont-estret { max-width: calc(820px + 2 * var(--bdrx-marge)); }
body.bdrw .bdrx-pag-amagat { display: none !important; }
body.bdrw .bdrx-pag-domini { font-weight: 700; overflow-wrap: anywhere; }

/* Les pagines del carret nou: sense la miga del peu ("Carro de Comandes"), el titol ja diu on ets */
body.bdrw:has(.bdrx-pag) .master-breadcrumb { display: none; }
/* Pagament: capcalera minima, sense menu ni cistella; es queden el logo i l'idioma (l'ajuda va al peu minim) */
body.bdrw:has(.bdrx-pag-pagament) .bdrw-menu,
body.bdrw:has(.bdrx-pag-pagament) .bdrw-hamburguesa,
body.bdrw:has(.bdrx-pag-pagament) .bdrw-cistella,
body.bdrw:has(.bdrx-pag-pagament) .bdrw-btn-client { display: none !important; }
body.bdrw:has(.bdrx-pag-pagament) .bdrw-eines { margin-left: auto; }
/* Per sota de 1080 px bdr-web.css amaga el selector d'idioma perque el mobil el porta dins del menu, que aqui no hi
   es: al pagament es torna a ensenyar (el desplegable funciona a qualsevol amplada, bdr-web.js) */
@media (max-width: 1079.98px) {
  body.bdrw:has(.bdrx-pag-pagament) .bdrw-idioma { display: block; }
}

/* =========================================================================================================
   Capcalera de la pagina
   ========================================================================================================= */
body.bdrw .bdrx-pag-cap { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(20px, 3vw, 32px); }
body.bdrw .bdrx-pag-titol { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
body.bdrw .bdrx-pag-h1 { font-size: clamp(28px, 20px + 1.6vw, 40px); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
body.bdrw .bdrx-pag-intro { max-width: 62ch; font-size: 17px; color: var(--bdrx-secundari); }
body.bdrw .bdrx-pag-segur { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px 6px 10px; border-radius: 999px; background: var(--bdrx-exit-fons); color: var(--bdrx-exit); font-size: 15px; font-weight: 700; }
body.bdrw .bdrx-pag-segur svg { flex: 0 0 auto; }

/* =========================================================================================================
   Graella: columna principal i resum fix des de 1060 px
   ========================================================================================================= */
body.bdrw .bdrx-pag-graella { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
body.bdrw .bdrx-pag-principal { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* Separacio entre blocs amb marges i no amb gap: el JS del nucli obre i tanca #containerNewUserSignup i altres amb
   slideUp i slideDown, que hi posen display: block en linia */
body.bdrw .bdrx-pag-form { min-width: 0; }
body.bdrw .bdrx-pag-form > * + *,
body.bdrw .bdrx-pag-form > #containerNewUserSignup > * + * { margin-top: 20px; }
body.bdrw .bdrx-pag-form > input[type="hidden"] + *,
body.bdrw .bdrx-pag-form > input[type="hidden"] { margin-top: 0; }
body.bdrw .bdrx-pag-lateral { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 1060px) {
  body.bdrw .bdrx-pag-pagament .bdrx-pag-graella { grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "principal resum"; gap: 32px; }
  body.bdrw .bdrx-pag-pagament .bdrx-pag-principal { grid-area: principal; }
  body.bdrw .bdrx-pag-pagament .bdrx-pag-resum { grid-area: resum; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
  /* Cistella: al codi van primer el total, el boto i el codi de descompte (.bdrx-pag-lateral), despres les linies i
     «Buida la cistella» (.bdrx-pag-final-cistella). Per sota de 1060 px surten en aquest ordre, una columna; des de
     1060 px, les linies a l'esquerra i, a la dreta, la columna fixa, que ocupa les dues files */
  body.bdrw .bdrx-pag-graella-cistella { grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto 1fr; grid-template-areas: "principal lateral" "final lateral"; gap: 16px 32px; }
  body.bdrw .bdrx-pag-graella-cistella .bdrx-pag-principal { grid-area: principal; }
  /* La columna fixa no pot ser mes alta que la finestra (text ampliat al 200 % amb el codi obert, finestra baixa): si
     ho es, es desplaca per dins, com el resum del pagament, i el que hi ha a sota (el codi de descompte) es pot
     abastar amb la roda i amb el teclat (WCAG 1.4.4 i 2.4.11; revisio del 07/10). overflow retallaria l'ombra de les
     targetes (0 8px 24px): el farciment li deixa lloc i el marge negatiu, igual, fa que les targetes quedin on eren i
     que la columna ocupi el mateix a la graella. Enganxada, les targetes queden a 16 px de dalt, com abans. bdr-efg */
  body.bdrw .bdrx-pag-graella-cistella .bdrx-pag-lateral {
    grid-area: lateral; position: sticky; top: 0; max-height: 100vh; overflow-y: auto;
    margin: -16px -24px -32px; padding: 16px 24px 32px;
  }
  body.bdrw .bdrx-pag-graella-cistella .bdrx-pag-final-cistella { grid-area: final; }
}
@supports (overflow: clip) {
  body.bdrw:has(.bdrx-pag) { overflow-x: clip; }
}

/* =========================================================================================================
   Blocs, titols i notes
   ========================================================================================================= */
body.bdrw .bdrx-pag-bloc { display: flex; flex-direction: column; gap: 16px; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--bdrx-vora); border-radius: 20px; background: var(--bdrx-blanc); }
body.bdrw .bdrx-pag-bloc-t { font-size: 21px; line-height: 1.25; }
body.bdrw .bdrx-pag-subt { font-size: 16px; line-height: 1.35; font-weight: 600; }
body.bdrw .bdrx-pag-nota { font-size: 15px; line-height: 1.5; color: var(--bdrx-secundari); }
body.bdrw .bdrx-pag-ajuda { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--bdrx-secundari); }
body.bdrw .bdrx-pag-opcional { font-weight: 400; color: var(--bdrx-secundari); }
body.bdrw .bdrx-pag-etiqueta { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; margin-left: 6px; border-radius: 999px; background: var(--bdrx-alterna); color: var(--bdrx-secundari); font-size: 13px; font-weight: 600; }
body.bdrw .bdrx-pag-entra-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
body.bdrw .bdrx-pag-entra-cap > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 260px; }
/* «Ja ets client?» l'obre slideDown de scripts.min.js (WHMCS), que hi posa display: block en linia: amb flex i gap,
   «Entra» quedava enganxat a la contrasenya (QA del 08/10). Separacio amb marges, que no depenen del display (els
   amagats no en tenen), i el boto amb la seva amplada. 0,4,1 perque guanyi al margin: 0 de .bdrx-pag-error, que ve
   despres. bdr-efg 08/10/2026 */
body.bdrw .bdrx-pag-entra .bdrx-pag-entra-cos > :not(:last-child) { margin-bottom: 14px; }
body.bdrw .bdrx-pag-entra-cos > .bdrx-btn { display: flex; width: fit-content; max-width: 100%; }
/* El bloc de la contrasenya de l'area de client: si la pagina arriba amb «Ja ets client?» obert, en passar a «Soc
   client nou» el torna a ensenyar .show() de scripts.min.js, tambe amb display: block en linia, i el titol, el text i
   els camps quedaven enganxats. Sense gap i amb marges, que valen en flex i en block. bdr-efg 08/10/2026 */
body.bdrw #containerNewUserSecurity { gap: 0; }
body.bdrw #containerNewUserSecurity > * + * { margin-top: 16px; }
body.bdrw .bdrx-pag-entra .w-hidden,
body.bdrw .bdrx-pag .w-hidden { display: none; }

/* =========================================================================================================
   Camps
   ========================================================================================================= */
body.bdrw .bdrx-pag-camps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 18px; }
@media (min-width: 640px) {
  body.bdrw .bdrx-pag-camps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.bdrw .bdrx-pag-camps .bdrx-pag-camp-ample { grid-column: 1 / -1; }
}
body.bdrw .bdrx-pag-camp { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.bdrw .bdrx-pag-camp > label,
body.bdrw .bdrx-pag-camp-etiqueta { font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--bdrx-navy); }
body.bdrw .bdrx-pag .bdrx-pag-input,
body.bdrw .bdrx-pag .bdrx-pag-select,
body.bdrw .bdrx-pag .bdrx-pag-camp-control :where(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], select, textarea),
body.bdrw .bdrx-pag .bdrx-pag-camp > :where(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], select, textarea) {
  display: block; width: 100%; min-height: 48px; margin: 0; padding: 11px 14px;
  border: 1.5px solid var(--bdrx-vora-camp); border-radius: 12px; background: var(--bdrx-blanc);
  color: var(--bdrx-navy); font-size: 16px; line-height: 1.4; box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.bdrw .bdrx-pag textarea.bdrx-pag-input { min-height: 112px; resize: vertical; }
body.bdrw .bdrx-pag .bdrx-pag-select,
body.bdrw .bdrx-pag .bdrx-pag-camp-control select,
body.bdrw .bdrx-pag .bdrx-pag-camp > select {
  -webkit-appearance: none; appearance: none; padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D3D3D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px;
}
body.bdrw .bdrx-pag .bdrx-pag-input:hover,
body.bdrw .bdrx-pag .bdrx-pag-select:hover { border-color: var(--bdrx-navy); }
body.bdrw .bdrx-pag .bdrx-pag-input:focus,
body.bdrw .bdrx-pag .bdrx-pag-select:focus,
body.bdrw .bdrx-pag .bdrx-pag-camp-control :where(input, select, textarea):focus {
  border-color: var(--bdrx-navy); outline: 3px solid var(--bdrx-navy); outline-offset: 1px; box-shadow: none;
}
/* L'exemple dins del camp de l'identificador fiscal el posa bdr_taxid_obligatori.php («NRT (obligatori)», «VAT / Tax ID
   (obligatori)»), en catala o en angles al costat d'una etiqueta traduida, i a un particular li fa pensar que nomes val
   el NRT (QA del 07/10): al pagament nou no es veu, l'etiqueta i l'ajuda de sota ja diuen que cal posar-hi */
body.bdrw .bdrx-pag-pagament #inputTaxId::placeholder { color: transparent; }
body.bdrw .bdrx-pag [aria-invalid="true"] { border-color: var(--bdrx-perill) !important; background-color: var(--bdrx-perill-fons) !important; }
body.bdrw .bdrx-pag-camp:has([aria-invalid="true"]) > label::after { content: ' *'; color: var(--bdrx-perill); }
/* El telefon amb el prefix de pais del tema (intl-tel-input) */
body.bdrw .bdrx-pag .intl-tel-input,
body.bdrw .bdrx-pag .iti { display: block; width: 100%; }
body.bdrw .bdrx-pag .intl-tel-input input.bdrx-pag-input,
body.bdrw .bdrx-pag .iti input.bdrx-pag-input { padding-left: 92px; }
/* El selector de provincia que crea StatesDropdown.js */
body.bdrw .bdrx-pag-camp-estat select { display: block; width: 100%; min-height: 48px; padding: 11px 42px 11px 14px; border: 1.5px solid var(--bdrx-vora-camp); border-radius: 12px; background-color: var(--bdrx-blanc); font-size: 16px; }

/* Plegables (details natius) */
body.bdrw .bdrx-pag-plega > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 0;
  color: var(--bdrx-enllac); font-weight: 600; text-decoration: underline; text-decoration-color: var(--bdrx-taronja); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; list-style: none;
}
body.bdrw .bdrx-pag-plega > summary::-webkit-details-marker { display: none; }
body.bdrw .bdrx-pag-plega > summary::before {
  content: ''; flex: 0 0 auto; width: 16px; height: 16px; background: currentColor; transition: transform 0.15s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%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='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.bdrw .bdrx-pag-plega[open] > summary::before { transform: rotate(90deg); }
body.bdrw .bdrx-pag-plega > summary:hover { color: var(--bdrx-enllac-hover); text-decoration-thickness: 3px; }
body.bdrw .bdrx-pag-plega[open] > :not(summary) { margin-top: 10px; }
body.bdrw .bdrx-pag-plega-accio { font-weight: 400; }
body.bdrw .bdrx-pag-bloc-plegat { padding: 6px clamp(18px, 3vw, 28px); border: 1px solid var(--bdrx-vora); border-radius: 20px; background: var(--bdrx-blanc); }
body.bdrw .bdrx-pag-bloc-plegat[open] { padding-bottom: 20px; }

/* =========================================================================================================
   Opcions amb radio o casella nativa (comptes, credit, formes de pagament, condicions, extres del domini)
   ========================================================================================================= */
body.bdrw .bdrx-pag-opcio {
  position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 14px 16px;
  border: 1.5px solid var(--bdrx-vora); border-radius: 14px; background: var(--bdrx-blanc); cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
body.bdrw .bdrx-pag-opcio:hover { border-color: var(--bdrx-vora-camp); }
body.bdrw .bdrx-pag-opcio > input[type="radio"],
body.bdrw .bdrx-pag-opcio > input[type="checkbox"] {
  flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--bdrx-navy); cursor: pointer;
}
body.bdrw .bdrx-pag-opcio:has(> input:checked) { border-color: var(--bdrx-navy); box-shadow: inset 0 0 0 1px var(--bdrx-navy); background: var(--bdrx-alterna); }
body.bdrw .bdrx-pag-opcio:has(> input:focus-visible) { outline: 3px solid var(--bdrx-navy); outline-offset: 2px; }
body.bdrw .bdrx-pag-opcio > input:focus-visible { outline: none; }
body.bdrw .bdrx-pag-opcio:has(> input:disabled) { cursor: not-allowed; opacity: 0.7; }
body.bdrw .bdrx-pag-opcio-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.bdrw .bdrx-pag-opcio-detall { font-size: 14px; line-height: 1.5; color: var(--bdrx-secundari); font-weight: 400; }
body.bdrw .bdrx-pag-comptes,
body.bdrw .bdrx-pag-passarelles fieldset,
body.bdrw .bdrx-pag-credit,
body.bdrw .bdrx-pag-extres-domini { display: flex; flex-direction: column; gap: 10px; }
body.bdrw .bdrx-pag-credit > p { font-weight: 600; }
body.bdrw .bdrx-pag-credit-op { display: block; }
body.bdrw .bdrx-pag-extres-domini legend { margin-bottom: 4px; font-weight: 600; }
body.bdrw .bdrx-pag-passarela-nom { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; }
body.bdrw .bdrx-pag-passarela-nom svg { color: var(--bdrx-navy); }
body.bdrw .bdrx-pag-passarela { padding: 16px 18px; }
body.bdrw .bdrx-pag-llista-neta { display: flex; flex-direction: column; gap: 8px; }
/* Camps que injecten WHMCS o un modul amb iCheck (targetes desades, sortides d'enganxos): aspecte de radio i casella */
body.bdrw .bdrx-pag .iradio_square-blue,
body.bdrw .bdrx-pag .icheckbox_square-blue,
body.bdrw .bdrx-factura .iradio_square-blue,
body.bdrw .bdrx-factura .icheckbox_square-blue {
  position: relative; display: inline-block; vertical-align: middle; width: 22px; height: 22px; margin: 0 8px 0 0;
  border: 2px solid var(--bdrx-vora-camp); border-radius: 6px; background: var(--bdrx-blanc); cursor: pointer;
}
body.bdrw .bdrx-pag .iradio_square-blue,
body.bdrw .bdrx-factura .iradio_square-blue { border-radius: 50%; }
body.bdrw .bdrx-pag .iradio_square-blue.checked,
body.bdrw .bdrx-pag .icheckbox_square-blue.checked,
body.bdrw .bdrx-factura .iradio_square-blue.checked,
body.bdrw .bdrx-factura .icheckbox_square-blue.checked { border-color: var(--bdrx-navy); box-shadow: inset 0 0 0 4px var(--bdrx-blanc); background: var(--bdrx-navy); }
body.bdrw .bdrx-pag .iradio_square-blue.focus,
body.bdrw .bdrx-pag .icheckbox_square-blue.focus { outline: 3px solid var(--bdrx-navy); outline-offset: 2px; }
body.bdrw .bdrx-pag .iradio_square-blue.disabled,
body.bdrw .bdrx-pag .icheckbox_square-blue.disabled { opacity: 0.5; cursor: not-allowed; }
/* La targeta de credit que el nucli ensenya si mai hi ha una passarel·la de tipus CC (avui cap) */
body.bdrw .bdrx-pag .cc-input-container { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; background: var(--bdrx-alterna); }
body.bdrw .bdrx-pag .cc-input-container.w-hidden { display: none; }
body.bdrw .bdrx-pag .cc-input-container .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 0; }
body.bdrw .bdrx-pag .cc-input-container .row > * { width: auto; max-width: none; padding: 0; flex: none; }
body.bdrw .bdrx-pag .cc-input-container label { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 600; }
body.bdrw .bdrx-pag .field-error-msg { display: none; margin-top: 4px; font-size: 14px; color: var(--bdrx-perill); }
body.bdrw .bdrx-pag .has-error .field-error-msg { display: block; }

/* Contrasenya */
body.bdrw .bdrx-pag-contrasenya-eines { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
body.bdrw .bdrx-pag-forca { flex: 1 1 240px; min-width: 0; }
body.bdrw .bdrx-pag-forca .progress { height: 8px; margin: 0; border-radius: 999px; background: var(--bdrx-vora-suau); overflow: hidden; }
body.bdrw .bdrx-pag-forca .progress-bar { height: 100%; background-image: none; }
body.bdrw .bdrx-pag-avis-info.w-hidden { display: none; }

/* Captcha i sortida d'enganxos (Openprovider) */
body.bdrw .bdrx-pag-captcha,
body.bdrw .bdrx-pag-ganxo { padding: 0 2px; }

/* =========================================================================================================
   Errors i avisos
   ========================================================================================================= */
body.bdrw .bdrx-pag .bdrx-pag-error,
body.bdrw .bdrx-factura .bdrx-pag-error {
  display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 14px 18px; border: 1px solid #F4B7B2; border-radius: 14px;
  background: var(--bdrx-perill-fons); color: var(--bdrx-perill); font-size: 15px; line-height: 1.5; text-align: left;
}
body.bdrw .bdrx-pag .bdrx-pag-error.d-none { display: none !important; }
/* Sense !important: showCheckoutError() de WHMCS ensenya l'error d'entrar (#existingLoginMessage) i el de la passarela
   amb slideDown, que nomes posa display: block en linia i deixa la classe; amb !important no sortien mai (QA del
   08/10: una contrasenya dolenta no deia res). 0,4,1 guanya igualment al display: flex de dalt. bdr-efg 08/10/2026 */
body.bdrw .bdrx-pag .bdrx-pag-error.w-hidden { display: none; }
body.bdrw .bdrx-pag-error-t { font-weight: 700; }
body.bdrw .bdrx-pag-error ul { display: flex; flex-direction: column; gap: 4px; padding-left: 20px; list-style: disc; }
body.bdrw .bdrx-pag-error li.d-none { display: none; }
body.bdrw .bdrx-pag-error a { color: inherit; font-weight: 700; }
body.bdrw .bdrx-pag-avis { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 12px 16px; border: 1px solid; border-radius: 14px; font-size: 15px; line-height: 1.5; }
body.bdrw .bdrx-pag-avis-exit { background: var(--bdrx-exit-fons); border-color: #B7DEC6; color: var(--bdrx-exit); }
body.bdrw .bdrx-pag-avis-avis { background: var(--bdrx-avis-fons); border-color: #F2D894; color: var(--bdrx-avis); }
body.bdrw .bdrx-pag-avis-info { background: var(--bdrx-info-fons); border-color: var(--bdrx-clar-navy); color: var(--bdrx-navy); }
body.bdrw .bdrx-pag-avis ul { padding-left: 20px; list-style: disc; }

/* =========================================================================================================
   Resum de la comanda
   ========================================================================================================= */
body.bdrw .bdrx-pag-resum { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--bdrx-vora); border-radius: 20px; background: var(--bdrx-blanc); box-shadow: var(--bdrx-ombra); }
/* Salta del resum al formulari (pagament): amagat fins que rep el focus amb el teclat, i llavors al cap del resum */
body.bdrw .bdrx-pag-salta { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.bdrw .bdrx-pag-salta:focus {
  position: static; align-self: flex-start; width: auto; height: auto; margin: 16px 20px 0; padding: 10px 16px; overflow: visible; clip-path: none; white-space: normal;
  border-radius: 10px; background: var(--bdrx-navy); color: var(--bdrx-blanc); font-weight: 700; text-decoration: none;
}
/* El desti del salt rep el focus (tabindex -1) sense marc: el seguent tabulador ja va al primer camp */
body.bdrw .bdrx-pag-principal[tabindex="-1"]:focus { outline: none; }
body.bdrw .bdrx-pag-resum-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 0; }
body.bdrw .bdrx-pag-resum-t { font-size: 20px; line-height: 1.25; }
body.bdrw .bdrx-pag-resum-cos { display: flex; flex-direction: column; gap: 14px; padding: 14px 20px 20px; }
body.bdrw .bdrx-pag-resum-obre {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 2px 10px; min-height: 44px; padding: 6px 0;
  border: 0; background: transparent; color: var(--bdrx-navy); text-align: right; cursor: pointer;
}
body.bdrw .bdrx-pag-resum-obre-total { font-size: 18px; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
body.bdrw .bdrx-pag-resum-obre-text { color: var(--bdrx-enllac); font-weight: 600; text-decoration: underline; text-decoration-color: var(--bdrx-taronja); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (min-width: 1060px) {
  body.bdrw .bdrx-pag-resum-obre { display: none !important; }
  body.bdrw .bdrx-pag-resum-cos[hidden] { display: flex !important; }
}
body.bdrw .bdrx-pag-buida-mini { color: var(--bdrx-secundari); }

/* Linies */
body.bdrw .bdrx-pag-linies { display: flex; flex-direction: column; }
body.bdrw .bdrx-pag-linia { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid var(--bdrx-vora-suau); }
body.bdrw .bdrx-pag-linia:first-child { border-top: 0; padding-top: 4px; }
body.bdrw .bdrx-pag-linia-sub { padding-left: 16px; border-top-style: dashed; }
body.bdrw .bdrx-pag-linia-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
body.bdrw .bdrx-pag-linia-nom { min-width: 0; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
body.bdrw .bdrx-pag-linia-preu { flex: 0 0 auto; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; text-align: right; white-space: nowrap; }
body.bdrw .bdrx-pag-linia-detall,
body.bdrw .bdrx-pag-linia-opcions,
body.bdrw .bdrx-pag-linia-nota { font-size: 14px; line-height: 1.5; color: var(--bdrx-secundari); }
body.bdrw .bdrx-pag-linia-opcions li { position: relative; padding-left: 14px; }
body.bdrw .bdrx-pag-linia-opcions li::before { content: ''; position: absolute; left: 2px; top: 0.65em; width: 5px; height: 5px; border-radius: 50%; background: var(--bdrx-vora-camp); }
body.bdrw .bdrx-pag-linia-alta { font-size: 14px; line-height: 1.5; color: var(--bdrx-navy); font-weight: 500; }
body.bdrw .bdrx-pag-linia-renova { font-size: 14px; line-height: 1.5; color: var(--bdrx-navy); }
body.bdrw .bdrx-pag-linia-renova.is-doble { color: var(--bdrx-avis); font-weight: 700; }
body.bdrw .bdrx-pag-linia-avis { align-self: flex-start; padding: 4px 10px; border-radius: 10px; background: var(--bdrx-avis-fons); color: var(--bdrx-avis); font-size: 14px; line-height: 1.45; }
body.bdrw .bdrx-pag-linia-accions { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 2px; }
body.bdrw .bdrx-pag-accio {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: transparent;
  color: var(--bdrx-enllac); font-size: 15px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--bdrx-taronja); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer;
}
body.bdrw .bdrx-pag-accio:hover { color: var(--bdrx-enllac-hover); text-decoration-thickness: 3px; }
body.bdrw .bdrx-pag-quantitat,
body.bdrw .bdrx-pag-periode { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; font-size: 15px; }
body.bdrw .bdrx-pag-quantitat input { width: 96px; min-height: 44px; padding: 8px 10px; border: 1.5px solid var(--bdrx-vora-camp); border-radius: 10px; font-size: 16px; }
body.bdrw .bdrx-pag-periode .bdrx-pag-select { width: auto; min-width: 220px; min-height: 44px; }

/* Totals: «Avui pagues» destaca en un modul gris calid (brandbook 2026: els blocs grans blau mari passen a #F8F7F5
   amb vora #E1DEDA i una barra de degradat). La barra es un fons de 4 px a dalt, dins del farciment de 18 px: mai queda
   darrere del text. La vora es real i no una ombra: es pinta en colors forcats, i a l'escriptori la banda fixa es
   distingeix del que passa per sota. bdr-efg 08/10/2026 */
body.bdrw .bdrx-pag-totals {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; border: 1px solid var(--bdrx-vora); border-radius: 16px;
  background: var(--bdrx-degradat) top / 100% 4px no-repeat, var(--bdrx-alterna); color: var(--bdrx-navy); font-variant-numeric: lining-nums tabular-nums;
}
body.bdrw .bdrx-pag-total-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--bdrx-secundari); font-size: 15px; }
body.bdrw .bdrx-pag-total-fila dd { text-align: right; color: var(--bdrx-navy); }
/* «Avui pagues» i l'import: si no caben en una linia (en frances a 320 i 390 px, «Vous payez aujourd'hui» i l'import
   gran), l'import baixa a la linia seguent, a la dreta, en lloc de sortir de la banda (QA del 07/10) */
body.bdrw .bdrx-pag-total-avui { flex-wrap: wrap; row-gap: 2px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--bdrx-vora); color: var(--bdrx-navy); font-size: 17px; font-weight: 700; }
body.bdrw .bdrx-pag-total-avui dt { min-width: 0; }
body.bdrw .bdrx-pag-total-avui dd { margin-left: auto; font-size: clamp(24px, 20px + 0.8vw, 30px); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
/* Pagament a l'escriptori (resum fix amb desplacament propi): si les linies no hi caben, els totals amb «Avui pagues»
   es queden a la vista al peu del resum mentre les linies passen per sota; quan s'hi arriba, tornen al seu lloc.
   La banda tapa el que passa per sota: el resum en reserva l'alcada (scroll-padding-bottom) i el navegador, en portar
   el focus del teclat a un «Canvia» o un «Treu», el deixa per sobre de la banda i no darrere (WCAG 2.4.11). Amb
   Poppins i la vora (08/10, Chrome sobre el pagament pintat, de 1280x720 a 1920x1080) la banda fa 146 px (174 en
   frances, on «Vous payez aujourd'hui» i l'import van en dues linies), 175 amb descompte (204) i 251 amb un descompte
   d'etiqueta llarga i un segon impost (279 en frances); abans, amb Raleway i sense vora, 142, 171 i 247. 19rem (304
   px) la cobreix amb el marc del focus (5 px) i marge. Si mai creix, cal pujar-la. bdr-efg 08/10/2026 */
@media (min-width: 1060px) {
  body.bdrw .bdrx-pag-pagament .bdrx-pag-totals { position: sticky; bottom: 0; z-index: 1; }
  body.bdrw .bdrx-pag-pagament .bdrx-pag-resum { scroll-padding-bottom: 19rem; }
}
body.bdrw .bdrx-pag-despres-pagaras { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--bdrx-vora); border-radius: 14px; }
body.bdrw .bdrx-pag-despres-pagaras-t { font-size: 15px; font-weight: 600; }
body.bdrw .bdrx-pag-quotes { display: flex; flex-direction: column; gap: 4px; }
body.bdrw .bdrx-pag-quotes li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; font-size: 14px; line-height: 1.5; }
body.bdrw .bdrx-pag-quota-nom { min-width: 0; overflow-wrap: anywhere; }
body.bdrw .bdrx-pag-quota-preu { font-weight: 700; font-variant-numeric: lining-nums tabular-nums; text-align: right; }
body.bdrw .bdrx-pag-nota-igi,
body.bdrw .bdrx-pag-metodes,
body.bdrw .bdrx-pag-cancela { font-size: 14px; line-height: 1.5; color: var(--bdrx-secundari); }
body.bdrw .bdrx-pag-despres { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--bdrx-alterna); }
body.bdrw .bdrx-pag-despres-t { font-size: 15px; }
body.bdrw .bdrx-pag-despres ul { display: flex; flex-direction: column; gap: 6px; }
body.bdrw .bdrx-pag-despres li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.5; }
body.bdrw .bdrx-pag-despres li::before {
  content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; background: var(--bdrx-exit);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%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='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.bdrw .bdrx-pag-resum :focus-visible { outline-color: var(--bdrx-navy); }

/* =========================================================================================================
   Final del pagament: condicions, boto amb l'import, el que passa i la IP
   ========================================================================================================= */
body.bdrw .bdrx-pag-final { display: flex; flex-direction: column; gap: 14px; }
body.bdrw .bdrx-pag-condicions { border-style: dashed; }
/* La frase de les condicions va seguida, amb els enllacos dins del text */
body.bdrw .bdrx-pag-condicions .bdrx-pag-opcio-text { display: block; line-height: 1.6; }
body.bdrw .bdrx-pag-condicions:has(> input:checked) { border-style: solid; }
/* «Paga ... amb targeta»: el principal (seccio Arrel), a 19 px com els altres (a 18 px el blanc sobre #EB5420 no hi
   arribava) */
body.bdrw .bdrx-pag-boto { min-height: 56px; font-size: var(--bdrx-boto-mida); }
body.bdrw .bdrx-pag-boto[aria-busy="true"] { cursor: progress; }
body.bdrw .bdrx-pag-boto:disabled { background: var(--bdrx-alterna); color: var(--bdrx-secundari); box-shadow: inset 0 0 0 1.5px var(--bdrx-vora-camp); cursor: not-allowed; }
body.bdrw .bdrx-pag-despres-curt { font-size: 15px; line-height: 1.5; color: var(--bdrx-navy); }
body.bdrw .bdrx-pag-ip { font-size: 13px; }

/* =========================================================================================================
   Cistella
   ========================================================================================================= */
body.bdrw .bdrx-pag-resum-cistella { box-shadow: none; }
body.bdrw .bdrx-pag-accions-cistella { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 20px; border: 1px solid var(--bdrx-vora); border-radius: 20px; background: var(--bdrx-blanc); box-shadow: var(--bdrx-ombra); }
body.bdrw .bdrx-pag-accions-cistella .bdrx-btn-text { align-self: center; }
body.bdrw .bdrx-pag-cta-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
body.bdrw .bdrx-pag-cta-total strong { margin-left: auto; font-size: 24px; letter-spacing: -0.01em; white-space: nowrap; }
body.bdrw .bdrx-pag-codi { padding: 6px 20px; border: 1px solid var(--bdrx-vora); border-radius: 20px; background: var(--bdrx-blanc); }
body.bdrw .bdrx-pag-codi[open] { padding-bottom: 18px; }
body.bdrw .bdrx-pag-codi-form { display: flex; flex-direction: column; gap: 10px; }
body.bdrw .bdrx-pag-codi-actiu { margin-bottom: 4px; }
body.bdrw .bdrx-pag-final-cistella { display: flex; flex-direction: column; align-items: center; }
/* Els avisos de la cistella (codi aplicat, errors, paquets) separats del total que ve a sota */
body.bdrw .bdrx-pag-cistella .bdrx-pag-cont > :is(.bdrx-pag-avis, .bdrx-pag-error) { margin-bottom: 20px; }
body.bdrw .bdrx-pag-buidar { align-self: center; color: var(--bdrx-secundari); }
body.bdrw .bdrx-pag-buida { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(20px, 4vw, 40px); border: 1px solid var(--bdrx-vora); border-radius: 20px; background: var(--bdrx-blanc); }
body.bdrw .bdrx-pag-buida-enllacos { display: flex; flex-wrap: wrap; gap: 10px; }
body.bdrw .bdrx-pag .express-checkout-buttons:empty { display: none; }

/* Dialegs de WHMCS (Bootstrap) per treure una linia o buidar la cistella */
body.bdrw .bdrx-pag-modal .modal-content { border: 0; border-radius: 20px; box-shadow: 0 30px 80px rgba(61, 61, 61, 0.18); color: var(--bdrx-navy); }
body.bdrw .bdrx-pag-modal .modal-body { display: flex; flex-direction: column; gap: 8px; padding: 24px 24px 8px; }
body.bdrw .bdrx-pag-modal-t { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 700; }
body.bdrw .bdrx-pag-modal .modal-body p { margin: 0; color: var(--bdrx-secundari); }
body.bdrw .bdrx-pag-modal .modal-footer { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; padding: 16px 24px 24px; border: 0; }
body.bdrw .bdrx-pag-modal .modal-footer > * { margin: 0; }
/* El dialeg de recomanacions de WHMCS (bdr_sc/recommendations-modal.tpl; nomes surt si hi ha recomanacions de producte
   configurades, i el 08/10 no n'hi ha cap): els botons de Bootstrap del tema (#369) passen a la marca. «Continua», el
   principal; «Afegeix», petit, en #F4A000 amb text #3D3D3D (5,11:1; en passar-hi #E89500, 4,52:1). bdr-web.css posa
   tots els .btn-primary del tema en #F4A000 amb text #3D3D3D i !important (body.bdrw .btn-primary, 0,2,1, i
   body.bdrw #order-standard_cart #btnContinueRecommendationsModal.btn, 2,2,1), i als passos de WHMCS es carrega
   despres d'aquesta fulla: per aixo aqui va amb !important i 2,3,1 (2,4,1 en passar-hi). bdr-efg 08/10/2026 */
body.bdrw #recommendationsModal .modal-footer #btnContinueRecommendationsModal.btn {
  min-height: 52px; padding: 10px 24px; border: 1px solid transparent !important; border-radius: 12px;
  background: var(--bdrx-taronja) !important; color: var(--bdrx-blanc) !important; font-size: var(--bdrx-boto-mida) !important; font-weight: 700 !important;
}
body.bdrw #recommendationsModal .modal-footer #btnContinueRecommendationsModal.btn:is(:hover, :focus, :active) { background: var(--bdrx-taronja-fons-hover) !important; color: var(--bdrx-blanc) !important; }
body.bdrw #recommendationsModal .btn-add { border: 1px solid transparent; border-radius: 10px; background-color: var(--bdrx-ambre); color: var(--bdrx-navy); font-weight: 700; }
body.bdrw #recommendationsModal .btn-add:is(:hover, :focus, :active) { background-color: var(--bdrx-ambre-hover); color: var(--bdrx-navy); box-shadow: none; }
body.bdrw #recommendationsModal :is(#btnContinueRecommendationsModal, .btn-add, .close):focus-visible { outline: 3px solid var(--bdrx-navy); outline-offset: 2px; }

/* =========================================================================================================
   Dades del domini
   ========================================================================================================= */
body.bdrw .bdrx-pag-domini-t { font-size: clamp(20px, 18px + 0.6vw, 24px); }
body.bdrw .bdrx-pag-fitxa { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
/* L'allotjament porta una frase i un enllac: al mobil, a tot l'ample; des de 640 px, a la fila amb les altres */
body.bdrw .bdrx-pag-fitxa > .bdrx-pag-fitxa-ample { grid-column: 1 / -1; }
@media (min-width: 640px) {
  body.bdrw .bdrx-pag-fitxa:has(> .bdrx-pag-fitxa-ample) { grid-template-columns: 1fr 1fr 2fr; }
  body.bdrw .bdrx-pag-fitxa > .bdrx-pag-fitxa-ample { grid-column: auto; }
}
body.bdrw .bdrx-pag-fitxa > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 12px; background: var(--bdrx-alterna); }
body.bdrw .bdrx-pag-fitxa dt { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--bdrx-secundari); }
body.bdrw .bdrx-pag-fitxa dd { font-size: 15px; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
body.bdrw .bdrx-pag-fitxa dd.is-doble { color: var(--bdrx-avis); }
body.bdrw .bdrx-pag-fitxa dd a { font-weight: 400; }
body.bdrw .bdrx-pag-camps-domini { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; border-top: 1px solid var(--bdrx-vora-suau); }
body.bdrw .bdrx-pag-camp-domini { padding: 0; }
body.bdrw .bdrx-pag-camp-control { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
body.bdrw .bdrx-pag-camp-control > * { max-width: 100%; }
body.bdrw .bdrx-pag-camp-control input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--bdrx-navy); }
body.bdrw .bdrx-pag-camp-control p,
body.bdrw .bdrx-pag-camp-control ul { font-size: 14px; line-height: 1.5; color: var(--bdrx-secundari); }
body.bdrw .bdrx-pag-camp-control ul { padding-left: 20px; list-style: disc; }
/* L'ajuda en angles del modul al consentiment: la substitueix la traduida de sota */
body.bdrw [data-bdrx-camp="consent"] .bdrx-pag-camp-control > span { display: none !important; }
body.bdrw .bdrx-pag-camp-original { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--bdrx-secundari); }

/* =========================================================================================================
   Factura
   ========================================================================================================= */
body.bdrw.bdrx-factura-cos { margin: 0; background: var(--bdrx-fons); }
body.bdrw .bdrx-factura { padding-top: 0; }
body.bdrw .bdrx-factura-capcalera { border-bottom: 1px solid var(--bdrx-vora-suau); background: var(--bdrx-fons); }
body.bdrw .bdrx-factura-capcalera .bdrx-pag-cont { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; min-height: 72px; padding-top: 10px; padding-bottom: 10px; }
body.bdrw .bdrx-factura-logo { display: inline-flex; align-items: center; min-height: 48px; color: var(--bdrx-navy); font-weight: 700; text-decoration: none; }
/* logotipo.svg porta molt marge buit: es fa gran i el marge negatiu el compensa, com a la capcalera de la web nova */
body.bdrw .bdrx-factura-logo img { display: block; width: auto; height: 76px; margin: -14px 0; }
body.bdrw .bdrx-factura main { display: flex; flex-direction: column; gap: 20px; padding-top: clamp(20px, 3vw, 32px); }
body.bdrw .bdrx-factura-estat { display: flex; flex-direction: column; gap: 14px; }
body.bdrw .bdrx-factura-estat-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
body.bdrw .bdrx-factura-insignia { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 14px; border-radius: 999px; background: var(--bdrx-alterna); color: var(--bdrx-navy); font-size: 15px; font-weight: 700; }
body.bdrw .bdrx-factura-insignia.is-unpaid,
body.bdrw .bdrx-factura-insignia.is-draft { background: var(--bdrx-avis-fons); color: var(--bdrx-avis); }
body.bdrw .bdrx-factura-insignia.is-paid { background: var(--bdrx-exit-fons); color: var(--bdrx-exit); }
body.bdrw .bdrx-factura-insignia.is-cancelled,
body.bdrw .bdrx-factura-insignia.is-collections { background: var(--bdrx-perill-fons); color: var(--bdrx-perill); }
body.bdrw .bdrx-factura-total { font-size: 22px; }
body.bdrw .bdrx-factura-banc-estat { font-size: 18px; font-weight: 700; }
body.bdrw .bdrx-factura-boto-modul { display: flex; flex-wrap: wrap; gap: 10px; }
/* El boto del modul de pagament ({$paymentbutton}, el de Redsys): el principal, #EB5420 amb text blanc en negreta a
   19 px (3,61:1, text gran; en passar-hi #D2461A, 4,53:1). Amb !important als colors: si el modul hi posa .btn-primary
   o .btn-success, bdr-web.css el pintaria #F4A000 amb !important (0,2,1 i, en passar-hi, 0,3,1; aqui 0,3,1 i 0,4,1).
   bdr-efg 08/10/2026 */
body.bdrw .bdrx-factura .bdrx-factura-boto-modul :where(input[type="submit"], button, .btn) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border: 0; border-radius: 12px;
  background: var(--bdrx-taronja) !important; color: var(--bdrx-blanc) !important; font: inherit; font-size: var(--bdrx-boto-mida) !important; font-weight: 700 !important;
  cursor: pointer; text-decoration: none;
}
body.bdrw .bdrx-factura .bdrx-factura-boto-modul :where(input[type="submit"], button, .btn):hover { background: var(--bdrx-taronja-fons-hover) !important; color: var(--bdrx-blanc) !important; }
body.bdrw .bdrx-factura-instruccions { padding: 14px 16px; border-radius: 14px; background: var(--bdrx-alterna); font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
body.bdrw .bdrx-factura-instruccions p { margin: 0; }
body.bdrw .bdrx-factura-copiables { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
body.bdrw .bdrx-factura-copiables > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 14px; border: 1px solid var(--bdrx-vora); border-radius: 12px; background: var(--bdrx-blanc); }
body.bdrw .bdrx-factura-copiables dt { font-size: 14px; font-weight: 600; color: var(--bdrx-secundari); }
body.bdrw .bdrx-factura-copiables dd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
body.bdrw .bdrx-factura-copia { min-height: 44px; padding: 0 16px; font-size: 15px; }
body.bdrw .bdrx-factura-iban { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-weight: 700; }
body.bdrw .bdrx-factura-canvia-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
body.bdrw .bdrx-factura-canvia-form .bdrx-pag-camp { flex: 1 1 240px; }
body.bdrw .bdrx-factura-passos { display: flex; flex-direction: column; gap: 8px; }
body.bdrw .bdrx-factura-passos li { position: relative; padding-left: 28px; }
body.bdrw .bdrx-factura-passos li::before {
  content: ''; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; background: var(--bdrx-exit);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%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='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.bdrw .bdrx-factura-parts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 720px) { body.bdrw .bdrx-factura-parts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body.bdrw .bdrx-factura-parts > div { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.5; }
body.bdrw .bdrx-factura-parts .bdrx-pag-subt:not(:first-child) { margin-top: 8px; }
body.bdrw .bdrx-factura-taula-cont { overflow-x: auto; }
body.bdrw .bdrx-factura-taula { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: lining-nums tabular-nums; }
body.bdrw .bdrx-factura-taula th,
body.bdrw .bdrx-factura-taula td { padding: 10px 12px; border-bottom: 1px solid var(--bdrx-vora-suau); text-align: left; vertical-align: top; }
body.bdrw .bdrx-factura-taula thead th { font-size: 13px; letter-spacing: 0.02em; color: var(--bdrx-secundari); border-bottom-color: var(--bdrx-vora); }
body.bdrw .bdrx-factura-taula tfoot th { font-weight: 400; text-align: right; color: var(--bdrx-secundari); }
body.bdrw .bdrx-factura-taula .bdrx-num { text-align: right; white-space: nowrap; }
body.bdrw .bdrx-factura-total-fila th,
body.bdrw .bdrx-factura-total-fila td { font-weight: 700; color: var(--bdrx-navy); border-bottom: 0; }
body.bdrw .bdrx-factura-caption { padding: 0 0 8px; text-align: left; font-weight: 700; caption-side: top; color: var(--bdrx-navy); }
/* Mobil: els pagaments, una targeta per pagament amb l'etiqueta de cada dada (sense desplacament horitzontal) */
@media (max-width: 559.98px) {
  body.bdrw .bdrx-factura-pagaments thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  body.bdrw .bdrx-factura-pagaments,
  body.bdrw .bdrx-factura-pagaments tbody,
  body.bdrw .bdrx-factura-pagaments tfoot { display: block; }
  body.bdrw .bdrx-factura-pagaments tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--bdrx-vora-suau); }
  body.bdrw .bdrx-factura-pagaments td,
  body.bdrw .bdrx-factura-pagaments th { display: block; padding: 0; border: 0; text-align: left; }
  body.bdrw .bdrx-factura-pagaments td[data-bdrx-et]::before { content: attr(data-bdrx-et) ': '; color: var(--bdrx-secundari); font-size: 13px; }
  body.bdrw .bdrx-factura-pagaments td[colspan] { grid-column: 1 / -1; }
  body.bdrw .bdrx-factura-pagaments .bdrx-num { text-align: right; white-space: normal; }
}
body.bdrw .bdrx-factura-eines { display: flex; flex-wrap: wrap; gap: 10px; }
body.bdrw .bdrx-factura-torna { text-align: center; }
body.bdrw .bdrx-factura .bdrx-progres { margin-bottom: 0; }
body.bdrw #fullpage-overlay.w-hidden { display: none; }
@media print {
  body.bdrw .bdrx-factura-capcalera,
  body.bdrw .bdrx-factura .bdrx-progres,
  body.bdrw .bdrx-factura-paga,
  body.bdrw .bdrx-factura-banc,
  body.bdrw .bdrx-factura-canvia,
  body.bdrw .bdrx-factura .bdrx-ajuda-mini,
  body.bdrw .d-print-none { display: none !important; }
  body.bdrw .bdrx-pag-bloc { border: 0; padding: 0; }
}

/* =========================================================================================================
   Colors forcats (contrast alt de Windows): el mode canvia el fons de tot pel color del sistema, i les icones fetes
   amb mascara i fons (fletxa dels plegables, marques de «Que passara» i del rebut, punts de les opcions) quedarien
   del color del fons. Amb CanvasText es veuen, com a bdr-botiga.css. La fletxa dels desplegables es una imatge de
   fons amb el navy fix, que aquest mode no recolora (amb un tema fosc no es veuria): tornen a la del sistema. Les
   icones de les formes de pagament (SVG amb currentColor i el navy posat) passen a CanvasText. La seleccio dels
   camps iCheck (si mai surten) i de les opcions, sense l'ombra que aquest mode no pinta: l'opcio triada amb la vora
   de 3 px en Highlight (el padding compensa el gruix), i el marc de fora queda nomes per al focus.
   ========================================================================================================= */
@media (forced-colors: active) {
  body.bdrw .bdrx-pag-plega > summary::before,
  body.bdrw .bdrx-pag-despres li::before,
  body.bdrw .bdrx-factura-passos li::before,
  body.bdrw .bdrx-pag-linia-opcions li::before { background: CanvasText; }
  body.bdrw .bdrx-pag .iradio_square-blue.checked,
  body.bdrw .bdrx-pag .icheckbox_square-blue.checked,
  body.bdrw .bdrx-factura .iradio_square-blue.checked,
  body.bdrw .bdrx-factura .icheckbox_square-blue.checked { background: CanvasText; }
  body.bdrw .bdrx-pag .bdrx-pag-select,
  body.bdrw .bdrx-pag .bdrx-pag-camp-control select,
  body.bdrw .bdrx-pag .bdrx-pag-camp > select { -webkit-appearance: auto; appearance: auto; background-image: none; }
  body.bdrw .bdrx-pag-passarela-nom svg { color: CanvasText; }
  body.bdrw .bdrx-pag-opcio:has(> input:checked) { border-width: 3px; border-color: Highlight; padding: 12.5px 14.5px; }
  body.bdrw .bdrx-pag-passarela:has(> input:checked) { padding: 14.5px 16.5px; }
  /* Els dialegs de WHMCS no porten vora (border: 0) i l'ombra no es pinta: sense, no es veu on acaben (WCAG 1.4.11).
     bdr-efg 08/10/2026 */
  body.bdrw .bdrx-pag-modal .modal-content { border: 2px solid CanvasText; }
  /* Botons sense vora propia (el del modul de pagament de la factura i els del dialeg de recomanacions): la forma, amb
     una vora del sistema. Els bdrx-btn ja la porten de bdr-botiga.css. bdr-efg 08/10/2026 */
  body.bdrw .bdrx-factura .bdrx-factura-boto-modul :where(input[type="submit"], button, .btn),
  body.bdrw #recommendationsModal .btn-add { border: 1px solid ButtonText; }
  body.bdrw #recommendationsModal .modal-footer #btnContinueRecommendationsModal.btn { border: 1px solid ButtonText !important; }
}

/* =========================================================================================================
   Moviment reduit
   ========================================================================================================= */
@media (prefers-reduced-motion: reduce) {
  body.bdrw .bdrx-pag *,
  body.bdrw .bdrx-pag *::before { transition: none !important; animation: none !important; }
}

/* =========================================================================================================
   Passos de WHMCS que no son de les plantilles noves (configurar el producte, triar-ne el domini): els camps
   visibles que donava bdr_estils_carret.php (que amb la web nova ja no surt), amb la paleta nova, i sense la barra
   lateral de categories. L'id doble guanya les regles amb !important de custom.css, com feia aquell enganx.
   ========================================================================================================= */
body.bdrw #order-standard_cart#order-standard_cart:not(.bdrx-pag) .form-control,
body.bdrw #order-standard_cart#order-standard_cart:not(.bdrx-pag) .field {
  min-height: 46px; border: 1.5px solid var(--bdrx-vora-camp) !important; border-radius: 12px !important;
  background: var(--bdrx-blanc) !important; color: var(--bdrx-navy) !important; font-size: 16px;
}
body.bdrw #order-standard_cart#order-standard_cart:not(.bdrx-pag) .form-control:focus,
body.bdrw #order-standard_cart#order-standard_cart:not(.bdrx-pag) .field:focus {
  border-color: var(--bdrx-navy) !important; outline: 3px solid var(--bdrx-navy) !important; outline-offset: 1px; box-shadow: none !important;
}
body.bdrw #order-standard_cart#order-standard_cart:not(.bdrx-pag) .form-group.prepend-icon .form-control:not(#inputPhone) { padding-left: 38px !important; }
body.bdrw #order-standard_cart#order-standard_cart:not(.bdrx-pag) input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--bdrx-navy); }
body.bdrw #order-standard_cart:has(#frmConfigureProduct, #frmProductDomain) .cart-sidebar,
body.bdrw #order-standard_cart:has(#frmConfigureProduct, #frmProductDomain) .sidebar-collapsed { display: none !important; }
body.bdrw #order-standard_cart:has(#frmConfigureProduct, #frmProductDomain) .cart-body { width: 100%; max-width: none; flex: 1 1 auto; }
body.bdrw #order-standard_cart:has(#frmConfigureProduct, #frmProductDomain) .header-lined h1 { font-family: inherit; font-weight: 700; letter-spacing: -0.02em; color: var(--bdrx-navy); }
/* «Continua» dels dos passos: el principal, com el del carret nou (#EB5420, text blanc en negreta a 19 px). Mentre
   WHMCS el te desactivat (el del domini, fins que se'n tria un), es veu inactiu i no taronja esvait: gris calid amb
   text #636363 (5,61:1) i vora de camp. Tot amb !important: el boto porta .btn-primary, que bdr-web.css pinta amb
   !important, i la mida i la negreta son les que fan valer el blanc sobre #EB5420. bdr-efg 08/10/2026 */
body.bdrw #order-standard_cart:has(#frmConfigureProduct, #frmProductDomain) #btnCompleteProductConfig,
body.bdrw #order-standard_cart:has(#frmConfigureProduct, #frmProductDomain) #btnDomainContinue {
  min-height: 52px; border: 0 !important; border-radius: 12px !important; background: var(--bdrx-taronja) !important; color: var(--bdrx-blanc) !important;
  font-size: var(--bdrx-boto-mida) !important; font-weight: 700 !important;
}
body.bdrw #order-standard_cart:has(#frmConfigureProduct, #frmProductDomain) #btnCompleteProductConfig:hover,
body.bdrw #order-standard_cart:has(#frmConfigureProduct, #frmProductDomain) #btnDomainContinue:hover { background: var(--bdrx-taronja-fons-hover) !important; color: var(--bdrx-blanc) !important; }
body.bdrw #order-standard_cart:has(#frmConfigureProduct, #frmProductDomain) #btnCompleteProductConfig:disabled,
body.bdrw #order-standard_cart:has(#frmConfigureProduct, #frmProductDomain) #btnDomainContinue:disabled {
  background: var(--bdrx-alterna) !important; color: var(--bdrx-secundari) !important; box-shadow: inset 0 0 0 1.5px var(--bdrx-vora-camp) !important; opacity: 1; cursor: not-allowed;
}
/* Colors forcats als dos passos: el «Continua» no te vora (border: 0 !important) i l'ombra de l'inactiu no es pinta.
   Va aqui, despres de les regles de dalt, perque amb la mateixa especificitat i !important guanya l'ultima. bdr-efg */
@media (forced-colors: active) {
  body.bdrw #order-standard_cart:has(#frmConfigureProduct, #frmProductDomain) #btnCompleteProductConfig,
  body.bdrw #order-standard_cart:has(#frmConfigureProduct, #frmProductDomain) #btnDomainContinue { border: 1px solid ButtonText !important; }
  body.bdrw #order-standard_cart:has(#frmConfigureProduct, #frmProductDomain) #btnCompleteProductConfig:disabled,
  body.bdrw #order-standard_cart:has(#frmConfigureProduct, #frmProductDomain) #btnDomainContinue:disabled { border-color: GrayText !important; color: GrayText !important; }
}