/* Container */
.box-login {
    display: flex;
    flex-direction: row;
    position: relative;
    padding: 30px 20px;
    height: 620px;
    width: 350px;
    border-radius: 30px;
    overflow: hidden;
    background-color: rgba(255,220,220,0.4);
    backdrop-filter: blur(15px);
}

/* Forms positioning */
.box-login-login,
.box-register-login,
.box-forgot-login {
    position: absolute;
    width: 85%;
    transition: 0.5s ease-in-out;
    top: 0;
}

/* Default positions */
.box-login-login { left: 27px; opacity:1; pointer-events:auto; }
.box-register-login { right:-350px; opacity:0; pointer-events:none; }
.box-forgot-login { right:-350px; opacity:0; pointer-events:none; }

/* Login/Register toggle */
#toggle-login:checked ~ .box-register-login {
    right: 27px;
    opacity:1;
    pointer-events:auto;
}
#toggle-login:checked ~ .box-login-login {
    left:-350px;
    opacity:0;
    pointer-events:none;
}

/* Forgot Password toggle */
#toggle-forgot:checked ~ .box-forgot-login {
    right: 27px;
    opacity:1;
    pointer-events:auto;
}
#toggle-forgot:checked ~ .box-login-login,
#toggle-forgot:checked ~ .box-register-login {
    left:-350px !important;
    right:-350px !important;
    opacity:0;
    pointer-events:none;
}

/* Top headers */
.top-header-login { text-align:center; margin:30px 0; }
.top-header-login h3 { font-size:22px; font-weight:600; margin-bottom:8px; }

/* Input styles */
.input-box-login { width:100%; height:50px; font-size:15px; border:none; border-radius:10px; padding:7px 20px; background:rgba(224,223,223,0.6); outline:none; }
.input-field-login { margin:12px 0; position:relative; }
.input-field-login label { position:absolute; left:20px; top:5px; font-size:15px; transition:0.3s ease-in-out; }
.input-box-login:focus ~ label, .input-box-login:valid ~ label { top:2px; font-size:10px; color:#c12828; font-weight:500; }

/* Remember me */
.remember-login { display:flex; font-size:13px; margin:12px 0 30px 0; color:#000; }
.check-login { margin-right:8px; width:14px; }

/* Submit buttons */
.input-submit-login { width:100%; height:50px; font-size:15px; font-weight:500; color:#fff; background:#2e8b57; border:none; border-radius:2em 1em 2em 1em; cursor:pointer; transition:0.3s; }
.input-submit-login:hover { background:#ff8800; transform:scale(1.05); }
.input-submit-login:active { transform:scale(0.97); }

/* Switch buttons: inherit everything from .btn */
.switch-login {
    display: flex;
    position: absolute !important;   /* enforce absolute positioning */
    bottom: 30px !important;        /* distance from bottom */
    left: 50% !important;           /* center horizontally */
    transform: translateX(-50%) !important; /* actually center */
    gap: 100px;                       /* spacing between buttons */
    z-index: 10;                     /* above forms */
    width: auto;                      /* fit content only */
}

.switch-login {
    display: flex;
    position: absolute !important;      /* enforce absolute positioning */
    bottom: 30px !important;            /* distance from bottom */
    left: 50% !important;               /* center horizontally */
    transform: translateX(-50%) !important; /* center accurately */
    gap: 30px;                           /* more space between buttons */
    z-index: 10;                         /* above forms */
    width: auto;                          /* fit content only */
}

/* Tic-tac shaped buttons, inheriting base .btn styles */
.switch-login label {
    cursor: pointer;
    padding: 18px 28px;                  /* bigger clickable area */
    font-size: 1.4rem;                   /* larger text */
    border-radius: 2em 1em 2em 1em;      /* tic-tac shape */
    font-weight: 500;
    letter-spacing: 0.3px;
    color: #2e8b57;
    background: transparent;
    border: 2px solid #2e8b57;
    text-align: center;
    transition:
        background 0.3s ease,
        transform 0.25s cubic-bezier(0.68, -0.55, 0.27, 1.55),
        border-radius 0.25s cubic-bezier(0.68, -0.55, 0.27, 1.55),
        box-shadow 0.3s ease;
}

/* Active toggled state */
#toggle-login:checked ~ .switch-login .register-login,
#toggle-login:not(:checked) ~ .switch-login .login-login {
    background: #2e8b57;
    color: #fff;
    border: none;
}

/* Hover state */
.switch-login label:hover {
    background: rgba(255,136,0,0.1);
    border-color: #ff8800;
    color: #ff8800;
}