body {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 100vh;

    margin: 0;

    padding: 0% 5%;

    background-color: #081119;
    background-image: 
        radial-gradient(circle, transparent 10%, #05121f 85%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%232a475e' stroke-width='1' opacity='0.3'/%3E%3C/svg%3E");    
    background-size: auto, 56px 100px;
    background-attachment: fixed;
    color: white;

    font-family: sans-serif;
}

/* VARIOUS BASIC ELEMENTS -------------------------------------------------------------*/

h1{
    display: inline-block;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

h1, h2 {
    padding-bottom: 10px;
    color: #66c0f4;
}

#title-h1{
    margin: 0;
    margin-top: 3%;

    padding: 0;

    font-size: 5em;
}

#tracked-games-h2, .top-h2{
    margin: 4% 0;

    padding-bottom: 0;

    text-align: center;

    font-size: 1.9;
}


h2{
    margin-top: 5.5%;
}

.top-h2{
    margin: 4% 0;
}

.hidden {
    display: none !important;
}

h3{
    margin: 0;
    font-weight: normal;
}

ul {
    padding: 0;
    list-style: none;
}

li {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 10px;
    padding: 10px;

    background: #16202d;
    border-radius: 8px;
}

a {
    color: #66c0f4;
    text-decoration: none;
}

/*-------------------------------------------------------------------------------------*/

nav{
    text-align: center;
}

.log-out{
    padding: 10px;

    margin-bottom: 9%;

    text-align: end;

    color: red;
    
}

.search-text{
    font-size: 1em;
    margin: 0;
    margin-right: 20px
}

form {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;

    margin-top: 6%;

    border-radius: 8px;
}

.search-form{
    justify-content: center;
}

form > * {
    margin-right: 20px;
}

input[type="text"] {
    height: 35px;
    width: 50%;

    padding: 5px;
    border-radius: 5px;
}

.search-input{
    width: 39% !important;

    padding: 0 10px !important;

    font-size: 1em;

    background-color: rgba(0, 0, 0, 0.5);
    border: solid 1.5px;
    border-color:#21a04b;

    outline: none;
}

button {
    padding: 10px 20px;

    font-size: 1em;

    background-color: #4c6b22;; /* Steam green */
    color: white;

    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #78a312;
}

.results-list{
    justify-content: space-evenly;
    background-color: rgba(0, 0, 0, 0.6);
}

.results-list form{
    margin: 0;
}

.results-list form, .results-list strong{
    width: 30%;

    text-align: center;
}

.results-list strong{
    white-space: nowrap;      /* Prevents text from wrapping to a second line */
    overflow: hidden;         /* Hides the text that spills out */
    text-overflow: ellipsis;  /* Adds the "..." at the end */
    max-width: 330px;         /* Adjust this to fit your card width */
    display: block;           /* Required for ellipsis to work on some elements */
}

.success-card {
    padding: 20px;

    background: rgba(0, 0, 0, 0.8);
    border-left: 5px solid #5c7e10;
    border-radius: 4px;
}

.button-link {
    display: inline-block;

    margin-top: 20px;
    padding: 10px 20px;

    font-weight: bold;
    text-decoration: none;

    background-color: #2a475e;
    color: #5c7e10 !important;

    border-radius: 4px;
}

.button-link:hover {
    background-color: #3a5a78;
}


/* GAMES CARDS -----------------------------------------------------------------------*/

.game-card {
    position: relative;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr; 
    justify-content: center;
    align-items: center;
    
    margin: 10px auto; 
    
    padding: 15px 8%; 

    background: rgba(0, 0, 0, 0.6);
    
    border-radius: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 4px solid #66c0f4;
}

.game-name {
    text-align: left;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.game-price-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;

    text-align: center;
}

.price {
    margin-left: 10px;

    font-weight: bold;

    color: #a3d200;
}

.original-price {
    margin-left: 10px;

    text-decoration: line-through;
    font-size: 0.9em;
    
    opacity: 0.6;
    color:white;
}

.discount {
    padding: 2px 5px;

    font-size: 0.8em;

    border-radius: 3px;

    background: #4c6b22;
}

.discount-badge {
    margin-left: 8px;

    padding: 2px 6px;

    font-size: 0.85em;
    font-weight: bold;

    background: #4c6b22;
    color: white;

    border-radius: 3px;
}

.current-price {
    margin-left: 5px;

    font-weight: bold;
    
    color: #a3d200;
}

.anta-regular {
  font-family: "Anta", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.game-actions{
    position: relative;
    text-align: right;
}

.steam-link {
    display: inline-block;

    margin-right: 1%;
    padding: 8px 16px;

    font-size: 14px;
    font-weight: 400;
    text-decoration: none;

    background-color: #2a475e;
    color: white;

    border-radius: 4px;
}

.steam-link :hover{
    text-decoration: none;
    color: #168a3c !important;
}

.remove-btn {
    margin-right: 0;
}

.rmv-button{
    position: absolute;
    top: 6px;
    right: 6px;

    margin: 0;
}

.rmv-button button{

    padding: 2px 6px;

    font-size: 0.8em;

    background-color: rgb(91, 7, 7);
    color: rgb(205, 198, 198);
}

#back-to-button{
    color:#168a3c
}




.hidden {
    display: none !important;
}

/* Add a fade-in effect for the search results */
#search-results-area {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}



@keyframes fadeOut {
    0% { opacity: 1; }
    75% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}


@media (max-width: 750px) {
 
    .log-out{
        max-width: 50px;
    }

    form > * {
        margin-right: 0;
    }
}

@media (max-width: 720px) {
    nav{
        flex-direction: column-reverse;
        align-items: center;
    }

    .log-out{
        margin-bottom: 0;
        align-self: self-start;
    }


    h2{
        margin-top: 10%;
    }

    form{
        margin-top: 6%
    }

    .search-input {
        width: 100% !important;
        margin: 0;
        margin-top: 3%;
        margin-bottom: 3%;
        padding: 8px;
    }

    .submit-search {
        width: 100%;
        padding: 6px 20px;
    }

     .game-card {
        height: 130px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items:end;
    }

    .game-name, .game-price-container, .game-actions {
        width: 100%;
    }


    .game-name {
        /* Force the name to take up both columns (the whole top row) */
        grid-column: span 2; 
        text-align: center;
        margin-bottom: 5px;

        white-space: normal; 
    }

    .game-price-container {
        /* This will naturally sit in the bottom-left (Column 1) */
        justify-content: center;
        text-align: center;
    }

    .game-actions {
        /* This will naturally sit in the bottom-right (Column 2) */
        grid-column: span 1; /* Reset from your previous 'span 2' */
        text-align: center;
    }

    .steam-link {
        width: 50%; /* Optional: makes the button fill its half of the card */
        box-sizing: border-box;
    }

}

@media (max-width: 675px) {
    #title-h1{
        font-size: 3em;
    }

    .results-list {
        flex-wrap: wrap;
    }

    .results-list strong, .results-list form {
        width: 80%;
    }

    .results-list form{
        margin-top: 2.5%;
    }
}

@media (max-width: 500px) {
    .search-form{
        justify-content: center;
    }

    .search-text{
        margin: 0;
    }
}

@media (max-width: 440px) {
    #title-h1{
        margin-top: 12%;

        font-size: 2.3em;
    }
}

@media (max-width: 320px) {
    #title-h1{
        font-size: 1.9em;
    }
}