/* ===========================================================================
   "Client Login" modal — opened from the hero button on the home page.
   Loaded only on the home page via $extraCss.
   =========================================================================== */

:root {
    --cl-blue: #1e5eff;
    --cl-blue-2: #3fb6ff;
    --cl-ink: #191820;
    --cl-muted: #6b6b7b;
    --cl-line: #e6e6ef;
}

/* ------------------------------------------------------------- overlay */

.cl-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(5, 2, 8, .62);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
}

.cl-modal.is-open { opacity: 1; visibility: visible; }

/* Stops the page behind the modal from scrolling while it is open. */
body.cl-modal-open { overflow: hidden; }

/* ---------------------------------------------------------------- card */

.cl-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 22px;
    padding: 38px 36px 30px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
    transform: translateY(14px) scale(.98);
    transition: transform .24s cubic-bezier(.22, 1, .36, 1);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

.cl-modal.is-open .cl-card { transform: translateY(0) scale(1); }

/* Scoped with .cl-modal so the theme's global button rules (which stretch it
   into a wide pill) don't win. */
.cl-modal .cl-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    min-width: 0;
    max-width: 36px;
    padding: 0;
    margin: 0;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #f2f2f7;
    color: var(--cl-muted);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background .18s, color .18s;
}

.cl-modal .cl-close:hover { background: #e8e8f0; color: var(--cl-ink); }

/* -------------------------------------------------------------- header */

.cl-head { text-align: center; margin-bottom: 24px; }

.cl-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 17px;
    background: linear-gradient(135deg, #1046d6 0%, #2f7bff 55%, #3fb6ff 100%);
    color: #fff;
    font-size: 21px;
    box-shadow: 0 8px 22px rgba(30, 94, 255, .3);
}

.cl-head h3 {
    margin: 0 0 8px;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--cl-ink);
}

.cl-head p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--cl-muted);
}

/* --------------------------------------------------------------- field */

.cl-field { margin-bottom: 18px; }

.cl-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 7px;
    color: var(--cl-ink);
}

.cl-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.cl-input-wrap > i {
    position: absolute;
    left: 16px;
    font-size: 14px;
    color: #a2a2b4;
    pointer-events: none;
    transition: color .18s;
}

/* The long selector keeps theme rules from stealing the icon's left padding. */
.cl-modal .cl-input-wrap input[type="email"] {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 14px 16px 14px 46px;
    font-family: inherit;
    font-size: 15px;
    color: var(--cl-ink);
    background: #fbfbfd;
    border: 1px solid var(--cl-line);
    border-radius: 12px;
    outline: none;
    box-shadow: none;
    transition: border-color .18s, box-shadow .18s, background .18s;
}

.cl-modal .cl-input-wrap input[type="email"]::placeholder { color: #a9a9ba; }

.cl-input-wrap:focus-within > i { color: var(--cl-blue); }

.cl-modal .cl-input-wrap input[type="email"]:focus {
    background: #fff;
    border-color: var(--cl-blue);
    box-shadow: 0 0 0 3px rgba(30, 94, 255, .14);
}

.cl-field.has-error .cl-input-wrap input[type="email"] { border-color: #e5484d; }
.cl-field.has-error .cl-input-wrap > i { color: #e5484d; }

.cl-error {
    display: none;
    margin-top: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: #e5484d;
}

.cl-field.has-error .cl-error { display: block; }

/* -------------------------------------------------------------- button */

.cl-modal .cl-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 15px 22px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: linear-gradient(90deg, #1046d6 0%, #2f7bff 55%, #3fb6ff 100%);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(30, 94, 255, .28);
    transition: transform .16s, box-shadow .16s, filter .18s;
}

.cl-modal .cl-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(30, 94, 255, .36); }
.cl-modal .cl-submit:disabled { cursor: not-allowed; filter: saturate(.7) brightness(.97); transform: none; }
.cl-modal .cl-submit i { font-size: 13px; }

/* Spinner shown while a request is in flight. */
.cl-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cl-spin .7s linear infinite;
}

@keyframes cl-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- notes */

.cl-note {
    margin: 18px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--cl-muted);
    text-align: center;
}

.cl-note i { color: var(--cl-blue); margin-right: 5px; }

.cl-alt {
    margin: 20px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--cl-line);
    text-align: center;
    font-size: 14px;
    color: var(--cl-muted);
}

.cl-alt a { color: var(--cl-blue); font-weight: 600; text-decoration: none; }
.cl-alt a:hover { text-decoration: underline; }

/* Inline status line used for success / failure feedback. */
.cl-status {
    display: none;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 18px;
    padding: 13px 15px;
    border-radius: 11px;
    font-size: 13.5px;
    line-height: 1.55;
    text-align: left;
}

.cl-status.is-shown { display: flex; }
.cl-status.is-ok { background: rgba(18, 161, 80, .1); border: 1px solid rgba(18, 161, 80, .28); color: #0c7a3d; }
.cl-status.is-bad { background: rgba(229, 72, 77, .1); border: 1px solid rgba(229, 72, 77, .28); color: #b32126; }

/* ----------------------------------------------------------- responsive */

@media (max-width: 520px) {
    .cl-modal { padding: 16px; }
    .cl-card { padding: 32px 22px 24px; border-radius: 18px; }
    .cl-head h3 { font-size: 20px; }
    .cl-head p { font-size: 14px; }
}