/* Redemption page only: fluid width on desktop and mobile, readable at normal zoom. */
html{width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{width:100%;min-width:0;font-size:20px;line-height:1.55;background:#070d18}
.bg{background-image:radial-gradient(ellipse at 10% 10%,rgba(var(--accent-rgb),.14),transparent 45%),radial-gradient(ellipse at 95% 35%,#17375a66,transparent 55%),linear-gradient(135deg,#080e19,#07101f 55%,#060b13)}
.bg:after{background:linear-gradient(transparent,#050a1266)}
.canje-header{height:auto;min-height:84px;width:100%;padding:18px clamp(16px,2.5vw,48px);background:#080f1ed9}
.canje-header b{font-size:22px;display:flex;align-items:center;gap:10px}
.canje-header b span{width:46px;height:46px;flex-shrink:0;margin:0;border-radius:14px;box-shadow:0 5px 24px rgba(var(--accent-rgb),.22)}
.canje-header small{font-size:16px;color:#c6d1e1}
main.canje-page{width:100%;max-width:none;margin:0;padding:32px clamp(16px,2.5vw,48px) 0}
.canje-page .intro{text-align:left;width:100%;max-width:none;margin:0 0 30px;display:grid;grid-template-columns:1fr auto;gap:12px 28px;align-items:center}
.canje-page .intro>small{font-size:14px;letter-spacing:.15em;grid-column:1}
.canje-page .intro h1{font-size:clamp(38px,3.4vw,66px);margin:0;letter-spacing:-.035em;grid-column:1;line-height:1.13}
.canje-page .intro p{font-size:20px;max-width:none;margin:0;grid-column:1;color:#c0cce0}
.canje-page .benefits{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin:0;grid-column:2;grid-row:1/4;max-width:420px}
.canje-page .benefits span{font-size:15px;border:1px solid #ffffff20;border-radius:100px;padding:10px 14px;background:#111d30;white-space:nowrap;color:#d6dfed}
.canje-form.card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:'platform details' 'operation details';gap:24px;width:100%;max-width:none;padding:0;border:0;background:none;box-shadow:none;border-radius:0;align-items:stretch}
.redeem-step{min-width:0;border:1px solid #ffffff1c;border-radius:26px;padding:clamp(24px,2.3vw,40px);background:linear-gradient(145deg,#111d30ed,#0c1525f5);box-shadow:0 18px 45px #0003;position:relative}
.platform-step{grid-area:platform}.operation-step{grid-area:operation}.details-step{grid-area:details;border-top:3px solid var(--accent)}
.step-heading{margin-bottom:20px}.card .step-heading h2{font-size:clamp(22px,1.5vw,28px);line-height:1.3;margin:0;gap:14px}.card .step-heading h2>i{width:40px;height:40px;flex:0 0 40px;border-radius:13px;font-size:17px;font-weight:800}
.step-heading p{margin:12px 0 0;font-size:17px;color:#aebdd2}
.card .platforms{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.card .platforms label,.card .operations label{margin:0;font-size:20px;position:relative;min-width:0}
.card .platforms span{height:clamp(106px,8.7vw,156px);border-radius:19px;background:#162337;border-color:#ffffff22}
.card .platforms img{max-width:78%;max-height:85px}.card .platforms label:nth-child(4) img{max-height:98px}
.card .platforms span>i{right:14px;top:10px;font-size:22px}
.card .platforms input:checked+span{border:2px solid var(--p);box-shadow:0 8px 30px rgba(var(--accent-rgb),.12);background:rgba(var(--accent-rgb),.1)}
.card .operations{gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.card .operations span{min-height:110px;text-align:center;gap:5px;padding:18px 12px;border-radius:18px;background:#162337}
.card .operations b{font-size:22px}.card .operations small{font-size:16px;line-height:1.4;color:#bbc8db}
.card .operations input:checked+span{border:2px solid var(--accent);background:rgba(var(--accent-rgb),.1)}
.card .details-step label:not(.check){font-size:19px;margin:18px 0 0;font-weight:650}
.card .details-step input:not([type=checkbox]){font-size:20px;min-height:62px;padding:16px 18px;border-radius:14px;border-color:#ffffff26;background:#080f1bcc;margin-top:8px;width:100%;min-width:0}
.card .details-step input::placeholder{color:#91a1b9;opacity:1}
.card .details-step .check{font-size:18px;line-height:1.5;margin:24px 0;gap:12px;align-items:flex-start;color:#c5d0e0}
.card .details-step .check input{width:23px!important;height:23px;min-height:23px;flex:0 0 23px;padding:0;cursor:pointer;margin:3px 0 0!important}
.details-step>button{width:100%;font-size:22px;min-height:64px;border-radius:16px;padding:16px 22px;box-shadow:0 9px 25px rgba(var(--accent-rgb),.16)}
.card #result{font-size:18px;margin:16px 0 0;overflow-wrap:anywhere}.card #result:empty{display:none}
.canje-footer{width:100%;font-size:16px;color:#a8b8cf;padding:26px clamp(16px,2.5vw,48px);text-align:left}.canje-footer span{display:inline-block;margin-top:5px;font-size:15px;line-height:1.5;color:#9aabc3}
.platforms input:focus-visible+span,.operations input:focus-visible+span{outline:3px solid #fff;outline-offset:4px}
dialog{width:min(800px,calc(100% - 32px));max-width:calc(100% - 32px);max-height:calc(100dvh - 32px);padding:34px;border-radius:26px;font-size:20px;overflow:auto}
dialog h2{font-size:28px}.reference{font-size:16px}.delivery{font-size:18px;line-height:1.6;overflow-wrap:anywhere;max-height:46dvh}.modal-actions{gap:14px}.modal-actions button,.modal-actions a{min-height:58px;font-size:18px;padding:14px}.modal-icon{width:64px;height:64px}
@media(min-width:1700px){.canje-form.card{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}.card .details-step input:not([type=checkbox]){min-height:68px;font-size:23px}.card .details-step label:not(.check){font-size:22px}.step-heading p{font-size:19px}.card .operations b{font-size:25px}.details-step>button{min-height:72px;font-size:25px}}
@media(max-width:1000px){.canje-page .intro{grid-template-columns:1fr}.canje-page .benefits{grid-column:1;grid-row:auto;justify-content:flex-start;max-width:none;margin-top:5px}.canje-form.card{gap:18px;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}.redeem-step{padding:24px}.card .operations{grid-template-columns:1fr}.card .operations span{min-height:82px}.card .operations b{font-size:20px}.card .platforms{gap:12px}.card .platforms span{height:105px}.card .platforms img{max-height:66px}.card .platforms label:nth-child(4) img{max-height:78px}}
@media(max-width:760px){body{font-size:18px}.canje-header{padding:14px 16px;min-height:72px}.canje-header b{font-size:17px;gap:9px}.canje-header b span{width:39px;height:39px;font-size:16px;border-radius:12px}.canje-header small{display:block;font-size:12px}main.canje-page{width:100%;padding:24px 12px 0;margin:0;max-width:none}.canje-page .intro{gap:12px;margin:0 4px 24px;width:calc(100% - 8px)}.canje-page .intro>small{font-size:12px;letter-spacing:.12em}.canje-page .intro h1{font-size:clamp(34px,8.6vw,48px)}.canje-page .intro p{font-size:17px;line-height:1.6}.canje-page .benefits{gap:7px;justify-content:flex-start}.canje-page .benefits span{font-size:12px;padding:8px 10px}.canje-form.card{grid-template-columns:minmax(0,1fr);grid-template-areas:'platform' 'operation' 'details';gap:16px;width:100%}.redeem-step{padding:22px 18px;border-radius:22px}.card .step-heading h2{font-size:21px;gap:11px}.card .step-heading h2>i{width:35px;height:35px;flex-basis:35px;font-size:15px;border-radius:11px}.step-heading p{font-size:15px;line-height:1.5;margin-top:10px}.step-heading{margin-bottom:18px}.card .platforms{gap:12px}.card .platforms span{height:98px;border-radius:16px}.card .platforms img{max-height:65px}.card .platforms label:nth-child(4) img{max-height:76px}.card .operations{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card .operations span{min-height:102px;padding:16px 10px}.card .operations b{font-size:18px}.card .operations small{font-size:13px}.card .details-step label:not(.check){font-size:18px}.card .details-step input:not([type=checkbox]){font-size:18px;min-height:58px;padding:15px 14px}.card .details-step .check{font-size:16px}.details-step>button{min-height:62px;font-size:20px}.canje-footer{text-align:left;padding:24px 18px 30px;font-size:14px}.canje-footer span{font-size:13px}dialog{padding:26px 18px;width:calc(100% - 20px);max-width:calc(100% - 20px);max-height:calc(100dvh - 20px);border-radius:22px}dialog h2{font-size:24px}.delivery{font-size:16px;padding:16px}.reference{font-size:13px}.modal-actions{grid-template-columns:1fr}.modal-actions button,.modal-actions a{font-size:17px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.card .operations label{display:flex}.card .operations span{width:100%;flex:1}
