/* Public CSS for NSCOESN Validate Membership Plugin */

/* Custom NSCOESN button class - independent of WordPress theme */
.nscoesnvm-search-button {
    /* Core button styling - SEO Plugin Independent */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;

    /* Theme-aware colors for compatibility */
    background-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);

    /* Typography */
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 400;
    font-family: inherit;
    line-height: 1.2;

    /* Layout and spacing */
    padding: 16px 36px;
    border-radius: 10px;
    border: none;

    /* Interactions */
    transition: all 0.2s ease;
    text-decoration: none;
    text-align: center;

    /* Focus accessibility */
    outline-offset: 2px;
}

.nscoesnvm-search-button:active {
    /* Click state with theme accent border */
    border-color: var(--wp--preset--color--accent-4);
    border-width: 1px;
    border-style: solid;
}

.nscoesnvm-search-button:disabled {
    /* Disabled state for processing */
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}

/* Icon positioning within buttons */
.nscoesnvm-search-button .nscoesnvm-button-icon {
    display: inline-block;
    vertical-align: middle;
    margin: 0 4px;
}

#nscoesnvm-result {
    margin-top: 10px;
    padding: 10px;
    border-radius: 4px;
    /* Inherit font-weight from theme */
}

#nscoesnvm-result p {
    margin: 0;
}

/* Used to centre member foil on page */
.nscoesnvm-member-foil-image {
    display: block;
    margin: 0 auto;
}

/* Gutenberg block editor styles */
.wp-block-nscoesnvm-preview {
    border: 1px dashed #ccc;
    padding: 20px;
    max-width: 500px;
    margin: 20px 0;
}

.wp-block-nscoesnvm-preview .wp-block-search__input {
    width: 140px;
}

.wp-block-nscoesnvm-preview .wp-block-search__input.nscoesnvm-valid {
    border-color: #46b450 !important;
    box-shadow: 0 0 0 1px #46b450 !important;
}

.wp-block-nscoesnvm-preview .wp-block-search__input.nscoesnvm-invalid {
    border-color: #dc3232 !important;
    box-shadow: 0 0 0 1px #dc3232 !important;
}

.wp-block-nscoesnvm-result {
    margin-top: 10px;
    color: #666;
}

/* Loading animation for search feedback */
.nscoesnvm-loading {
    display: inline-block;
    color: #666;
    /* Inherit font-weight and font-size from theme */
}

.loading-dots::after {
    content: '';
    display: inline-block;
    animation: loading-dots 2s infinite ease-in-out;
    /* Inherits color and font-weight from theme/parent */
    margin-left: 4px;
}

@keyframes loading-dots {
    0%, 8% { content: '.'; }
    12%, 25% { content: '. .'; }
    25.1%, 37.5% { content: '.  . .'; }
    37.5%, 50% { content: '. . . .'; }
    56.25%, 62.5% { content: '. . . . .'; }
    62.5%, 75% { content: '. . . . . .'; }
    75%, 87.5% { content: '. . . . . . .'; }
    87.5%, 100% { content: '. . . . . . . .'; }
}