/**
 * JK Find Forhandler - Styles
 *
 * @package    JK Find forhandler
 * @author     Michael Sønderup Nielsen
 * @company    Joomlakonsulenten
 * @email      michael@joomlakonsulenten.dk
 * @website    https://www.joomlakonsulenten.dk
 * @copyright  Copyright (C) 2025 Joomlakonsulenten
 * @license    GNU General Public License v2 or later
 */

/* Module Container */
.jk-find-forhandler {
    margin: 1rem 0;
}

.jk-find-forhandler__wrapper {
    width: 100%;
    max-width: 600px;
}

/* Match VirtueMart search styling */
.jk-find-forhandler .search {
    display: block !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    overflow: hidden !important;
}

.jk-find-forhandler .search .inputbox {
    width: 61% !important;
    background: #322018 !important;
    color: #fff !important;
    font-size: 16px !important;
    border: none !important;
    padding: 0px !important;
    border-radius: 8px !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.jk-find-forhandler .search .button {
    margin: -3px 0 0 -15px !important;
    padding: 0 !important;
    width: 39% !important;
    height: 36px !important;
    min-height: 36px !important;
    line-height: 36px !important;
    background: #A4CF57 !important;
    color: #fff !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    border: none !important;
    display: inline-block !important;
    text-align: center !important;
    vertical-align: middle !important;
    cursor: pointer !important;
}

/* Desktop styles (1220px and up) */
@media only screen and (min-width: 1220px) {
    .jk-find-forhandler .search .inputbox {
        width: 400px !important;
        height: 38px !important;
        background: #322018 !important;
        color: #fff !important;
        font-size: 14px !important;
        font-family: quasimoda, sans-serif !important;
        padding-left: 8px !important;
        padding-top: 2px !important;
        border-radius: 20px !important;
    }

    .jk-find-forhandler .search .button {
        width: 130px !important;
        height: 40px !important;
        line-height: 36px !important;
        background: #c84f3a !important;
        color: #fff !important;
        box-sizing: border-box !important;
        border-radius: 20px !important;
        margin-top: -4px !important;
        margin-left: -38px !important;
        font-size: 14px !important;
        font-family: quasimoda, sans-serif !important;
    }
}

/* Error Message */
.jk-find-forhandler__error {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading Indicator */
.jk-find-forhandler__loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 1rem;
    color: #6c757d;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Spinner Animation */
.jk-find-forhandler__spinner {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: #007bff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.jk-find-forhandler__loader-text {
    font-size: 0.95rem;
}

/* Accessibility - Visually Hidden */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Responsive Design - handled by template CSS */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .jk-find-forhandler__error,
    .jk-find-forhandler__loader,
    .jk-find-forhandler__spinner {
        animation: none;
        transition: none;
    }
}