/*!
 * WMHD – Modern WordPress Helpdesk & Knowledgebase Pro
 * Frontend Stylesheet
 *
 * Table of Contents
 * 1. Layout
 * 2. Cards and Panels
 * 3. Tables and Forms
 * 4. Ticket UI
 * 5. Knowledgebase UI
 * 6. Utilities
 * 7. Responsive
 */

/* ==========================================================================
   1. Layout
   ========================================================================== */

/* ==========================================================================
   2. Cards and Panels
   ========================================================================== */

/* ==========================================================================
   3. Tables and Forms
   ========================================================================== */

/* ==========================================================================
   4. Ticket UI
   ========================================================================== */

/* ==========================================================================
   5. Knowledgebase UI
   ========================================================================== */

/* ==========================================================================
   6. Utilities
   ========================================================================== */

/* ==========================================================================
   7. Responsive
   ========================================================================== */

.wmhd-front {
    max-width:1080px;
    margin:0 auto;
    padding:20px}

.wmhd-front-card {
    background:#fff;
    border:1px solid #e8ecf3;
    border-radius:20px;
    padding:24px;
    box-shadow:0 6px 22px rgba(16,24,40,.05);
    margin-bottom:20px}

.wmhd-front-head h2,.wmhd-front-head h3 {
    margin:0 0 6px}

