/* =========================================================
   DEWPOINT /OWNER
   Centered management login only
   ========================================================= */

html.dp-owner-route,
html.dp-owner-route body{
    min-height:100%;
}

html.dp-owner-route:not(.dp-owner-app) body{
    margin:0;
    overflow:hidden;
    background:
        linear-gradient(
            135deg,
            #06112e 0%,
            #0a1d4d 55%,
            #2b1058 100%
        );
}


/*
 * Hide the public landing page completely while
 * the /owner login screen is shown.
 */
html.dp-owner-route:not(.dp-owner-app) body > *:not(#dp-owner-portal):not(script):not(style):not(link){
    display:none !important;
}


.dp-owner-portal{
    position:fixed !important;
    inset:0 !important;
    z-index:100000 !important;

    display:grid !important;
    place-items:center !important;

    visibility:visible !important;
    opacity:1 !important;

    padding:24px;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        radial-gradient(
            circle at 22% 78%,
            rgba(190, 255, 0, .42) 0%,
            rgba(190, 255, 0, .24) 14%,
            rgba(190, 255, 0, .10) 23%,
            rgba(190, 255, 0, 0) 38%
        ),
        radial-gradient(
            circle at 78% 19%,
            rgba(166, 255, 0, .34) 0%,
            rgba(166, 255, 0, .18) 13%,
            rgba(166, 255, 0, .06) 23%,
            rgba(166, 255, 0, 0) 38%
        ),
        radial-gradient(
            circle at 52% 38%,
            rgba(0, 148, 120, .32) 0%,
            rgba(0, 132, 112, .18) 22%,
            rgba(0, 132, 112, 0) 47%
        ),
        linear-gradient(
            115deg,
            #02172f 0%,
            #03263b 27%,
            #064347 51%,
            #043a43 69%,
            #032c3f 83%,
            #031d34 100%
        );
}


.dp-owner-login-card{
    width:min(420px, 100%);

    padding:34px 30px 30px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:22px;

    color:#17213b;

    background:#ffffff;

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.28);
}


.dp-owner-login-top{
    display:flex;
    align-items:flex-start;
    gap:14px;

    margin-bottom:24px;
}


.dp-owner-logo{
    width:54px;
    height:54px;

    flex:0 0 54px;

    display:grid;
    place-items:center;

    border-radius:16px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #7442f2 0%,
            #2f7ff1 100%
        );

    font-size:18px;
    font-weight:900;
    letter-spacing:-1px;
}


.dp-owner-heading small{
    display:block;

    margin-bottom:6px;

    color:#6950d7;

    font-size:10px;
    font-weight:900;
    letter-spacing:1.4px;
}


.dp-owner-heading h1{
    margin:0 0 6px;

    color:#131c33;

    font-size:28px;
    font-weight:850;
    letter-spacing:-1px;
}


.dp-owner-heading p{
    margin:0;

    color:#73809b;

    font-size:12px;
    line-height:1.55;
}


.dp-owner-login-form{
    display:flex;
    flex-direction:column;
    gap:16px;
}


.dp-owner-login-form label{
    display:flex;
    flex-direction:column;
    gap:7px;
}


.dp-owner-login-form label > span{
    color:#3e4962;

    font-size:11px;
    font-weight:800;
}


.dp-owner-login-form input,
.dp-owner-login-form select{
    width:100%;
    height:48px;

    padding:0 14px;

    outline:none;

    border:
        1px solid
        #d7deea;

    border-radius:10px;

    color:#1a2237;
    background:#fff;

    font:inherit;
    font-weight:400;
    font-size:13px;

    box-sizing:border-box;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}


.dp-owner-login-form input:focus,
.dp-owner-login-form select:focus{
    border-color:#7354e8;

    box-shadow:
        0 0 0 3px
        rgba(115,84,232,.12);
}


.dp-owner-login-error{
    padding:11px 12px;

    border:
        1px solid
        #f2b7b2;

    border-radius:9px;

    color:#ae4237;
    background:#fff2ef;

    font-size:11px;
    line-height:1.45;
}


.dp-owner-login-submit{
    height:49px;

    margin-top:2px;

    border:0;
    border-radius:10px;

    color:#fff;

    background:
        linear-gradient(
            90deg,
            #6740df 0%,
            #3378ed 100%
        );

    font-size:11px;
    font-weight:900;
    letter-spacing:.7px;

    cursor:pointer;

    box-shadow:
        0 12px 24px
        rgba(86,72,220,.22);
}


.dp-owner-login-submit:hover{
    transform:translateY(-1px);
}


.dp-owner-login-submit:disabled{
    opacity:.65;
    cursor:wait;
    transform:none;
}


.dp-owner-login-help{
    margin:4px 0 0;

    text-align:center;

    color:#8a93a6;

    font-size:10px;
}


