/* Richiesta di accesso a passi (Concierge e Richiesta classica): foglio di quaderno con linguette e anteprima viva.
   Tutto sotto .rq, cosi' non tocca il resto dell'app. Nato dal mockup docs/mockup-richieste-turnio.html. */
.rq {
    --bg: #fdfcf8; --rule: #e6e2d2; --panel: #ffffff; --ink: #201c17; --ink-2: #413a2f; --ink-3: #6d6250;
    --soft: #f4f2ea; --line: #d3cdb4; --brand: #c8544a; --brand-soft: #fbeae5; --ok: #1f7a3d; --on-brand: #ffffff;
    --tape: #f1d98a; --shadow: 0 2px 0 rgba(32,28,23,.12);
    --display: 'Permanent Marker', 'Comic Sans MS', cursive; --body: 'Quicksand', system-ui, sans-serif;
  }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .rq {
    --bg: #201c17; --rule: #3c3526; --panel: #2b2720; --ink: #f4f0e6; --ink-2: #d8cfb9; --ink-3: #a89a7e;
    --soft: #26221a; --line: #4a4231; --brand: #e08379; --brand-soft: #2e2019; --ok: #6fd08c; --on-brand: #201c17;
    --tape: #8a7a3c; --shadow: 0 2px 0 rgba(0,0,0,.35); color-scheme: dark; }
}
:root[data-theme="dark"] .rq {
    --bg: #201c17; --rule: #3c3526; --panel: #2b2720; --ink: #f4f0e6; --ink-2: #d8cfb9; --ink-3: #a89a7e;
    --soft: #26221a; --line: #4a4231; --brand: #e08379; --brand-soft: #2e2019; --ok: #6fd08c; --on-brand: #201c17;
    --tape: #8a7a3c; --shadow: 0 2px 0 rgba(0,0,0,.35); color-scheme: dark; }
.rq, .rq * { box-sizing: border-box; }
.rq h1, .rq h2, .rq h3, .rq .marker { font-family: var(--display); font-weight: 400; margin: 0; }
.rq button, .rq input, .rq textarea { font: inherit; color: inherit; }
.rq :focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.rq .stage { container-type: inline-size; margin: 0 auto; transition: max-width .45s cubic-bezier(.22,.85,.32,1); max-width: 1060px; }
.rq .tabs { display: flex; gap: 6px; align-items: flex-end; padding-inline: 14px; flex-wrap: wrap; }
.rq .tab { border: 2px solid var(--ink); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--soft); padding: 7px 14px 5px; font-family: var(--display); font-size: .92rem; color: var(--ink-3); position: relative; top: 2px; transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s; display: inline-flex; gap: 8px; align-items: center; }
.rq .tab i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; font-size: .72rem; }
.rq .tab.fin { color: var(--ok); }
.rq .tab.fin i { background: var(--ok); color: var(--panel); border-color: var(--ok); }
.rq .tab.on { background: var(--panel); color: var(--ink); transform: translateY(-4px); padding-bottom: 9px; z-index: 2; }
.rq .tab.on i { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
@container (max-width: 520px) {
.rq .tab span { display: none; }
.rq .tab.on span { display: inline; }
}
.rq .sheet { position: relative; background: var(--panel); border: 2px solid var(--ink); border-radius: 4px 18px 4px 18px; box-shadow: var(--shadow); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); overflow: hidden;
    background-image: repeating-linear-gradient(var(--panel) 0 33px, var(--rule) 33px 34px); }
