/*
 * Krumpld Support System — minimal styling.
 *
 * Deliberately neutral: color treatment for the support block was
 * explicitly flagged as undecided when this feature was first
 * scoped. This file handles layout/spacing/states only, and reuses
 * existing classes (kp-order-button, kp-profile-field, kp-profile-input,
 * kr-account-header, kp-order-back-link) wherever the existing design
 * system already covers the need, so this is easy to re-skin later
 * without touching structure.
 */

/*
 * Lock: site-wide ivory canvas (#F0EDE8), per the final decision --
 * header stays independently white (see myaccount.css's comment for
 * the same rule), applied here to the Order Support page specifically.
 *
 * IMPORTANT -- history of this rule, so nobody reintroduces the same
 * two mistakes:
 *   1st attempt used this exact plain body-class mechanism but with
 *   the wrong color (#fff), making the whole page indistinguishable
 *   from the header.
 *   2nd attempt kept chasing that by adding a NESTED wrapper <div>
 *   inside the page's normal content flow to carry the background --
 *   that's what actually caused the boxed/narrow-card look, because
 *   the wrapper was subject to the default page template's own
 *   content-width constraint. A plain body-level background is NOT
 *   subject to that constraint (body always spans full viewport) and
 *   coexists correctly with the header's own independent white
 *   background, which is why this plain version is correct: right
 *   mechanism both times, wrong color the first time, wrong ADDITIONAL
 *   element the second time.
 * Do not add a wrapper div back in. If a wrapper is ever needed for
 * another reason, it must not carry its own background/padding meant
 * to represent the page canvas -- that job belongs to body alone.
 */
body.kr-contact-support-page {
    background: var(--kr-canvas);
}

.kr-support-entry {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--kr-rule);
}

.kr-support-entry__eyebrow {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    color: var(--kr-label);
}

.kr-support-entry__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--kr-ink);
    color: var(--kr-header);
    padding: 1.25rem 1.5rem;
    border-radius: 4px;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.kr-support-entry__link {
    color: var(--kr-header) !important; /* Hardened: some global anchor-color rule elsewhere in the
        cascade was overriding this and making the link invisible against the black
        bar. Scoped to this one small component rather than chasing the exact
        specificity of the conflicting rule. */
    text-decoration: none;
    font-size: 0.85rem;
    white-space: nowrap;
}

.kr-support-entry__link:visited,
.kr-support-entry__link:hover,
.kr-support-entry__link:active {
    color: var(--kr-header) !important;
}

.kr-support-entry__prompt {
    color: var(--kr-header);
}

/*
 * Defensive field spacing. myaccount.css's .kp-profile-field rules
 * were written assuming the My Account page's own wrapper context;
 * loading that stylesheet here (see inc/support.php) should already
 * give reasonable spacing, but these rules guarantee a minimum
 * vertical rhythm on both Support forms even if myaccount.css's own
 * spacing assumes structure we don't have.
 */
.kr-support .kp-profile-field,
.kr-support-entry {
    margin-bottom: 1.5rem;
}

.kr-support .kp-profile-field label {
    display: block;
    margin-bottom: 0.4rem;
}

.kr-support {
    max-width: 640px;
}

.kr-support__intro {
    color: var(--kr-secondary);
    margin-bottom: 2rem;
}

.kr-support__order-card {
    border: 1px solid var(--kr-rule);
    border-radius: 4px;
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
    background: var(--kr-header); /* Explicit now that the page sits on the ivory canvas -- otherwise
        this would blend into the page, showing only its border. */
}

.kr-support__optional {
    color: var(--kr-label);
    font-weight: normal;
}

.kr-support__topic-help {
    font-size: 0.85rem;
    color: var(--kr-secondary);
    margin: 0.25rem 0 0.5rem;
}

.kr-support__gated-panel {
    border: 1px solid var(--kr-rule);
    border-radius: 4px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background: var(--kr-header);
}

.kr-support__gated-headline {
    margin-bottom: 0.5rem;
}

.kr-support__gated-message {
    color: var(--kr-secondary);
    margin-bottom: 1rem;
}

.kr-support__gated-create {
    margin-top: 1rem;
    font-size: 0.9rem;
}

.kr-support__attachments {
    margin: 1.5rem 0;
}

.kr-support__attachment-meta {
    color: var(--kr-label);
    font-weight: normal;
    font-size: 0.85rem;
}

.kr-support__attachment-list {
    list-style: none;
    margin: 0.5rem 0;
    padding: 0;
}

.kr-support__attachment-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--kr-rule);
}

.kr-support__attachment-remove {
    background: none;
    border: none;
    color: #b00020;
    cursor: pointer;
    font-size: 0.8rem;
    text-decoration: underline;
}

.kr-support__attachment-limit-error {
    color: #b00020;
    font-size: 0.85rem;
    margin: 0.5rem 0;
}

.kr-support__attachment-add {
    display: inline-block;
    border: 1px dashed var(--kr-rule);
    border-radius: 4px;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--kr-secondary);
}

.kr-support__error {
    color: #b00020;
    font-size: 0.9rem;
    margin: 1rem 0;
}

/*
 * Scoped to the support forms only -- deliberately not touching the
 * base .kp-order-button rule, since that same class is used elsewhere
 * for compact buttons (Sign In, View My Orders) that should stay as
 * they are.
 */
.kr-support .kp-order-button--primary {
    width: 100%;
    justify-content: center;
}

/*
 * Breathing room before the Email/Instagram fallback cards that follow
 * the generic form -- .kr-contact-method's own border-top divider
 * otherwise sits directly against the Send Message button with no gap.
 * Matches the ~96px rhythm the page already uses between its own major
 * sections (see .kr-contact-intro's margin-bottom in contact.css).
 */
.kr-support--generic + .kr-contact-methods {
    margin-top: 96px;
}

@media (max-width: 640px) {
    .kr-support--generic + .kr-contact-methods {
        margin-top: 64px;
    }
}

.kr-support__success p {
    color: var(--kr-secondary);
}

@media (max-width: 640px) {
    .kr-support-entry__bar {
        flex-direction: column;
        align-items: flex-start;
    }
}