/* Estilos para a página de pesquisa */

#banner-container #banner-search-container {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

#search-container {
    display: flex;
    position: absolute;
    width: 100vw;
    height: 100vh;
    background: var(--color-background-primary);
    color: var(--color-font-primary);
    overflow: hidden;
}

/* Painel esquerdo - Teclado virtual */
#search-left-panel {
    width: 45vw;
    margin-right: -6vw;
    height: 100vh;
    padding: 2vh 2vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, var(--color-background-secondary), var(--color-background-primary));

}

/* Container do input de pesquisa */
#search-input-container {
    margin-bottom: 2vh;
    display: flex;
    flex-direction: column;
    gap: 1vh;
    width: 27vw;
    max-width: 500px;
    align-self: center;
}

#virtual-keyboard-container{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    max-width: 29vw;
    align-items: center;
    justify-content: center;
}

#search-input {
    width: 26vw;
    padding: 1.5vh 2vw;
    font-size: var(--font-description);
    font-weight: 500;
    background: #3535357a;
    color: var(--color-font-primary);
    border: none;
    height: 7vh;
    border-radius: var(--parental-password-input-radius);
    outline: none;
    font-family: inherit;   
}

#search-input:focus {
    border-color: var(--color-app-primary);
    box-shadow: 0 0 0 2px rgba(var(--color-app-primary-rgb), 0.3);
}

#search-button {
    padding: 1.5vh 3vw;
    font-size: 2vh;
    background: linear-gradient(45deg, var(--color-app-primary), var(--color-app-secondary));
    color: var(--color-font-primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    outline: none;
}

#search-button:hover,
#search-button.focused {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(var(--color-app-primary-rgb), 0.4);
}

#search-button:focus {
    box-shadow: 0 0 0 3px var(--color-app-primary);
}

/* Teclado virtual */
.virtual-keyboard {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    max-width: 500px;
    width: 500px;
    height: auto;
    justify-content: center;
    margin: 0 auto;
    align-self: center;
}

.virtual-key {
    padding: 8px;
    background: transparent ;
    color: white;
    border: none;
    border-radius: var(--parental-password-btn-radius);
    cursor: pointer;
    font-size: 2.5vh;
    font-weight: bold;
    height: 7vh;
    width: 7vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.5vh;
}

.virtual-key:hover,
.virtual-key.focused {
    background: var(--color-app-primary);
    border-color: var(--color-app-primary);
    transform: scale(1.05);
    box-shadow: 0 0 0 0px var(--color-app-primary);
    background: linear-gradient(45deg, var(--color-app-primary), var(--color-app-secondary)) !important;
}

.virtual-key:focus {
    box-shadow: 0 0 0 0px var(--color-app-primary);
    background: linear-gradient(45deg, var(--color-app-primary), var(--color-app-secondary)) !important;
}

.virtual-key:active {
    transform: scale(0.95);
}

/* Teclas especiais */
.virtual-key.special {
   
    font-size: 12px;
}

.virtual-key[data-key="Apagar"] {
    grid-column: span 2;
    background: rgba(55, 55, 55, 0.2);
    width: 6vw;
}

.virtual-key[data-key="Espaço"] {
    grid-column: span 2;
    background: rgba(55, 55, 55, 0.2);
    width: 13vw;
}

.virtual-key[data-key="Limpar"] {
    grid-column: span 2;
    background: rgba(55, 55, 55, 0.2);
    width: 6vw;
}

.delete-key:hover,
.delete-key.focused {
    background: var(--color-error-dark, #c0392b);
    border-color: var(--color-error-dark, #c0392b);
}

/* Painel direito - Resultados */
#search-right-panel {
    position: relative;
    width: 56vw;
    top: 19vh;
    height: 80vh;
    overflow-y: hidden;
    background: var(--color-background-primary);
}

#search-results-container {
    width: 100%;
    height: 100%;
}

#search-results-grid {
    width: 100%;
    min-height: 80vh;
}

/* Mensagens de estado */
#search-no-results,
#search-loading {
    position: relative;
    bottom: 55vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#search-no-results p,
#search-loading p {
    font-size: 4vh;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

#search-loading p {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

/* Customização do grid de resultados */
#search-results-grid .swiper {
    padding: 0 !important;
}

#search-results-grid .swiper p {
    font-size: 2.5vh;
    margin-bottom: 2vh;
    color: var(--color-font-primary);
    font-weight: bold;
}

#search-results-grid .movies-limit-card {
    height: 20vh !important;
    border-radius: var(--border-card-radius);
}

#search-results-grid .movies-limit-card:focus {
    border: 3px solid var(--color-app-primary) !important;
    box-shadow: 0 0 15px rgba(var(--color-app-primary-rgb), 0.5);
    transform: scale(0.95) !important;
    transition: none !important;
    animation: none !important;
}

#search-results-grid .swiper-wrapper {
    margin-left: 0 !important;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15vw, 1fr));
    gap: 1vw;
    width: 100% !important;
    transform: none !important;
}

#search-results-grid *,
#search-results-grid .movies-limit-card,
#search-results-grid .swiper-slide {
    transition: none !important;
    animation: none !important;
    transform-origin: center !important;
}

#search-results-grid .swiper-slide {
    width: auto !important;
    margin-right: 0 !important;
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

#search-results-grid .movies-limit-card {
    transition: none !important;
    animation: none !important;
    transform: scale(0.9) !important;
    transform-origin: center !important;
}

#search-results-grid .movies-limit-card img {
    transition: none !important;
    animation: none !important;
}