/* ============================================================
   GROW CAPITAL - Contact page & ticket system
   Uses the design tokens from styles.css (:root vars).
   ============================================================ */

.contact-page { padding: 128px 0 100px; background: var(--paper); min-height: 80vh; }

/* Header */
.contact-hero { max-width: 720px; margin-bottom: 46px; }
.contact-title {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800;
  font-size: clamp(38px, 5.5vw, 64px); letter-spacing: -.04em; line-height: 1; margin-top: 10px;
}
.contact-sub { margin-top: 16px; font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.contact-h2 {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700;
  font-size: clamp(24px, 3vw, 32px); letter-spacing: -.03em; line-height: 1.1;
}

/* Contact detail cards */
.contact-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 72px;
}

/* 24x7 support banner */
.support-24{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,var(--green),var(--green-2));color:#fff;border-radius:18px;padding:20px 26px;margin-bottom:24px}
.support-24 .s24-ic{width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.16);display:grid;place-items:center;flex-shrink:0}
.support-24 b{display:block;font-size:17px;letter-spacing:-.01em}
.support-24 span{display:block;font-size:13.5px;color:rgba(255,255,255,.85);margin-top:2px}
.contact-card {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 20px;
  padding: 26px 24px; display: flex; flex-direction: column; gap: 6px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.contact-card:hover { transform: translateY(-4px); border-color: var(--green); box-shadow: 0 16px 34px -18px rgba(15,23,18,.22); }
.cc-ic {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--green-soft); color: var(--green); margin-bottom: 8px;
}
.contact-card h3 { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.contact-card p { font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.contact-card a { font-size: 14px; font-weight: 600; color: var(--green); text-decoration: none; word-break: break-word; }
.contact-card a:hover { text-decoration: underline; }
.cc-fine { font-size: 12.5px; color: var(--ink-3); letter-spacing: .01em; }

/* Ticket section */
.ticket-section {
  background: linear-gradient(160deg, #FBFBF8, #F4F3EC);
  border: 1px solid var(--line); border-radius: 28px; padding: 46px; margin-bottom: 40px;
}
.ticket-intro { max-width: 640px; margin-bottom: 24px; }
.ticket-intro p { margin-top: 12px; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
.btn-lg { padding: 16px 30px; font-size: 15px; }

/* The form card */
.ticket-form-card {
  margin-top: 28px; background: #fff; border: 1px solid var(--line);
  border-radius: 22px; padding: 32px; box-shadow: 0 24px 50px -28px rgba(15,23,18,.2);
}
.tfc-title {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 22px;
  letter-spacing: -.02em; margin-bottom: 22px;
}
.tf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tf-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.tf-field > span { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.tf-field > span em { font-weight: 400; color: var(--ink-3); font-style: normal; }
.tf-field input, .tf-field select, .tf-field textarea {
  font: inherit; font-size: 15px; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 14px; outline: none; width: 100%; transition: border-color .2s, background .2s;
}
.tf-field textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.tf-field input:focus, .tf-field select:focus, .tf-field textarea:focus {
  border-color: var(--green); background: #fff;
}
.tf-error, .track-section .tf-error {
  color: var(--red); font-size: 13.5px; font-weight: 500; min-height: 18px; margin: 4px 0 10px;
}
.tf-actions { display: flex; gap: 12px; align-items: center; margin-top: 4px; }
.tf-note { margin-top: 16px; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }

/* Success */
.ticket-success {
  margin-top: 28px; background: #fff; border: 1px solid rgba(10,110,74,.25);
  border-radius: 22px; padding: 38px; text-align: center;
}
.ts-mark {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--green); color: #fff; font-size: 28px; display: grid; place-items: center;
}
.ticket-success h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 24px; }
.ticket-success p { margin-top: 8px; font-size: 15px; color: var(--ink-2); }
.ts-ref {
  margin: 20px auto; display: inline-block; padding: 14px 26px; border-radius: 14px;
  background: var(--paper-3); border: 1px dashed var(--line-2);
}
.ts-ref .mono { font-size: 24px; font-weight: 600; letter-spacing: .12em; color: var(--ink); }
.ts-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }

/* Track section */
.track-section {
  background: var(--ink); color: var(--paper-2); border-radius: 28px; padding: 46px;
}
.track-section .contact-h2 { color: #fff; }
.track-lead { margin-top: 10px; font-size: 15px; color: rgba(255,255,255,.72); }
.track-form { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.track-form input {
  font: inherit; font-size: 15px; color: #fff; flex: 1; min-width: 180px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px; padding: 13px 15px; outline: none;
}
.track-form input::placeholder { color: rgba(255,255,255,.4); }
.track-form input:focus { border-color: var(--gold-2); background: rgba(255,255,255,.1); }
.track-section .tf-error { color: #F3A79B; }

/* Rendered ticket */
.tk-card {
  margin-top: 24px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px; padding: 26px;
}
.tk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.tk-ref { font-size: 14px; font-weight: 600; letter-spacing: .1em; color: var(--gold-2); }
.tk-subject { font-size: 18px; font-weight: 600; color: #fff; margin-top: 4px; }
.tk-status {
  font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,.1); color: #fff;
}
.tk-status.s-open { background: rgba(224,185,52,.2); color: #F0D06A; }
.tk-status.s-in_progress { background: rgba(13,134,89,.28); color: #6FD3AC; }
.tk-status.s-waiting { background: rgba(96,140,220,.24); color: #A8C2F5; }
.tk-status.s-resolved { background: rgba(13,134,89,.35); color: #7EE0B8; }
.tk-status.s-closed { background: rgba(255,255,255,.12); color: rgba(255,255,255,.6); }
.tk-meta { display: flex; flex-wrap: wrap; gap: 18px; margin: 18px 0; font-size: 13px; color: rgba(255,255,255,.6); }
.tk-meta b { color: rgba(255,255,255,.85); font-weight: 600; margin-right: 5px; }

.tk-thread { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 18px; }
.tk-msg { padding: 14px 16px; border-radius: 14px; max-width: 88%; }
.tk-msg.you { background: rgba(255,255,255,.07); align-self: flex-end; border-bottom-right-radius: 4px; }
.tk-msg.support { background: rgba(13,134,89,.16); border: 1px solid rgba(13,134,89,.3); align-self: flex-start; border-bottom-left-radius: 4px; }
.tk-msg-who { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.85); display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.tk-msg-ts { font-weight: 400; color: rgba(255,255,255,.45); }
.tk-msg-text { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.9); }

.nav-plain { font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; margin-right: 6px; }
.nav-plain:hover { color: var(--green); }

/* loading state reuse */
.btn.loading { opacity: .7; pointer-events: none; }

/* Responsive */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .ticket-section, .track-section { padding: 32px 24px; }
  .ticket-form-card { padding: 24px; }
}
@media (max-width: 560px) {
  .contact-page { padding: 104px 0 72px; }
  .contact-grid { grid-template-columns: 1fr; }
  .tf-row { grid-template-columns: 1fr; }
  .track-form { flex-direction: column; }
  .track-form .btn { width: 100%; }
}

/* ============================================================
   Sign-in card + "Your tickets" inbox (added v2)
   ============================================================ */
.tk-note{margin-top:6px;font-size:13.5px;color:var(--gold-2);font-weight:600}

/* Sign-in card */
.signin-card{background:var(--paper-2);border:1px solid var(--line);border-radius:24px;padding:34px;margin-bottom:24px}
.signin-split{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.signin-copy p{margin-top:10px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.si-label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:8px}
.si-inputrow{display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.si-inputrow:focus-within{border-color:var(--green)}
.si-cc{padding:13px 12px;background:var(--paper-3);font-weight:600;border-right:1px solid var(--line)}
.si-inputrow input{flex:1;padding:13px 14px;border:none;outline:none;font-size:15px;background:#fff}
.signin-form .btn-primary{margin-top:12px;width:100%;justify-content:center;padding:13px}
.signin-form .btn-ghost{margin-top:8px;width:100%;justify-content:center}
.si-otp{display:flex;gap:8px}
.si-otp input{flex:1;text-align:center;font-size:20px;padding:12px 0;border:1px solid var(--line);border-radius:10px;background:#fff;font-family:'JetBrains Mono',monospace;outline:none}
.si-otp input:focus{border-color:var(--green)}

/* Signed-in zone */
.acct-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--green-soft);border:1px solid rgba(10,110,74,.16);border-radius:14px;padding:12px 18px;margin-bottom:22px;font-size:14px;color:var(--ink)}
.acct-bar .btn-ghost{padding:8px 14px;font-size:13px}
.mytix-section{margin-bottom:40px}
.track-lead-2{margin-top:8px;font-size:15px;color:var(--ink-3);margin-bottom:20px}
.mytix-empty{background:var(--paper-2);border:1px dashed var(--line-2);border-radius:16px;padding:34px;text-align:center;color:var(--ink-3)}

.mytix{display:flex;flex-direction:column;gap:12px}
.mt-item{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;color:var(--ink);transition:border-color .2s,transform .2s,box-shadow .2s}
.mt-item:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:0 14px 30px -20px rgba(15,23,18,.25)}
.mt-item-top{display:flex;align-items:center;gap:10px}
.mt-ref{font-size:12.5px;font-weight:600;color:var(--green);letter-spacing:.05em}
.mt-item-sub{font-weight:600;margin-top:4px}
.mt-item-line{font-size:13px;color:var(--ink-3);margin-top:3px}
.mt-item-line.waiting{color:var(--gold-deep);font-weight:600}
.mt-item svg{color:var(--ink-3);flex-shrink:0}

.mt-badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap;text-transform:capitalize}
.mt-badge.s-open{background:#FBEFCB;color:#8A6D12}
.mt-badge.s-in_progress{background:#D6F0E4;color:#0B7048}
.mt-badge.s-waiting{background:#DCE6FA;color:#3557A0}
.mt-badge.s-resolved{background:#CDEBDC;color:#0A5C3B}
.mt-badge.s-closed{background:#EDEBE4;color:#6B7770}

/* Thread detail */
.mytix-detail{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px}
.mt-back{font-size:13px;font-weight:600;color:var(--green);margin-bottom:16px}
.mt-detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.mt-detail-sub{font-size:18px;font-weight:700;margin-top:4px}
.mt-statusline{margin:14px 0;padding:12px 16px;border-radius:12px;background:var(--green-soft);color:var(--green);font-weight:600;font-size:14px}
.mt-statusline.waiting{background:#FBF3D6;color:var(--gold-deep)}
.mt-thread{display:flex;flex-direction:column;gap:12px;margin:16px 0}
.mt-msg{padding:13px 15px;border-radius:14px;max-width:88%}
.mt-msg.you{background:var(--paper-2);border:1px solid var(--line);align-self:flex-end;border-bottom-right-radius:4px}
.mt-msg.support{background:var(--green-soft);align-self:flex-start;border-bottom-left-radius:4px}
.mt-who{font-size:11.5px;font-weight:700;color:var(--ink-2);display:flex;justify-content:space-between;gap:12px;margin-bottom:5px}
.mt-ts{font-weight:400;color:var(--ink-3)}
.mt-text{font-size:14px;line-height:1.6;color:var(--ink)}
.mt-reply{border-top:1px solid var(--line);padding-top:16px;margin-top:4px}
.mt-reply textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper-2);outline:none;resize:vertical;line-height:1.55;font:inherit;font-size:15px}
.mt-reply textarea:focus{border-color:var(--green);background:#fff}
.mt-reply-row{display:flex;align-items:center;gap:14px;margin-top:12px}
.mt-err{color:var(--red);font-size:13px}

@media (max-width:760px){
  .signin-split{grid-template-columns:1fr;gap:22px}
}