.cc-backdrop { overflow: hidden; pointer-events: none; background: #09111c; }
.cc-backdrop *, .cc-backdrop *::before, .cc-backdrop *::after { box-sizing: border-box; }
.cc-scene { position: absolute; top: 0; left: 0; width: 1536px; height: 1024px; transform-origin: 0 0; }
.cc-building { position: absolute; inset: 0; display: block; width: 1536px !important; height: 1024px !important; max-width: none !important; }
.cc-poster {
  position: absolute; left: 0; top: 0; width: 1000px; height: 680px;
  overflow: hidden; background: #101820; transform-origin: 0 0;
  transform: matrix3d(.711648275862,.171520689655,0,.000196551724138,0,.510294117647,0,0,0,0,1,0,729,203,0,1);
}
.cc-photograph { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: contain; object-position: center; }
.cc-poster-captioned .cc-photograph { height: 570px !important; }
.cc-caption {
  position: absolute; inset: auto 0 0; height: 110px;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 24px 16px; border-top: 2px solid rgba(242,207,153,.36);
  background: #101820; color: #f6ddb5; text-align: center;
  font: 600 62px/1.12 Georgia, 'Times New Roman', serif; letter-spacing: 1px;
  text-shadow: 0 2px 3px rgba(0,0,0,.65); overflow-wrap: anywhere;
}
.cc-poster::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 15px 3px rgba(0,0,0,.20); pointer-events: none; }
.cc-shade { position: absolute; inset: 0; background: linear-gradient(0deg,rgba(5,11,19,.18),transparent 30%); }
.cc-portrait .cc-shade { background: linear-gradient(0deg,#09111c 0%,#09111c 27%,transparent 61%); }
/* Hide the passkey button at every viewport size, even if the backdrop fails.
   Also collapse its separate Helix row so it leaves no empty space. */
#com-users-login__form .plg_system_webauthn_login_button { display: none !important; }
#com-users-login__form .com-users-login__submit:has(> .mb-3 > .plg_system_webauthn_login_button) { display: none !important; }
/* Only the verified guest login form receives these classes during startup. */
body.cc-login-page { background: #09111c !important; isolation: isolate; min-height: 100vh; }
body.cc-login-page #cureghem-cinema-background { z-index: -1; }
body.cc-login-page .body-wrapper,
body.cc-login-page .body-innerwrapper,
body.cc-login-page #sp-main-body,
body.cc-login-page .site-grid { background: transparent !important; }
/* The live Helix footer is empty but paints a 61px black strip. */
body.cc-login-page #sp-footer { display: none !important; }
/* The live Helix template has a 320px photograph above its menu. Remove only
   that decorative background/height on the cinema page; retain its contents. */
body.cc-login-page #sp-top-bar {
  background-image: none !important; background-color: transparent !important;
  height: auto !important; min-height: 0 !important; padding: 0 !important;
}
body.cc-style-form #sp-main-body { padding-top: clamp(150px, 20vh, 230px); }
body.cc-style-form .cc-login-card {
  box-sizing: border-box; width: min(460px, 100%); margin: 36px auto 48px 0;
  padding: 28px; border-radius: 14px; background: rgba(250,249,246,.97);
  color: #172233; box-shadow: 0 12px 46px rgba(0,0,0,.3);
}
body.cc-style-form .cc-login-card label,
body.cc-style-form .cc-login-card h1,
body.cc-style-form .cc-login-card h2 { color: #172233; }
body.cc-style-form .cc-login-card a { color: #174b78; }
body.cc-style-form .cc-login-card input { max-width: 100%; }
body.cc-style-form .cc-login-card .com-users-login__form,
body.cc-style-form .cc-login-card .list-group { width: 100% !important; max-width: 100% !important; }
/* Helix wraps the form AND its account links in a .col-lg-4. Inside our
   own panel it must occupy the full width rather than one Bootstrap third. */
body.cc-style-form .cc-login-card > .row.justify-content-center {
  margin-left: 0 !important; margin-right: 0 !important;
}
body.cc-style-form .cc-login-card > .row.justify-content-center > .col-lg-4 {
  flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important;
  margin-left: 0 !important; margin-right: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
@media (min-width: 992px) and (max-width: 1199px) {
  body.cc-style-form .cc-login-card { width: min(400px, 100%); }
}
@media (max-width: 819px) and (orientation: portrait) {
  body.cc-style-form #sp-main-body { padding-top: max(120px, calc(100vw * .50)); }
  body.cc-style-form .cc-login-card { margin: 24px auto 40px; padding: 24px; }
}
/* Frameless login on phones, including landscape phones.
   Keep opacity on backgrounds only so text and controls remain crisp. */
@media (max-width: 575.98px), (max-width: 991.98px) and (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  body.cc-login-page .cc-portrait .cc-shade {
    background: linear-gradient(0deg,rgba(5,11,19,.20),transparent 60%);
  }
  body.cc-style-form .cc-login-card {
    width: min(360px, 100%); margin: 18px auto 28px; padding: 16px;
    border: 0; border-radius: 0; background: transparent; color: #fff;
    box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  body.cc-style-form .cc-login-card .com-users-login__form {
    background: transparent; border: 0; box-shadow: none;
  }
  body.cc-style-form .cc-login-card label,
  body.cc-style-form .cc-login-card h1,
  body.cc-style-form .cc-login-card h2,
  body.cc-style-form .cc-login-card a {
    color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.95);
  }
  body.cc-style-form .cc-login-card .form-control {
    background-color: rgba(5,11,19,.28); color: #fff; font-size: 16px;
  }
  body.cc-style-form .cc-login-card .form-control::placeholder { color: rgba(255,255,255,.8); }
  body.cc-style-form .cc-login-card .form-control:focus {
    background-color: rgba(5,11,19,.48); color: #fff;
  }
  /* Keep the username outline white, including Joomla's invalid state. */
  body.cc-style-form #com-users-login__form input[name="username"] {
    border: 1px solid #fff !important; box-shadow: none !important;
  }
  body.cc-style-form #com-users-login__form input[name="username"]:focus {
    box-shadow: 0 0 0 3px rgba(255,255,255,.3) !important;
  }
  body.cc-style-form .cc-login-card .com-users-login__options { background: transparent; }
  body.cc-style-form .cc-login-card .com-users-login__options .list-group-item {
    background: transparent; border: 0; color: #fff; text-decoration: underline;
    text-shadow: 0 1px 3px rgba(0,0,0,.95);
  }
}