/* support.php — page-specific styles only. Design tokens (--navy,
   --green, --slate, --border, --bg, --text, ...) come from whichever
   base stylesheet loads first — landing.css (logged out, via head.php)
   or shared.css (logged in, via header.php) both define the same
   token names, so this file works identically under either chrome.
   Everything here is scoped under .support-* rather than reusing
   generic names like .container/.section, since those already mean
   different things in landing.css vs shared.css. */

.support-public-wrap {
    padding-top: 32px;
    padding-bottom: 24px;
}

.support-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 8px 0 40px;
}

.support-section {
    margin-bottom: 48px;
}

.support-section-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 20px;
}

/* ── Quick Help ── */
.support-help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.support-help-card {
    display: block;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 22px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.support-help-card:hover {
    border-color: var(--green);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.support-help-card h3 {
    margin: 0 0 8px;
    color: var(--navy);
    font-size: 16.5px;
}
.support-help-card p {
    margin: 0;
    color: var(--slate);
    font-size: 14px;
    line-height: 1.5;
}

/* ── Crisis box ── */
.support-crisis-box {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 24px 26px;
}
.support-crisis-box h3 {
    color: #991b1b;
    margin: 0 0 12px;
    font-size: 16.5px;
}
.support-crisis-box p {
    margin: 8px 0;
    font-size: 14.5px;
    color: #7f1d1d;
}
.support-crisis-box a {
    color: #b91c1c;
    font-weight: 700;
    text-decoration: none;
}
.support-crisis-box a:hover {
    text-decoration: underline;
}
.support-crisis-note {
    margin-top: 14px !important;
    font-size: 13.5px !important;
    color: #991b1b !important;
}

/* ── FAQ (native <details>/<summary>, no JS) ── */
.support-faq-item {
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 12px;
    padding: 4px 0;
}
.support-faq-item summary {
    padding: 14px 22px;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14.5px;
}
.support-faq-item summary::-webkit-details-marker { display: none; }
.support-faq-item summary::after {
    content: '+';
    font-size: 20px;
    font-weight: 400;
    color: var(--slate);
    flex-shrink: 0;
    margin-left: 12px;
    transition: transform 0.15s;
}
.support-faq-item[open] summary::after {
    content: '\2212'; /* − */
}
.support-faq-item summary:hover {
    color: var(--green);
}
.support-faq-item p {
    margin: 0;
    padding: 0 22px 18px;
    color: var(--slate);
    font-size: 14px;
    line-height: 1.6;
}

/* ── Contact form ── */
.support-contact-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px;
}
.support-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.support-form-group {
    margin-bottom: 18px;
}
.support-form-group label {
    display: block;
    margin-bottom: 7px;
    font-weight: 600;
    color: var(--navy);
    font-size: 13.5px;
}
.support-form-group input,
.support-form-group select,
.support-form-group textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14.5px;
    font-family: inherit;
    box-sizing: border-box;
    color: var(--text);
    background: white;
}
.support-form-group textarea {
    min-height: 120px;
    resize: vertical;
}
.support-contact-note {
    margin: 14px 0 0;
    font-size: 12.5px;
    color: var(--slate);
}

.support-contact-result {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    margin-bottom: 16px;
    line-height: 1.5;
}
.support-contact-result-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}
.support-contact-result-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

/* ── Your Tickets ── */
.support-my-tickets {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.support-my-ticket {
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 18px;
}
.support-my-ticket-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.support-my-ticket-id {
    font-weight: 700;
    color: var(--navy);
    font-size: 13.5px;
}
.support-my-ticket-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
}
.support-my-ticket-status-open { background: #fef3c7; color: #92400e; }
.support-my-ticket-status-in_progress { background: #dbeafe; color: #1e40af; }
.support-my-ticket-status-resolved { background: #dcfce7; color: #166534; }
.support-my-ticket-status-closed { background: #f1f5f9; color: #475569; }
.support-my-ticket-date {
    margin-left: auto;
    font-size: 12px;
    color: var(--slate);
}
.support-my-ticket-message {
    margin: 0;
    font-size: 13.5px;
    color: #475569;
    line-height: 1.5;
}

/* ── Privacy note ── */
.support-privacy-note {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 18px 22px;
    margin-top: 8px;
}
.support-privacy-note p {
    margin: 0;
    color: #166534;
    font-size: 13.5px;
    line-height: 1.6;
}

@media (max-width: 640px) {
    .support-form-row { grid-template-columns: 1fr; }
    .support-help-grid { grid-template-columns: 1fr; }
}