/**
                          ,
   ,-.       _,---._ __  / \
  /  )    .-'       `./ /   \
 (  (   ,'            `/    /|
  \  `-"             \'\   / |
   `.              ,  \ \ /  |
    /`.          ,'-`----Y   |
   (            ;        |   '
   |  ,-.    ,-'         |  /
   |  | (   |            | /
   )  |  \  `.___________|/
   `--'   `--'
    I'm aitji (also known as **Suriya Inchoo**)
    the host of the following websites
    * https://aitji.is-a.dev
    * https://pr-thatako.ddns.net or http://pr.thatako.ac.th

    If you're interested in contributing to the project,
    you're welcome to reach out to me on Discord my username is "aitji".  
    You can also submit an inquiry through the support ticket system available at https://aitji.is-a.dev/discord

    Further information about the project and licensing
    can be found at "https://thatako-council.com/LICENSE"

    Sincerely,  
    Suriya Inchoo (aitji)
*/

@import url("../styles/anim.css");
@import url("../styles/form/root.css");

/* (most) popup element */
.popup-overlay {
    top: 0;
    left: 0;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: .8s ease-out forwards fadeInBackground
}

.popup {
    max-width: 80%;
    text-align: center;
    background-color: var(--popup-bg);
    border-radius: 8px;
    transform: translateY(20px);
    animation: .3s ease-out forwards fadeIn
}

.popup h2 {
    margin-top: 0;
    animation: .3s ease-out slideIn
}

.popup button {
    background-color: var(--popup-button-bg);
    border: 1px solid var(--popup-button-bg);
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    margin: 5px;
    transition: background-color 0.3s, color 0.3s;
    animation: 0.2s ease-out slideUp;
}

.popup button:hover {
    background-color: transparent;
    color: var(--popup-button-bg);
}

.popup button.yellow {
    border-color: var(--cookie-text);
    background-color: var(--cookie-text);
}

.popup button.yellow:hover {
    background-color: transparent;
    color: var(--cookie-text);
}

.popup button.green {
    border-color: var(--confirmation-confirm-bg);
    background-color: var(--confirmation-confirm-bg);
}

.popup button.green:hover {
    background-color: transparent;
    color: var(--confirmation-confirm-bg);
}

.popup button.red {
    border-color: var(--popup-red-button-bg);
    background-color: var(--popup-red-button-bg);
}

.popup button.red:hover {
    background-color: transparent;
    color: var(--popup-red-button-bg);
}

/* Secondary buttons */
.popup button.secondary {
    background-color: transparent;
    color: #fff;
    border: 1px solid var(--popup-button-bg);
    border-radius: 4px;
    cursor: pointer;
    margin: 5px;
    transition: background-color 0.3s, color 0.3s;
    animation: 0.2s ease-out slideUp;
}

.popup button.secondary:hover {
    background-color: var(--popup-button-bg);
    color: #fff;
}

.popup button.secondary.yellow {
    border-color: var(--cookie-text);
    color: var(--cookie-text);
}

.popup button.secondary.yellow:hover {
    background-color: var(--cookie-text);
    color: #fff;
}

.popup button.secondary.green {
    border-color: var(--confirmation-confirm-bg);
    color: var(--confirmation-confirm-bg);
}

.popup button.secondary.green:hover {
    background-color: var(--confirmation-confirm-bg);
    color: #fff;
}

.popup button.secondary.red {
    border-color: var(--popup-red-button-bg);
    color: var(--popup-red-button-bg);
}

.popup button.secondary.red:hover {
    background-color: var(--popup-red-button-bg);
    color: #fff;
}




.popup-icon {
    display: block;
    margin: 0 auto;
    font-size: 50px;
    color: var(--popup-icon-color)
}

.popup-icon::before {
    content: '✔'
}


/* hand write notification */
.notification-container {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
    pointer-events: none;
}

.notification {
    text-align: left;
    display: flex;
    flex-direction: column;
    width: (80% - 100px);
    background-color: var(--form-input-bg);
    color: var(--text-color);
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.5s ease;
    pointer-events: auto;
    margin-bottom: 10px;
}

.title {
    font-weight: bold;
}

.notification.show {
    transform: translateX(0);
    opacity: 1;
}

.notification.hide {
    transform: translateX(100%);
    opacity: 0;
}

.notification-content {
    display: flex;
    align-items: stretch;
    padding: 10px;
    flex: 1;
}

.strip {
    width: 4px;
    height: auto;
    background-color: red;
    margin-right: 10px;
    border-radius: 10px;
    flex-shrink: 0;
}

.content {
    flex: 1;
}

.progress-bar {
    width: 100%;
}

.progress-bar-inner {
    width: 100%;
    height: 100%;
    background-color: green;
    transition: width linear;
}


/* (!pc) device */
@media (max-width:480px) {
    .popup {
        max-width: 90%;
        text-align: left;
    }

    .notification {
        width: (40% - 100px);
    }

    .title-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .notification-container {
        top: 5px;
        right: 5px;
        width: calc(100% - 80px);
    }
}