/**
 * "Have a question? Ask us." — button + modal.
 * ---------------------------------------------------------------
 * The modal chrome (dark backdrop, centered card, header/close button,
 * --bd-donl-* tokens, .bd-donl-start-btn's pill styling) is entirely
 * .bd-donl-overlay's own CSS from bd-design-online.css, loaded first —
 * this file only styles what's actually new here: the button itself and
 * the form fields inside the modal.
 */

/* Alignment (Left/Center/Right — see the "Button alignment" radio group
   in class-bd-settings-admin.php) is controlled here via flexbox
   justify-content on the wrapper, not on the button itself, so the
   button always sizes to its own content regardless of which alignment
   is selected. */
.bd-ask-question-wrap {
    display: flex;
    clear: both;
    margin: 6px 0 10px;
}

.bd-ask-question-align-left {
    justify-content: flex-start;
}

.bd-ask-question-align-center {
    justify-content: center;
}

.bd-ask-question-align-right {
    justify-content: flex-end;
}

.bd-ask-question-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 320px;
    padding: 12px 20px;
    border-radius: 999px;
    border: 2px solid #1a2f5c;
    background: transparent;
    color: #1a2f5c;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.bd-ask-question-btn:hover,
.bd-ask-question-btn:focus {
    background: #1a2f5c;
    color: #fff;
}

.bd-ask-question-btn svg {
    flex: none;
    width: 18px;
    height: 18px;
}

/* Inside the .bd-product-cta-row flex row (see bd-design-online.css) —
   same equal-width-with-wrap treatment as Design Online/Order Fast when
   Ask a Question happens to render alongside them. This button isn't
   part of that row itself (it renders below it, at a later hook
   priority — see class-bd-ask-question-button.php) but keeping widths
   visually consistent avoids it looking like a mismatched third size. */
.bd-ask-question-modal .bd-donl-body {
    padding-top: 4px;
}

.bd-ask-question-intro {
    margin: 0 0 16px;
    color: #6a7182;
    font-size: 13px;
}

.bd-ask-question-label {
    display: block;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bd-donl-navy, #1a2f5c);
}

.bd-ask-question-label input,
.bd-ask-question-label textarea {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 10px 14px;
    border: 1.5px solid var(--bd-donl-border, #e5e7ec);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    color: #1a1a2e;
    box-sizing: border-box;
    resize: vertical;
}

.bd-ask-question-label input:focus,
.bd-ask-question-label textarea:focus {
    outline: none;
    border-color: var(--bd-donl-orange, #e8622c);
}

/* Honeypot — invisible and unreachable by a real visitor (off-screen,
   not display:none/visibility:hidden, since some bots specifically skip
   fields hidden that way but still fill in off-screen ones — the point
   is a REAL person tabbing/scrolling through the form never sees or
   reaches it, not just that it's invisible). */
.bd-ask-question-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.bd-ask-question-error {
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #fdecea;
    color: #a33;
    font-size: 13px;
}

.bd-ask-question-submit {
    margin-top: 4px;
}

.bd-ask-question-success {
    text-align: center;
    padding: 20px 0;
    color: var(--bd-donl-navy, #1a2f5c);
    font-size: 15px;
    font-weight: 600;
}