/* V14 front adjustments (loaded after front.css / front-member.css). Layout classes follow the original member pages; colours come from the site theme variables. */

/* ---- member card: balance + level card, credit score on the right of the card ---- */
:root body[data-page] .member-level-card-account-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-width:0}
:root body[data-page] .member-level-card-account-row>.member-level-card-account{flex:1 1 auto;min-width:0}
:root body[data-page] .member-credit-score{flex:0 0 auto;display:grid;gap:6px;justify-items:end;max-width:46%;text-align:right}
:root body[data-page] .member-credit-score>strong{display:block;font-size:12px;font-weight:600;line-height:1.35;color:inherit;overflow-wrap:anywhere}
:root body[data-page] .member-credit-meter{display:block;width:92px;max-width:100%;height:6px;border-radius:999px;background:rgba(68,38,48,.14);overflow:hidden}
:root body[data-page] .member-credit-meter>i{display:block;height:100%;border-radius:inherit;background:var(--green,#2f7653)}
:root body[data-page] .member-credit-score[data-score="0"] .member-credit-meter>i{width:0!important}
@media (max-width:420px){:root body[data-page] .member-credit-score{max-width:52%}:root body[data-page] .member-credit-meter{width:72px}}

/* ---- rows with a right-hand action: icon | text | action stay on ONE row on every width ---- */
:root body[data-page] .member-notification-entry{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:72px}
:root body[data-page] .member-notification-entry>b{grid-column:3;justify-self:end;align-self:center;text-align:right;white-space:normal;max-width:132px;line-height:1.3}
:root body[data-page] .verification-entry{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;min-height:72px}
:root body[data-page] .verification-entry>b{grid-column:2;justify-self:end;align-self:center;text-align:right;max-width:132px;line-height:1.3}
:root body[data-page] .verification-entry.empty{grid-template-columns:minmax(0,1fr) auto}
:root body[data-page] .member-notification-entry>span:nth-child(2),:root body[data-page] .verification-entry>span:first-child{min-width:0}
:root body[data-page] .member-notification-entry>span:nth-child(2)>strong,:root body[data-page] .verification-entry>span:first-child>strong{overflow-wrap:anywhere}
@media (max-width:420px){:root body[data-page] .member-notification-entry{grid-template-columns:36px minmax(0,1fr) auto;gap:10px;padding:12px}:root body[data-page] .member-notification-entry>b,:root body[data-page] .verification-entry>b{max-width:104px;font-size:11px}}

/* ---- balance overview: the refund link sits under the balance, full width, never squeezed ---- */
:root body[data-page] .member-balance-overview-copy>span>strong{font-size:30px;line-height:1.15;letter-spacing:-.02em}
@media (max-width:640px){:root body[data-page] .member-balance-overview-copy>span>strong{font-size:26px}}

/* ---- balance detail ("Dettaglio"): centered available-balance card ---- */
:root body[data-page] .member-detail-card .member-balance-hero{display:grid;justify-items:center;align-items:normal;gap:6px;max-width:420px;margin:8px auto 22px;padding:26px 20px;border:1px solid var(--line);border-radius:16px;background:var(--paper-2);text-align:center}
:root body[data-page] .member-detail-card .member-balance-hero>span{color:var(--copy);font-size:13px;line-height:1.4;margin:0}
:root body[data-page] .member-detail-card .member-balance-hero>strong{margin:0;font-size:34px;line-height:1.1;color:var(--ink);letter-spacing:-.02em}
.member-detail-card .member-ledger-title{margin:0 0 10px;font-size:16px}
.member-detail-card .front-empty{margin-top:4px}

/* ---- predictions ("Attiva") ---- */
.prediction-member-shell{width:min(calc(100% - 40px),1120px);margin:30px auto 44px}
.prediction-card .prediction-round{margin-top:6px}
.prediction-card .prediction-round+.prediction-round{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.prediction-card h1{margin:4px 0 8px;font-size:24px;line-height:1.25;overflow-wrap:anywhere}
.prediction-detail-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 12px}
.member-prediction-status{display:inline-flex;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;background:#eee5d5;color:var(--gold-deep)}
.member-prediction-status.open{background:#e2f1e8;color:#2f7653}
.member-history-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:6px 12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--gold-soft);color:var(--gold-deep);font-size:12px;font-weight:700;text-decoration:none}
.member-history-button.compact{min-height:34px;padding:5px 10px}
.prediction-countdown{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:14px 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper-2);color:var(--ink)}
.prediction-countdown-meta{display:grid;gap:3px}
.prediction-round-line strong{font-size:18px}
.prediction-time-label{font-size:12px;color:var(--copy)}
.prediction-countdown-value{font-size:24px;font-variant-numeric:tabular-nums;color:var(--gold-deep)}
.prediction-rules{display:flex;flex-wrap:wrap;gap:6px 14px;margin:12px 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--white);color:var(--copy);font-size:14px}
.member-prediction-form fieldset{min-width:0;margin:0;padding:0;border:0}
.member-prediction-form legend{margin:0 0 10px;color:var(--ink);font-weight:700;font-size:14px}
.member-option-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:9px}
.member-option-grid label{display:flex;align-items:center;min-width:0;gap:9px;min-height:54px;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:var(--white);color:var(--ink);cursor:pointer}
.member-option-grid label>span{min-width:0;overflow-wrap:anywhere;font-size:20px}
.member-option-grid label:has(input:checked){border-color:var(--gold);background:var(--gold-soft);box-shadow:0 0 0 3px rgba(165,101,118,.12)}
.member-option-grid label:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:3px}
.member-option-grid input{flex:0 0 19px;width:19px;height:19px}
.stake-field{display:grid;gap:7px;margin-top:14px;color:var(--ink);font-size:13px;font-weight:700}
.stake-field small{color:var(--copy);font-size:12px;font-weight:400}
.member-prediction-form>.member-submit{width:100%;margin-top:12px}
.member-prediction-form>.member-submit[disabled]{opacity:.55;cursor:not-allowed}
.prediction-choice-cost{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--white);font-size:13px}
.prediction-choice-cost>span{color:var(--copy)}
.prediction-choice-cost>strong{color:var(--gold-deep);font-size:16px}
.prediction-joined{margin:12px 0}
.prediction-recent-results{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.prediction-recent-results>h2{margin:0 0 12px;font-size:22px}
.prediction-recent-list,.prediction-history-record-list{display:grid;gap:9px}
.prediction-recent-list article,.prediction-history-record-list article{display:grid;grid-template-columns:.8fr 1.4fr repeat(3,minmax(0,1fr));gap:11px;padding:13px 14px;border:1px solid var(--line);border-left:3px solid #c9b88f;border-radius:12px;background:var(--white)}
.prediction-recent-list article.won,.prediction-history-record-list article.won{border-left-color:#4f9a72}
.prediction-recent-list article.lost,.prediction-history-record-list article.lost{border-left-color:#c96b6b}
.prediction-recent-list span,.prediction-history-record-list article>div>span{display:block;margin-bottom:3px;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.prediction-recent-list strong,.prediction-history-record-list strong{display:block;color:var(--ink);font-size:13px;overflow-wrap:anywhere}
.prediction-history-record-list article{grid-template-columns:repeat(3,minmax(0,1fr));padding:16px;gap:14px}
.prediction-history-selected{grid-column:1/-1;padding-top:10px;border-top:1px solid var(--line)}
.prediction-history-choice-list{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0;padding:0;list-style:none}
.prediction-history-choice-list li{padding:5px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--gold-soft);color:var(--gold-deep);font-weight:700}
.prediction-history-choice-list li.is-correct{border-color:#93b6a0;background:#edf7f1;color:#306444}
.prediction-page-actions{display:flex;justify-content:flex-end;margin:0 0 14px}
@media (max-width:760px){
  .prediction-member-shell{width:100%;margin:0 auto;padding:12px 10px 24px}
  .prediction-card h1{font-size:21px}
  .prediction-recent-list article,.prediction-history-record-list article{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .prediction-recent-list article>div:first-child,.prediction-recent-list article>div:last-child,.prediction-history-record-list article>div:first-child,.prediction-history-selected{grid-column:1/-1}
  .prediction-recent-list article>div:last-child{padding-top:7px;border-top:1px solid var(--line)}
  .prediction-rules{display:grid}
  .prediction-page-actions .member-history-button{width:100%}
}
/* the fixed bottom navigation never hides the last content */
body.has-front-nav .member-shell{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}

/* ---- draw pop-up (server result of a published round) ---- */
.prediction-result-overlay{position:fixed;z-index:1200;inset:0;display:grid;place-items:center;padding:20px;background:rgba(20,12,16,.66);opacity:0;transition:opacity .18s ease}
.prediction-result-overlay.visible{opacity:1}
.prediction-result-popup{position:relative;width:min(480px,100%);max-height:calc(100dvh - 40px);overflow:auto;padding:26px;border:1px solid var(--line);border-radius:20px;background:var(--paper);box-shadow:0 24px 70px rgba(0,0,0,.3);color:var(--ink)}
.prediction-result-popup:focus{outline:none}
.prediction-result-popup h2{margin:0 0 16px;font-size:24px;line-height:1.2;overflow-wrap:anywhere}
.prediction-result-popup dl{display:grid;gap:4px;margin:0}
.prediction-result-popup dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:12px 0;border-bottom:1px solid var(--line)}
.prediction-result-popup dt{font-size:13px;color:var(--copy)}
.prediction-result-popup dd{margin:0;font-size:20px;font-weight:700;text-align:right;overflow-wrap:anywhere}
.prediction-result-next{margin:16px 0;color:var(--copy);font-size:13px;text-align:center}
.prediction-result-popup .member-submit{width:100%}

/* ---- password dialog: usable on phones, error line visible ---- */
.member-password-dialog{max-height:calc(100dvh - 24px);overflow:auto}
@media (max-width:520px){.member-password-dialog{width:calc(100% - 20px)!important;margin:0 auto}.member-password-dialog-form input{font-size:16px}}
.member-password-dialog .field-error{margin:6px 0 0;color:var(--red,#a84d4d);font-size:13px}

/* ---- language switch (visitor / member) ---- */
.front-lang-switch{display:flex;align-items:center;gap:6px;margin-left:auto;font-size:12px}
.front-lang-switch select{min-height:32px;width:auto;padding:3px 8px;font-size:12px;border-radius:8px}
/* V14.1 visitor-home anchors: the sections (not their optional titles) are the targets; the offset is the real height of the fixed/sticky top bars (landing.js keeps --anchor-offset exact, 150px is the no-JS fallback) */
#how,#faq,#contact{scroll-margin-top:var(--anchor-offset,0px)}
@media (min-width:900px){:root{--anchor-offset:150px}}

/* ---------- V14.1 match waiting page (original: cream page, white centred card, three silhouette cards, search circle, gradient bar) ---------- */
body[data-page] .match-panel.match-wait{gap:12px;padding:44px 28px 40px;border-radius:26px;box-shadow:0 18px 50px rgba(114,47,67,.07)}
.match-wait-visual{display:flex;justify-content:center;align-items:flex-end;gap:22px;width:100%;margin:0 auto 10px}
.mw-card{position:relative;display:block;flex:0 0 auto;width:min(26vw,128px);height:min(34vw,170px);border-radius:22px;background:#f2e8e5;border:1px solid #ecdcd9;overflow:hidden;box-shadow:0 12px 26px rgba(114,47,67,.06)}
.mw-left{transform:rotate(-6deg);margin-bottom:6px}
.mw-right{transform:rotate(6deg);margin-bottom:6px}
.mw-center{width:min(28vw,132px);height:min(37vw,180px)}
.mw-head{position:absolute;left:50%;top:21%;width:38%;aspect-ratio:1;margin-left:-19%;border-radius:50%;background:#ab8d62}
.mw-body{position:absolute;left:50%;bottom:0;width:78%;height:42%;margin-left:-39%;border-radius:50% 50% 0 0/80% 80% 0 0;background:#c2a984}
.mw-circle{position:absolute;left:50%;top:10%;width:90%;aspect-ratio:1;margin-left:-45%;display:grid;place-items:center;border-radius:50%;background:#fff;border:1px solid #e6d6cf;box-shadow:0 4px 14px rgba(114,47,67,.08)}
.mw-circle::before{content:"";position:absolute;inset:22%;border:1px solid #e9ddd6;border-radius:50%}
.mw-circle b{position:relative;color:#8d3248;font-size:15px;font-weight:400;line-height:1}
.mw-orbit{position:absolute;inset:0;animation:mwspin 5s linear infinite}
.mw-orbit em{position:absolute;width:11px;height:11px;border-radius:50%;background:#e8c46a}
.mw-orbit .d1{left:calc(50% - 5.5px);top:-5.5px}
.mw-orbit .d2{left:8.5%;top:83%}
.mw-orbit .d3{right:8.5%;top:83%;background:#8d3248}
@keyframes mwspin{to{transform:rotate(360deg)}}
.match-wait .member-match-eyebrow{margin:4px 0 0;color:#705e63;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.match-wait h1{margin:2px 0 4px;color:#4a2530;font-size:clamp(26px,5.2vw,46px);line-height:1.15;font-weight:400}
.match-wait .match-wait-copy{max-width:640px;color:#6b5a5f;font-size:15px;line-height:1.55}
.match-wait .match-bar{width:min(100%,520px);height:5px;margin-top:10px;border-radius:3px;background:linear-gradient(90deg,#ecdcdd,#d9bcc2 45%,#ecdcdd)}
.match-wait .match-bar i{background:linear-gradient(90deg,#d8b3bb,#8d3248)}
@media (prefers-reduced-motion:reduce){.mw-orbit{animation:none}}

/* ---------- V14.1 match result: the grid follows the real photo count (1 / 2 / 3), photos keep their ratio and never fill the whole card ---------- */
body[data-page] .match-availability{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 14px;padding:16px 22px;border:1px solid var(--line);border-radius:18px;background:var(--white);font-size:14px}
body[data-page] .match-availability strong{font-size:26px;font-weight:400}
body[data-page] .member-match-results{gap:14px;padding:36px 28px 30px;border-radius:26px}
.member-match-results .member-match-eyebrow{margin:0;color:#7a3a4e;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.member-match-results h1{margin:0;color:#4a2530;font-size:clamp(28px,5vw,42px);line-height:1.15;font-weight:400}
.member-match-results .member-match-result-copy{max-width:640px;color:#6b5a5f}
.member-match-photo-grid{display:grid;justify-content:center;gap:14px;width:100%;margin:6px auto 0}
.member-match-photo-grid[data-count="1"]{grid-template-columns:minmax(0,340px)}
.member-match-photo-grid[data-count="2"]{grid-template-columns:repeat(2,minmax(0,300px));max-width:640px}
.member-match-photo-grid[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.member-match-photo-grid figure{margin:0;overflow:hidden;border-radius:22px;background:var(--paper-2);aspect-ratio:3/4;max-height:480px}
.member-match-photo-grid img{display:block;width:100%;height:100%;object-fit:cover}
.member-match-level-notice{display:flex;align-items:center;justify-content:center;gap:8px;margin:2px 0 0;color:#6b5a5f;font-size:13px}
.member-match-level-notice p{margin:0;max-width:none}
.member-match-actions{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;width:100%;margin-top:6px}
.member-match-actions button{display:flex;align-items:center;justify-content:center;min-height:52px;padding:10px 16px;border-radius:12px;font:inherit;font-size:16px;cursor:pointer}
.member-match-contact{border:1px solid #722f43;background:#722f43;color:#fff}
.member-match-rematch{border:1px solid #d9c4c8;background:#fff;color:#722f43}
.member-match-rematch-message{max-width:560px;color:#8d3248;font-size:14px}
.member-match-one-chance{color:#7b6a6f;font-size:13px}
@media (max-width:640px){
  body[data-page] .member-match-results{padding:26px 16px 24px}
  .member-match-photo-grid{gap:8px}
  .member-match-photo-grid[data-count="1"]{grid-template-columns:minmax(0,min(78%,300px))}
  .member-match-photo-grid[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .member-match-photo-grid figure{border-radius:14px}
  .member-match-actions{grid-template-columns:minmax(0,1fr)}
  body[data-page] .match-panel.match-wait{padding:34px 16px 30px}
  .match-wait-visual{gap:8px;padding:0 6px;box-sizing:border-box}
  .mw-card{width:28%;height:auto;aspect-ratio:3/4;min-width:0}
  .mw-center{width:32%;height:auto;aspect-ratio:3/4}
}

/* V14: right-hand action of the three home rows: one line on desktop/tablet; on phones a deliberate, right-aligned 2-line label inside the card (never overflowing) */
:root body[data-page] .member-notification-entry>b,:root body[data-page] .verification-entry>b{white-space:nowrap;max-width:none;text-align:right}
@media (max-width:520px){:root body[data-page] .member-notification-entry>b,:root body[data-page] .verification-entry>b{white-space:normal;max-width:108px;font-size:11px}}
/* V14.3: footer shows the service-rules link after the copyright line (original layout); wraps on phones, never overflows */
.landing-conversion footer,.front-footer,.member-journey-footer{overflow-wrap:anywhere}
.landing-conversion footer .footer-rules,.front-footer .footer-rules,.member-journey-footer .footer-rules{color:inherit;text-decoration:underline;text-underline-offset:2px;margin-left:6px;display:inline}
.member-journey-footer{flex-wrap:wrap;align-items:center}
@media(max-width:700px){.landing-conversion footer,.front-footer{padding-left:16px;padding-right:16px}.landing-conversion footer .footer-rules{display:inline-block;margin:6px 0 0}}
/* V14.3: administrator-edited policy text (sanitised HTML) */
.policy-body{overflow-wrap:anywhere;line-height:1.7}.policy-body h2,.policy-body h3,.policy-body h4{margin:1.2em 0 .4em}.policy-body p{margin:.6em 0}.policy-body ul,.policy-body ol{padding-left:1.4em;margin:.6em 0}.policy-body a{text-decoration:underline;text-underline-offset:2px}.policy-body blockquote{margin:.8em 0;padding:.2em 1em;border-left:3px solid currentColor;opacity:.85}

/* V14.3: every uploaded front picture is shown COMPLETE and proportional (width 100%, height auto; no cover / fixed-height cropping).
   Hero banners: the picture sits in normal flow and decides the banner height; copy + button overlay its lower part on tablet/desktop
   (scrim keeps the text readable) and stack underneath it on phones (<=700px, the same width at which the phone picture is used) so nothing is hidden or covered. */
html .landing-conversion .hero,html .member-journey-hero,html[data-layout] .landing-conversion .hero{min-height:0;display:grid;grid-template-columns:minmax(0,1fr);align-items:end;background:#201018;overflow:hidden}
html .landing-conversion .hero>.hero-picture,html .member-journey-hero>.member-journey-picture{position:relative;inset:auto;grid-area:1/1;align-self:stretch;display:block;min-width:0;background:#201018}
html .hero-picture img,html .member-journey-picture img{display:block;width:100%;max-width:100%;height:auto;object-fit:contain;object-position:center top}
html .landing-conversion .hero>.hero-box,html .member-journey-hero>.member-journey-hero-content{grid-area:1/1;align-self:end;position:relative;z-index:1;min-width:0;max-width:100%;background:linear-gradient(180deg,rgba(32,16,24,0) 0,rgba(32,16,24,.62) 34%,rgba(32,16,24,.9) 74%)}
html .layout-hero-copy,html .member-hero-statement{padding-top:clamp(36px,6vw,84px)}
html .hero h1,html .hero .eyebrow,html .hero .hero-copy,html .member-hero-statement h1,html .member-journey-lead{text-shadow:0 1px 14px rgba(20,8,14,.55)}
html .member-journey-hero>.member-journey-hero-shade{display:none}
/* V14.3 R3 (phone only, <=700px = the width at which the phone picture is used): the original site look again - the banner picture FILLS the banner box
   (cover crop, subject kept visible), the headline / text sit INSIDE the picture at its lower part under a dark scrim, and the call-to-action stays in the
   white rounded card at the bottom edge of the picture. Works the same for the default picture and for any uploaded picture (desktop or phone upload).
   Wider screens keep the V14.3 rules above untouched. */
@media (max-width:700px){
  html .landing-conversion .hero,html .member-journey-hero,html[data-layout] .landing-conversion .hero{position:relative;min-height:clamp(440px,118vw,620px);align-items:end;background:#201018}
  html .landing-conversion .hero>.hero-picture,html .member-journey-hero>.member-journey-picture{position:absolute;inset:0;grid-area:auto;align-self:auto;width:100%;height:100%;background:#201018}
  html .hero-picture img,html .member-journey-picture img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 30%}
  html .landing-conversion .hero>.hero-picture::after,html .member-journey-hero>.member-journey-hero-shade{display:block;content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(32,16,24,0) 12%,rgba(32,16,24,.62) 52%,rgba(32,16,24,.94))}
  html .landing-conversion .hero>.hero-box,html .member-journey-hero>.member-journey-hero-content{grid-area:1/1;align-self:end;background:none}
  html .layout-hero-copy{padding-top:clamp(150px,52vw,240px)}
  html .member-hero-statement{padding-top:clamp(150px,52vw,240px)}
}
.member-journey-scene .member-journey-visual img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;display:block}
.member-journey-scenes{align-items:start}
.member-match-photo-grid{align-items:start}
.member-match-photo-grid figure{aspect-ratio:auto;max-height:none}
.member-match-photo-grid img{width:100%;height:auto;object-fit:contain}
.match-card img{aspect-ratio:auto;height:auto;object-fit:contain}
.front-media-strip img{object-fit:contain;width:auto;height:auto;max-height:150px}
html,body{max-width:100%}
img{max-width:100%}