/* Click FM authentication surfaces */
.click-auth-page {
    --auth-accent: var(--color-primary, #d50055);
    --auth-accent-rgb: var(--color-primary-rgb, 213, 0, 85);
    position: relative;
    isolation: isolate;
    min-height: 690px;
    padding: 118px 24px 92px;
    overflow: hidden;
    color: #f7f4f6;
    background:
        radial-gradient(ellipse at 12% 24%, rgba(var(--auth-accent-rgb), .18), transparent 38%),
        radial-gradient(ellipse at 83% 76%, rgba(84, 32, 104, .16), transparent 36%),
        #09090c;
}

.click-auth-page::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
    background-size: 56px 56px;
    content: "";
    mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.click-auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 470px);
    align-items: center;
    gap: clamp(36px, 7vw, 104px);
    width: min(1120px, 100%);
    margin: 0 auto;
}

.click-auth-shell-compact { width: min(1050px, 100%); }
.register-page-auth .click-auth-shell { width: min(1160px, 100%); grid-template-columns: minmax(0, 1fr) minmax(480px, 560px); }
.click-auth-story { position: relative; min-height: 440px; padding: 36px 0; }
.click-auth-kicker { display: inline-flex; align-items: center; gap: 9px; color: #f6e8ee; font-size: 12px; font-weight: 800; letter-spacing: .2em; }
.click-auth-kicker i { color: #ff5d98; font-size: 18px; }
.click-auth-story h1 { position: relative; z-index: 1; margin: 26px 0 18px; color: #fff; font-size: clamp(36px, 5vw, 58px); font-weight: 750; letter-spacing: -.045em; line-height: 1.08; }
.click-auth-story h1 span { color: #ff6c9e; }
.click-auth-story > p { position: relative; z-index: 1; max-width: 430px; margin: 0; color: #a9a3ac; font-size: 16px; line-height: 1.75; }
.click-auth-orb { position: absolute; border-radius: 50%; filter: blur(1px); pointer-events: none; }
.click-auth-orb-one { top: 6%; left: 45%; width: 240px; height: 240px; background: radial-gradient(circle, rgba(var(--auth-accent-rgb), .17), transparent 70%); }
.click-auth-orb-two { right: 4%; bottom: 8%; width: 180px; height: 180px; background: radial-gradient(circle, rgba(109, 72, 154, .16), transparent 70%); }
.click-auth-story-art { position: relative; display: flex; align-items: center; justify-content: center; width: 210px; height: 150px; margin-top: 34px; }
.click-auth-art-disc { position: relative; z-index: 2; display: grid; width: 74px; height: 74px; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: white; background: linear-gradient(145deg, #ff4385, #8b174c); box-shadow: 0 12px 48px rgba(var(--auth-accent-rgb), .42), inset 0 1px 0 rgba(255,255,255,.35); }
.click-auth-art-disc i { margin-left: 4px; font-size: 32px; }
.click-auth-art-wave { position: absolute; width: 108px; height: 108px; border: 1px solid rgba(255, 110, 159, .29); border-radius: 50%; animation: auth-wave 4s ease-out infinite; }
.click-auth-art-wave:nth-of-type(2) { animation-delay: 1.3s; }
.click-auth-art-wave:nth-of-type(3) { animation-delay: 2.6s; }
@keyframes auth-wave { 0% { transform: scale(.72); opacity: 0; } 28% { opacity: .75; } 100% { transform: scale(1.7); opacity: 0; } }

.click-auth-card { position: relative; z-index: 2; padding: clamp(26px, 4vw, 42px); border: 1px solid rgba(255,255,255,.1); border-radius: 22px; background: linear-gradient(145deg, rgba(27, 25, 31, .96), rgba(15, 14, 18, .98)); box-shadow: 0 28px 90px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.045); }
.click-auth-panel { width: 100%; padding: 0; color: #f7f4f6; background: transparent; }
.click-auth-page .form__wrapper.click-auth-panel { max-width: none; margin: 0; }
.click-auth-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: #ff75a3; font-size: 12px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.click-auth-eyebrow span, .click-auth-eyebrow i { font-size: 16px; }
.click-auth-panel .heading__content { margin-bottom: 28px; text-align: left; }
.click-auth-panel .heading__content .title { margin: 0 0 9px; color: #fff; font-size: 26px; font-weight: 720; letter-spacing: -.025em; line-height: 1.25; }
.click-auth-panel .heading__content .desc { margin: 0; color: #aaa4ad; font-size: 14px; line-height: 1.6; }
.click-auth-panel .form-group { margin-bottom: 19px; }
.click-auth-panel .form-group label { display: block; margin-bottom: 8px; color: #e9e5e9; font-size: 13px; font-weight: 600; }
.click-auth-panel .form-group label .required { color: #ff6c9e; }
.click-auth-panel .form-group .form-control { min-height: 52px; padding: 13px 15px; border: 1px solid #39343d; border-radius: 11px; outline: 0; color: #fff; background: #111015; box-shadow: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.click-auth-panel .form-group .form-control::placeholder { color: #716b75; }
.click-auth-panel .form-group .form-control:focus { border-color: #df3f79; background: #151218; box-shadow: 0 0 0 3px rgba(var(--auth-accent-rgb), .17); }
.click-auth-panel .btn__group { margin-top: 23px; }
.click-auth-panel :is(button.btn, a.btn) { min-height: 52px; border-radius: 11px; font-size: 14px; font-weight: 700; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, border-color .18s ease, color .18s ease, background-color .18s ease; }
.click-auth-panel .btn.btn-primary { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 11px; color: white; background: linear-gradient(105deg, #d51b5d, #a90c4b); box-shadow: 0 9px 22px rgba(var(--auth-accent-rgb), .24); font-size: 14px; font-weight: 700; }
.click-auth-panel .btn.btn-primary:hover { transform: translateY(-1px); border-color: transparent; color: #fff; background: linear-gradient(105deg, #ed3477, #c21b60); filter: none; box-shadow: 0 13px 30px rgba(var(--auth-accent-rgb), .42); }
.click-auth-panel .btn.btn-primary:focus, .click-auth-panel .btn.btn-primary:focus-visible { border-color: transparent; color: #fff; background: linear-gradient(105deg, #d51b5d, #a90c4b); outline: 3px solid rgba(255, 118, 163, .38); outline-offset: 3px; box-shadow: 0 9px 22px rgba(var(--auth-accent-rgb), .3); }
.click-auth-panel .btn.btn-primary:active { transform: translateY(0) scale(.985); color: #fff; background: linear-gradient(105deg, #b81450, #88083d); box-shadow: 0 4px 12px rgba(var(--auth-accent-rgb), .28); }
.click-auth-panel .btn.btn-primary:disabled, .click-auth-panel .btn.btn-primary.disabled { transform: none; color: #ddd5dc; background: #55414b; box-shadow: none; cursor: not-allowed; }
.click-auth-panel .btn.btn-primary i { font-size: 18px; }
.click-auth-panel .account { margin: 24px 0 0; color: #a9a3ac; font-size: 13px; }
.click-auth-panel .account a, .click-auth-panel a.forget { color: #ff76a3; font-weight: 650; text-decoration: none; }
.click-auth-panel .account a:hover, .click-auth-panel a.forget:hover { color: #ffa0bd; text-decoration: underline; }
.click-auth-panel .click-auth-switch { display: flex; flex-direction: column; align-items: center; gap: 13px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); color: #77717b; font-size: 12px; }
.click-auth-panel .click-auth-switch a { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 9px; width: 100%; border: 1px solid #403942; border-radius: 10px; color: #f2edf1; background: rgba(255,255,255,.025); font-size: 13px; font-weight: 600; text-decoration: none; transition: background .2s, border-color .2s; }
.click-auth-panel .click-auth-switch a:hover { border-color: #a93766; background: rgba(var(--auth-accent-rgb), .1); }
.click-auth-panel .click-auth-switch a:focus-visible { outline: 3px solid rgba(255, 118, 163, .38); outline-offset: 3px; }
.click-auth-panel .click-auth-switch a i { color: #ff75a3; font-size: 17px; }
.click-auth-panel .custom__checkbox { display: flex; flex-direction: row; align-items: flex-start; gap: 9px; }
.click-auth-panel .custom__checkbox .form-check-input { flex: 0 0 auto; margin: 3px 0 0; accent-color: var(--auth-accent); }
.click-auth-panel .custom__checkbox label, .click-auth-panel .flex__input label { color: #c5bec7; font-size: 12px; line-height: 1.5; }
.click-auth-panel .text-danger { color: #ff8196 !important; }
.click-auth-panel .click-auth-status { margin: 0 0 18px; padding: 12px 14px; border: 1px solid rgba(89, 205, 146, .25); border-radius: 10px; color: #a6ecc6; background: rgba(40, 160, 105, .1); font-size: 13px; line-height: 1.5; }
.click-auth-panel .click-auth-secondary-form { margin-top: 10px; }
.click-auth-panel .btn.btn-link { color: #aaa4ad; text-decoration: none; }
.click-auth-panel .btn.btn-link:hover { color: #fff; }
.click-auth-panel .flex__input { gap: 14px; }
.click-auth-panel .flex__input .form-group { flex: 1; min-width: 0; }
.click-auth-panel .devider { color: #8d8790; }
.click-auth-panel .devider::before, .click-auth-panel .devider::after { border-color: rgba(255,255,255,.1); }

/* Auth is also loaded into the existing sign-in/register modal. */
#ajaxModal .click-auth-panel { padding: 30px; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: #17151a; }
#ajaxModal .modal-content:has(.click-auth-panel) { overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: #17151a; box-shadow: 0 24px 80px rgba(0,0,0,.6); }
#ajaxModal .modal-content:has(.click-auth-panel) .modal-header { border: 0; background: #17151a; }
#ajaxModal .modal-content:has(.click-auth-panel) .close { color: #fff; opacity: .72; }

@media (max-width: 767.98px) {
    .click-auth-page { min-height: 0; padding: 96px 16px 54px; }
    .click-auth-shell { grid-template-columns: minmax(0, 1fr); gap: 18px; width: min(480px, 100%); }
    .click-auth-story { min-height: 0; padding: 10px 4px 0; }
    .click-auth-story h1 { margin: 17px 0 9px; font-size: clamp(30px, 9vw, 42px); }
    .click-auth-story > p { font-size: 14px; line-height: 1.55; }
    .click-auth-story-art { position: absolute; top: 20px; right: 0; width: 90px; height: 80px; margin: 0; transform: scale(.68); transform-origin: top right; }
    .click-auth-card { padding: 25px 21px; border-radius: 18px; }
    .click-auth-panel .heading__content .title { font-size: 23px; }
    #ajaxModal .click-auth-panel { padding: 24px 20px; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .register-page-auth .click-auth-shell { grid-template-columns: minmax(0, 1fr) minmax(400px, 470px); gap: 28px; }
}

@media (max-width: 767.98px) {
    .register-page-auth .click-auth-shell { width: min(520px, 100%); }
}

@media (max-width: 420px) {
    .click-auth-story-art { display: none; }
    .click-auth-panel .flex__input { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    .click-auth-art-wave { animation: none; }
    .click-auth-panel :is(button.btn, a.btn), .click-auth-panel .form-group .form-control { transition: none; }
}