/* =============================================================================
   WP Post Discussion & Author Box — Frontend Styles  v1.0.0
   ============================================================================= */

:root {
  --wpd-primary:       #2563eb;
  --wpd-primary-dark:  #1d4ed8;
  --wpd-primary-light: #eff6ff;
  --wpd-success:       #16a34a;
  --wpd-warning:       #f59e0b;
  --wpd-danger:        #ef4444;
  --wpd-text:          #1e293b;
  --wpd-text-muted:    #64748b;
  --wpd-border:        #e2e8f0;
  --wpd-bg:            #f8fafc;
  --wpd-white:         #ffffff;
  --wpd-radius:        14px;
  --wpd-radius-sm:     8px;
  --wpd-shadow:        0 1px 3px rgba(0,0,0,.07), 0 4px 18px rgba(0,0,0,.07);
  --wpd-shadow-hover:  0 6px 20px rgba(0,0,0,.11), 0 2px 6px rgba(0,0,0,.07);
  --wpd-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ============================================================
   Wrapper
   ============================================================ */
.wpd-wrapper {
  font-family:   var(--wpd-font);
  color:         var(--wpd-text);
  max-width:     100%;
  width:         100%;
  margin:        2rem 0;
  line-height:   1.6;
  font-size:     15px;
}
.wpd-wrapper * { box-sizing: border-box; }

/* ============================================================
   1. AUTHOR BOX
   ============================================================ */
.wpd-author-box {
  display:       flex;
  align-items:   flex-start;
  gap:           1.4rem;
  background:    var(--wpd-white);
  border:        1px solid var(--wpd-border);
  border-radius: var(--wpd-radius);
  padding:       1.5rem 1.75rem;
  box-shadow:    var(--wpd-shadow);
  margin-bottom: .875rem;
}

.wpd-author-avatar-wrap {
  position:  relative;
  flex-shrink: 0;
}

.wpd-author-avatar {
  width:         90px;
  height:        90px;
  border-radius: 50%;
  object-fit:    cover;
  display:       block;
  border:        3px solid var(--wpd-primary-light);
  box-shadow:    0 2px 10px rgba(37,99,235,.15);
}

.wpd-verified-badge {
  position:        absolute;
  bottom:          3px;
  right:           3px;
  width:           24px;
  height:          24px;
  background:      var(--wpd-success);
  border:          2.5px solid var(--wpd-white);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      0 1px 4px rgba(0,0,0,.2);
}
.wpd-verified-badge svg { width: 14px; height: 14px; }

.wpd-author-info { flex: 1; min-width: 0; }

.wpd-author-name {
  font-size:   1.2rem;
  font-weight: 700;
  color:       var(--wpd-text);
  margin:      0 0 .15rem;
  line-height: 1.3;
}

.wpd-author-title {
  font-size:     .82rem;
  color:         var(--wpd-text-muted);
  font-weight:   500;
  display:       block;
  margin-bottom: .55rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.wpd-author-rating {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  flex-wrap:   wrap;
  margin-bottom: .55rem;
}

.wpd-stars { display: inline-flex; gap: 1px; }

.wpd-star          { font-size: 1.15rem; line-height: 1; }
.wpd-star-full     { color: #f59e0b; }
.wpd-star-half     { color: #f59e0b; opacity: .55; }
.wpd-star-empty    { color: #d1d5db; }

.wpd-customers {
  font-size:   .8rem;
  color:       var(--wpd-text-muted);
  font-weight: 600;
}

.wpd-specialties {
  font-size:   .82rem;
  color:       var(--wpd-text-muted);
  margin:      .35rem 0 0;
  line-height: 1.55;
}
.wpd-specialties strong { color: var(--wpd-text); font-weight: 600; }
.wpd-read-more          { color: var(--wpd-primary); font-weight: 500; cursor: pointer; }

.wpd-author-bio {
  font-size:   .82rem;
  color:       var(--wpd-text-muted);
  margin:      .4rem 0 0;
}

/* ============================================================
   2. POST HEADER
   ============================================================ */
.wpd-post-header {
  display:       flex;
  align-items:   center;
  gap:           1rem;
  background:    linear-gradient(130deg, #2563eb 0%, #1d4ed8 100%);
  color:         var(--wpd-white);
  border-radius: var(--wpd-radius);
  padding:       1.1rem 1.6rem;
  margin-bottom: .875rem;
  box-shadow:    0 4px 20px rgba(37,99,235,.3), 0 1px 4px rgba(0,0,0,.08);
}

.wpd-post-header-icon {
  flex-shrink:     0;
  width:           42px;
  height:          42px;
  background:      rgba(255,255,255,.15);
  backdrop-filter: blur(4px);
  border-radius:   10px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          1px solid rgba(255,255,255,.2);
}
.wpd-post-header-icon svg { width: 22px; height: 22px; }

.wpd-post-header-content { flex: 1; min-width: 0; }

.wpd-post-header-label {
  font-size:      .72rem;
  opacity:        .8;
  margin:         0 0 .2rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight:    600;
  color:          #ffffff;
}

.wpd-post-title {
  font-size:   .95rem;
  font-weight: 700;
  margin:      0;
  line-height: 1.4;
  color:       #ffffff !important;
  white-space: normal;
  word-break:  break-word;
}

.wpd-header-right {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  flex-shrink: 0;
  flex-wrap:   wrap;
  justify-content: flex-end;
}

.wpd-qa-count {
  display:         inline-flex;
  align-items:     center;
  gap:             .3rem;
  background:      rgba(255,255,255,.15);
  color:           #ffffff;
  font-size:       .72rem;
  font-weight:     600;
  padding:         .25rem .7rem;
  border-radius:   999px;
  border:          1px solid rgba(255,255,255,.25);
  white-space:     nowrap;
}
.wpd-qa-count svg { width: 13px; height: 13px; }

.wpd-badge {
  flex-shrink:    0;
  background:     rgba(255,255,255,.18);
  color:          #ffffff;
  font-size:      .72rem;
  font-weight:    700;
  padding:        .28rem .8rem;
  border-radius:  999px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border:         1px solid rgba(255,255,255,.3);
}

/* ============================================================
   3. DISCUSSION SECTION
   ============================================================ */
.wpd-discussion-section {
  background:    var(--wpd-white);
  border:        1px solid var(--wpd-border);
  border-radius: var(--wpd-radius);
  box-shadow:    var(--wpd-shadow);
  overflow:      hidden;
}

/* ============================================================
   QUESTION FORM
   ============================================================ */
.wpd-ask-form-wrap {
  padding:       1.5rem 1.75rem;
  border-bottom: 1px solid var(--wpd-border);
  background:    var(--wpd-bg);
}

.wpd-form-title {
  display:       flex;
  align-items:   center;
  gap:           .5rem;
  font-size:     1rem;
  font-weight:   700;
  color:         var(--wpd-text);
  margin:        0 0 1.2rem;
}
.wpd-form-title svg {
  width:      20px;
  height:     20px;
  color:      var(--wpd-primary);
  flex-shrink: 0;
}

.wpd-ask-form {
  display:        flex;
  flex-direction: column;
  gap:            .9rem;
}

.wpd-form-row--2col {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   .9rem;
}

.wpd-form-group {
  display:        flex;
  flex-direction: column;
  gap:            .3rem;
}

.wpd-form-group label {
  font-size:   .82rem;
  font-weight: 600;
  color:       var(--wpd-text);
}
.wpd-required { color: var(--wpd-danger); }

.wpd-form-group input[type="text"],
.wpd-form-group input[type="email"],
.wpd-form-group textarea {
  width:       100%;
  padding:     .6rem 1rem;
  border:      1.5px solid var(--wpd-border);
  border-radius: var(--wpd-radius-sm);
  font-family: var(--wpd-font);
  font-size:   .9rem;
  color:       var(--wpd-text);
  background:  var(--wpd-white);
  transition:  border-color .18s ease, box-shadow .18s ease;
  -webkit-appearance: none;
  appearance:  none;
}
.wpd-form-group input:focus,
.wpd-form-group textarea:focus {
  outline:      none;
  border-color: var(--wpd-primary);
  box-shadow:   0 0 0 3.5px rgba(37,99,235,.13);
}
.wpd-form-group input::placeholder,
.wpd-form-group textarea::placeholder { color: #b0b9c6; }

.wpd-form-group textarea {
  resize:     vertical;
  min-height: 105px;
}

.wpd-char-count {
  font-size: .75rem;
  color:     var(--wpd-text-muted);
  text-align: right;
}

.wpd-form-footer {
  display:     flex;
  align-items: center;
  gap:         1.1rem;
  flex-wrap:   wrap;
}

.wpd-submit-btn {
  display:     inline-flex;
  align-items: center;
  gap:         .45rem;
  background:  var(--wpd-primary);
  color:       var(--wpd-white);
  border:      none;
  border-radius: var(--wpd-radius-sm);
  padding:     .65rem 1.45rem;
  font-family: var(--wpd-font);
  font-size:   .9rem;
  font-weight: 600;
  cursor:      pointer;
  transition:  background .18s, transform .12s, box-shadow .18s;
  box-shadow:  0 2px 10px rgba(37,99,235,.35);
  line-height: 1.4;
}
.wpd-submit-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.wpd-submit-btn:hover {
  background:  var(--wpd-primary-dark);
  box-shadow:  0 4px 16px rgba(37,99,235,.45);
  transform:   translateY(-1px);
}
.wpd-submit-btn:active { transform: translateY(0); }
.wpd-submit-btn:disabled { opacity: .62; cursor: not-allowed; transform: none; }

.wpd-form-note {
  display:     flex;
  align-items: center;
  gap:         .35rem;
  font-size:   .78rem;
  color:       var(--wpd-text-muted);
  margin:      0;
}
.wpd-form-note svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--wpd-warning); }

/* Honeypot: completely hidden from real users, only bots fill it */
.wpd-hp-field {
  position:       absolute;
  left:           -9999px;
  top:            -9999px;
  opacity:        0;
  height:         0;
  overflow:       hidden;
  pointer-events: none;
}

.wpd-form-message {
  padding:       .75rem 1rem;
  border-radius: var(--wpd-radius-sm);
  font-size:     .875rem;
  font-weight:   500;
  display:       none;
}
.wpd-form-message.wpd-success {
  background: #dcfce7;
  color:      #166534;
  border:     1px solid #bbf7d0;
  display:    block;
}
.wpd-form-message.wpd-error {
  background: #fef2f2;
  color:      #991b1b;
  border:     1px solid #fecaca;
  display:    block;
}

/* ============================================================
   THREADS LIST
   ============================================================ */
.wpd-threads-wrapper {
  padding:        1.25rem 1.75rem;
  display:        flex;
  flex-direction: column;
  gap:            1.1rem;
}

.wpd-thread {
  border:        1px solid var(--wpd-border);
  border-radius: var(--wpd-radius-sm);
  overflow:      hidden;
  transition:    box-shadow .2s ease;
}
.wpd-thread:hover { box-shadow: var(--wpd-shadow-hover); }

.wpd-thread-question {
  display:    flex;
  gap:        .875rem;
  padding:    1rem 1.1rem;
  background: var(--wpd-bg);
}

.wpd-thread-avatar {
  width:           42px;
  height:          42px;
  min-width:       42px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       .78rem;
  font-weight:     700;
  letter-spacing:  .02em;
}
.wpd-avatar-user   { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; }
.wpd-avatar-expert { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; }

.wpd-thread-body { flex: 1; min-width: 0; }

.wpd-thread-meta {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  flex-wrap:   wrap;
  margin-bottom: .35rem;
}

.wpd-thread-author {
  font-size:   .875rem;
  font-weight: 700;
  color:       var(--wpd-text);
}

.wpd-thread-time {
  font-size: .75rem;
  color:     var(--wpd-text-muted);
}
.wpd-thread-time::before { content: '·'; margin-right: .35rem; }

.wpd-replied-badge {
  display:         inline-flex;
  align-items:     center;
  gap:             .25rem;
  background:      #dcfce7;
  color:           #16a34a;
  font-size:       .7rem;
  font-weight:     700;
  padding:         .15rem .55rem;
  border-radius:   999px;
  letter-spacing:  .03em;
  text-transform:  uppercase;
  border:          1px solid #bbf7d0;
}
.wpd-replied-badge svg { width: 11px; height: 11px; flex-shrink: 0; }

.wpd-thread-content {
  font-size:   .9rem;
  color:       var(--wpd-text);
  line-height: 1.7;
}

/* ============================================================
   REPLIES
   ============================================================ */
.wpd-replies { border-top: 1px solid var(--wpd-border); }

.wpd-reply {
  padding:     1rem 1.1rem 1rem 1.4rem;
  border-left: 3px solid var(--wpd-primary);
  background:  var(--wpd-white);
}
.wpd-reply + .wpd-reply { border-top: 1px solid var(--wpd-border); }

.wpd-reply-header {
  display:     flex;
  align-items: center;
  gap:         .75rem;
  margin-bottom: .6rem;
}

.wpd-reply-avatar {
  width:         40px;
  height:        40px;
  min-width:     40px;
  border-radius: 50%;
  object-fit:    cover;
  border:        2px solid var(--wpd-primary-light);
}

.wpd-reply-meta {
  display:     flex;
  align-items: center;
  gap:         .35rem;
  flex-wrap:   wrap;
  font-size:   .82rem;
}
.wpd-reply-role   { color: var(--wpd-primary); font-weight: 700; }
.wpd-reply-author { font-weight: 600; color: var(--wpd-text); }

.wpd-verified-inline {
  display:     inline-flex;
  align-items: center;
  color:       var(--wpd-success);
}
.wpd-verified-inline svg { width: 15px; height: 15px; }

.wpd-reply-content {
  font-size:   .9rem;
  color:       var(--wpd-text);
  line-height: 1.7;
}

.wpd-reply-footer {
  margin-top:  .65rem;
  padding-top: .55rem;
  border-top:  1px solid var(--wpd-border);
}

.wpd-helpful-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             .35rem;
  background:      none;
  border:          1.5px solid var(--wpd-border);
  border-radius:   999px;
  padding:         .3rem .85rem;
  font-family:     var(--wpd-font);
  font-size:       .78rem;
  font-weight:     600;
  color:           var(--wpd-text-muted);
  cursor:          pointer;
  transition:      all .18s ease;
  line-height:     1.4;
}
.wpd-helpful-btn svg        { width: 14px; height: 14px; flex-shrink: 0; }
.wpd-helpful-btn:hover:not(:disabled) {
  border-color: var(--wpd-success);
  color:        var(--wpd-success);
  background:   #f0fdf4;
}
.wpd-helpful-btn.wpd-helpful-voted,
.wpd-helpful-btn:disabled {
  border-color: var(--wpd-success);
  color:        var(--wpd-success);
  background:   #f0fdf4;
  cursor:       default;
}
.wpd-helpful-count { font-weight: 700; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.wpd-empty {
  text-align: center;
  padding:    3rem 1.5rem;
  color:      var(--wpd-text-muted);
}
.wpd-empty svg {
  width:   52px;
  height:  52px;
  opacity: .3;
  margin:  0 auto .75rem;
  display: block;
}
.wpd-empty p { font-size: .95rem; margin: 0; }

/* ============================================================
   PAGINATION
   ============================================================ */
.wpd-pagination {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             .45rem;
  padding:         1rem 1.5rem;
  border-top:      1px solid var(--wpd-border);
  flex-wrap:       wrap;
  background:      var(--wpd-bg);
}

.wpd-page-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       36px;
  height:          36px;
  padding:         0 .6rem;
  border:          1.5px solid var(--wpd-border);
  border-radius:   var(--wpd-radius-sm);
  font-size:       .875rem;
  font-weight:     600;
  color:           var(--wpd-text-muted);
  text-decoration: none;
  transition:      all .18s ease;
  background:      var(--wpd-white);
  cursor:          pointer;
}
.wpd-page-btn:hover {
  border-color: var(--wpd-primary);
  color:        var(--wpd-primary);
  background:   var(--wpd-primary-light);
  text-decoration: none;
}
.wpd-page-btn.wpd-page-active {
  background:   var(--wpd-primary);
  border-color: var(--wpd-primary);
  color:        var(--wpd-white);
  box-shadow:   0 2px 10px rgba(37,99,235,.35);
}

/* ============================================================
   LOADING OVERLAY
   ============================================================ */
.wpd-threads-loading {
  opacity:    .45;
  pointer-events: none;
  transition: opacity .2s;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .wpd-author-box {
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    padding:        1.25rem;
  }
  .wpd-author-rating { justify-content: center; }

  .wpd-form-row--2col { grid-template-columns: 1fr; }

  .wpd-header-right { display: none; }
  .wpd-post-header  { gap: .6rem; }
  .wpd-post-title   { font-size: .88rem; white-space: normal; word-break: break-word; }

  .wpd-form-footer { flex-direction: column; align-items: flex-start; }

  .wpd-threads-wrapper,
  .wpd-ask-form-wrap { padding: 1rem; }

  .wpd-submit-btn { width: 100%; justify-content: center; }

  .wpd-thread-question,
  .wpd-reply { padding: .875rem; }
}