/* Core Concept Training Center — login / register / verify screens.
   Palette from the brand's own cc-tokens.css:
     orange      #f15b29   orange-deep #d94d1f   orange-text #a43e1c
     orange-soft #ffd9cc   orange-tint #fff1ec
     ink         #1a1a1a   ink-soft    #6b6b6b
     paper       #ffffff   cream       #fbf8f1   line #ecdfdb

   Dark treatment over the Riyadh skyline artwork at
   images/backgrounds/coreconcept-login-background.png. That image is graded
   warm on the left and falls away to near-black on the right, so the form
   sits RIGHT of centre where the plate is already dark — the scrim below only
   deepens what the artwork does, rather than fighting it. A near-black base
   colour is set behind the image so the screen degrades to a dark ground, not
   white, if the file is ever missing.

   Logo: images/logos/coreconcept.svg — the FULL-COLOUR variant, which carries
   its own orange plate and therefore reads on any ground, light or dark. The
   same file is used by the sidebar in partials/menu.blade.php, so it has to
   work on both. The knockout variant (white wordmark, no plate) is kept out of
   the repo deliberately: it only works ON the brand orange.

   Contrast: ink on #f15b29 5.20:1 PASS — white on it is 3.35:1 and FAILS, so
   the primary button takes ink. #ffd9cc on the panel is well past 7:1. */

.login-dark {
    height:100vh !important;
    background:
        linear-gradient(255deg, rgba(18,13,10,0.90) 0%, rgba(18,13,10,0.62) 38%, rgba(18,13,10,0.20) 100%),
        url(../../../images/backgrounds/coreconcept-login-background.png) #120d0a !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    position:relative !important;
}

.login-dark form {
    max-width: 400px !important;
    width: 100% !important;
    background-color: rgba(24, 17, 13, 0.86) !important;
    padding: 40px !important;
    border: 1px solid rgba(255, 217, 204, 0.16) !important;
    border-radius: 10px !important;
    transform: translate(-50%, -50%) !important;
    position: absolute !important;
    top: 50% !important;
    left: 74% !important;
    color: #ffffff !important;
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.62) !important;
    -webkit-backdrop-filter: blur(14px) saturate(115%) !important;
    backdrop-filter: blur(14px) saturate(115%) !important;
}

.login-dark .illustration {
    text-align:center !important;
    padding:6px 0 24px !important;
}

.login-dark .illustration img{
    width:60%;
}

.login-dark form .form-control {
    background:#fbf8f1 !important;
    border:1px solid rgba(255, 217, 204, 0.20) !important;
    border-radius:6px !important;
    padding:10px 12px !important;
    height:auto !important;
    outline:none !important;
    color:#1a1a1a !important;
    box-shadow:none !important;
}

.login-dark form .form-control::placeholder {
    color:#6b6b6b !important;
}

.login-dark form .form-control:focus {
    background:#ffffff !important;
    border-color:#f15b29 !important;
    box-shadow:0 0 0 3px rgba(241, 91, 41, 0.35) !important;
}

/* The vivid brand orange, spent on the one primary action. It takes ink:
   white on #f15b29 is 3.35:1 and fails; ink is 5.20:1. */
.login-dark form .btn-login {
    background:#f15b29 !important;
    border:none !important;
    border-radius:6px !important;
    padding:11px !important;
    box-shadow:none !important;
    margin-top:18px !important;
    text-shadow:none !important;
    outline:none !important;
    color:#1a1a1a !important;
    font-weight:600 !important;
}

.login-dark form .btn-login:hover, .login-dark form .btn-login:active {
    background:#ffd9cc !important;
    outline:none !important;
}

.login-dark form .btn-login:active {
    transform:translateY(1px) !important;
}

/* The blade hardcodes Bootstrap's .btn-danger on the Google button. Its red
   sits a few degrees off the brand orange and reads as a mistake, so it is
   neutralised to a quiet outline on the dark panel. */