.rq .sheet::before { content: ''; position: absolute; top: -2px; right: -2px; width: 22px; height: 22px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); border-radius: 0 6px 0 9px; background: linear-gradient(135deg, transparent 50%, color-mix(in srgb, black 16%, var(--panel)) 50%); z-index: 3; }
@container (max-width: 760px) {
.rq .sheet { grid-template-columns: minmax(0, 1fr); }
.rq .sheet .preview { display: none; }
}
.rq .form { padding: 26px 26px 22px; min-width: 0; position: relative; }
.rq .preview { border-left: 2px dashed var(--line); padding: 26px 22px; display: grid; place-items: center; background: color-mix(in srgb, var(--soft) 70%, transparent); min-width: 0; }
@container (max-width: 520px) {
.rq .form { padding: 20px 16px 18px; }
}
.rq .step { animation: rq-turn .7s cubic-bezier(.22,.85,.32,1) backwards; transform-origin: top center; }
.rq .step[hidden] { display: none; }
@keyframes rq-turn { 0% { opacity: 0; transform: perspective(1300px) rotateX(-40deg) translateY(18px); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.rq .step h2 { font-size: clamp(1.6rem, 5.4cqi, 2.2rem); line-height: 1.1; text-wrap: balance; }
.rq .step .lead { margin: 6px 0 18px; color: var(--ink-2); max-width: 34rem; text-wrap: pretty; }
.rq .ul { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--brand) 45%, transparent) 62% 86%, transparent 86%); padding: 0 .1em; }
.rq .f { margin: 0 0 14px; }
.rq .f label.l { display: block; font-weight: 700; font-size: .86rem; margin-bottom: 5px; }
.rq .f .opt { font-weight: 500; color: var(--ink-3); }
.rq .inp { width: 100%; padding: 12px 14px; min-height: 48px; border: 2px solid var(--ink); border-radius: 4px 12px 4px 12px; background: var(--panel); outline: none; transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .2s; }
.rq .inp:focus { transform: translateY(-2px) rotate(-.2deg); box-shadow: 3px 3px 0 var(--ink); }
.rq .inp::placeholder { color: var(--ink-3); opacity: .8; }
.rq .phone-row { display: flex; gap: 8px; }
.rq .phone-row .pre { flex: none; display: grid; place-items: center; padding: 0 14px; border: 2px solid var(--ink); border-radius: 4px 12px 4px 12px; background: var(--soft); font-weight: 700; }
.rq .ck { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; font-weight: 600; line-height: 1.4; margin: 12px 0; }
.rq .ck input { width: 22px; height: 22px; flex: none; accent-color: var(--brand); margin: 1px 0 0; }
.rq .ck a { color: var(--brand); }
.rq .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--ink); border-radius: 4px 12px 4px 12px; background: var(--panel); font-weight: 700; padding: 12px 22px; min-height: 48px; cursor: pointer; box-shadow: 0 0 0 var(--ink); transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .2s; }
.rq .btn.primary { background: var(--brand); color: var(--on-brand); }
.rq .btn:hover:not(:disabled) { transform: translate(-2px,-2px) rotate(-.7deg); box-shadow: 4px 4px 0 var(--ink); }
.rq .btn:active:not(:disabled) { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }
.rq .btn:disabled { opacity: .45; cursor: not-allowed; }
.rq .btn.ghost { border-style: dashed; background: transparent; }
.rq .nav { display: flex; gap: 10px; justify-content: space-between; align-items: center; margin-top: 20px; flex-wrap: wrap; }
.rq .nav .hint { color: var(--ink-3); font-size: .82rem; font-weight: 600; }
.rq .err { color: var(--brand); font-weight: 700; font-size: .84rem; margin: 6px 0 0; min-height: 1.2em; }
.rq .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.rq .card { text-align: left; border: 2px solid var(--ink); border-radius: 4px 14px 4px 14px; background: var(--panel); padding: 14px 14px 12px; cursor: pointer; position: relative; display: grid; gap: 6px; box-shadow: 0 0 0 var(--ink);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, background .2s; transform: rotate(var(--t, 0deg)); }
.rq .card:nth-child(odd) { --t: -.7deg; }
.rq .card:nth-child(even) { --t: .7deg; }
.rq .card:hover { transform: rotate(0) translateY(-4px); box-shadow: 4px 5px 0 var(--ink); }
.rq .card .ic { width: 56px; height: 56px; border: 2px solid var(--ink); border-radius: 54% 46% 52% 48% / 47% 55% 45% 53%; display: grid; place-items: center; background: var(--brand-soft); }
.rq .card .ic svg { width: 32px; height: 32px; stroke: var(--ink); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.rq .card { min-width: 0; }
.rq .card b { font-family: var(--display); font-weight: 400; font-size: 1.15rem; line-height: 1.1; overflow-wrap: anywhere; hyphens: auto; }
.rq .card small { overflow-wrap: anywhere; }
.rq .card small { color: var(--ink-3); font-weight: 600; font-size: .8rem; line-height: 1.3; }
.rq .card .stamp { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; transform: scale(0) rotate(-30deg); transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.rq .card .stamp svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rq .card[aria-pressed="true"] { background: var(--brand-soft); box-shadow: 4px 5px 0 var(--ink); transform: rotate(0) translateY(-3px); }
.rq .card[aria-pressed="true"] .stamp { transform: scale(1) rotate(0); }
.rq .card:hover .cloche, .rq .card[aria-pressed="true"] .cloche { animation: rq-lift 1.2s ease-in-out infinite; }
.rq .card:hover .cross, .rq .card[aria-pressed="true"] .cross { animation: rq-beat 1s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.rq .card:hover .bag, .rq .card[aria-pressed="true"] .bag { animation: rq-swing 1.4s ease-in-out infinite; transform-origin: 50% 20%; transform-box: fill-box; }
.rq .card:hover .spark, .rq .card[aria-pressed="true"] .spark { animation: rq-twinkle 1s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes rq-lift { 50% { transform: translateY(-4px); } }
@keyframes rq-beat { 50% { transform: scale(1.18); } }
@keyframes rq-swing { 25% { transform: rotate(7deg); } 75% { transform: rotate(-7deg); } }
@keyframes rq-twinkle { 50% { transform: scale(1.25) rotate(20deg); } }
.rq .cards.sm { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.rq .cards.sm .card { padding: 12px 12px 10px; }
.rq .cards.sm .ic { width: 46px; height: 46px; }
.rq .cards.sm .ic svg { width: 26px; height: 26px; }
@container (max-width: 520px) {
.rq .cards.sm { grid-template-columns: minmax(0, 1fr); }
.rq .cards.sm .card:has(.ic) { grid-template-columns: 46px minmax(0, 1fr); column-gap: 12px; align-items: center; padding-right: 40px; }
.rq .cards.sm .card:has(.ic) .ic { grid-row: span 2; }
.rq .cards.sm .card b { font-size: 1.05rem; }
}
.rq .gl { font-weight: 700; font-size: .86rem; margin: 16px 0 8px; display: block; }
.rq .mini { display: none; margin-top: 4px; }
.rq .mini.on { display: block; animation: rq-turn .5s cubic-bezier(.22,.85,.32,1) backwards; }
.rq .drop { display: grid; place-items: center; gap: 8px; text-align: center; padding: 28px 18px; border: 3px dashed var(--ink); border-radius: 6px 20px 6px 20px; background: var(--soft); cursor: pointer; position: relative; transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .2s; min-height: 210px; }
.rq .drop:hover, .rq .drop.over { transform: rotate(-.6deg) scale(1.01); background: var(--brand-soft); }
.rq .drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.rq .drop .cam { width: 84px; height: 84px; }
.rq .drop .cam svg { width: 100%; height: 100%; stroke: var(--ink); fill: var(--panel); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.rq .drop .flash { animation: rq-flash 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; fill: var(--brand); stroke: none; }
@keyframes rq-flash { 0%, 70%, 100% { opacity: .15; transform: scale(.6); } 80% { opacity: 1; transform: scale(1.5); } }
.rq .drop b { font-family: var(--display); font-weight: 400; font-size: 1.3rem; line-height: 1.1; }
.rq .drop small { color: var(--ink-3); font-weight: 600; }
.rq .shot { display: none; gap: 14px; align-items: center; flex-wrap: wrap; }
.rq .shot.on { display: flex; animation: rq-turn .6s cubic-bezier(.22,.85,.32,1) backwards; }
.rq .polaroid { background: #fff; padding: 9px 9px 30px; border: 2px solid var(--ink); border-radius: 3px; box-shadow: 4px 6px 0 rgba(32,28,23,.25); transform: rotate(-3deg); position: relative; width: 190px; flex: none; color: #201c17; }
.rq .polaroid img { display: block; width: 100%; height: 150px; object-fit: cover; background: #f4f2ea; border: 1px solid #d3cdb4; }
.rq .polaroid::before { content: ''; position: absolute; top: -12px; left: 50%; width: 76px; height: 24px; margin-left: -38px; background: var(--tape); opacity: .85; transform: rotate(3deg); }
.rq .polaroid span { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-family: var(--display); font-size: .95rem; }
.rq .shot .info { flex: 1; min-width: 150px; display: grid; gap: 8px; justify-items: start; }
.rq .shot .ok { color: var(--ok); font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.rq .shot .ok svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rq .privacy { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: .82rem; font-weight: 600; color: var(--ink-2); padding: 10px 12px; border: 2px dashed var(--line); border-radius: 4px 12px 4px 12px; background: var(--soft); }
.rq .privacy svg { width: 22px; height: 22px; flex: none; stroke: var(--ink); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.rq .note { background: color-mix(in srgb, var(--tape) 35%, var(--panel)); border: 2px solid var(--ink); border-radius: 3px 3px 14px 3px; padding: 12px 14px; transform: rotate(-1deg); box-shadow: 3px 4px 0 rgba(32,28,23,.2); margin-bottom: 14px; font-size: .92rem; }
.rq .note b { font-family: var(--display); font-weight: 400; font-size: 1.05rem; display: block; margin-bottom: 2px; }
.rq .sticker { display: inline-flex; align-items: center; gap: 10px; border: 2px dashed var(--ink); border-radius: 999px; padding: 6px 8px 6px 16px; background: var(--panel); font-weight: 700; transform: rotate(1deg); }
.rq .sticker .q { font-family: var(--display); font-size: 1.15rem; }
.rq .sticker .inp { width: 72px; min-height: 40px; padding: 6px 10px; text-align: center; border-radius: 999px; }
.rq .cover { width: min(300px, 100%); background: var(--panel); border: 2px solid var(--ink); border-radius: 4px 16px 16px 4px; padding: 20px 18px 18px 38px; position: relative; box-shadow: 5px 6px 0 rgba(32,28,23,.22); transform: rotate(2deg);
    background-image: repeating-linear-gradient(var(--panel) 0 25px, var(--rule) 25px 26px); transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.rq .cover:hover { transform: rotate(0); }
.rq .cover::before { content: ''; position: absolute; left: 12px; top: 18px; bottom: 18px; width: 12px; background: radial-gradient(circle, var(--ink) 0 3px, transparent 3.5px) 0 0 / 12px 30px repeat-y; opacity: .75; }
.rq .cover .kick { font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.rq .cover .name { font-family: var(--display); font-size: 1.9rem; line-height: 1.05; margin: 6px 0 12px; min-height: 2.1em; word-break: normal; overflow-wrap: break-word; hyphens: auto; }
.rq .cover .name.ph { color: var(--ink-3); opacity: .6; }
.rq .cover .tag { display: inline-flex; gap: 8px; align-items: center; border: 2px solid var(--ink); border-radius: 999px; padding: 4px 12px 4px 6px; font-weight: 700; font-size: .84rem; background: var(--brand-soft); }
.rq .cover .tag svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rq .cover .who { margin-top: 14px; color: var(--ink-2); font-size: .85rem; font-weight: 600; min-height: 1.3em; }
.rq .cover .seal { position: absolute; right: -14px; bottom: -14px; width: 64px; height: 64px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-family: var(--display); font-size: .78rem; text-align: center; line-height: 1; transform: rotate(-14deg); border: 2px solid var(--ink); }
.rq .pv-stack { display: grid; gap: 22px; justify-items: center; width: 100%; }
.rq .wa { width: min(290px, 100%); border: 2px solid var(--ink); border-radius: 22px 22px 10px 10px; background: #0e1a1a; color: #e8eeee; padding: 10px; font-size: .78rem; box-shadow: var(--shadow); }
.rq .wa .hd { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid #1f3333; margin-bottom: 8px; }
.rq .wa .av { width: 26px; height: 26px; border-radius: 50%; background: #e8eeee; color: #0e1a1a; display: grid; place-items: center; font-family: var(--display); }
.rq .wa .bub { background: #18292b; border-radius: 4px 12px 12px 12px; padding: 8px 10px; }
.rq .wa .bub b { display: block; font-size: .7rem; letter-spacing: .02em; margin-bottom: 2px; }
.rq .wa .bub .act { display: block; text-align: center; color: #7fe3c3; font-weight: 700; border-top: 1px solid #284646; margin-top: 7px; padding-top: 6px; }
.rq .pv-cap { text-align: center; color: var(--ink-3); font-size: .78rem; font-weight: 600; }
.rq .done { display: none; text-align: center; padding: 8px 0 4px; }
.rq .done.on { display: block; animation: rq-turn .8s cubic-bezier(.22,.85,.32,1) backwards; }
.rq .done h2 { font-size: clamp(1.9rem, 7cqi, 2.8rem); }
.rq .flight { position: relative; height: 70px; overflow: hidden; margin: 0 -10px 4px; }
.rq .flight svg { position: absolute; left: -90px; top: 14px; width: 74px; height: 50px; color: var(--ink); animation: rq-fly 1.8s cubic-bezier(.4,.1,.3,1) .1s forwards; }
.rq .flight svg path:first-child { fill: var(--panel); }
@keyframes rq-fly { 0% { transform: translate(0, 18px) rotate(8deg); } 50% { transform: translate(55cqi, -14px) rotate(-6deg); } 100% { transform: translate(125cqi, 6px) rotate(3deg); } }
.rq .path { list-style: none; padding: 0; margin: 20px auto 0; display: grid; gap: 0; max-width: 30rem; text-align: left; counter-reset: p; }
.rq .path li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; position: relative; padding-bottom: 18px; }
.rq .path li::before { content: ''; position: absolute; left: 21px; top: 44px; bottom: 0; border-left: 3px dashed var(--line); }
.rq .path li:last-child::before { display: none; }
.rq .path li:last-child { padding-bottom: 0; }
.rq .path .dot { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; background: var(--panel); font-family: var(--display); font-size: 1.1rem; }
.rq .path .dot svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rq .path li.now .dot { background: var(--brand); color: var(--on-brand); animation: rq-pulse 1.6s ease-in-out infinite; }
.rq .path li.ok .dot { background: var(--ok); color: var(--panel); border-color: var(--ok); }
@keyframes rq-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--brand) 25%, transparent); } }
.rq .path b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.1rem; line-height: 1.15; }
.rq .path small { color: var(--ink-2); font-weight: 600; }
.rq .ticket { display: inline-grid; gap: 2px; margin: 14px auto 0; padding: 12px 22px; border: 2px dashed var(--ink); border-radius: 8px; background: var(--panel); transform: rotate(-1.5deg); position: relative; }
.rq .ticket::before, .rq .ticket::after { content: ''; position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ink); }
.rq .ticket::before { left: -10px; }
.rq .ticket::after { right: -10px; }
.rq .ticket small { font-weight: 700; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; font-size: .68rem; }
.rq .ticket b { font-family: var(--display); font-weight: 400; font-size: 1.5rem; }
.rq .stampit { position: absolute; right: -22px; top: -16px; border: 3px solid var(--brand); color: var(--brand); border-radius: 8px; padding: 2px 10px; font-family: var(--display); font-size: 1rem; transform: rotate(14deg) scale(2.2); opacity: 0; animation: rq-stampin .45s cubic-bezier(.3,1.4,.5,1) .9s forwards; background: color-mix(in srgb, var(--panel) 80%, transparent); }
@keyframes rq-stampin { to { transform: rotate(14deg) scale(1); opacity: 1; } }
.rq .again { margin-top: 22px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* "Entra in Turnio" compare solo quando l'accesso e' pronto (data-live-all): il display:flex qui sopra scavalcava l'attributo hidden. */
.rq .again[hidden] { display: none; }
.rq .who-tag { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border: 2px solid var(--ink); border-radius: 999px; padding: 1px 10px; margin-bottom: 6px; background: var(--soft); }
.rq .how { margin: 0 0 12px; padding-left: 1.2rem; font-size: .92rem; color: var(--ink-2); }
.rq .how li { margin: 4px 0; }
.rq .how b { color: var(--ink); }
.rq .copybox { border: 2px dashed var(--ink); border-radius: 4px 12px 4px 12px; padding: 12px 14px; background: var(--soft); font-size: .88rem; line-height: 1.45; margin-bottom: 10px; user-select: all; overflow-wrap: anywhere; }
.rq .copybox .lnk { font-weight: 700; color: var(--brand); }
.rq .copied { display: inline-block; margin-left: 10px; color: var(--ok); font-weight: 700; font-size: .88rem; animation: rq-turn .4s ease backwards; }
.rq .fwd { text-align: left; margin: 20px auto 0; max-width: 40rem; border: 2px solid var(--ink); border-radius: 4px 16px 4px 16px; background: var(--panel); padding: 18px 16px 16px; box-shadow: var(--shadow); }
.rq .fwd h3 { font-size: 1.3rem; line-height: 1.15; margin: 4px 0 6px; text-wrap: balance; }
.rq .fwd p { margin: 0 0 12px; color: var(--ink-2); font-size: .92rem; text-wrap: pretty; }
.rq .fwd-grid { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 16px; align-items: center; margin-bottom: 14px; }
@container (max-width: 560px) {
.rq .fwd-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
}
.rq .fwdphone { width: 100%; max-width: 250px; position: relative; padding-bottom: 12px; }
.rq .fwdphone .bub { font-size: .74rem; }
.rq .fwdmenu, .rq .fwdpick { display: none; margin-top: 8px; border-radius: 10px; background: #1f3333; padding: 6px; font-size: .74rem; gap: 6px; }
.rq .fwdmenu span { padding: 5px 9px; border-radius: 6px; }
.rq .fwdmenu .hl { background: #0f5a49; color: #fff; font-weight: 700; }
.rq .fwdphone[data-s="1"] .bub, .rq .fwdphone[data-s="1"] .fwdmenu { outline: 2px solid #7fe3c3; outline-offset: 2px; }
.rq .fwdphone[data-s="1"] .fwdmenu, .rq .fwdphone[data-s="2"] .fwdmenu { display: flex; animation: rq-turn .4s ease backwards; }
.rq .fwdphone[data-s="2"] .fwdpick { display: flex; align-items: center; justify-content: space-between; animation: rq-turn .4s ease backwards; }
.rq .fwdphone[data-s="2"] .fwdmenu { display: none; }
.rq .fwdpick span { color: #a9bcbc; }
.rq .fwdpick i { font-style: normal; background: #7fe3c3; color: #0e1a1a; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.rq .fwd-how { margin: 0; }
.rq .fwd-how li { padding: 4px 8px; border-radius: 8px; transition: background .3s; }
.rq .fwd-how li.on { background: var(--brand-soft); }
.rq .fwd-alt { margin: 0 0 6px !important; }
.rq .fwd .copybox { user-select: all; }
/* "Cosa ti arriva su WhatsApp" (_wa-next-steps.php): i messaggi di Turnio in anteprima e cosa fare con ciascuno. */
.rq .wa-next { margin-top: 22px; }
.rq .wa-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 18px; }
.rq .wa-step { position: relative; display: grid; gap: 10px; align-content: start; min-width: 0; }
.rq .wa-step .wa { width: 100%; max-width: 290px; }
.rq .wa-num:empty { display: none; }
.rq .wa-num { position: absolute; top: -10px; left: -8px; z-index: 1; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; font-family: var(--display); display: grid; place-items: center; font-size: .9rem; }
.rq .wa .bub .lnk { color: #7fe3c3; text-decoration: underline; overflow-wrap: anywhere; }
.rq .wa-step .how { margin: 0; }
.rq .wa-note { margin: 0 !important; font-size: .82rem !important; background: var(--brand-soft); border-radius: 8px; padding: 8px 10px; }
@media (prefers-reduced-motion: reduce) {
.rq, .rq *, .rq *::before, .rq *::after { animation: none !important; transition: none !important; }
.rq .stampit { opacity: 1; transform: rotate(14deg); }
.rq .flight svg { left: 40%; }
}

/* ---- adattamenti alle pagine vere ---- */
.qb-auth-stage.rq-wide { max-width: 1080px; align-items: stretch; }
.qb-auth-stage.rq-wide .qb-brand-block, .qb-auth-stage.rq-wide .qb-link-row { align-self: center; }
.qb-auth-stage.rq-wide .qb-back-row { align-self: flex-start; }
.rq { width: 100%; }
.rq .rq-sr { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.rq label.card { cursor: pointer; }
/* Anello di focus solo da tastiera (non dopo un tocco/clic): prima restava un secondo bordo rosa attorno alla carta scelta. */
.rq .card:focus-within { outline: none; }
.rq .card:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 3px; }
.rq .tabs:empty { display: none; }
.rq .step .err:empty, .rq .form > .err:empty { display: none; }
.rq .form > .err { display: block; }
.rq .rq-form { margin: 0; }
.rq .ck, .rq .inp, .rq .btn { font-family: var(--body); }
.rq input[type="file"].rq-hidden { display: none; }
.rq-top-title { text-align: center; }
.rq .cards:not(.sm) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rq .card b { overflow-wrap: break-word; hyphens: manual; }
@container (max-width: 520px) { .rq .cards:not(.sm) { grid-template-columns: minmax(0, 1fr); } }
/* il pulsante "Invia" e' un vero submit: gli stili generici dei bottoni dell'app non devono sovrascrivere quelli del foglio */
.rq button.btn, .rq a.btn { box-shadow: var(--shadow); }
.rq button.btn.primary, .rq button.btn.primary[type="submit"] { background: var(--brand) !important; color: var(--on-brand) !important; border-color: var(--ink) !important; opacity: 1 !important; }
.rq button.btn:not(.primary) { background: var(--panel); color: var(--ink); border: 2px solid var(--ink); }
.rq button.btn.ghost { background: transparent; }
@container (max-width: 520px) {
  .rq .tabs { flex-wrap: nowrap; padding-inline: 8px; gap: 4px; }
  .rq .tab { padding: 7px 10px 5px; flex: none; }
  .rq .tab.on span { max-width: 9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.rq .copied[hidden] { display: none; }
.rq .sheet.rq-single { grid-template-columns: minmax(0, 1fr); }
.rq .sheet.rq-single .form { max-width: 640px; margin-inline: auto; }

.rq details.rq-more > summary { cursor: pointer; font-weight: 700; color: var(--brand); padding: 2px 0 6px; }
.rq details.rq-more:not([open]) > summary::after { content: ''; }
/* ---- telefono: tutto compatto, ogni passo deve starci nello schermo (poco o nessuno scroll) ---- */
@media (max-width: 640px) {
  .qb-auth-stage.rq-wide { margin: .3rem auto .6rem; padding: 0 .55rem; }
  .qb-auth-stage.rq-wide .qb-back-row { margin-bottom: 0; font-size: .78rem; }
  .qb-auth-stage.rq-wide .qb-brand-block { margin-bottom: .45rem; }
  .qb-auth-stage.rq-wide .qb-wordmark-wrap { font-size: 2.1rem; }
  .qb-auth-stage.rq-wide .qb-tagline { margin-top: .15rem; font-size: .76rem; }
  .qb-auth-stage.rq-wide .qb-link-row { margin-top: .5rem; font-size: .76rem; }
}
@container (max-width: 520px) {
  .rq .tabs { margin-bottom: -2px; }
  .rq .tab { padding: 5px 9px 3px; font-size: .8rem; }
  .rq .tab.on { padding-bottom: 6px; }
  .rq .sheet { padding: 12px 12px 10px; }
  .rq .step h2 { font-size: 1.28rem; line-height: 1.15; }
  .rq .step .lead { font-size: .84rem; line-height: 1.35; margin: .2rem 0 .6rem; }
  .rq .f { margin-bottom: 8px; }
  .rq .f label.l { margin-bottom: 2px; font-size: .8rem; }
  .rq .inp { padding: 9px 12px; min-height: 42px; }
  .rq .nav { margin-top: 10px; gap: 8px; }
  .rq .btn { padding: 9px 16px; min-height: 42px; }
  .rq .nav .hint { display: none; }
  .rq .err { margin-top: 4px; min-height: 0; }
  .rq .drop { padding: 14px 12px; }
  .rq .drop .cam svg { width: 42px; height: 42px; }
  .rq .drop b { font-size: .98rem; }
  .rq .drop small { display: none; }
  .rq .privacy { margin-top: 8px; padding: 7px 10px; font-size: .72rem; line-height: 1.3; }
  .rq .privacy svg { width: 16px; height: 16px; }
  .rq .shot { gap: 10px; }
  .rq .shot .polaroid { width: 78px; padding: 5px 5px 15px; transform: none; margin: 0; }
  .rq .shot .polaroid img { height: 52px; width: 100%; object-fit: cover; }
  .rq .shot .polaroid span { font-size: .5rem; bottom: 2px; }
  .rq .cards.sm { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  .rq .cards.sm .card, .rq .cards.sm .card:has(.ic) { display: grid; grid-template-columns: minmax(0, 1fr); padding: 8px 8px 7px; gap: 2px; }
  .rq .cards.sm .ic, .rq .cards.sm .card small { display: none; }
  .rq .cards.sm .card b { font-size: .86rem; }
  .rq details.rq-more > summary { cursor: pointer; font-weight: 700; font-size: .86rem; color: var(--brand); padding: 4px 0 8px; list-style: none; }
  .rq details.rq-more > summary::-webkit-details-marker { display: none; }
  .rq details.rq-more > summary::before { content: '+ '; }
  .rq details.rq-more[open] > summary::before { content: '– '; }
  .rq .privacy { margin-top: 6px; padding: 6px 9px; }
  .rq .drop { padding: 10px 10px; }
  .rq .cards:not(.sm) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rq .cards:not(.sm) .card { padding: 10px 10px 8px; gap: 3px; }
  .rq .cards:not(.sm) .card small { display: none; }
  .rq .cards:not(.sm) .card b { font-size: .95rem; }
  .rq .cards:not(.sm) .ic { width: 38px; height: 38px; }
  .rq .cards:not(.sm) .ic svg { width: 22px; height: 22px; }
  .rq .cards.sm { gap: 6px; }
  .rq .cards.sm .card { padding: 8px 10px 7px; }
  .rq .cards.sm .card b { font-size: .95rem; }
  .rq .cards.sm .card small { font-size: .72rem; }
  .rq .gl { margin-top: 8px; font-size: .78rem; }
  .rq .ck { font-size: .8rem; line-height: 1.3; margin-top: 8px; }
  .rq .note { padding: 8px 10px; font-size: .84rem; }
  .rq .sticker { padding: 4px 8px; }
}
@container (max-width: 520px) { .rq .lead-pv { display: none; } .rq .drop { padding: 8px 10px; } .rq .drop .cam svg { width: 36px; height: 36px; } }
@media (max-width: 640px) { .qb-auth-stage.rq-wide .qb-wordmark-wrap { font-size: 1.9rem; } .qb-auth-stage.rq-wide .qb-brand-block { margin-bottom: .3rem; } }
@container (max-width: 520px) { .rq .privacy { font-size: .68rem; line-height: 1.25; } .rq .step .lead { margin: .1rem 0 .4rem; } .rq .step h2 { margin-bottom: 0; } }
@container (max-width: 520px) {
  .rq .drop { min-height: 0; padding: 14px 10px; }
  .rq .cards.sm { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
  .rq .cards.sm .card b { font-size: .8rem; letter-spacing: 0; }
  .rq .cards.sm .stamp { width: 18px; height: 18px; top: -7px; right: -5px; }
  .rq .cards.sm .stamp svg { width: 11px; height: 11px; }
}
@container (max-width: 520px) { .rq .cards.sm .card b { font-size: .72rem; overflow-wrap: normal; word-break: normal; hyphens: none; } }
/* Verifica anti-robot: niente freccette del campo numerico (restringevano il campo e coprivano il "?"), numero grande e centrato. */
.rq .sticker .inp { width: 84px; padding: 6px 8px; font-size: 1.15rem; font-weight: 700; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.rq .sticker .inp::-webkit-outer-spin-button, .rq .sticker .inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rq .sticker .inp::placeholder { font-size: 1.1rem; opacity: .6; }
@container (max-width: 520px) { .rq .sticker { padding: 4px 6px 4px 14px; } .rq .sticker .inp { width: 78px; min-height: 40px; } }

/* "Ho più di un locale": casella + numero facoltativo (compare solo se spuntata) */
.rq .rq-chk { display:flex; align-items:center; gap:.6rem; font-weight:700; cursor:pointer; }
.rq .rq-chk input { width:1.2rem; height:1.2rem; flex:none; accent-color: currentColor; }
.rq .rq-multi-n { margin-top:.6rem; }

/* Verifica anti-robot: la risposta sta sempre al centro del riquadro (vince su qualunque regola generale dei campi). */
.rq .sticker .inp { text-align: center !important; padding-left: 0 !important; padding-right: 0 !important; text-indent: 0 !important; }
.rq .sticker .inp::placeholder { text-align: center; }

/* Scelte "Come ti viene piu' comodo": su telefono ogni opzione e' una riga con la sua spiegazione (prima si vedeva solo il nome, "Timeline" o "Trascinamento" da solo non dice nulla a chi non e' del mestiere). */
@media (max-width: 640px) {
  .rq .cards.sm { grid-template-columns: minmax(0, 1fr) !important; gap: 6px; }
  .rq .cards.sm .card, .rq .cards.sm .card:has(.ic) { display: block; padding: 7px 36px 7px 11px; }
  .rq .cards.sm .ic { display: none; }
  .rq .cards.sm .card b { display: block; font-size: .98rem !important; overflow-wrap: normal; }
  .rq .cards.sm .card small { display: block !important; font-size: .78rem; margin-top: 1px; }
}
@container (max-width: 520px) {
  .rq .cards.sm { grid-template-columns: minmax(0, 1fr) !important; gap: 6px; }
  .rq .cards.sm .card, .rq .cards.sm .card:has(.ic) { display: block; padding: 7px 36px 7px 11px; }
  .rq .cards.sm .ic { display: none; }
  .rq .cards.sm .card b { display: block; font-size: .98rem !important; overflow-wrap: normal; }
  .rq .cards.sm .card small { display: block !important; font-size: .78rem; margin-top: 1px; }
}