.dp-owner-login-help a{
    color:#5b43cf;
    font-weight:850;
    text-decoration:none;
}


.dp-owner-login-help a:hover{
    text-decoration:underline;
}


@media(max-width:480px){

    .dp-owner-portal{
        padding:16px;
    }

    .dp-owner-login-card{
        width:100%;
        padding:26px 20px 22px;
        border-radius:18px;
    }

    .dp-owner-heading h1{
        font-size:24px;
    }

}

/* ==========================================================
   PM_OWNER_LOGIN_LIME_V1
   Pickle Mania management login branding
   ========================================================== */

/* Background promoted to default .dp-owner-portal. */


/* PM monogram */
.dp-owner-login-card .dp-owner-logo {
    background:
        linear-gradient(
            145deg,
            #d8ff55,
            #b8f500
        ) !important;

    color: #062a46 !important;

    border-color: rgba(6,42,70,.10) !important;

    box-shadow:
        0 10px 26px rgba(125,185,0,.22) !important;
}

/* Login card */
.dp-owner-login-card {
    border:
        1px solid rgba(199,255,25,.20) !important;

    box-shadow:
        0 28px 80px rgba(0,20,40,.34),
        0 0 0 1px rgba(255,255,255,.04) !important;
}

/* Primary login button */
.dp-owner-login-card .dp-owner-login-submit {
    background:
        linear-gradient(
            90deg,
            #aee600 0%,
            #c7ff19 55%,
            #dcff62 100%
        ) !important;

    color: #062a46 !important;

    border-color: #b8ef00 !important;

    box-shadow:
        0 10px 28px rgba(165,225,0,.30) !important;
}

.dp-owner-login-card .dp-owner-login-submit:hover {
    transform: translateY(-1px);

    box-shadow:
        0 13px 32px rgba(165,225,0,.38) !important;

    filter: brightness(1.02);
}

/* Inputs */
.dp-owner-login-card input:focus,
.dp-owner-login-card select:focus {
    border-color: #aee600 !important;

    box-shadow:
        0 0 0 3px rgba(174,230,0,.16) !important;

    outline: none !important;
}

/* Management login accent/link */
.dp-owner-login-card .dp-owner-login-help a {
    color: #6f9700 !important;
}

.dp-owner-login-card .dp-owner-login-help a:hover {
    color: #4d7000 !important;
}

/* Tiny brand accent */
.dp-owner-login-card .dp-owner-login-header small,
.dp-owner-login-card .dp-owner-login-header .eyebrow {
    color: #658b00 !important;
}



/* ==========================================================
   PM_OWNER_LOGIN_EXACT_PREVIEW_V2
   ========================================================== */

/* Default background is now .dp-owner-portal. */



/* ----------------------------------------------------------
   LOGIN CARD
   ---------------------------------------------------------- */

body.pm-owner-login-preview-v2
.dp-owner-login-card {
    position: relative;

    z-index: 20;

    width: min(
        460px,
        calc(100vw - 42px)
    ) !important;

    border-radius: 24px !important;

    border:
        1px solid
        rgba(255,255,255,.42) !important;

    box-shadow:
        0 34px 90px rgba(0,21,43,.42),
        0 0 50px rgba(157,255,0,.06)
        !important;
}


/* ----------------------------------------------------------
   EXISTING PICKLE MANIA FAVICON AS CARD LOGO
   ---------------------------------------------------------- */

body.pm-owner-login-preview-v2
.pm-owner-existing-favicon {
    width: 62px !important;
    height: 62px !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 15px !important;

    overflow: hidden !important;

    background: transparent !important;

    box-shadow:
        0 9px 24px rgba(84,130,0,.18)
        !important;
}

body.pm-owner-login-preview-v2
.pm-owner-existing-favicon img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* ----------------------------------------------------------
   SIGN IN — PICKLE MANIA LIME
   ---------------------------------------------------------- */

body.pm-owner-login-preview-v2
.dp-owner-login-submit {
    min-height: 54px;

    border-radius: 10px !important;

    border: 0 !important;

    background:
        linear-gradient(
            90deg,
            #aef000 0%,
            #c8ff17 52%,
            #d9ff54 100%
        ) !important;

    color: #062844 !important;

    box-shadow:
        0 11px 28px
        rgba(170,235,0,.27) !important;
}

body.pm-owner-login-preview-v2
.dp-owner-login-submit:hover {
    transform: translateY(-1px);

    box-shadow:
        0 15px 34px
        rgba(170,235,0,.38) !important;
}


/* ----------------------------------------------------------
   INPUT FOCUS
   ---------------------------------------------------------- */

body.pm-owner-login-preview-v2
.dp-owner-login-card input:focus,

