*{box-sizing:border-box}body{margin:0;isolation:isolate}.payment-wrapper{display:flex}.bg-animated{position:fixed;inset:0}.payment-card label{display:block}a{color:#ff9b4a}h2{overflow-wrap:anywhere}
:root { --cebn-orange: #ed6908; --cebn-orange-light: #ff9b4a; --cebn-ink: #09090b; --cebn-paper: #f4f2ed; --cebn-line: rgba(255,255,255,.16); }
html { min-height: 100%; background: var(--cebn-ink); }
body { min-height: 100vh !important; color: var(--cebn-paper) !important; background: var(--cebn-ink) !important; font-family: "Space Grotesk", "Segoe UI", Arial, sans-serif !important; }
body:before { content: ""; position: fixed; z-index: -2; inset: 0; background: linear-gradient(112deg,rgba(4,4,5,.98) 0%,rgba(10,8,8,.91) 45%,rgba(87,29,5,.78) 100%), repeating-linear-gradient(90deg,transparent 0 78px,rgba(255,255,255,.045) 79px 80px); }
.bg-animated { z-index: -1 !important; opacity: 1; background: radial-gradient(circle at 84% 17%,rgba(255,139,43,.53),transparent 28%), radial-gradient(circle at 69% 80%,rgba(237,105,8,.23),transparent 30%), linear-gradient(112deg,transparent 38%,rgba(237,105,8,.76) 38.1% 39.6%,transparent 39.7% 47%,rgba(255,255,255,.3) 47.1% 47.3%,transparent 47.4%) !important; filter: none !important; animation: none !important; }
.bg-animated:before,.bg-animated:after { display: none; }
.payment-wrapper { position: relative; z-index: 1; width: min(1240px,calc(100% - 56px)); min-height: 100vh; margin: 0 auto; padding: 128px 0 72px; justify-content: flex-end; align-items: center; }
.payment-wrapper:before { content: "PAGAMENT\A SEGUR."; white-space: pre; position: absolute; left: 0; top: 50%; max-width: 540px; color: #fff; font: 700 clamp(64px,8vw,122px)/.79 "Space Grotesk", "Segoe UI", sans-serif; letter-spacing: -.105em; transform: translateY(-51%); text-shadow: 0 25px 54px rgba(0,0,0,.32); }
.payment-wrapper:after { content: "CONSELL ESPORTIU BARCELONÈS NORD\A PAGAMENT · ENTORN PROTEGIT"; white-space: pre; position: absolute; left: 3px; bottom: 65px; color: var(--cebn-orange-light); font-size: 10px; font-weight: 800; line-height: 1.65; letter-spacing: .14em; }
.payment-card { position: relative; z-index: 2; width: min(100%,570px) !important; max-width: 570px !important; padding: 42px !important; overflow: hidden; color: var(--cebn-paper) !important; border: 1px solid rgba(255,255,255,.2) !important; border-radius: 0 !important; background: rgba(14,14,16,.91) !important; box-shadow: 24px 26px 0 rgba(237,105,8,.58), 0 28px 70px rgba(0,0,0,.42) !important; backdrop-filter: blur(18px) !important; animation: fadeIn .45s ease-out !important; }
.payment-card:before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--cebn-orange); }.payment-card:after { content: "CEBNORD"; position: absolute; right: 27px; top: 24px; color: rgba(255,255,255,.22); font: 800 11px "Space Grotesk",sans-serif; letter-spacing: .18em; }
.payment-card > img { position: relative; z-index: 1; width: 82px !important; height: 82px; margin: 0 0 22px !important; object-fit: contain; filter: brightness(0) invert(1); }
.payment-card h2 { margin: 0 0 31px !important; padding-bottom: 20px; border-bottom: 1px solid var(--cebn-line); color: #fff !important; text-align: left !important; font: 700 39px/.92 "Space Grotesk",sans-serif !important; letter-spacing: -.075em; }
.payment-card form { display: block; }.payment-card label { margin: 21px 0 7px !important; color: var(--cebn-orange-light); font-size: 9px !important; font-weight: 800 !important; letter-spacing: .14em; text-transform: uppercase; }
.payment-data { min-height: 46px; margin: 0 !important; padding: 13px 15px !important; border: 1px solid rgba(255,255,255,.17); border-radius: 0 !important; color: #fff !important; background: rgba(255,255,255,.07) !important; font-size: 14px !important; font-weight: 600; line-height: 1.35; }
.payment-data a { color: #fff !important; text-decoration-color: var(--cebn-orange-light) !important; }.payment-card #iban-element { min-height: 48px; padding: 14px !important; border: 1px solid rgba(255,255,255,.3); border-radius: 0 !important; color: #242126 !important; background: #fff !important; }
.pay-btn { position: relative; width: 100%; margin-top: 30px !important; padding: 17px 20px !important; border: 0 !important; border-radius: 0 !important; color: #fff !important; background: var(--cebn-orange) !important; box-shadow: none !important; font: 800 11px "Space Grotesk",sans-serif !important; letter-spacing: .12em; text-transform: uppercase; }.pay-btn:hover { color: #fff !important; background: #ff7b18 !important; box-shadow: 0 11px 26px rgba(237,105,8,.28) !important; transform: translateY(-2px); }.pay-btn:disabled { cursor: wait; opacity: .62; }
#error-message { color: #ffb57e !important; font-size: 13px; line-height: 1.5; }.payment-card p[style] { margin: 27px 0 0 !important; padding-top: 20px; border-top: 1px solid var(--cebn-line); color: #c8c2bd !important; font-size: 11px !important; line-height: 1.65 !important; text-align: left !important; opacity: 1 !important; }
@media (max-width: 900px) { .payment-wrapper { width: min(650px,calc(100% - 48px)); padding-top: 92px; justify-content: center; }.payment-wrapper:before,.payment-wrapper:after { display: none; }.payment-card { max-width: 570px !important; } }
@media (max-width: 560px) { .payment-wrapper { width: calc(100% - 40px); padding: 88px 0 58px; }.payment-card { padding: 28px 23px !important; box-shadow: 12px 14px 0 rgba(237,105,8,.54), 0 20px 45px rgba(0,0,0,.35) !important; }.payment-card > img { width: 62px !important; height: 62px; margin-bottom: 18px !important; }.payment-card h2 { margin-bottom: 24px !important; font-size: 33px !important; }.payment-card label { margin-top: 18px !important; } }
.payment-card input:not([type=checkbox]),.payment-card select{width:100%;min-height:48px;border:1px solid #ffffff40;background:#242426;color:white;padding:13px 15px;border-radius:0;font:inherit}.payment-card option{background:#242426;color:white}.payment-card input:focus,.payment-card select:focus{outline:2px solid #ff9b4a;outline-offset:2px}.payment-card .consent{display:flex;gap:12px;align-items:flex-start;margin-top:22px;font-size:12px;line-height:1.6}.consent input{flex-shrink:0;margin-top:4px}.consent label{margin:0!important;color:#ddd;text-transform:none;font-size:12px!important;letter-spacing:0;font-weight:400!important}.note{font-size:12px;color:#c8c2bd;line-height:1.7;margin-top:24px}.summary{margin:0}.summary dt{color:#ff9b4a;font-size:11px;margin:20px 0 7px;text-transform:uppercase;letter-spacing:.12em}.summary dd{margin:0;overflow-wrap:anywhere}.amount{font-size:36px;font-weight:700}#card-element{padding:16px;background:white;margin-top:8px}button{cursor:pointer}.back{display:inline-block;margin-top:20px;font-size:13px}.example{max-width:100%;height:auto;margin-top:18px} .error{color:#ffb57e;line-height:1.5}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}