/*
Theme Name: TechConnect
Text Domain: TechConnect
Version: 1.0
Description: Inputs Styles
Author: KB
*/

.input-group, .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.input-field {
    position: relative;
    width: 100%;
}

.input-field input, .input-field select {
    position: relative;
    width: 100%;
    padding: 16px 12px;
    border-width: 1px;
    border-style: solid;
    border-color: #2121213D;
    border-radius: 4px;
    background-color: transparent;
    transition: all 150ms linear;
}

.input-field select::after {
    position: absolute;

}

.input-field input:focus-visible {
    outline: 2px solid #F08C21;
    border-color: #F08C21;
    outline-offset: -1px;
}

.input-field input::placeholder {
    color: #21212152;
}

.input-field label {
    display: block;
    text-align: left;
    font-size: 0.875rem;
    margin-bottom: 4px;
    color: #212121B8;
}

.selector-field-tray {
    position: absolute;
    display: none;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 8px 0px;
    background-color: white;
    border-radius: 6px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 50;
}

.selector-field-tray .tray-item {
    color: black;
    text-align: left;
    cursor: pointer;
}

.selector-field-tray .tray-item p {
    margin: 8px 4px;
    padding: 8px;
    border-bottom: 1px solid #2121213D;
}

.selector-field-tray .tray-item:hover {
    background-color: #FFC88B29;
}

.selector-field-tray.active {
    display: block;
}

/* Dark */
.input-group.dark label {
    color: #FFFFFFB8;
}

.input-group.dark input {
    border-color:#FFFFFF3D;
}

.input-group.dark input::placeholder {
    color: #FFFFFF52;
}