body.pm-owner-login-preview-v2
.dp-owner-login-card select:focus {
    outline: none !important;

    border-color: #b4ed00 !important;

    box-shadow:
        0 0 0 3px
        rgba(180,237,0,.17) !important;
}


/* ==========================================================
   LEFT SIDE BRANDING
   ========================================================== */

.pm-login-scene-left {
    position: fixed;

    z-index: 5;

    left: clamp(
        46px,
        7.4vw,
        145px
    );

    top: 50%;

    width: min(
        370px,
        28vw
    );

    transform:
        translateY(-27%);

    pointer-events: none;

    color: white;
}

.pm-login-left-content {
    position: relative;

    z-index: 2;
}

.pm-login-scene-left small {
    display: block;

    margin-bottom: 28px;

    color: #c7ff19;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .55em;
}

.pm-login-scene-left h2 {
    display: flex;

    flex-direction: column;

    margin: 0;

    font-size:
        clamp(
            42px,
            4vw,
            66px
        );

    line-height: .92;

    font-weight: 900;

    letter-spacing: -.045em;

    color: #ffffff;
}

.pm-login-scene-left h2 strong {
    color: #c7ff19;

    font-weight: 900;
}

.pm-login-scene-left i {
    display: block;

    width: 80px;

    height: 3px;

    margin:
        29px
        0
        25px;

    background: #c7ff19;

    border-radius: 99px;
}

.pm-login-scene-left p {
    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            .54
        );

    font-size: 11px;

    letter-spacing: .42em;
}


/* ==========================================================
   LARGE PICKLEBALL OUTLINE
   ========================================================== */

.pm-login-ball {
    position: absolute;

    z-index: 1;

    left: -170px;

    top: -260px;

    width: 290px;

    height: 290px;

    border: 10px solid rgba(199, 255, 25, .14);

    border-radius: 50%;

    opacity: .85;

    background:
        radial-gradient(
            circle at 27% 25%,
            rgba(199,255,25,.15)
            0 8px,
            transparent 9px
        ),
        radial-gradient(
            circle at 52% 20%,
            rgba(199,255,25,.15)
            0 8px,
            transparent 9px
        ),
        radial-gradient(
            circle at 72% 33%,
            rgba(199,255,25,.15)
            0 8px,
            transparent 9px
        ),
        radial-gradient(
            circle at 35% 47%,
            rgba(199,255,25,.15)
            0 8px,
            transparent 9px
        ),
        radial-gradient(
            circle at 62% 52%,
            rgba(199,255,25,.15)
            0 8px,
            transparent 9px
        ),
        radial-gradient(
            circle at 77% 66%,
            rgba(199,255,25,.15)
            0 8px,
            transparent 9px
        ),
        radial-gradient(
            circle at 45% 73%,
            rgba(199,255,25,.15)
            0 8px,
            transparent 9px
        ),
        radial-gradient(
            circle at 22% 69%,
            rgba(199,255,25,.15)
            0 8px,
            transparent 9px
        );
}


/* ==========================================================
   RIGHT SIDE TAGLINE
   ========================================================== */

.pm-login-scene-right {
    position: fixed;

    z-index: 5;

    right: clamp(
        48px,
        8vw,
        155px
    );

    top: 50%;

    transform:
        translateY(-10%);

    width: 220px;

    pointer-events: none;
}

.pm-login-scene-right p {
    display: flex;

    flex-direction: column;

    gap: 17px;

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            .60
        );

    font-size: 15px;

    font-weight: 400;

    letter-spacing: .42em;
}

.pm-login-scene-right i {
    display: block;

    width: 82px;

    height: 3px;

    margin-top: 28px;

    background: #c7ff19;

    border-radius: 99px;
}


/* ==========================================================
   EXTRA AMBIENT GLOW
   ========================================================== */

/* body_before_glow folded into default background. */


/* body_after_glow folded into default background. */



/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1180px) {

    .pm-login-scene-right {
        display: none;
    }

    .pm-login-scene-left {
        left: 42px;

        width: 280px;
    }

    .pm-login-scene-left h2 {
        font-size: 44px;
    }
}


@media (max-width: 900px) {

    body.pm-owner-login-preview-v2 {
        padding:
            28px
            18px;
    }

    .pm-login-scene-left,
    .pm-login-scene-right {
        display: none;
    }

    body.pm-owner-login-preview-v2
    .dp-owner-login-card {
        width:
            min(
                460px,
                calc(100vw - 36px)
            ) !important;

        margin-left: auto !important;

        margin-right: auto !important;
    }
}


@media (max-width: 520px) {

    body.pm-owner-login-preview-v2
    .dp-owner-login-card {
        border-radius: 20px !important;
    }

    body.pm-owner-login-preview-v2
    .pm-owner-existing-favicon {
        width: 54px !important;
        height: 54px !important;
    }
}