/*
 * Clay Prompt Generator — Public Styles v1.2.0
 * Structural CSS only. Visual values come from CSS custom properties
 * injected by the shortcode. Fallbacks keep the widget usable with
 * zero configuration against any theme.
 */

.clay-prompt-wrap {
    padding: 20px 0;
    background-color:    var(--clay-wrap-bg-color, transparent);
    background-image:    var(--clay-wrap-bg-image, none);
    background-size:     var(--clay-wrap-bg-size, cover);
    background-position: var(--clay-wrap-bg-position, center);
}

.clay-prompt-wrap .clay-title {
    color: var(--clay-title-color, inherit);
}

/* Button overrides — only apply if vars are set */
.clay-prompt-wrap .clay-generate-btn {
    background-color: var(--clay-btn-bg-color, revert);
    color:            var(--clay-btn-text-color, revert);
    border-color:     var(--clay-btn-bg-color, revert);
    transition: background-color 0.2s, color 0.2s;
    cursor: pointer;
}

.clay-prompt-wrap .clay-generate-btn:hover {
    background-color: var(--clay-btn-hover-color, revert);
    border-color:     var(--clay-btn-hover-color, revert);
}

.clay-prompt-wrap .clay-generate-btn.clay-btn-image {
    background:  none;
    border:      none;
    padding:     0;
    line-height: 0;
}

.clay-prompt-wrap .clay-generate-btn.clay-btn-image img {
    display: block;
    max-height: 80px;
    cursor: pointer;
}

/* Output box */
.clay-prompt-wrap #clay-output-wrap {
    position: relative;
    margin-top: 20px;
}

.clay-prompt-wrap #clay-output-close {
    position:   absolute;
    top:        6px;
    right:      8px;
    background: none;
    border:     none;
    font-size:  18px;
    line-height: 1;
    cursor:     pointer;
    opacity:    0.5;
    padding:    0;
    color:      inherit;
}

.clay-prompt-wrap #clay-output-close:hover {
    opacity: 1;
}

.clay-prompt-wrap #output {
    padding: 20px 36px 20px 20px; /* right padding leaves room for close button */
    width: 100%;
    box-sizing: border-box;
    min-height: 80px;
    height: auto;
    background-color:    var(--clay-box-bg-color, transparent);
    background-image:    var(--clay-box-bg-image, none);
    background-size:     var(--clay-box-bg-size, cover);
    background-position: var(--clay-box-bg-position, center);
    border: 2px solid var(--clay-box-border-color, currentColor);
    border-radius: 6px;
    font-size:   var(--clay-output-font-size, 1.2em);
    font-weight: 700;
    display: grid;
    grid-template-columns: max-content max-content 1fr;
    align-content: center;
    gap: 2px 8px;
}

.clay-prompt-wrap .clay-cat {
    text-align: right;
    opacity: 0.75;
    color: var(--clay-cat-color, inherit);
}

.clay-prompt-wrap .clay-sep {
    text-align: center;
    color: var(--clay-sep-color, inherit);
}

.clay-prompt-wrap .clay-val {
    text-align: left;
    color: var(--clay-val-color, inherit);
}