/* Buoni regalo - il tema decide lo stile: colore del sito, font, campi e pulsanti arrivano dal tema in uso.
   Proprio dell'addon: le scelte a riquadro e l'anteprima del buono, che segue la stessa impostazione del PDF. */
.br{--br-colore:var(--colore-personale,#2c3e50);--br-su:var(--testo-su-personale,#fff);--br-linea:rgba(0,0,0,.14);--br-tenue:rgba(0,0,0,.5);--br-fondo:rgba(0,0,0,.04);text-align:left}
@supports (color:color-mix(in srgb,red,blue)){.br{--br-linea:color-mix(in srgb,currentColor 16%,transparent);--br-tenue:color-mix(in srgb,currentColor 58%,transparent);--br-fondo:color-mix(in srgb,currentColor 5%,transparent)}}
.br *{box-sizing:border-box}
.br [hidden]{display:none!important}
.br{--br-respiro:clamp(14px,1.6vw,24px);--br-passo:clamp(30px,var(--spazio-paragrafi,60px)*.7,56px)}
html body .br .br-titolo{margin:0 0 var(--br-respiro)!important}
.br .br-sopra{margin:0 0 var(--br-passo)}
html body .br .br-testo p,html body .br .br-testo :is(ul,ol,blockquote){margin:0 0 1em!important}
html body .br .br-testo>:first-child{margin-top:0!important}
html body .br .br-testo>:last-child{margin-bottom:0!important}
html body .br .br-testo :is(ul,ol){padding-left:1.4em!important}
html body .br .br-testo ul{list-style:disc!important}
.br .br-chiuso{color:var(--br-tenue)}
.br .br-avviso{margin:0 0 var(--br-respiro)}

/* il tema può centrare i blocchi (.Centrato) e far galleggiare i campi: qui tutto resta in colonna, a sinistra */
html body .br .br-griglia,html body .br .br-griglia *{text-align:left}
html body .br .br-griglia h3.br-tit{text-align:left!important}
.br .br-form{margin:0;padding:0}
.br-passo{margin:0 0 var(--br-passo);clear:both}
.br-passo::after{content:"";display:block;clear:both}

/* modulo a sinistra, anteprima a destra (sul telefono l'anteprima sta sopra) */
.br-griglia{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,460px);gap:clamp(28px,4vw,64px);align-items:start}
.br-ante-fissa{position:sticky;top:calc(var(--altezza-barra,80px) + 20px)}
.br-ante-et{font-size:.8em;color:var(--br-tenue);margin:0 0 8px}
@media(max-width:900px){
	.br-griglia{grid-template-columns:minmax(0,1fr)}
	.br-ante{order:-1;max-width:460px}
	.br-ante-fissa{position:static}
}

html body .br .br-tit{display:flex!important;align-items:center;justify-content:flex-start;gap:.6em;margin:0 0 var(--br-respiro)!important}
.br-num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--br-colore);color:var(--br-su);font-size:.75em;line-height:1}

/* scelte a riquadro: le radio native restano nascoste anche se il tema dà larghezza a tutti gli input */
html body .br :is(.br-tipo,.br-tagli,.br-modelli) input[type=radio]{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;pointer-events:none}
.br-tipo{display:inline-flex;border:1px solid var(--br-linea);margin:0 0 var(--br-respiro);padding:3px;gap:3px}
.br-tipo label{position:relative;margin:0!important;cursor:pointer;font-weight:400!important}
.br-tipo span{display:block;padding:.55em 1.1em}
.br-tipo input:checked+span{background:var(--br-colore);color:var(--br-su)}
.br-tipo input:focus-visible+span,.br-tagli input:focus-visible+span,.br-modelli input:focus-visible+.br-campione{outline:2px solid var(--br-colore);outline-offset:2px}

