/* ================================================================
   Help & FAQ — help.css
   ================================================================ */

/* ── Shared helpers ───────────────────────────────────────────── */
.section-eyebrow {
    display: inline-flex; align-items: center;
    font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: #4f46e5; background: #ede9fe;
    padding: 0.25rem 0.85rem; border-radius: 20px;
    margin-bottom: 0.85rem;
}

/* ════════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════════ */
.help-hero {
    padding: 4.5rem 0 3.5rem;
    background: linear-gradient(160deg, #fafafe 0%, #f0f0ff 60%, #fafafe 100%);
    text-align: center;
    position: relative; overflow: hidden;
}

.help-hero-orb {
    position: absolute; border-radius: 50%;
    pointer-events: none; filter: blur(80px); opacity: 0.3;
}

.orb-a {
    width: 350px; height: 350px;
    background: #c4b5fd; top: -100px; right: -60px;
}

.orb-b {
    width: 200px; height: 200px;
    background: #a5b4fc; bottom: -50px; left: -40px;
}

.help-hero-inner {
    position: relative; z-index: 1;
    max-width: 680px; margin: 0 auto;
}

.help-hero-title {
    font-size: 2.6rem; font-weight: 900;
    color: #111827; letter-spacing: -0.75px;
    line-height: 1.15; margin-bottom: 0.85rem;
}

.help-hero-desc {
    font-size: 1rem; color: #6b7280;
    line-height: 1.7; margin-bottom: 2rem;
}

/* Search */
.help-search-wrap {
    max-width: 560px; margin: 0 auto 1.75rem;
}

.help-search-box {
    display: flex; align-items: center;
    background: #fff; border: 2px solid #e5e7eb;
    border-radius: 14px; padding: 0 1rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.help-search-box:focus-within {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
}

.help-search-icon {
    color: #9ca3af; font-size: 0.95rem; flex-shrink: 0;
}

.help-search-input {
    flex: 1; border: none; outline: none;
    padding: 0.85rem 0.75rem;
    font-size: 0.9rem; color: #111827;
    background: transparent;
}

.help-search-input::placeholder { color: #9ca3af; }

.help-search-clear {
    background: none; border: none; cursor: pointer;
    color: #9ca3af; font-size: 0.9rem;
    display: flex; align-items: center; padding: 0;
    transition: color 0.15s;
}

.help-search-clear:hover { color: #374151; }

.help-search-hint {
    font-size: 0.75rem; color: #9ca3af;
    margin-top: 0.5rem; text-align: center;
}

.help-search-no-results {
    display: flex; align-items: center; justify-content: center;
    gap: 0.5rem; margin-top: 0.75rem;
    font-size: 0.82rem; color: #6b7280;
}

.help-search-no-results i { font-size: 1rem; color: #9ca3af; }
.help-search-no-results a { color: #4f46e5; font-weight: 500; }

/* Category pills */
.help-categories {
    display: flex; justify-content: center;
    flex-wrap: wrap; gap: 0.6rem;
}

.help-cat-pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.78rem; font-weight: 600;
    color: #374151; background: #fff;
    border: 1.5px solid #e5e7eb;
    padding: 0.35rem 0.9rem; border-radius: 20px;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.help-cat-pill i { font-size: 0.75rem; color: #4f46e5; }

.help-cat-pill:hover {
    border-color: #4f46e5; color: #4f46e5; background: #fafafe;
}

/* ════════════════════════════════════════════════════════════════
   FAQ LAYOUT
   ════════════════════════════════════════════════════════════════ */
.help-faq-section {
    padding: 3rem 0 4rem; background: #fff;
}

.help-faq-layout {
    display: flex; gap: 2.5rem; align-items: flex-start;
}

/* ── Sidebar ──────────────────────────────────────────────────── */
.help-sidebar {
    width: 220px; flex-shrink: 0;
}

.help-sidebar-inner {
    position: sticky; top: 80px;
    background: #f9fafb; border: 1.5px solid #f3f4f6;
    border-radius: 14px; padding: 1.25rem;
}

.help-sidebar-title {
    font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: #9ca3af; margin-bottom: 0.75rem;
}

.help-sidebar-nav {
    display: flex; flex-direction: column; gap: 0.2rem;
}

.help-sidebar-link {
    display: flex; align-items: center; gap: 0.55rem;
    font-size: 0.82rem; font-weight: 500;
    color: #6b7280; text-decoration: none;
    padding: 0.5rem 0.65rem; border-radius: 9px;
    transition: background 0.15s, color 0.15s;
}

.help-sidebar-link i { font-size: 0.82rem; flex-shrink: 0; }

.help-sidebar-link:hover {
    background: #ede9fe; color: #4f46e5;
}

.help-sidebar-link.active {
    background: #ede9fe; color: #4f46e5; font-weight: 700;
}

.help-sidebar-count {
    margin-left: auto;
    font-size: 0.65rem; font-weight: 700;
    background: #e5e7eb; color: #6b7280;
    padding: 0.1rem 0.4rem; border-radius: 20px;
}
.help-sidebar-link.active .help-sidebar-count {
    background: #c4b5fd; color: #4f46e5;
}

.help-sidebar-divider {
    height: 1.5px; background: #f3f4f6; margin: 1rem 0;
}

/* Sidebar contact */
.help-sidebar-contact-title {
    font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: #9ca3af; margin-bottom: 0.6rem;
}

.help-sidebar-contact-link {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.78rem; font-weight: 600;
    color: #4f46e5; text-decoration: none;
    padding: 0.4rem 0.65rem; border-radius: 8px;
    transition: background 0.15s;
    margin-bottom: 0.2rem;
}

.help-sidebar-contact-link:hover { background: #ede9fe; }
.help-sidebar-contact-link i { font-size: 0.82rem; }

/* ════════════════════════════════════════════════════════════════
   FAQ CONTENT
   ════════════════════════════════════════════════════════════════ */
.help-faq-content {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 3rem;
}

/* ── Category section ─────────────────────────────────────────── */
.help-cat-section { scroll-margin-top: 90px; }

.help-cat-header {
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f3f4f6;
}

.help-cat-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; flex-shrink: 0;
}

.help-cat-icon.blue   { background: #dbeafe; color: #2563eb; }
.help-cat-icon.indigo { background: #ede9fe; color: #4f46e5; }
.help-cat-icon.green  { background: #d1fae5; color: #059669; }
.help-cat-icon.purple { background: #f3e8ff; color: #7c3aed; }
.help-cat-icon.amber  { background: #fef3c7; color: #d97706; }
.help-cat-icon.teal   { background: #ccfbf1; color: #0d9488; }

.help-cat-title {
    font-size: 1.1rem; font-weight: 800;
    color: #111827; margin: 0 0 0.2rem;
}

.help-cat-desc {
    font-size: 0.78rem; color: #9ca3af; margin: 0;
}

/* ── Accordion ────────────────────────────────────────────────── */
.help-accordion {
    display: flex; flex-direction: column; gap: 0;
    border: 1.5px solid #f3f4f6;
    border-radius: 14px; overflow: hidden;
}

/* ── FAQ item ─────────────────────────────────────────────────── */
.help-item {
    border-bottom: 1.5px solid #f3f4f6;
    transition: background 0.15s;
}

.help-item:last-child { border-bottom: none; }

.help-item.open { background: #fafafe; }

/* Button */
.help-item-btn {
    width: 100%; background: none; border: none;
    display: flex; align-items: center;
    justify-content: space-between; gap: 1rem;
    padding: 1rem 1.25rem;
    text-align: left; cursor: pointer;
    transition: background 0.15s;
}

.help-item-btn:hover { background: #f9fafb; }
.help-item.open .help-item-btn { background: #fafafe; }

.help-item-btn span {
    font-size: 0.875rem; font-weight: 600;
    color: #111827; line-height: 1.4;
}

.help-item-chevron {
    font-size: 0.75rem; color: #9ca3af;
    flex-shrink: 0; transition: transform 0.2s;
}

.help-item.open .help-item-chevron {
    transform: rotate(180deg);
    color: #4f46e5;
}

/* Body */
.help-item-body {
    display: none;
    padding: 0 1.25rem 1.1rem;
    border-top: 1px solid #f3f4f6;
}

.help-item.open .help-item-body { display: block; }

.help-item-body p {
    font-size: 0.82rem; color: #4b5563;
    line-height: 1.7; margin-bottom: 0.75rem;
}

.help-item-body p:last-child { margin-bottom: 0; }

.help-item-body a {
    color: #4f46e5; text-decoration: none; font-weight: 500;
}

.help-item-body a:hover { text-decoration: underline; }

.help-item-body code {
    font-size: 0.78rem; background: #f3f4f6;
    padding: 0.15rem 0.4rem; border-radius: 4px; color: #374151;
}

/* Tip box */
.help-tip {
    display: flex; align-items: flex-start; gap: 0.55rem;
    background: #eff6ff; border: 1.5px solid #bfdbfe;
    border-radius: 9px; padding: 0.65rem 0.85rem;
    font-size: 0.78rem; color: #1e3a5f;
    line-height: 1.55; margin-top: 0.65rem;
}

.help-tip i { color: #2563eb; font-size: 0.82rem; flex-shrink: 0; margin-top: 2px; }

/* Warning box */
.help-warning {
    display: flex; align-items: flex-start; gap: 0.55rem;
    background: #fff5f5; border: 1.5px solid #fecaca;
    border-radius: 9px; padding: 0.65rem 0.85rem;
    font-size: 0.78rem; color: #991b1b;
    line-height: 1.55; margin-top: 0.65rem;
}

.help-warning i { color: #dc2626; font-size: 0.82rem; flex-shrink: 0; margin-top: 2px; }

/* Feature list */
.help-feature-list {
    list-style: none; padding: 0;
    margin: 0.5rem 0 0.75rem;
    display: flex; flex-direction: column; gap: 0.45rem;
}

.help-feature-list li {
    display: flex; align-items: flex-start; gap: 0.5rem;
    font-size: 0.82rem; color: #374151; line-height: 1.5;
}

.help-feature-list li i {
    color: #059669; font-size: 0.78rem;
    flex-shrink: 0; margin-top: 2px;
}

/* Numbered steps list */
.help-steps-list {
    padding-left: 1.25rem; margin: 0.5rem 0 0.75rem;
    display: flex; flex-direction: column; gap: 0.4rem;
}

.help-steps-list li {
    font-size: 0.82rem; color: #374151; line-height: 1.55;
}

.help-steps-list li a { color: #4f46e5; font-weight: 500; }

/* Inline link */
.help-inline-link {
    display: inline-flex; align-items: center;
    font-size: 0.78rem; font-weight: 700;
    color: #4f46e5; text-decoration: none;
    margin-top: 0.5rem;
    transition: gap 0.15s;
}

.help-inline-link:hover { text-decoration: underline; }

/* Store button inside FAQ */
.help-store-btn {
    display: flex; align-items: center; gap: 0.5rem;
    background: #111827; color: #fff;
    text-decoration: none;
    font-size: 0.82rem; font-weight: 700;
    padding: 0.6rem 1rem; border-radius: 9px;
    margin: 0.65rem 0;
    transition: opacity 0.15s;
}

.help-store-btn:hover { opacity: 0.85; color: #fff; }

/* ════════════════════════════════════════════════════════════════
   STILL NEED HELP — CONTACT
   ════════════════════════════════════════════════════════════════ */
.help-contact-section {
    padding: 4rem 0;
    background: linear-gradient(160deg, #fafafe 0%, #f0f0ff 60%, #fafafe 100%);
}

.help-contact-inner {
    max-width: 860px; margin: 0 auto; text-align: center;
}

.help-contact-title {
    font-size: 2rem; font-weight: 900;
    color: #111827; letter-spacing: -0.5px;
    margin-bottom: 0.75rem;
}

.help-contact-desc {
    font-size: 1rem; color: #6b7280;
    line-height: 1.7; margin-bottom: 2.5rem;
}

/* Channel cards */
.help-contact-channels {
    display: flex; gap: 1rem;
    justify-content: center; flex-wrap: wrap;
    margin-bottom: 1.75rem;
}

.help-channel-card {
    display: flex; align-items: center; gap: 1rem;
    background: #fff; border: 1.5px solid #f3f4f6;
    border-radius: 14px; padding: 1.1rem 1.25rem;
    text-decoration: none; flex: 1; min-width: 220px;
    max-width: 280px;
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
}

.help-channel-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.help-channel-card.email:hover    { border-color: #4f46e5; }
.help-channel-card.telegram:hover { border-color: #2563eb; }
.help-channel-card.whatsapp:hover { border-color: #059669; }

.help-channel-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; flex-shrink: 0;
}

.help-channel-card.email    .help-channel-icon { background: #ede9fe; color: #4f46e5; }
.help-channel-card.telegram .help-channel-icon { background: #dbeafe; color: #2563eb; }
.help-channel-card.whatsapp .help-channel-icon { background: #d1fae5; color: #059669; }

.help-channel-body { flex: 1; text-align: left; }

.help-channel-title {
    font-size: 0.82rem; font-weight: 800;
    color: #111827; margin-bottom: 0.15rem;
}

.help-channel-value {
    font-size: 0.78rem; font-weight: 600;
    color: #4b5563; margin-bottom: 0.15rem;
}

.help-channel-note {
    font-size: 0.68rem; color: #9ca3af;
}

.help-channel-arrow {
    font-size: 0.82rem; color: #d1d5db; flex-shrink: 0;
    transition: color 0.15s, transform 0.15s;
}

.help-channel-card:hover .help-channel-arrow {
    color: #9ca3af; transform: translateX(3px);
}

/* Footer links */
.help-contact-links {
    display: flex; align-items: center;
    justify-content: center; gap: 0.6rem;
    flex-wrap: wrap; font-size: 0.78rem;
}

.help-contact-links a {
    color: #9ca3af; text-decoration: none; font-weight: 500;
    transition: color 0.15s;
}

.help-contact-links a:hover { color: #4f46e5; }
.help-contact-links span    { color: #e5e7eb; }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .help-faq-layout { flex-direction: column; }
    .help-sidebar    { width: 100%; }

    .help-sidebar-inner {
        position: static;
        display: flex; flex-wrap: wrap;
        gap: 0.5rem; padding: 0.85rem;
    }

    .help-sidebar-title,
    .help-sidebar-divider,
    .help-sidebar-contact { display: none; }

    .help-sidebar-nav {
        flex-direction: row; flex-wrap: wrap; gap: 0.4rem;
    }

    .help-sidebar-link {
        padding: 0.35rem 0.75rem;
        border: 1.5px solid #f3f4f6;
        border-radius: 20px; font-size: 0.75rem;
    }

    .help-sidebar-link.active {
        border-color: #4f46e5;
    }
}

@media (max-width: 640px) {
    .help-hero-title      { font-size: 1.9rem; }
    .help-contact-title   { font-size: 1.6rem; }
    .help-contact-channels { flex-direction: column; align-items: center; }
    .help-channel-card    { max-width: 100%; width: 100%; }
    .help-categories      { gap: 0.4rem; }
}

@media (max-width: 480px) {
    .help-hero { padding: 3rem 0 2.5rem; }
    .help-item-btn { padding: 0.85rem 1rem; }
    .help-item-body { padding: 0 1rem 1rem; }
}