@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    /* background-color: #c9d6ff; */
    background: linear-gradient(90deg, #e2e2e2, #c9d6ff);
    /* flex-direction: column;
  
  padding: 10px; */
}

.container {
    position: relative;
    width: 850px;
    height: 550px;
    background: #fff;
    border-radius: 30px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
    /* To hide the toggle-panel[both left and right] from the main screen */
    overflow: hidden;
    margin: 20px;
}

.form-box {
    position: absolute;
    right: 0;
    height: 100%;
    width: 50%;
    /* background: seagreen; */
    background: #fff;
    display: flex;
    align-items: center;
    text-align: center;
    color: #333;
    padding: 40px;
    /* To show above toggle-box */
    z-index: 1;
    transition: .6s ease-in-out 1.2s, visibility 0s 1s;
}

.container.active .form-box {
    /* slides the form when we click on register/sign to toggle */
    right: 50%;
}

.form-box.register {
    visibility: hidden;
}

.container.active .form-box.register {
    visibility: visible;
}

form {
    /* To make it horizontally center as it do not take it's full width */
    width: 100%;
}

.container h1 {
    font-size: 36px;
    margin: -10px 0;
}

.input-box {
    position: relative;
    margin: 30px 0;
}

.input-box input {
    width: 100%;
    padding: 13px 50px 13px 20px;
    background: #eee;
    border-radius: 8px;
    border: none;
    outline: none;
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

.input-box input::placeholder {
    color: #888;
    font-weight: 400;
}

.input-box i {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #888;
}

.forgot-link {
    margin: -15px 0 15px;
}

.forgot-link a {
    font-size: 14.5px;
    text-decoration: none;
    color: #333;
}

.btn {
    width: 100%;
    height: 48px;
    background: #7494ec;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #fff;
    font-weight: 600;
}

.container p {
    margin: 15px 0;
    font-size: 14.5px;
}

.social-icons {
    display: flex;
    justify-content: center;
}

.social-icons a {
    display: inline-flex;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 8px;
    font-size: 24px;
    color: #333;
    text-decoration: none;
    margin: 0 8px;
}

.input-box select {
    width: 100%;
    padding: 13px;
    background: #eee;
    border-radius: 8px;
    border: none;
    outline: none;
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

.scrollable-form {
    overflow-y: auto;
    /* direction: rtl; */
    max-height: 300px;
    padding-right: 10px;
    /* Spacing from scrollbar */
    margin-bottom: 6px;
    margin-top: 9px;
}

.toggle-box {
    /* This is the portion which slide */
    position: absolute;
    width: 100%;
    height: 100%;
    /* background: purple; */
}


/* styling the toggle-box */

.toggle-box::before {
    /*  content Property
        The content property defines what should be inserted by the pseudo-element.
        content: ''; means an empty string — so, it doesn’t insert any actual text, but it creates a box that you can style (size, color, background, etc.).
    */
    content: '';
    position: absolute;
    /* limit the overflow in right  */
    left: -250%;
    width: 300%;
    height: 100%;
    background: #7494ec;
    border-radius: 150px;
    /* visible above others */
    z-index: 2;
    transition: 1.8s ease-in-out;
}


/* 
Let's break down this CSS line:

```css
.container.active .toggle-box::before {
  left: 50%;
}
```

## **Explanation of Each Part:**

### 1. **`.container.active`**

* This targets an element with the **class `container`** that **also has the class `active`**.

  * Example in HTML:

    ```html
    <div class="container active">
      ...
    </div>
    ```

### 2. **`.toggle-box`**

* This targets a **child element** inside `.container.active` with the class `toggle-box`.

  * Example in HTML:

    ```html
    <div class="container active">
      <div class="toggle-box">
        ...
      </div>
    </div>
    ```

### 3. **`::before`**

* This refers to the **pseudo-element** that is placed **before the content** of `.toggle-box`.
* The `::before` element **doesn't exist in HTML**, it’s created virtually in CSS.

### 4. **`left: 50%;`**

* This moves the **pseudo-element’s position from the left** side of `.toggle-box` to **50% of its width**.
* It only works if `.toggle-box::before` is **positioned absolutely or relatively**.



### Full Flow:

| Selector            | What it Means                                                       |
| ------------------- | ------------------------------------------------------------------- |
| `.container.active` | Select `.container` when it has class `active`                      |
| `.toggle-box`       | Select child element with class `toggle-box`                        |
| `::before`          | Target the pseudo-element that appears before `.toggle-box` content |
| `left: 50%;`        | Move the pseudo-element 50% from the left edge of `.toggle-box`     |

### Example Use Case:

```css
.toggle-box::before {
  content: '';
  position: absolute;
  width: 100px;
  height: 5px;
  background: blue;
  left: 0;
  top: 0;
  transition: left 0.5s ease;
}

.container.active .toggle-box::before {
  left: 50%;
}
```

### Behavior:

* Initially, the blue bar (`::before`) starts at **left: 0**.
* When `.container` gets the **`active` class**, the blue bar smoothly transitions to **left: 50%** (slides to the middle).

### Visual Example:

| State               | What Happens                             |
| ------------------- | ---------------------------------------- |
| `.container`        | Bar stays at `left: 0;` (start position) |
| `.container.active` | Bar moves to `left: 50%;` (middle shift) |

## Conclusion:
This line is used for **animations or toggle transitions**, where a pseudo-element (like an overlay or decorative line) **shifts horizontally to 50% position** when `.container` becomes active (like clicking Sign Up).

*/

.container.active .toggle-box::before {
    /* explained above */
    left: 50%;
}

.toggle-panel {
    position: absolute;
    width: 50%;
    height: 100%;
    /* background-color: seagreen; */
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* makes the content visible */
    z-index: 2;
    transition: .6s ease-in-out;
}

.toggle-panel.toggle-left {
    left: 0;
    transition-delay: 1.2s;
}

.container.active .toggle-panel.toggle-left {
    /* It moves the welcome register toggle to -50% means half out of the screen from left */
    left: -50%;
    transition-delay: .6s;
}


/* To split both toggle register will be on left and sign in on right [means half out of the screen from right] */

.toggle-panel.toggle-right {
    right: -50%;
    transition-delay: .6s;
}

.container.active .toggle-panel.toggle-right {
    /* It moves the welcome back sign in toggle to the main screen */
    right: 0;
    transition-delay: 1.2s;
}

.toggle-panel p {
    margin-bottom: 20px;
}

.toggle-panel .btn {
    width: 160px;
    height: 46px;
    background: transparent;
    /* background: seagreen; */
    border: 2px solid #fff;
    box-shadow: none;
}

@media screen and (max-width: 670px) {
    .container {
        height: calc(100vh - 40px);
    }
    .form-box {
        /* background: purple; */
        bottom: 0;
        width: 100%;
        height: 70%;
    }
    .container.active .form-box {
        right: 0;
        bottom: 30%;
    }
    .toggle-box::before {
        left: 0;
        top: -270%;
        /*Moves it upwards, far outside .toggle-box's top*/
        width: 100%;
        height: 300%;
        border-radius: 20vw;
    }
    .container.active .toggle-box::before {
        /* This moves the toggle-panel from top to bottom */
        left: 0;
        top: 70%;
    }
    .toggle-panel {
        /* border: 2px solid red; */
        width: 100%;
        height: 30%;
        /* This fit toggle-left in toggle-panel */
    }
    .toggle-panel.toggle-left {
        top: 0;
    }
    .container.active .toggle-panel.toggle-left {
        /* This moves the toggle-panel from top to bottom */
        left: 0;
        top: -30%;
    }
    .toggle-panel.toggle-right {
        right: 0;
        bottom: -30%;
        /* right-panel moves to bottom*/
    }
    .container.active .toggle-panel.toggle-right {
        /* This make the other toggle-panel visible on the bottom */
        bottom: 0;
    }
}

@media screen and (max-width: 400px) {
    .form-box {
        padding: 20px;
    }
    .toggle-panel h1 {
        font-size: 30px;
    }
}