.br-tagli{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start}
.br-taglio{position:relative;margin:0!important;cursor:pointer;font-weight:400!important;display:block!important;width:auto!important;float:none!important}
.br-taglio>span{display:flex;align-items:center;justify-content:center;width:9.5em;height:3.2em;padding:0 .8em;border:1px solid var(--br-linea);font-weight:600;font-variant-numeric:tabular-nums;transition:border-color .15s,background-color .15s;white-space:nowrap}
.br-taglio:hover>span{border-color:var(--br-colore)}
.br-taglio input:checked+span{background:var(--br-colore);border-color:var(--br-colore);color:var(--br-su)}
.br-altro .br-altro-t{font-weight:400}
.br-altro .br-altro-c{display:none;align-items:center;gap:.35em;font-weight:600}
.br-altro input:checked+span .br-altro-t{display:none}
.br-altro input:checked+span .br-altro-c{display:inline-flex}
html body .br .br-altro .br-altro-c input{width:4.2em!important;height:auto!important;min-height:0!important;margin:0!important;padding:0 0 1px!important;border:0!important;border-bottom:1px solid currentColor!important;border-radius:0!important;background:transparent!important;color:inherit!important;font:inherit!important;box-shadow:none!important;text-align:left;-moz-appearance:textfield;appearance:textfield}
.br-altro .br-altro-c input::-webkit-inner-spin-button,.br-altro .br-altro-c input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
html body .br .br-altro .br-altro-c input::placeholder{color:inherit!important;opacity:.55;font-size:inherit!important}
.br .br-nota{font-size:.88em;color:var(--br-tenue);margin:.8em 0 0!important;line-height:1.45}

