/*
3E1E68 # Purple
5D2F77 # Lighter Purple
E45A92 # Peach
FFACAC # Pink
*/

.new {
    font-family: sans-serif; /* terminal-style font */
    color: white;       /* green text */
    background-color: #3E1E68; /* black background */
    border-radius: 1rem;
}

.new-h {
    padding: 0rem;
    margin: 0rem;
}

.new-p {
    padding: 0rem;
    margin: 0rem;
}

.new-div {
    display: flex;
    flex-direction: column;
    background-color: #5D2F77;
    border-radius: 1rem;
    padding: 0.5rem;
    margin: 0.5rem;
    gap: 0.5rem;
    word-wrap: break-word;      /* Legacy, works in most browsers */
    overflow-wrap: break-word;  /* Modern standard */
}

.new-nav-container {
    display: flex;
    flex-wrap: wrap;       /* allows wrapping to new line */
    gap: 0.5rem;           /* spacing between pills */
    background-color: #FFACAC; /* nav background */
    border-radius: 1rem;
    padding: 0.5rem;
    margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}

.new-nav-entry {
    display: inline-flex;       /* makes height match content nicely */
    align-items: center;        /* vertically center text */
    padding: 0.2rem 0.8rem;     /* small vertical padding, more horizontal */
    background-color: #E45A92;
    color: white;
    text-decoration: none;
    border-radius: 1rem;       /* keeps the ends rounded */
    font-size: 1rem;
    line-height: 1;             /* match height exactly to text */
    white-space: nowrap;        /* prevents text from breaking inside pill */
    transition: background-color 0.2s ease;
}

.new-nav-entry.active {
    background-color: white;
    color: #E45A92
}

.new-nav-entry:hover {
    background-color: #FFACAC;
}

.new-img {
    border-radius: 1rem;
}

.poll-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
    color: white;
}

.poll-label {
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.poll-label input[type="text"] {
    padding: 0.4rem;
    border-radius: 0.5rem;
    border: none;
    background-color: #3E1E68;
    color: white;
}

.vote-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.vote-option input[type="radio"] {
    display: none;
}

.vote-option img {
    display: block;
    width: 120px;
    border-radius: 0.8rem;
    border: 3px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

/* Highlight selected option */
.vote-option input[type="radio"]:checked + img {
    border-color: #FFACAC;
}

.vote-btn {
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 0.8rem;
    background-color: #E45A92;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    align-self: flex-start;
}

.vote-btn:hover {
    background-color: #FFACAC;
}