body.login-pf {
    background: url("bg-plain.jpg") no-repeat 50% 0;
    background-size: cover;
    background-color: #101010;
}

#badge {
    inline-size: 220px;
    block-size: 80px;
    background-image: url("logo.png");
    background-size: contain;
    background-repeat: no-repeat;
}

#brand {
    font-size: 18pt;
    text-transform: uppercase;
}

#brand::before {
    content: "Ubuntu 24.04.5 LTS";
}

#index-brand {
    content: "Ubuntu";
}

#index-brand::before {
    content: "Ubuntu";
}

/* ASR CUSTOM LOGIN BRANDING */

#brand::before {
    content: "ASR CINEMAS | SECURE SERVER LOGIN" !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    text-transform: none !important;
}

#badge {
    display: none !important;
    visibility: hidden !important;
    background-image: none !important;
}

#index-brand::before {
    content: "ASR CINEMAS" !important;
}


/* ASR CINEMAS PREMIUM LOGIN V2 */

/* BRAND COLORS */
:root {
    --ct-color-host-accent: #c91c35;
}

/* FULL SCREEN CINEMATIC BACKGROUND */
html body.login-pf {
    min-height: 100vh !important;
    background:
      radial-gradient(
        circle at 15% 15%,
        rgba(198,25,49,.27),
        transparent 38%
      ),
      radial-gradient(
        circle at 85% 85%,
        rgba(255,207,67,.13),
        transparent 35%
      ),
      repeating-linear-gradient(
        135deg,
        transparent 0 100px,
        rgba(255,255,255,.014) 100px 102px
      ),
      linear-gradient(
        135deg,
        #08090f 0%,
        #1b101a 50%,
        #09090d 100%
      ) !important;

    background-attachment: fixed !important;
    color: #f7f2f3 !important;
    font-family:
      "Segoe UI", Arial, sans-serif !important;
}

/* MAIN LOGIN CARD */
.login-pf .container {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;

    width: calc(100% - 36px) !important;
    max-width: 500px !important;
    min-width: 0 !important;

    margin: clamp(65px, 10vh, 115px) auto 0 !important;
    padding: 42px 40px 34px !important;

    background:
      linear-gradient(
        160deg,
        rgba(34,26,36,.98),
        rgba(17,17,24,.98)
      ) !important;

    border: 1px solid rgba(255,207,67,.20) !important;
    border-bottom: none !important;
    border-radius: 22px 22px 0 0 !important;

    box-shadow:
      0 30px 85px rgba(0,0,0,.55),
      0 0 65px rgba(195,20,48,.10) !important;

    color: #f8f4f5 !important;
}

/* HEADER BRANDING */
.login-pf #brand {
    margin: 0 0 30px !important;
    padding: 0 0 23px !important;
    border-bottom: 1px solid rgba(255,255,255,.10);
    color: #ffd34e !important;
    text-align: left !important;
    line-height: 1.25 !important;
}

.login-pf #brand::before {
    content: "ASR CINEMAS" !important;
    display: block !important;
    font-family: Georgia, serif !important;
    font-size: clamp(27px, 5vw, 36px) !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    color: #ffd34e !important;
    text-transform: uppercase !important;
}

.login-pf #brand::after {
    content: "SECURE SERVER MANAGEMENT" !important;
    display: block !important;
    margin-top: 9px !important;
    font-family: Arial, sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 2.3px !important;
    color: #c8bbc1 !important;
}

/* HIDE DISTRIBUTION BADGE */
.login-pf #badge {
    display: none !important;
    visibility: hidden !important;
    background: none !important;
}

/* LOGIN LABELS */
.login-pf label,
.login-pf .control-label {
    color: #ece5e8 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .3px !important;
    margin-bottom: 8px !important;
}