.br-servizi{display:flex;flex-direction:column;border-top:1px solid var(--br-linea)}
.br-servizio{display:flex!important;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid var(--br-linea);cursor:pointer;font-weight:400!important;margin:0!important;width:auto!important;float:none!important}
html body .br .br-servizio input{flex:none;width:18px!important;height:18px!important;margin:0!important;accent-color:var(--br-colore)}
.br-servizio-testo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.br-servizio-nome{font-weight:600}
.br-servizio-desc{font-size:.9em;color:var(--br-tenue)}
.br-servizio-prezzo{flex:none;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.br-servizio:has(input:checked){background:var(--br-fondo)}

/* grafiche: piccole miniature del buono, una accanto all'altra */
.br-modelli{display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-start}
html body .br .br-modello{position:relative;display:flex!important;flex-direction:column;gap:7px;cursor:pointer;margin:0!important;font-weight:400!important;width:120px!important;flex:0 0 120px;float:none!important}
.br-campione{position:relative;display:block;width:120px;height:85px;background:#fff;box-shadow:0 0 0 1px var(--br-linea);overflow:hidden;transition:box-shadow .15s}
.br-campione:before{content:"";position:absolute;left:0;top:0;bottom:0;width:34.3%;background:var(--br-fondo)}
.br-campione i{position:absolute;left:44%;width:36%;top:44%;height:10%;background:var(--br-val)}
.br-campione:after{content:"";position:absolute;left:44%;width:26%;top:24%;height:7%;background:rgba(0,0,0,.18)}
.br-campione-natale{outline:1px solid var(--br-acc);outline-offset:-4px}
.br-campione-elegante:before{box-shadow:inset 0 0 0 3px var(--br-fondo),inset 0 0 0 3.6px var(--br-acc)}
.br-modello:hover .br-campione{box-shadow:0 0 0 1px var(--br-colore)}
.br-modello input:checked+.br-campione{box-shadow:0 0 0 3px var(--br-colore)}
.br-modello-nome{font-size:.85em;line-height:1.3}
.br-modello input:checked~.br-modello-nome{font-weight:600}

/* gruppi di campi di testo: classe «Formulario» come Contatto (li disegna il tema), senza la sua cornice */
html body .br .Formulario.br-formulario{padding:0!important;margin:0!important;box-shadow:none!important;background:none!important;float:none!important;width:auto!important;text-align:left!important}
html body .br .br-formulario .contactform{width:100%!important;float:none!important;margin:0!important}
.br .br-formulario .contactform::after{content:"";display:block;clear:both}
html body .br .br-formulario .iss-campo{display:block!important;float:none!important;width:100%!important;margin:0 0 6px!important}
html body .br .br-formulario .iss-campo:not(.casella){padding:0!important}
html body .br .br-formulario textarea{height:6.5em!important;min-height:0!important;margin-bottom:0!important;resize:vertical}
.br .iss-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.br .iss-form-esca{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.br-conta{font-size:.78em;color:var(--br-tenue);text-align:right!important;margin:4px 0 10px}
html body .br .br-formulario .br-data{display:flex!important;align-items:center;gap:14px;margin-top:10px!important}
.br .br-data .br-et{flex:none;font-weight:600}
html body .br .br-formulario .br-data input{width:auto!important;min-width:12em;margin:0!important}
html body .br .br-formulario .iss-campo-privacy{margin:22px 0 0!important}

.br-consegna{display:flex;flex-direction:column;gap:12px;margin:0 0 var(--br-respiro)}
html body .br .br-scelta{display:flex!important;align-items:center;gap:10px;cursor:pointer;margin:0!important;padding:0!important;font-weight:400!important;width:auto!important;float:none!important}
html body .br .br-scelta input{flex:none;width:18px!important;height:18px!important;margin:0!important;position:static!important;opacity:1!important;accent-color:var(--br-colore)}

.br .br-errore{margin:0 0 14px}
.br .br-invio{margin:26px 0 0!important}
html body .br .br-invio .simple-button-plugin{margin:0!important}
.br .br-btn-paga.br-attendi{opacity:.6;cursor:wait;pointer-events:none}
.br .br-metodi{font-size:.85em;color:var(--br-tenue);margin:.8em 0 0!important}

/* anteprima: lo stesso disegno del PDF, in SVG (misure in millimetri) */
.br-carta{--f:#333;--s:#fff;--a:#333;--v:#333;line-height:0;box-shadow:0 1px 2px rgba(0,0,0,.08),0 14px 34px -14px rgba(0,0,0,.32)}
.br-svg{display:block;width:100%;height:auto;overflow:hidden}
.br-s-banda{fill:var(--f)}
.br-s-fiocchi{fill:none;stroke:rgba(255,255,255,.16);stroke-width:.35;stroke-linecap:round;display:none}
.br-carta[data-modello=natale] .br-s-fiocchi{display:inline}
.br-s-cornice,.br-s-cornice-el{fill:none;stroke:var(--a);display:none}
.br-s-cornice{stroke-width:.5}.br-s-cornice-el{stroke-width:.3}
.br-carta[data-modello=natale] .br-s-cornice,.br-carta[data-modello=elegante] .br-s-cornice-el{display:inline}
.br-s-filo{stroke:var(--a);stroke-width:.6}
.br-carta[data-modello=classico] .br-s-filo{stroke:var(--s)}
.br-s-buono,.br-s-ditta{fill:var(--s)}
.br-s-per-et,.br-s-da,.br-s-desc,.br-s-et{fill:#6e6e6e}
.br-s-per,.br-s-codice,.br-s-data{fill:#1c1c1c}
.br-s-dedica{fill:#3c3c3c}
.br-s-valore{fill:var(--v)}
.br-s-per.vuoto,.br-s-valore.vuoto{opacity:.28}
.br-s-codice{fill:#c4c4c4}
.br-s-cond{fill:#6e6e6e}
.br-s-piede{fill:#8c8c8c}
.br-s-qr{fill:#141414;opacity:.85}
.br-s-misura{visibility:hidden}

/* pagine del buono (ritorno dal pagamento, QR) */
.br-pagina{max-width:640px;margin:0 auto var(--spazio-paragrafi,60px)}
.br-dati{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 20px;margin:1.2em 0;padding:1em 0;border-top:1px solid var(--br-linea);border-bottom:1px solid var(--br-linea)}
.br-dati dt{font-weight:600}
.br-dati dd{margin:0}
.br-codice{font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.br-stato{font-weight:600}
.br-stato-valido{color:#1c7a3a}
.br-stato-usato,.br-stato-scaduto,.br-stato-annullato{color:#b3261e}
.br-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:1.5em 0 0}
.br-azioni .br-form-usa{display:contents;margin:0}
html body .br .br-azioni .simple-button-plugin{margin:0!important}
@media(max-width:600px){.br-dati{grid-template-columns:1fr;gap:2px}.br-dati dd{margin-bottom:8px}.br-servizio{flex-wrap:wrap}.br-servizio-prezzo{width:100%;padding-left:32px}}