.login-dark form .btn-danger {
    background:rgba(255, 255, 255, 0.06) !important;
    border:1px solid rgba(255, 217, 204, 0.30) !important;
    border-radius:6px !important;
    padding:10px !important;
    color:#ffffff !important;
    font-weight:500 !important;
    box-shadow:none !important;
}

.login-dark form .btn-danger:hover, .login-dark form .btn-danger:active {
    background:rgba(255, 255, 255, 0.14) !important;
    border-color:#f15b29 !important;
    color:#ffffff !important;
}

.login-dark form .btn-back {
    background:rgba(255, 255, 255, 0.10) !important;
    border:1px solid rgba(255, 217, 204, 0.26) !important;
    border-radius:6px !important;
    padding:11px !important;
    box-shadow:none !important;
    text-shadow:none !important;
    outline:none !important;
    color:#ffffff !important;
}

.login-dark form .btn-back:hover, .login-dark form .btn-back:active {
    background:rgba(255, 255, 255, 0.18) !important;
    outline:none !important;
}

/* Secondary links in orange-soft, so they read as brand without tying with
   the body text and flattening the hierarchy. */
.login-dark form .forgot {
    display:block !important;
    text-align:center !important;
    font-size:12px !important;
    color:#ffd9cc !important;
    opacity:1 !important;
    text-decoration:none !important;
}

.login-dark form .forgot:hover, .login-dark form .forgot:active {
    color:#ffffff !important;
    text-decoration:underline !important;
}

.login-dark form span.forgot {
    color:rgba(255, 255, 255, 0.62) !important;
}

/* The blade hardcodes .text-white on the company link inside that line. */
.login-dark form .text-white {
    color:#ffd9cc !important;
}

#loading-image {
    max-width: 140px;
}

input{
    color:#1a1a1a !important;
}

.login-dark label {
    color:#ffffff !important;
}

[class*=icheck-]>input:first-child+input[type=hidden]+label::before, [class*=icheck-]>input:first-child+label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 3px;
    margin-left: -29px;
    margin-top:2px;
}

.icheck-primary>input:first-child:checked+input[type=hidden]+label::before, .icheck-primary>input:first-child:checked+label::before {
    background-color: #f15b29;
    border-color: #f15b29;
}

[class*=icheck-]>input:first-child:checked+input[type=hidden]+label::after, [class*=icheck-]>input:first-child:checked+label::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 7px;
    height: 10px;
    border: 2px solid #1a1a1a;
    border-left: none;
    border-top: none;
    transform: translate(6px, 4px) rotate(45deg);
    -ms-transform: translate(6px, 4px) rotate(45deg);
}

/* Keyed on website short_code, one selector per site. */
.alert-danger-core, .alert-danger-corear{
    color: #fff;
    background-color: #a43e1c;
    border-color: #a43e1c;
}

.btn-checkout {
    background:#a43e1c !important;
    border:1px solid #a43e1c !important;
    border-radius:6px !important;
    padding:11px !important;
    box-shadow:none !important;
    margin-top:26px !important;
    text-shadow:none !important;
    outline:none !important;
    color:#fff;
}

.btn-checkout:hover, .btn-checkout:active {
    background:#fff !important;
    outline:none !important;
    color:#a43e1c;
}

/* Narrow screens: the artwork's dark right edge is off-frame, so centre the
   panel and pan the image to keep the skyline behind it. */
@media (max-width: 900px) {
    .login-dark {
        background-position: 34% center !important;
    }

    .login-dark form {
        left: 50% !important;
        width: calc(100% - 32px) !important;
        padding: 32px !important;
    }
}

/* Short viewports: let the page scroll rather than clipping the panel. */
@media (max-height: 680px) {
    .login-dark {
        min-height: 100vh !important;
        height: auto !important;
        overflow-y: auto !important;
        padding: 24px 0 !important;
    }

    .login-dark form {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 0 auto !important;
    }
}