/* USERNAME AND PASSWORD FIELDS */
.login-pf input[type="text"],
.login-pf input[type="password"],
.login-pf input[type="email"],
.login-pf .form-control,
.login-pf .pf-c-form-control {
    min-height: 49px !important;
    background-color: #25202b !important;
    color: #ffffff !important;
    border: 1px solid #5a4b59 !important;
    border-radius: 9px !important;
    font-size: 15px !important;
    padding: 11px 14px !important;
    box-shadow: none !important;
    transition:
      border-color .2s,
      box-shadow .2s !important;
}

.login-pf input:focus,
.login-pf .form-control:focus,
.login-pf .pf-c-form-control:focus {
    border-color: #ffd34e !important;
    box-shadow:
      0 0 0 3px rgba(255,211,78,.16) !important;
    outline: none !important;
}

/* KEEP PASSWORD VISIBILITY CONTROL USABLE */
.login-pf .input-group,
.login-pf .pf-c-input-group {
    border-radius: 9px !important;
}

.login-pf .input-group button,
.login-pf .pf-c-input-group button {
    border-color: #5a4b59 !important;
}

/* PROFESSIONAL LOGIN BUTTON */
.login-pf #login-button,
.login-pf .login-button {
    min-height: 52px !important;
    width: 100% !important;

    border: 0 !important;
    border-radius: 9px !important;

    background:
      linear-gradient(
        110deg,
        #ffe373,
        #f3b82e
      ) !important;

    color: #241319 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: .8px !important;

    box-shadow:
      0 8px 25px rgba(237,169,38,.18) !important;

    transition:
      transform .2s,
      box-shadow .2s !important;
}

.login-pf #login-button:hover,
.login-pf .login-button:hover {
    background:
      linear-gradient(
        110deg,
        #ffec99,
        #ffd24c
      ) !important;

    box-shadow:
      0 10px 30px rgba(237,169,38,.26) !important;
    transform: translateY(-1px);
}

.login-pf #login-button:focus-visible,
.login-pf .login-button:focus-visible {
    outline: 3px solid #ffffff !important;
    outline-offset: 3px !important;
}

/* SECONDARY CONTROLS */
.login-pf a {
    color: #ffd34e !important;
}

.login-pf a:hover {
    color: #ffec9d !important;
}

.login-pf .btn-link {
    color: #e9d6dd !important;
}

/* FOOTER BELOW LOGIN FORM */
.login-pf .details {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    width: calc(100% - 36px) !important;
    max-width: 500px !important;
    min-width: 0 !important;

    margin: 0 auto 45px !important;
    padding: 19px 40px 25px !important;

    background: #211a23 !important;
    border: 1px solid rgba(255,207,67,.20) !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 0 0 22px 22px !important;

    box-shadow: 0 25px 55px rgba(0,0,0,.23) !important;

    color: #cfc5cd !important;
    font-size: 12px !important;
    line-height: 1.7 !important;
}

/* KEEP ERRORS CLEARLY VISIBLE */
.login-pf .alert,
.login-pf .pf-c-alert {
    border-radius: 8px !important;
}

/* COCKPIT DASHBOARD BRAND */
#index-brand::before {
    content: "ASR CINEMAS" !important;
    font-weight: 700 !important;
}

/* MOBILE VIEW */
@media(max-width:600px) {

    .login-pf .container {
        width: calc(100% - 24px) !important;
        margin: 32px auto 0 !important;
        padding: 30px 23px 26px !important;
        border-radius: 17px 17px 0 0 !important;
    }

    .login-pf .details {
        width: calc(100% - 24px) !important;
        margin-bottom: 24px !important;
        padding: 17px 23px 22px !important;
        border-radius: 0 0 17px 17px !important;
    }

    .login-pf #brand::before {
        font-size: 28px !important;
    }

    .login-pf #brand::after {
        font-size: 9px !important;
        letter-spacing: 1.5px !important;
    }

    html body.login-pf {
        background-attachment: scroll !important;
    }
}

/* ACCESSIBILITY */
@media(prefers-reduced-motion:reduce) {
    .login-pf * {
        transition: none !important;
        animation: none !important;
    }
}

/* END ASR CINEMAS PREMIUM LOGIN V2 */