.wmhd-front-head p {
    margin:0 0 18px;
    color:#667085}

.wmhd-grid-2 {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px}

.wmhd-front label {
    display:block;
    font-weight:600;
    margin:12px 0 8px}

.wmhd-front input,.wmhd-front select,.wmhd-front textarea {
    width:100%;
    max-width:100%;
    padding:13px 14px;
    border:1px solid #d5dae1;
    border-radius:12px;
    background:#fff;
    color:#101828;
    line-height:1.45;
    min-height:52px;
    box-sizing:border-box}

.wmhd-front textarea {
    min-height:auto}

.wmhd-select-fix,.wmhd-front select {
    appearance:none!important;
    -webkit-appearance:none!important;
    -moz-appearance:none!important;
    background-color:#fff!important;
    color:#101828!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23667085' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;
    background-position:right 14px center!important;
    background-size:18px 18px!important;
    padding-right:42px!important}

.wmhd-front select option {
    color:#101828;
    background:#fff}

.wmhd-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 18px;
    border:none;
    border-radius:12px;
    background:#2f6fed;
    color:#fff;
    font-weight:700;
    cursor:pointer}

.wmhd-btn.secondary {
    background:#eef4ff;
    color:#23408e}

.wmhd-btn-spaced {
    margin-top:18px}

.wmhd-alert {
    margin-top:14px;
    padding:12px 14px;
    border-radius:12px}

.wmhd-alert.success {
    background:#ecfdf3;
    color:#027a48}

.wmhd-alert.error {
    background:#fef3f2;
    color:#b42318}

.wmhd-ticket-list {
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:18px}

.wmhd-ticket-item {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:16px;
    border:1px solid #e8ecf3;
    border-radius:14px;
    background:#fafbfc}

.wmhd-ticket-side {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end}

.wmhd-muted {
    font-size:13px;
    color:#667085;
    margin-top:6px}

.wmhd-thread-front {
    display:flex;
    flex-direction:column;
    gap:12px;
    margin:18px 0;
    max-height:480px;
    overflow:auto}

.wmhd-thread-bubble {
    padding:14px;
    border-radius:14px;
    border:1px solid #e8ecf3;
    background:#fafbfc}

.wmhd-thread-bubble.agent {
    background:#f5f8ff}

.wmhd-thread-meta {
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-size:12px;
    color:#667085;
    margin-bottom:8px}

.wmhd-kb-search {
    display:flex;
    gap:10px;
    margin-bottom:18px}

.wmhd-kb-search input {
    flex:1}

.wmhd-kb-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px}

.wmhd-kb-item {
    padding:16px;
    border-radius:14px;
    border:1px solid #e8ecf3;
    background:#fafbfc}

.wmhd-kb-item h3 {
    margin-top:0}

.wmhd-toolbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    margin-bottom:16px}

.wmhd-toolbar-right {
    display:flex;
    gap:10px;
    align-items:center}

.wmhd-user-chip {
    padding:10px 14px;
    border:1px solid #d5dae1;
    border-radius:999px;
    background:#fafbfc}

.wmhd-pill {
    display:inline-flex;
    padding:6px 10px;
    border-radius:999px;
    background:#eef4ff;
    color:#23408e;
    font-size:12px;
    text-transform:capitalize}

.wmhd-pill.status {
    background:#f2f4f7;
    color:#344054}

.wmhd-pill.overdue {
    background:#fef3f2;
    color:#b42318}

.wmhd-pagination-front {
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:12px;
    margin-top:14px}

.wmhd-attachment-list {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:10px}

.wmhd-attachment-list a {
    display:inline-flex;
    padding:6px 10px;
    border-radius:999px;
    background:#eef4ff;
    text-decoration:none}

.wmhd-front input[readonly] {
    background:#f8fafc}

.wmhd-kb-hero {
    text-align:center;
    padding:18px 0 28px}

.wmhd-kb-hero h1 {
    margin:0 0 12px;
    font-size:36px;
    line-height:1.18;
    font-weight:800}

.wmhd-kb-hero p {
    max-width:760px;
    margin:0 auto;
    color:#667085;
    font-size:16px;
    line-height:1.7}

.wmhd-kb-category-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px}

.wmhd-kb-category-card {
    display:flex;
    gap:16px;
    padding:20px;
    border-radius:18px;
    background:#fff;
    border:1px solid #e8ecf3;
    box-shadow:0 6px 22px rgba(16,24,40,.05);
    text-decoration:none;
    color:#101828;
    transition:transform .15s ease, box-shadow .15s ease;
    min-height:170px}

.wmhd-kb-category-card:hover {
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(16,24,40,.08)}

.wmhd-kb-category-icon {
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:#2f6fed;
    color:#fff;
    font-size:26px;
    flex:none}

.wmhd-kb-category-body h3 {
    margin:2px 0 8px;
    font-size:22px;
    line-height:1.25;
    font-weight:800}

.wmhd-kb-category-body p {
    margin:0 0 14px;
    color:#667085;
    line-height:1.65;
    font-size:15px}

.wmhd-kb-category-meta {
    font-size:14px;
    color:#667085}

.wmhd-kb-filter-row {
    display:grid;
    grid-template-columns:2fr 1fr auto;
    gap:12px;
    margin-bottom:20px}

.wmhd-kb-article-list {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px}

.wmhd-kb-article-card {
    padding:18px;
    border:1px solid #e8ecf3;
    border-radius:16px;
    background:#fafbfc}

.wmhd-kb-article-card h3 {
    margin:0 0 12px}

.wmhd-kb-article-card p {
    margin:0 0 14px;
    color:#667085;
    line-height:1.6}

.wmhd-kb-breadcrumb {
    display:flex;
    gap:8px;
    align-items:center;
    color:#667085;
    font-size:14px;
    margin-bottom:18px;
    flex-wrap:wrap}

.wmhd-kb-breadcrumb a {
    text-decoration:none}

.wmhd-kb-single h1 {
    margin:0 0 10px;
    font-size:42px;
    line-height:1.2}

.wmhd-kb-single-meta {
    color:#667085;
    margin-bottom:18px}

.wmhd-kb-single-content {
    line-height:1.8}

.wmhd-kb-single-content img {
    max-width:100%;
    height:auto;
    border-radius:12px}


@media (max-width:1180px) {
    .wmhd-kb-category-grid {
    grid-template-columns:1fr 1fr}

.wmhd-kb-category-body h3 {
    font-size:20px}

.wmhd-kb-category-body p {
    font-size:14px}

.wmhd-kb-category-icon {
    width:56px;
    height:56px;
    font-size:24px}

}


@media (max-width:768px) {
    .wmhd-grid-2,.wmhd-kb-grid,.wmhd-kb-category-grid,.wmhd-kb-article-list {
    grid-template-columns:1fr}

.wmhd-ticket-item,.wmhd-toolbar {
    flex-direction:column;
    align-items:flex-start}

.wmhd-kb-search,.wmhd-kb-filter-row {
    flex-direction:column;
    display:flex}

.wmhd-toolbar-right {
    width:100%;
    flex-wrap:wrap}

.wmhd-kb-hero h1 {
    font-size:30px}

.wmhd-kb-hero p {
    font-size:15px}

.wmhd-kb-category-card {
    padding:18px;
    min-height:unset}

.wmhd-kb-category-icon {
    width:54px;
    height:54px;
    font-size:22px}

.wmhd-kb-category-body h3 {
    font-size:20px}

.wmhd-kb-category-body p {
    font-size:14px}

}



.wmhd-kb-mini-meta {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
    color:#667085;
    font-size:13px}


.wmhd-kb-mini-pill {
    display:inline-flex;
    padding:4px 10px;
    border-radius:999px;
    background:#2f6fed;
    color:#fff;
    font-size:12px;
    font-weight:700}


.wmhd-kb-readmore {
    text-decoration:none;
    font-weight:700;
    color:#2f6fed}


.wmhd-kb-article-hero {
    text-align:center;
    padding:18px 0 34px}


.wmhd-kb-date-pill {
    display:inline-flex;
    padding:8px 14px;
    border:1px solid #dbe2ea;
    border-radius:999px;
    background:#fff;
    color:#667085;
    font-size:13px;
    margin-bottom:16px}


.wmhd-kb-article-hero h1 {
    margin:0 auto;
    max-width:860px;
    font-size:48px;
    line-height:1.2}


.wmhd-kb-single-card {
    max-width:980px;
    margin:0 auto 20px;
    background:#fff;
    border:1px solid #e8ecf3;
    border-radius:20px;
    padding:26px;
    box-shadow:0 6px 22px rgba(16,24,40,.05)}


.wmhd-kb-single-content {
    line-height:1.8;
    color:#344054}


.wmhd-kb-single-content h2,.wmhd-kb-single-content h3 {
    margin-top:28px}


.wmhd-kb-single-content ul {
    padding-left:22px}



@media (max-width:768px) {

  .wmhd-kb-article-hero h1 {
    font-size:34px}


  .wmhd-kb-single-card {
    padding:18px}


}




.wmhd-kb-single-card {
    background:#fff;
    border:1px solid #e8ecf3;
    border-radius:24px;
    padding:28px;
    box-shadow:0 6px 22px rgba(16,24,40,.05);
    margin-bottom:24px}


.wmhd-kb-article-hero {
    text-align:center;
    padding:22px 0 26px}


.wmhd-kb-article-hero h1 {
    font-size:42px;
    line-height:1.15;
    margin:14px 0 0}


.wmhd-kb-date-pill {
    display:inline-flex;
    padding:10px 16px;
    border:1px solid #d5dae1;
    border-radius:999px;
    background:#fff;
    color:#667085;
    font-size:14px}


.wmhd-kb-feedback-row {
    display:flex;
    gap:12px;
    align-items:center;
    padding-top:18px;
    margin-top:18px;
    border-top:1px solid #eef1f6}


.wmhd-kb-vote-form {
    margin:0}


.wmhd-kb-react {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border:1px solid #d5dae1;
    border-radius:999px;
    background:#fff;
    color:#101828;
    cursor:pointer;
    font-weight:600}


.wmhd-kb-react.like:hover {
    background:#eef4ff}


.wmhd-kb-react.dislike:hover {
    background:#fef3f2}


.wmhd-kb-comments-wrap {
    margin-top:26px;
    padding-top:18px;
    border-top:1px solid #eef1f6}


.wmhd-kb-comments-wrap h3 {
    margin:0 0 16px;
    font-size:24px}


.wmhd-kb-comment-form textarea {
    width:100%;
    margin-top:12px}


.wmhd-kb-comment-list {
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:18px}


.wmhd-kb-comment-item {
    padding:16px;
    border:1px solid #e8ecf3;
    border-radius:16px;
    background:#fafbfc}


.wmhd-kb-comment-head {
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center;
    margin-bottom:10px;
    font-size:13px;
    color:#667085}


.wmhd-kb-comment-body {
    line-height:1.7;
    color:#101828}


.wmhd-kb-empty {
    color:#667085}



@media (max-width:768px) {

  .wmhd-kb-article-hero h1 {
    font-size:32px}


  .wmhd-kb-single-card {
    padding:20px}


  .wmhd-kb-feedback-row {
    flex-wrap:wrap}


  .wmhd-kb-comment-head {
    flex-direction:column;
    align-items:flex-start}


}



/* ==========================================================================
   Extra Helpers
   ========================================================================== */
.wmhd-form-block {
    display: block;
}


.wmhd-alert-with-action{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.wmhd-mini-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:10px;background:#ffffff;color:#0f172a;border:1px solid #b7e3ca;text-decoration:none;font-weight:600}
.wmhd-editor-wrap{margin-bottom:10px}
.wmhd-editor-wrap .wp-editor-wrap{border-radius:14px;overflow:hidden}
.wmhd-attachment-preview{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.wmhd-preview-item{width:116px;border:1px solid #d5dae1;border-radius:14px;padding:8px;background:#fafbfc}
.wmhd-preview-thumb{display:block;width:100%;height:72px;object-fit:cover;border-radius:10px;margin-bottom:8px}
.wmhd-preview-file{display:flex;align-items:center;justify-content:center;width:100%;height:72px;border-radius:10px;background:#eef4ff;color:#23408e;font-weight:700;margin-bottom:8px}
.wmhd-preview-name{font-size:12px;line-height:1.35;color:#475467;word-break:break-word}
.wmhd-ticket-single-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px;border:1px solid #e8ecf3;border-radius:16px;background:#fafbfc;margin-bottom:18px}
.wmhd-ticket-single-main h3{margin:0 0 8px;font-size:28px}
.wmhd-ticket-single-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.wmhd-ticket-single-section{margin-bottom:18px}
@media (max-width:768px){
  .wmhd-alert-with-action{align-items:flex-start}
  .wmhd-ticket-single-head{flex-direction:column}
  .wmhd-ticket-single-tags{justify-content:flex-start}
}


/* Ticket view cleanup */
body.page-slug-ticket-view .entry-title,
body.page-slug-ticket-view .page-title,
body.page-slug-ticket-view .elementor-page-title,
body.page-slug-ticket-view h1.wp-block-post-title,
body.page-slug-ticket-view .ast-archive-description,
body.page-slug-ticket-view .ast-single-post-order,
body.page-slug-ticket-view .entry-header{display:none!important}

.wmhd-alert-with-action{display:flex;align-items:center;justify-content:space-between;gap:14px}
.wmhd-mini-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:10px;background:#027a48;color:#fff;text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap}
.wmhd-mini-btn:hover{color:#fff;opacity:.95}
.wmhd-editor-wrap .wp-editor-wrap{background:#fff}
.wmhd-editor-wrap .mce-toolbar-grp{border-bottom:1px solid #e5e7eb}
.wmhd-ticket-view-page .wmhd-front-head p{margin-bottom:10px}
.wmhd-rendered-message p{margin:0 0 12px;line-height:1.75}
.wmhd-rendered-message p:last-child{margin-bottom:0}
.wmhd-rendered-message ul,.wmhd-rendered-message ol{margin:0 0 12px 20px}
.wmhd-attachment-list{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.wmhd-attachment-chip{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border-radius:14px;background:#f5f8ff;border:1px solid #dbe7ff;color:#23408e;text-decoration:none;max-width:100%}
.wmhd-attachment-chip:hover{color:#1d4ed8;background:#eef4ff}
.wmhd-attachment-thumb{width:42px;height:42px;object-fit:cover;border-radius:10px;flex:none}
.wmhd-attachment-icon{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;background:#2f6fed;color:#fff;font-size:11px;font-weight:700;flex:none}
.wmhd-attachment-label{display:block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:1.4}
.wmhd-ticket-single-section h4{margin-bottom:12px}
@media (max-width:768px){.wmhd-alert-with-action{flex-direction:column;align-items:flex-start}.wmhd-attachment-label{max-width:160px}}


.wmhd-required{color:#dc2626;font-weight:700}
.wmhd-required-note{margin:0 0 12px;color:#667085;font-size:14px}