.login__container {
    margin: 20px auto;
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
}
.faq, .login, .register { 
    flex: 1; 
    background: #fff;
    border-radius: 8px;
    width: 100%;
}
.login, .register {
    background-color: #024735;
    color: #fff;
    padding: 2rem 4rem;
}
.login__form, .register__form {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.login__link, .register__link {
    color: #fff;
}
.register__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 5px;
}
.register__grid input,
.register__grid select {
    min-width: 0;
}
.register__col {
    grid-column: span 4;
}
.register__col--half {
    grid-column: span 6;
}
.register__fieldset {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.register__label {
    font-size: 0.8rem;
    opacity: 0.75;
    letter-spacing: 0.5px;
}
.keypad {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(6, 50px);
    gap: 10px;
    margin: 15px 0;
    
}
.keypad .key {
    border: none;
    border-radius: 50%;
    aspect-ratio: 1 / 1; 
    font-size: 20px; 
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    cursor: pointer;
    max-width: 60px;
    color: #333;
}
.keypad .clear {
    background-color: #dc3545;
    color:#fff; 
}
.keypad .del {
    background-color: #0d6efd; 
    color:#fff; 
}
.keypad .clear:hover {
    background-color: #bb2d3b; 
}
.keypad .del:hover {
    background-color: #93c5fd; 
}
.keypad button:hover {
  background-color: #F2C94C;
}

@media (max-width: 1024px) {
    .login, .register {
        flex-direction: column;
        padding: 10px;
    }
    .login__form, .register {
        padding: 1rem 2rem;
        box-sizing: border-box;
    }
    .keypad {
        grid-template-columns: repeat(4, 50px); 
    }
}

.faq__accordion-item {
    margin-bottom: 5px;
}
.faq__accordion-item:last-child {
    border-bottom: none;
}
.faq__accordion-trigger {
    width: 100%;
    padding: 15px 20px;
    cursor: pointer;
    border: none;
    text-align: left;
    font-size: 14px;
    letter-spacing: 1px;
    color: #333;
    text-transform: uppercase;
    transition: background-color 0.2s;
    border-radius: 10px;
}
.faq__accordion-trigger:hover, .faq__accordion-trigger[aria-expanded="true"] {
    background-color: #f5f5f5;
}