/* Ovládací panel, Slot, Vstup a Tlačidlá */
@layer components {
    .search {
        & .search__control-panel {
            position: relative;
            background: var(--color-panel);
            padding: var(--space-l);
            border-radius: 2px;
            box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.5);
            display: flex;
            flex-direction: column;
            gap: var(--space-m);

            @media (max-width: 768px) {
                padding: var(--space-s);
            }

            & .search__upper-controls {
                display: flex;
                justify-content: space-around;
                align-items: center;
                gap: var(--space-l);
                padding: var(--space-m);
                background: rgba(0,0,0,0.1);
                border-radius: 4px;
                margin-bottom: var(--space-s);

                @media (max-width: 768px) {
                    flex-direction: column;
                    gap: var(--space-m);
                }
            }

            & .search__vfd-container {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 4px;

                & .search__vfd-display {
                    background: #050a05;
                    color: #7df9ff; /* Mentolovo zelená */
                    font-family: 'VT323', monospace;
                    font-size: 24px;
                    padding: 8px 15px;
                    border: 3px solid #1a1a1a;
                    border-radius: 2px;
                    box-shadow:
                        inset 0 0 10px #000,
                        0 0 15px rgba(125, 249, 255, 0.3); /* Glow */
                    text-shadow: 0 0 8px rgba(125, 249, 255, 0.8);
                    min-width: 140px;
                    text-align: center;
                    letter-spacing: 2px;
                    position: relative;

                    /* Mriežka pred číslami */
                    &::before {
                        content: '';
                        position: absolute;
                        inset: 0;
                        background:
                            linear-gradient(rgba(125, 249, 255, 0.05) 1px, transparent 1px),
                            linear-gradient(90deg, rgba(125, 249, 255, 0.05) 1px, transparent 1px);
                        background-size: 3px 3px;
                        pointer-events: none;
                        z-index: 1;
                    }
                }
            }

            & .search__print-container {
                & .search__button-print {
                    background: #f0ead6; /* Pôvodne biela, zožltnutá */
                    border: 2px solid #555;
                    border-radius: 4px;
                    padding: 12px 25px;
                    cursor: pointer;
                    position: relative;
                    box-shadow:
                        inset 1px 1px 1px rgba(255,255,255,0.8),
                        inset -2px -2px 4px rgba(0,0,0,0.2),
                        0 4px 6px rgba(0,0,0,0.3);
                    transition: all 0.1s;
                    overflow: hidden;

                    &[data-active="true"] {
                        background: #ffae42; /* Jantárová žiara */
                        box-shadow:
                            inset 0 0 20px rgba(255, 255, 255, 0.5),
                            0 0 15px rgba(255, 174, 66, 0.6);
                        & .search__button-print-text {
                            color: #000;
                            text-shadow: none;
                        }
                    }

                    &:active {
                        transform: translateY(2px);
                        box-shadow: inset 2px 2px 5px rgba(0,0,0,0.4);
                    }

                    & .search__button-print-text {
                        font-family: var(--font-retro);
                        font-weight: bold;
                        color: #444;
                        text-shadow: 0.5px 0.5px 1px rgba(255,255,255,0.5);
                    }
                }
            }

            & .search__form {
                display: flex;
                flex-direction: column;
                gap: var(--space-m);
            }

            & .search__input-slot {
                position: relative;
                background: #1a1a1a;
                padding: 5px;
                border: 2px solid #555;
                box-shadow: inset 0 0 10px #000;
                margin: 10px;

                & .search__input {
                    width: 100%;
                    background: transparent;
                    border: none;
                    color: var(--color-phosphor);
                    font-family: var(--font-retro);
                    font-size: var(--size-step-1);
                    padding: var(--space-s);
                    outline: none;

                    &::placeholder {
                        color: rgba(0, 255, 65, 0.2);
                    }
                }

                & .search__input-label {
                    position: absolute;
                    top: -12px;
                    left: 10px;
                    background: #000; /* Dymo štítok */
                    color: #fff;
                    padding: 1px 8px;
                    border-radius: 2px;
                    font-size: 8px;
                    font-weight: bold;
                    letter-spacing: 1px;
                    box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
                    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2);
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    z-index: 10;
                }
            }

            & .search__buttons {
                display: flex;
                gap: var(--space-m);
                padding: 10px;
                width: 33.333%; /* Tlačidlá na 1/3 šírky */
                margin-inline: auto; /* Vycentrovanie */

                @media (max-width: 768px) {
                    padding: 5px;
                    gap: 5px;
                    width: 100%; /* Na mobile necháme plnú šírku pre lepšie ovládanie */
                }
            }

            & .search__button {
                flex-grow: 1;
                padding: var(--space-s);
                border: 1px solid rgba(0, 0, 0, 0.2);
                border-radius: 2px; /* Zmenené z 4px pre ostrejší retro vzhľad */
                font-family: var(--font-retro);
                font-size: 14px;
                font-weight: bold;
                text-transform: uppercase;
                cursor: pointer;
                position: relative;
                color: #444; /* Tmavšie písmo na svetlom podklade */

                @media (max-width: 768px) {
                    padding: 8px 4px;
                    font-size: 10px;
                }

                /* 3D efekt masívneho plastového bloku so zožltnutím */
                background: linear-gradient(to top, #b4a15e 0%, #f0ead6 100%); /* Slonovinová s gradientom */

                box-shadow:
                    inset 1px 1px 2px rgba(255, 255, 255, 0.8), /* Horný odlesk */
                    inset -2px -2px 4px rgba(0, 0, 0, 0.2),    /* Vnútorné preliačenie */
                    4px 4px 0 rgba(0, 0, 0, 0.6),             /* Vonkajší masívny tieň */
                    0 6px 10px rgba(0, 0, 0, 0.3);

                transition: transform 0.05s, box-shadow 0.05s;

                &:active {
                    transform: translateY(3px); /* Fyzický posun nadol */
                    box-shadow:
                        inset 2px 2px 5px rgba(0, 0, 0, 0.4), /* Hlbšie stlačenie */
                        1px 1px 0 rgba(0, 0, 0, 0.4);         /* Zmenšený vonkajší tieň */
                }

                &--scan {
                    /* Zelený akcent len na spodnom okraji alebo jemný odtieň */
                    border-bottom: 4px solid #2d5a27;
                }

                &--reset {
                    border-bottom: 4px solid #8b2a2a;
                }

                &--eject {
                    border-bottom: 4px solid #444;
                }

                & .search__button-text {
                    text-shadow: 0.5px 0.5px 1px rgba(255, 255, 255, 0.5);
                }
            }
        }
    }
}