@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* +
* ==============================================================
* Project name: Craigslist Redesign
* Goals: 
* - Redesign: 
*   - Make it look nicer
*   - Make it intuitive
*   - Maintain brand identity
*
* - Practise CSS
* ==============================================================
+ */



:root {
    /* +
*       Variable Colours
+ */
    --font-one: rgb(255, 255, 255);

    --bg-one: rgb(30, 30, 30);
    --bg-two: rgb(20, 20, 20);
    --bg-price: rgb(17, 131, 23);

    --border-one: rgb(140, 0, 255);


    /* +
*       Typography
    + */
    font-family: 'Noto Sans', sans-serif;
    font-size: 10px;
    color: var(--font-one);
    background-color: var(--bg-one);
}

body {
    margin: 0;
    padding: 0;
    font-size: 2rem;
    height: 100dvh;
}

.Nav {
    position: fixed;
    width: 100dvw;
    height: 100dvh;
    z-index: 500;
}

.Navbar {
    width: 100%;
    height: 7rem;
    background-color: var(--bg-two);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 4rem 0 2rem;
    z-index: 502;
    position: relative;
}

.Title {
    display: flex;
    align-items: center;
    font-size: 3rem;
    font-weight: 600;
    background: linear-gradient(to right, #a050fc, #641dac);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.custom-select {
    position: relative;
    width: 20rem;
    background: linear-gradient(to right, #a050fc, #641dac);
    color: white;
    border-radius: 1rem;
    padding: 1rem;
    transition: border-radius 0.3s ease;
    user-select: none;
    margin: 2rem 0;
    height: 4rem;
}

.selected-option{
    content: "";
    position: absolute;
    width: 21rem;
    height: 5rem;
    background-color: var(--bg-two);
    top: 0.5rem;
    right: 0.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-select.active {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.custom-select:hover .selected-option {
    cursor: pointer; /* add cursor: pointer; here */
}

.options {
    position: absolute;
    top: 0;
    left: 100%;
    width: 20rem; /* adjust as needed */
    max-height: 500px;
    overflow: auto;
    background: linear-gradient(to left, #a050fc, #641dac);
    color: var(--font-one);
    border-radius: 1rem;
    transition: 0.3s ease-in-out;
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
}

.options.inactive {
    cursor: default;
    z-index: 0;
}

.options.active {
    opacity: 1;
    transform: translateY(0);
    cursor: pointer; /* moved cursor: pointer; here */
    border-top-left-radius: 0;
    z-index: 1;
    pointer-events: all;
}

.option {
    position: relative;
    padding: 10px;
    transition: 0.3s ease-in-out;
    z-index: 0;
}

.options.active .option {
    cursor: pointer;
    z-index: 1;
}

.option::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to left, #8e35f0, #53198a);
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
    z-index: -1;
}

.option:hover::before {
    opacity: 1;
}

.Leftnav {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 30rem;
    box-sizing: border-box;
    padding: 2rem;
    background-color: var(--bg-two);
}

.LeftnavCurve {
    position: absolute;
    top: 0;
    right: -2rem;
    background-color: var(--bg-one);
    width: 2rem;
    height: 2rem;
    border-radius: 2rem 0 0 0;
}

.LeftnavCurve::before {
    position: absolute;
    width: 2rem;
    height: 2rem;
    content: '';
    background-color: var(--bg-two);
    z-index: -1;
}

.LogoWrapper {
    display: flex;
}

.RightTN {
    width: calc(100% - 25.5rem);
    height: 7rem;
    margin-right: -4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.Icons {
    position: absolute;
    right: 0;
    width: 25rem;
    height: 5rem;
    display: flex;
    align-items: center;
}

.Post {
    width: 20rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.Post a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-decoration: none;
    color: var(--font-one);
    font-size: 2rem;

}

.Account {
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Searchbar {
    width: 70rem;
    height: 5rem;
    background: linear-gradient(to bottom, #a050fc, #641dac);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    border: none;
    padding: 0;
}

.Searchbar::after {
    position: absolute;
    width: 69.5rem;
    height: 4.5rem;
    content: '';
    background-color: var(--bg-two);
    border-radius: 0.75rem;
    z-index: 1;
}

.Searchbar input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    z-index: 2;
    color: var(--font-one);
    font-size: 2rem;
    padding: 1rem;
    box-sizing: border-box;
}

.Searchbar input:focus {
    outline: none;

}

.ToggleWrapperOne {
    width: 22rem;
    height: 5rem;
    border-radius: 5rem;
    box-sizing: border-box;
    background: linear-gradient(to right, #a050fc, #641dac);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 0.75rem;
}

.ToggleWrapperOne::after {
    content: '';
    position: absolute;
    width: 21rem;
    height: 4.2rem;
    background-color: var(--bg-one);
    border-radius: 6rem;
}

.ToggleWrapperOne hr {
    width: 0.5rem;
    height: 90%;
    background-color: rgb(129, 54, 211);
    border: 0;
    border-radius: 1rem;
    z-index: 502;
}

.Toggle {
    width: 10rem;
    height: 4rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    position: relative;
    z-index: 502;
}

.Toggle::after {
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #8e35f0, #53198a);
    opacity: 0;
    position: absolute;
    border-radius: 5rem;
    transition: 0.2s ease-in-out;
    top: 0;
    left: 0;
    cursor: pointer;
}

.Toggle:hover::after {
    opacity: 1;
}

.Toggle span {
    position: relative;
    z-index: 2;
    color: var(--font-one);
    font-size: 2rem;
    cursor: pointer;
}

.Toggle.active {
    background-color: #a050fc;
    transition: 0.2s ease-in-out;
    border-radius: 2rem;
}

.Toggle.active::after, .Toggle.active:hover::after {
    background: #a050fc;
    opacity: 1;
}

.ContentWrapper {
    width: 100dvw;
    height: max-content;
    box-sizing: border-box;
    padding: 11rem 4rem 4rem 34rem;
}

.Content {
    width: 100%;
}

.TopToggles {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.TTLeft, .TTMiddle, .TTRight {
    width: 30rem;
    height: 7rem;
    display: flex;
    align-items: center;
}

.TTLeft {
    gap: 2rem;
    justify-content: space-between;
}

.TTMiddle {
    width: 50rem;
    display: flex;
    gap: 0.25rem;
}

.TTRight {
    justify-content: flex-end;
}

.TTLBox {
    position: relative;
    width: 15rem;
    height: 5rem;
    background: linear-gradient(to right, #a050fc, #641dac);
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 1rem;
    cursor: pointer;
}

.TTLBox::after {
    content: '';
    position: absolute;
    width: 13.3rem;
    height: 4.5rem;
    background-color: var(--bg-one);
    border-radius: 1rem;
}

.TTLBox span {
    z-index: 502;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 1rem;
}

.TTRBox {
    width: 15rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background: linear-gradient(to left, #a050fc, #641dac);
    border-radius: 1rem;
    cursor: pointer;
    /* z-index: 501; */
}

.TTRBox::after {
    content: '';
    position: absolute;
    width: 14.5rem;
    height: 4.5rem;
    background-color: var(--bg-one);
    border-radius: 1rem;
}

.TTRBox span {
    z-index: 502;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 1rem;
}

.TTMBox {
    height: 5rem;
    width: 5rem;
    border-radius: 1rem;
    background: linear-gradient(to left, #a050fc, #641dac);
    display: flex;
    align-items: center;
    justify-content: center;
}

.TTMBox::after {
    content: '';
    position: absolute;
    width: 4.5rem;
    height: 4.5rem;
    background-color: var(--bg-one);
    border-radius: 1rem;
}

.TTMBox#LeftMost {
    border-radius: 1rem 0.5rem 0.5rem 1rem;
}

.TTMBox#LeftMost::after {
    border-radius: 1rem 0.5rem 0.5rem 1rem;
}

.TTMBox#RightMost::after {
    border-radius: 0.5rem 1rem 1rem 0.5rem;
}

.TTMBox#RightMost::after svg path {
    transform: translateX(-1);
}

.TTMBox#RightMost {
    border-radius: 0.5rem 1rem 1rem 0.5rem;
    background: linear-gradient(to right, #a050fc, #641dac);
}

.TTMCounter {
    position: relative;
    width: 25rem;
    height: 5rem;
    border-radius: 1rem;
    margin: 0 2rem;
    background: linear-gradient(to top, #a050fc, #641dac);
    display: flex;
    align-items: center;
    justify-content: center;
}

#counterText {
    width: 24.5rem;
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-one);
    border-radius: 0.75rem;
}

.TTMBSVGWrapper {
    width: 5rem;
    height: 5rem;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.Listings {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4rem;
}

.Listing {
    width: 100%;
    height: 30rem;
    background-color: var(--bg-two);
    border: 0.25rem solid var(--border-one);
    box-sizing: border-box;
    padding: 1rem;
    border-radius: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* z-index: 550; */
    transition: 0.1s ease-in-out;
    cursor: pointer;
}

.Listing:hover {
    transform: scale(1.05);
}

.LTitle {
    width: 100%;
    height: 5.5rem;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
            line-clamp: 2;
    -webkit-box-orient: vertical;  
}

.LImage {
    width: 100%;
    height: 15rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
}

.LImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.LBottom {
    width: 100%;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.LBottom span {
    display: flex;
    height: 100%;
    align-items: center;
    width: 16rem;
}

.LBPrice {
    position: absolute;
    right: 0;
    width: 9rem;
    height: 100%;
    background-color: var(--bg-price);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
}

.PPInput form,
.PPEdit form {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.PPInput,
.PPEdit {
    height: 7rem;
    width: 93rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.PPInput input,
.PPInput button,
.PPEdit input,
.PPEdit button {
    height: 100%;
    width: 15rem;
    background-color: var(--bg-two);
    border: none;
    color: var(--font-one);
    font-size: 2rem;
    padding: 1rem;
    box-sizing: border-box;
    border-radius: 1rem;
}

.PPInput input:focus,
.PPEdit input:focus {
    outline: none;
}

.PPInput input[type="number"]::-webkit-inner-spin-button,
.PPInput input[type="number"]::-webkit-outer-spin-button, 
.PPEdit input[type="number"]::-webkit-inner-spin-button, 
.PPEdit input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.PPInput input[type="number"], 
.PPEdit input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.action-button {
    height: 20rem;
    width: 8rem;
    border: none;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    background-color: var(--bg-two);
    border: 0.2rem solid var(--border-one);
    border-left: none;
    border-top: none;
    font-family: 'Noto Sans', sans-serif;
    font-size: 2rem;
}

.delete-button {
    background-color: #f44336; /* Red */
    color: white;
}

.edit-button {
    background-color: #4CAF50; /* Green */
    color: white;
}

table {
    border-collapse: collapse;
}

th, td {
    max-width: 20rem;
    max-height: 7rem;
    background-color: var(--bg-two);
    border: 0.2rem solid var(--border-one);
    min-width: 15rem;
    text-align: center;
    overflow: hidden;
    word-break: break-all;
    overflow-wrap: break-word;
}

/* .PPEdit {
    width: max-content;
} */

.ActionsWrapper {
    width: 100dvw;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 5rem;
    gap: 5rem;
}