@import url('fonts/lexend/lexend-font.css');
@import url('fonts/lato/lato-font.css');
:root{--cs-blue:#2d92cc;--cs-text:#333;--cs-grey:#f1f1f1;--cs-ibord:#d7d7d7;--cs-cbord:#e5e5e5;}

/* ---- page ---- */
html,body{height:100%;}
body{background:var(--cs-grey)!important;color:var(--cs-text);font-family:'Lexend',sans-serif;display:flex;flex-direction:column;min-height:100vh;}
.container{max-width:none;flex:1 0 auto;display:flex;flex-direction:column;}
.container>.login-page{flex:0 0 auto;}

/* ---- header ---- */
.menu{background:#fff!important;border-bottom:1px solid var(--cs-cbord)!important;box-shadow:0 1px 3px rgba(0,0,0,.06)!important;padding:20px 70px!important;margin-bottom:0!important;}
/* Official brand asset (bundled from stg-solo-web Content/.../core/clubspark.png) — image includes the wordmark, so hide the anchor text */
.menu-logo .logo,.menu .logo{display:inline-block;width:168px;height:48px;background:url('img/clubspark.png') no-repeat left center/contain;font-size:0!important;color:transparent!important;text-decoration:none!important;overflow:hidden;}
.menu .logo::before{content:none!important;}
.menu .menu-button{display:none!important;}

/* ---- login card (heading merged into card) ---- */
.login-page{max-width:640px;width:100%;margin:40px auto 60px;padding:0;}
.login-page .page-header{background:#fff;border:1px solid var(--cs-cbord);border-bottom:0;border-radius:8px 8px 0 0;padding:42px 60px 28px;margin:0!important;}
/* real localized heading (resx) */
.login-page .page-header h1,.login-page h1{font-family:'Lato','Lexend',sans-serif;font-weight:700;font-size:40px;line-height:48px;color:var(--cs-text);text-align:center;margin:0!important;}
.login-page>.row{margin:0;justify-content:center;}
.login-page .row>.col-sm-6{flex:0 0 100%;max-width:100%;padding:0;}
/* ---- external providers pane: continuation slice of the login card ---- */
/* state A (local + external): local card loses its bottom chrome; external card is the bottom slice */
.login-page>.row:has(>.external-providers)>.col-sm-6:first-child .card{border-radius:0;border-bottom:0;box-shadow:none;}
.login-page>.row:has(>.external-providers) a.btn-dark{border-bottom:0!important;padding-bottom:4px;}
.login-page>.row:has(>.external-providers)>.col-sm-6:first-child .card-body{padding-bottom:8px;}
/* "Or sign in with" divider header (small text, hairline rules either side) */
.login-page .external-providers .card-header{display:flex!important;align-items:center;gap:14px;background:none!important;border:0!important;padding:10px 60px 22px;margin:0;color:#666;font-family:'Lexend',sans-serif;font-size:14px;font-weight:400;line-height:1;}
.login-page .external-providers .card-header::before,.login-page .external-providers .card-header::after{content:'';flex:1 1 auto;height:1px;background:var(--cs-cbord);}
/* provider buttons: stacked, full-width, ClubSpark tertiary style */
.login-page .external-providers .card-body{padding:0 60px 48px;}
.login-page .external-providers ul.list-inline{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;}
.login-page .external-providers li.list-inline-item{display:block;width:100%;margin:0;}
.login-page .external-providers a.btn{display:flex;align-items:center;justify-content:center;width:100%;height:48px;background:#fff!important;border:1px solid #989ca7!important;color:#323950!important;font-size:16px;font-weight:600;border-radius:4px;text-decoration:none;}
.login-page .external-providers a.btn:hover,.login-page .external-providers a.btn:focus{background:#f4f5f8!important;border-color:#707485!important;color:#323950!important;box-shadow:none!important;}
/* state B (external-only, EnableLocalLogin=false): the pane is the whole card body under the heading */
.login-page>.row>.external-providers:only-child .card-header{display:none!important;}
.login-page>.row>.external-providers:only-child .card-body{padding-top:14px;}
.login-page .card{background:#fff;border:1px solid var(--cs-cbord);border-top:0;border-radius:0 0 8px 8px;box-shadow:0 10px 12px -6px rgba(0,0,0,.06);margin:0!important;}
.login-page .card-header{display:none!important;}
.login-page .card-body{padding:0 60px 48px;}
.login-page .card-body .row{margin-left:0;margin-right:0;}
.login-page .card-body [class*="col-"]{padding:0;}

/* ---- field labels (CSS-injected; ResolutionPolicy=Email so "Email address" is truthful) ---- */
.login-page .form-group:has(#Username)::before{content:'Email address';}
.login-page .form-group:has(#Password)::before{content:'Password';}
.login-page .form-group:has(#Username)::before,.login-page .form-group:has(#Password)::before{flex:0 0 100%;font-weight:600;font-size:15px;color:var(--cs-text);margin-bottom:9px;}

/* ---- inputs ---- */
.login-page .input-group-prepend{display:none!important;}
.login-page .form-control{border:1px solid var(--cs-ibord)!important;border-radius:3px!important;height:50px;padding:0 16px;font-size:16px;color:#222;box-shadow:none!important;background:#fff;}
.login-page .form-control::placeholder{color:#9a9a9a;}
.login-page .form-control:focus{border-color:var(--cs-blue)!important;box-shadow:0 0 0 2px rgba(45,146,204,.15)!important;}
.login-page .card-body .form-group{margin-bottom:28px;}

/* ---- remember me: switch restyled as checkbox; REAL localized div text shown.
   The label.switch gets an invisible ::after overlay covering the whole row (anchored to the
   position:relative col), so clicking the text or the box toggles the input. Scoped to this row only. ---- */
.login-page .login-remember{margin-bottom:36px!important;}
.login-page .login-remember .col-sm-9{position:relative;display:flex!important;flex-direction:row-reverse;justify-content:flex-end;align-items:center;padding:0!important;margin:0!important;flex:0 0 100%;max-width:100%;text-align:left!important;}
.login-page .login-remember .col-sm-9>div{font-size:15px;font-weight:600;color:var(--cs-text);line-height:24px;margin:0 0 0 12px!important;padding:0!important;}
.login-page .login-remember .switch{position:static;display:inline-block!important;width:24px!important;height:24px!important;margin:0!important;flex:0 0 24px;cursor:pointer;}
.login-page .login-remember .switch::after{content:'';position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;}
.login-page .login-remember .switch input{opacity:0;width:0;height:0;}
.login-page .login-remember .slider{position:absolute!important;top:0!important;left:0!important;right:auto!important;bottom:auto!important;width:24px!important;height:24px!important;background:#fff!important;border:1px solid #b7b7b7!important;border-radius:4px!important;cursor:pointer;transition:none!important;}
.login-page .login-remember .slider::before{display:none!important;content:none!important;}
.login-page .login-remember input:checked+.slider{background:var(--cs-blue)!important;border-color:var(--cs-blue)!important;}
.login-page .login-remember input:checked+.slider::after{content:'';position:absolute;left:8px;top:3px;width:7px;height:13px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}

/* ---- buttons & links ---- */
.login-page .btn{border-radius:4px;font-weight:600;text-transform:none;}
.login-page button[value="login"],.login-page .card-body button.btn-primary{background:var(--cs-blue)!important;border:1px solid var(--cs-blue)!important;color:#fff!important;width:100%;height:48px;font-size:16px;font-weight:600;margin:0;display:flex;align-items:center;justify-content:center;}
.login-page button[value="login"]:hover{background:#2683b8!important;border-color:#2683b8!important;}
.login-page button[value="cancel"],.login-page .btn-secondary{display:none!important;}
.login-page a.btn-info,.login-page a.btn-dark{background:none!important;border:0!important;color:var(--cs-blue)!important;font-weight:700;font-size:16px;display:block;text-align:center;width:100%;padding:0;box-shadow:none!important;}
.login-page a.btn-info{border-top:1px solid var(--cs-cbord)!important;border-radius:0;margin-top:30px;padding-top:30px;}
.login-page a.btn-dark{border-bottom:1px solid var(--cs-cbord)!important;border-radius:0;margin-top:18px;padding-bottom:30px;}
/* register prompt prefix (markup has no such text — accepted EN-only CSS injection) */
.login-page a.btn-dark::before{content:"Haven't created an account?";font-size:16px;font-weight:400;color:var(--cs-text);margin-right:6px;}
.login-page a.btn-info:hover,.login-page a.btn-dark:hover{color:#2683b8!important;text-decoration:none;}

/* ---- forgot password page (bare h1 + hr + form in .container; card built from the pieces) ----
   Scope: exact action match — footer forms carry "ForgotPassword" only in their returnUrl querystring. */
.container:has(>form[action="/Account/ForgotPassword"])>h1{background:#fff;border:1px solid var(--cs-cbord);border-bottom:0;border-radius:8px 8px 0 0;width:100%;max-width:640px;margin:40px auto 0!important;padding:42px 60px 0;text-align:center;font-size:40px;line-height:48px;color:var(--cs-text);font-family:'Lato','Lexend',sans-serif;font-weight:700;}
.container:has(>form[action="/Account/ForgotPassword"])>h1::after{content:'Enter your email address and we\2019ll send a link for you to reset your password.';display:block;font-family:'Lexend',sans-serif;font-size:16px;font-weight:400;line-height:1.55;color:var(--cs-text);text-align:left;margin-top:24px;}
.container:has(>form[action="/Account/ForgotPassword"])>hr{display:none;}
.container>form[action="/Account/ForgotPassword"]{background:#fff;border:1px solid var(--cs-cbord);border-top:0;border-radius:0 0 8px 8px;box-shadow:0 10px 12px -6px rgba(0,0,0,.06);width:100%;max-width:640px;margin:0 auto 60px;padding:16px 60px 48px;}
.container>form[action="/Account/ForgotPassword"] .row{margin:0;}
.container>form[action="/Account/ForgotPassword"] h4{display:none;}
.container>form[action="/Account/ForgotPassword"] .form-group{margin-bottom:0;}
/* method chooser hidden entirely (legacy is email-only; Email radio arrives checked server-side and posts fine) */
.container>form[action="/Account/ForgotPassword"] .row:first-of-type{display:none!important;}
/* reveal panels (JS toggles inline display) */
.container>form[action="/Account/ForgotPassword"] .resetPasswordBy{flex:0 0 100%;width:100%;max-width:100%;padding:0;margin-top:20px;}
/* Email-only: force the email panel visible and the username panel hidden REGARDLESS of
   forgot-password.js (it inline-hides both panels on load; stale cached copies never reveal one.
   Stylesheet !important beats the inline display:none). */
.container>form[action="/Account/ForgotPassword"] #resetPasswordByEmail{display:block!important;}
.container>form[action="/Account/ForgotPassword"] #resetPasswordByUsername{display:none!important;}
.container>form[action="/Account/ForgotPassword"] .resetPasswordBy .form-group{margin-bottom:24px;}
.container>form[action="/Account/ForgotPassword"] .resetPasswordBy label{font-weight:600;font-size:15px;color:var(--cs-text);margin-bottom:9px;}
.container>form[action="/Account/ForgotPassword"] .form-control{border:1px solid var(--cs-ibord)!important;border-radius:3px!important;height:50px;padding:0 16px;font-size:16px;color:#222;box-shadow:none!important;background:#fff;}
.container>form[action="/Account/ForgotPassword"] .form-control:focus{border-color:var(--cs-blue)!important;box-shadow:0 0 0 2px rgba(45,146,204,.15)!important;}
.container>form[action="/Account/ForgotPassword"] button.btn-primary{background:var(--cs-blue)!important;border:1px solid var(--cs-blue)!important;color:#fff!important;width:100%;height:48px;font-size:16px;font-weight:600;border-radius:4px;margin:4px 0 0;}
.container>form[action="/Account/ForgotPassword"] button.btn-primary:hover{background:#2683b8!important;border-color:#2683b8!important;}
.container>form[action="/Account/ForgotPassword"] .text-danger{font-size:13px;}

/* ---- preferred login provider mode (.login-page.has-preferred): hero provider + <details> disclosure ----
   The page-header stays the card's top slice (existing rules); .preferred-login is the middle slice and
   <details.login-secondary> is the bottom slice, so heading -> hero -> disclosure read as ONE card.
   All rules scoped to .has-preferred / .preferred-login / .login-secondary so the default page is untouched. */
.login-page.has-preferred .preferred-login{background:#fff;border-left:1px solid var(--cs-cbord);border-right:1px solid var(--cs-cbord);padding:0 60px 26px;margin:0;}
.login-page.has-preferred a.preferred-provider{display:flex;align-items:center;justify-content:center;width:100%;height:48px;background:var(--cs-blue)!important;border:1px solid var(--cs-blue)!important;color:#fff!important;font-size:16px;font-weight:600;border-radius:4px;text-decoration:none;}
.login-page.has-preferred a.preferred-provider:hover,.login-page.has-preferred a.preferred-provider:focus{background:#2683b8!important;border-color:#2683b8!important;color:#fff!important;text-decoration:none;}
/* disclosure = bottom slice of the card */
.login-page.has-preferred .login-secondary{display:block;background:#fff;border:1px solid var(--cs-cbord);border-top:0;border-radius:0 0 8px 8px;box-shadow:0 10px 12px -6px rgba(0,0,0,.06);margin:0;overflow:hidden;}
/* summary = understated centered toggle, hairline divider above, expand caret */
.login-secondary>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;color:var(--cs-blue);font-size:16px;font-weight:700;padding:24px 60px;border-top:1px solid var(--cs-cbord);}
.login-secondary>summary::-webkit-details-marker{display:none;}
.login-secondary>summary::marker{content:'';}
.login-secondary>summary::after{content:'';display:inline-block;width:8px;height:8px;border-right:2px solid var(--cs-blue);border-bottom:2px solid var(--cs-blue);transform:rotate(45deg) translateY(-2px);transition:transform .15s ease;}
.login-secondary[open]>summary::after{transform:rotate(-135deg) translateY(-2px);}
.login-secondary>summary:hover{color:#2683b8;}
.login-secondary>summary:hover::after{border-color:#2683b8;}
/* expanded content: nested row with local + other-providers cards; strip sub-card chrome so it flows in the one card */
.login-secondary .row{margin:0;justify-content:center;}
.login-secondary .card{border:0!important;border-radius:0!important;box-shadow:none!important;margin:0!important;background:transparent!important;}
.login-secondary .col-sm-6:first-child .card-body{padding-top:24px;padding-bottom:8px;}
.login-secondary a.btn-dark{border-bottom:0!important;padding-bottom:4px;}

/* ---- register page (mirrors the login card so it reads cohesively) ---- */
.register-page{max-width:640px;width:100%;margin:40px auto 60px;padding:0;}
.register-page .page-header{background:#fff;border:1px solid var(--cs-cbord);border-bottom:0;border-radius:8px 8px 0 0;padding:42px 60px 8px;margin:0!important;}
.register-page .page-header h1{font-family:'Lato','Lexend',sans-serif;font-weight:700;font-size:40px;line-height:48px;color:var(--cs-text);text-align:center;margin:0!important;}
.register-page .card{background:#fff;border:1px solid var(--cs-cbord);border-top:0;border-radius:0 0 8px 8px;box-shadow:0 10px 12px -6px rgba(0,0,0,.06);margin:0!important;}
.register-page .card-body{padding:8px 60px 48px;}
.register-page .register-subtitle{font-family:'Lexend',sans-serif;font-size:16px;font-weight:400;line-height:1.55;color:var(--cs-text);text-align:center;margin:0 0 28px;}
.register-page .form-group{margin-bottom:24px;}
.register-page label{display:block;font-weight:600;font-size:15px;color:var(--cs-text);margin-bottom:9px;}
.register-page .form-control{border:1px solid var(--cs-ibord)!important;border-radius:3px!important;height:50px;padding:0 16px;font-size:16px;color:#222;box-shadow:none!important;background:#fff;}
.register-page .form-control:focus{border-color:var(--cs-blue)!important;box-shadow:0 0 0 2px rgba(45,146,204,.15)!important;}
.register-page button.btn-primary{background:var(--cs-blue)!important;border:1px solid var(--cs-blue)!important;color:#fff!important;width:100%;height:48px;font-size:16px;font-weight:600;border-radius:4px;margin:4px 0 0;}
.register-page button.btn-primary:hover{background:#2683b8!important;border-color:#2683b8!important;}
.register-page .text-danger{font-size:13px;}
@media (max-width:767.98px){
  .register-page{max-width:100%;margin:0 auto 40px;}
  .register-page .page-header{border:0;border-radius:0;padding:26px 20px 8px;}
  .register-page .page-header h1{font-size:32px;line-height:40px;}
  .register-page .card{border:0;border-radius:0;box-shadow:none;}
  .register-page .card-body{padding:8px 20px 32px;}
}

/* ---- footer (full-bleed dark) ---- */
footer.border-top{flex-shrink:0;background:#2d2d2d;color:#fff;border-top:0!important;width:100vw;margin:auto calc(50% - 50vw) 0!important;padding:26px 70px!important;font-size:13px;}
footer.border-top .text-muted{color:#cfcfcf!important;}
/* LEFT: legal line only (original "Clubspark © yyyy - version" hidden via font-size:0; English-only pseudo-content).
   Segments: col::before = "© ... 2026 |", small::before = "Terms & Conditions" (underlined),
   small::after = "Privacy Policy" (underlined, border-left paints the middle pipe). */
footer.border-top .col-6.col-md{font-size:0;display:flex;align-items:center;white-space:nowrap;}
footer.border-top .col-6.col-md::before{content:'\00a9  Clubspark Group Ltd 2026 |';font-size:13px;font-weight:400;color:#fff;}
footer.border-top small.d-block{display:none!important;}
/* REAL legal links (rendered by _Layout from AdminConfiguration:TermsUrl/PrivacyPolicyUrl) — no fake pseudo-links */
footer.border-top .footer-legal-links{font-size:13px;font-weight:400;color:#fff;margin-left:6px;display:inline-flex;align-items:center;gap:9px;}
footer.border-top .footer-legal-links a{color:#fff!important;text-decoration:underline;font-weight:400;}
footer.border-top .footer-legal-links a:hover,footer.border-top .footer-legal-links a:focus{color:#d7d7d7!important;}
/* RIGHT: theme selector retired (cookie-only switching); language select hidden; the freed column hosts the Powered-by lockup */
footer.border-top .col-md-3:has(#SelectTheme){display:none!important;}
footer.border-top .col-md-3:has(#selectLanguageForm){display:flex!important;align-items:center;justify-content:flex-end;white-space:nowrap;flex:0 0 auto;width:auto;max-width:none;}
footer.border-top .col-md-3:has(#selectLanguageForm)>div{display:none!important;}
footer.border-top .col-md-3:has(#selectLanguageForm)::before{content:'Powered by';font-size:13px;font-weight:400;color:#fff;}
footer.border-top .col-md-3:has(#selectLanguageForm)::after{content:'';display:inline-block;width:88px;height:26px;background:url('img/clubspark-logo.png') no-repeat center/contain;margin-left:10px;}
footer.border-top .row{align-items:center;margin:0 -15px;flex-wrap:nowrap;}

/* ---- responsive: legacy breakpoint is 767/768px (comp-core.css); below it the page goes boxless on white ---- */
@media (max-width:767.98px){
  body{background:#fff!important;}
  /* header: compact, smaller logo, keep logo left (Bootstrap stacks the menu column below md) */
  .menu{padding:12px 20px!important;flex-direction:row!important;justify-content:flex-start;align-items:center;}
  .menu-logo .logo,.menu .logo{width:140px;height:40px;}
  /* login: strip the card chrome, tighten gutters, smaller heading */
  .login-page{max-width:100%;margin:0 auto 40px;}
  .login-page .page-header{border:0;border-radius:0;padding:26px 20px 20px;}
  .login-page .page-header h1,.login-page h1{font-size:32px;line-height:40px;}
  .login-page .card{border:0;border-radius:0;box-shadow:none;}
  .login-page .card-body{padding:0 20px 32px;}
  .login-page .external-providers .card-header{padding:8px 20px 18px;}
  .login-page .external-providers .card-body{padding:0 20px 32px;}
  /* preferred mode: boxless, 20px gutters */
  .login-page.has-preferred .preferred-login{border:0;padding:0 20px 22px;}
  .login-page.has-preferred .login-secondary{border:0;border-radius:0;box-shadow:none;}
  .login-secondary>summary{padding:22px 20px;}
  /* forgot password: same boxless treatment */
  .container:has(>form[action="/Account/ForgotPassword"])>h1{border:0;border-radius:0;max-width:100%;margin:0 auto!important;padding:26px 20px 0;font-size:32px;line-height:40px;}
  .container:has(>form[action="/Account/ForgotPassword"])>h1::after{margin-top:16px;}
  .container>form[action="/Account/ForgotPassword"]{border:0;border-radius:0;box-shadow:none;max-width:100%;margin:0 auto 40px;padding:20px 20px 32px;}
  /* footer: centered, stacked (legal line may wrap; Powered-by lockup below) */
  footer.border-top{padding:26px 20px!important;}
  footer.border-top .row{flex-direction:column;align-items:center;flex-wrap:wrap;}
  footer.border-top .col-6.col-md{display:block;flex:0 0 auto;width:100%;max-width:100%;white-space:normal;text-align:center;line-height:1.9;}
  footer.border-top .footer-legal-links{display:inline;}
  footer.border-top .col-md-3:has(#selectLanguageForm){flex:0 0 auto;width:auto;max-width:100%;justify-content:center;margin-top:14px;padding:0;}
}