/* KosherShop Support Tickets — customer-facing views rendered entirely
   with the site's own My Account markup (kosher-support-tickets-frontend.php)
   reusing existing ks-* classes (ks-card, ks-order-row, ks-badge, ks-form,
   ks-btn, ks-back-link) directly from kosher-myaccount.css. This file only
   adds the handful of things that don't already exist: the page intro
   block, ticket status badge colors, the meta row, and the conversation. */

.kst-header {
    text-align: center;
    padding: 8px 0 28px;
}
.kst-header h1 {
    font-family: 'Jost', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: #000;
    margin: 0 0 8px;
}
.kst-header p {
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    color: #666;
    margin: 0 0 18px;
}

.kst-empty-state {
    text-align: center;
    padding: 48px 24px;
}
.kst-empty-state h2 {
    font-family: 'Jost', sans-serif;
    font-size: 20px;
    color: #000;
    margin: 0 0 10px;
}
.kst-empty-state p {
    color: #666;
    max-width: 420px;
    margin: 0 auto 20px;
}

/* Ticket status badges — extend the site's existing .ks-badge base
   (already used for order statuses) with our own status colors. */
.ks-badge--ticket-queued     { background: #E6F0FF; color: #0038B8; }
.ks-badge--ticket-hold       { background: #FFF4DC; color: #9A6A00; }
.ks-badge--ticket-processing { background: #E5F9FC; color: #0C8CA3; }
.ks-badge--ticket-closed     { background: #EDEDED; color: #777777; }

.kst-form-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}
/* Create-ticket form: description left-aligned (textareas can inherit an
   ambient center-align from the page's own text-align: center rules),
   and Submit/Cancel matched to equal width instead of auto-sizing to
   each label's text length. */
.kst-ticket-form,
.kst-ticket-form .ks-field,
.kst-ticket-form label,
.kst-ticket-form textarea,
.kst-ticket-form input,
.kst-ticket-form select {
    text-align: left;
}
.kst-ticket-form .kst-form-actions {
    justify-content: flex-start;
}
.kst-ticket-form .kst-form-actions .ks-btn {
    flex: 1 1 0;
    width: auto;
    max-width: 220px;
}

.kst-back-link {
    display: inline-block;
    margin-bottom: 16px;
}

/* Ticket header card */
.kst-ticket-header {
    margin-bottom: 24px;
}
.kst-ticket-header__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.kst-ticket-header__number {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #999;
    letter-spacing: .02em;
    margin-bottom: 4px;
}
.kst-ticket-header__subject {
    font-family: 'Jost', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #000;
    margin: 0;
}
.kst-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #F0F0F0;
    font-size: 14px;
    color: #666;
}
.kst-meta-line span[aria-hidden] {
    color: #ccc;
}
.kst-meta-label {
    font-weight: 600;
    color: #303030;
}

.kst-conversation-heading {
    font-family: 'Jost', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 14px;
}

/* Conversation */
.kst-conversation {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 28px;
}
.kst-message {
    max-width: 80%;
    border-radius: 12px;
    padding: 14px 18px;
    background: #F5F5F5;
}
.kst-message--customer {
    align-self: flex-end;
    background: #E6F0FF;
}
.kst-message--support {
    align-self: flex-start;
    background: #fff;
    box-shadow: 0 0 6px 2px rgb(0 0 0 / 8%);
    border-left: 3px solid #0CC0DF;
}
.kst-message__head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.kst-message__sender {
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #000;
}
.kst-message--customer .kst-message__sender { color: #0038B8; }
.kst-message--support .kst-message__sender { color: #0C8CA3; }
.kst-message__time {
    font-size: 12px;
    color: #999;
}
.kst-message__body {
    font-size: 15px;
    line-height: 1.6;
    color: #303030;
}
.kst-message__body p:first-child { margin-top: 0; }
.kst-message__body p:last-child { margin-bottom: 0; }

.kst-reply-box {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #F0F0F0;
}
.kst-reply-box h3,
.wpas-ticket-details h3 {
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #000;
    margin: 0 0 12px;
}
.kst-reply-box textarea {
    min-height: 90px;
}
.kst-closed-note {
    text-align: center;
    padding: 28px 20px;
}
.kst-closed-note p {
    color: #666;
    margin: 0 0 14px;
}

/* Safety net: if the theme's dynamic endpoint-title element (suppressed
   via the woocommerce_endpoint_my-tickets_title filter on the detail
   view) still reserves layout space when empty, collapse it rather than
   leave a gap. */
.entry-title:empty,
.page-title:empty,
h1.woocommerce-products-header__title:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Responsive */
@media (max-width: 600px) {
    .kst-message {
        max-width: 92%;
    }
    .kst-meta-row {
        gap: 14px;
        padding: 14px 16px;
    }
    .kst-header h1 {
        font-size: 24px;
    }
    .kst-ticket-header__subject {
        font-size: 19px;
    }
    .kst-meta-line {
        flex-direction: column;
        gap: 4px;
    }
    .kst-meta-line span[aria-hidden] {
        display: none;
    }
}