/* =====================================================
   HELP CENTER THEME (helpcenter.blade.php only)
   The same theme as checkout and the order pages, which is
   the login page's: its black-and-red backdrop, white cards
   with dark text and red accents, Plus Jakarta Sans.

   helpcenter.css is shared with other pages (About, Careers,
   Store Locations), so the theme lives here, scoped to
   #help-center — the buyer's Help Center page — and to
   #tab-helpcenter: the Help Center tab of the seller and
   rider dashboards, which keep their own sidebar and top bar.
===================================================== */

/* The login page's backdrop (.login-wrapper in login.css). */
body:has(#help-center) {
    background:
        radial-gradient(circle at 15% 15%, rgba(224,0,32,.18), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(224,0,32,.14), transparent 45%),
        linear-gradient(160deg, #050505 0%, #14040a 55%, #050505 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

html:has(#help-center) {
    background: #050505;
    /* Links that jump to a category (#gocoins, #payment…) land below the
       pinned header instead of underneath it. */
    scroll-padding-top: calc(var(--hc-pinned-h, 0px) + 20px);
}

/* -----------------------------------------------------
   PINNED HEADER — the top bar and the site header (with
   the question search) stay in place; the page scrolls
   underneath them. helpcenter.js measures the top bar
   into --hc-topbar-h so the header sits right below it.
----------------------------------------------------- */

body:has(#help-center) .top-bar {
    position: sticky;
    top: 0;
    z-index: 910;
}

body:has(#help-center) .header {
    position: sticky;
    top: var(--hc-topbar-h, 0px);
    z-index: 900;
    box-shadow: 0 10px 18px -12px rgba(0,0,0,.7);
}

/* On a phone only the site header stays. */
@media (max-width: 980px) {
    body:has(#help-center) .top-bar {
        position: static;
    }
}

/* -----------------------------------------------------
   FONT, WIDTH, LAYOUT
----------------------------------------------------- */

#help-center {
    font-family: 'Plus Jakarta Sans', Arial, Helvetica, sans-serif;
    /* Fluid width: takes most of the window, so zooming out widens it. */
    width: min(94vw, 1840px);
    max-width: none;
    padding: 30px 0 60px;
    box-sizing: border-box;
}

#help-center *:not(.fa-solid):not(.fa-regular):not(.fa-brands) {
    font-family: inherit;
}

/* One card per row, as wide as the page. */
#help-center .helpcenter-categories {
    gap: clamp(18px, 1.6vw, 26px);
}

@media (max-width: 980px) {
    #help-center {
        width: 100%;
        padding: 24px 16px 50px;
    }
}

/* ---- On the dark backdrop: the page title ---- */

#help-center .notif-page-head {
    margin-bottom: 24px;
}

#help-center .notif-page-title {
    color: #fff;
    font-weight: 800;
    letter-spacing: -.3px;
}

#help-center .notif-page-title i {
    color: #ff6b78;
}

#help-center .notif-page-subtitle {
    color: rgba(255,255,255,.65);
}

/* ---- White cards ---- */

#help-center .notif-card {
    border: none;
    border-radius: 18px;
    box-shadow:
        0 1px 2px rgba(0,0,0,.2),
        0 30px 70px -12px rgba(0,0,0,.55),
        0 8px 24px -8px rgba(0,0,0,.35);
}

/* The gold-and-red stripe across each card is not part of this theme. */
#help-center .notif-card::before {
    display: none;
}

:is(#help-center, #tab-helpcenter) .profile-card-head {
    padding: 18px 24px;
    border-bottom-color: #eaecf0;
}

:is(#help-center, #tab-helpcenter) .profile-card-head h3 {
    font-size: 15.5px;
    color: #101828;
}

:is(#help-center, #tab-helpcenter) .profile-card-head-icon {
    background: #fef3f2;
}

/* ---- Questions ---- */

:is(#help-center, #tab-helpcenter) .faq-item {
    border-bottom-color: #f2f4f7;
}

:is(#help-center, #tab-helpcenter) .faq-question {
    padding: 16px 24px;
    font-size: 14px;
    color: #101828;
}

:is(#help-center, #tab-helpcenter) .faq-question:hover,
:is(#help-center, #tab-helpcenter) .faq-item.open .faq-question {
    color: #d0001b;
}

:is(#help-center, #tab-helpcenter) .faq-question i {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f2f4f7;
    color: #667085;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

:is(#help-center, #tab-helpcenter) .faq-item.open .faq-question i {
    background: #fef3f2;
    color: #d0001b;
}

:is(#help-center, #tab-helpcenter) .faq-item.open {
    background: #fcfcfd;
}

:is(#help-center, #tab-helpcenter) .faq-answer p {
    font-size: 13.5px;
    color: #475467;
}

:is(#help-center, #tab-helpcenter) .faq-answer p + p {
    margin-top: 8px;
}

/* ---- No results ---- */

:is(#help-center, #tab-helpcenter) .empty-state {
    background: #fff;
    border: none;
    border-radius: 18px;
    box-shadow: 0 30px 70px -12px rgba(0,0,0,.55);
}

:is(#help-center, #tab-helpcenter) .empty-icon {
    background: #fef3f2;
    border-color: #f7c5ca;
}

:is(#help-center, #tab-helpcenter) .empty-state h2 {
    color: #101828;
}

:is(#help-center, #tab-helpcenter) .empty-state p {
    color: #667085;
}

/* ---- Still need help? ---- */

:is(#help-center, #tab-helpcenter) .helpcenter-contact {
    margin-top: clamp(18px, 1.6vw, 26px);
}

:is(#help-center, #tab-helpcenter) .helpcenter-contact-inner h2 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: #101828;
}

:is(#help-center, #tab-helpcenter) .helpcenter-contact-inner p {
    color: #667085;
}

/* The login page's buttons: a red outline and a red gradient. */
:is(#help-center, #tab-helpcenter) .helpcenter-contact-actions .notif-btn {
    height: 46px;
    padding: 0 22px;
    border-radius: 10px;
    font-size: 14px;
    justify-content: center;
    box-sizing: border-box;
}

:is(#help-center, #tab-helpcenter) .helpcenter-contact-actions .notif-btn-outline {
    border-width: 1.5px;
}

:is(#help-center, #tab-helpcenter) .helpcenter-contact-actions .notif-btn-sm {
    background: linear-gradient(180deg, #e0192f, #c2001a);
    color: #fff;
    box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 8px 16px -4px rgba(208,0,27,.32);
}

:is(#help-center, #tab-helpcenter) .helpcenter-contact-actions .notif-btn-sm:hover {
    background: linear-gradient(180deg, #ec1f36, #a8001a);
}

:is(#help-center, #tab-helpcenter) .helpcenter-contact-grid {
    border-top-color: #eaecf0;
}

:is(#help-center, #tab-helpcenter) .helpcenter-contact-item {
    padding: 14px 16px;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    background: #fcfcfd;
}

:is(#help-center, #tab-helpcenter) .helpcenter-contact-icon {
    background: #fef3f2;
}

:is(#help-center, #tab-helpcenter) .helpcenter-contact-icon-img {
    background: #fff;
    border-color: #eaecf0;
}

:is(#help-center, #tab-helpcenter) .helpcenter-contact-item strong {
    font-size: 13px;
    color: #101828;
}

:is(#help-center, #tab-helpcenter) .helpcenter-contact-item div span {
    font-size: 12px;
    color: #667085;
    overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
    :is(#help-center, #tab-helpcenter) .helpcenter-contact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 420px) {
    :is(#help-center, #tab-helpcenter) .helpcenter-contact-grid {
        grid-template-columns: 1fr;
    }
}

/* -----------------------------------------------------
   SELLER + RIDER DASHBOARDS — the Help Center tab.
   The same backdrop, font and cards as above, one card per
   row and as wide as the tab.
----------------------------------------------------- */

/* The backdrop fills the dashboard's content area while this tab is open. */
.admin-content:has(#tab-helpcenter.active) {
    background:
        radial-gradient(circle at 15% 15%, rgba(224,0,32,.18), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(224,0,32,.14), transparent 45%),
        linear-gradient(160deg, #050505 0%, #14040a 55%, #050505 100%);
}

#tab-helpcenter {
    font-family: 'Plus Jakarta Sans', Arial, Helvetica, sans-serif;
    padding-bottom: 12px;
}

#tab-helpcenter *:not(.fa-solid):not(.fa-regular):not(.fa-brands) {
    font-family: inherit;
}

/* On the dark backdrop: the tab's title and the topics heading. */
#tab-helpcenter .admin-section-head h2 {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: #fff;
}

#tab-helpcenter .admin-section-head p {
    font-size: 14px;
    color: rgba(255,255,255,.65);
}

#tab-helpcenter .help-topic-heading {
    color: #fff;
    font-weight: 700;
}

#tab-helpcenter .helpcenter-categories {
    gap: clamp(18px, 1.6vw, 26px);
}

#tab-helpcenter .faq-category,
#tab-helpcenter .helpcenter-contact {
    margin-bottom: 0;
    border: none;
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(0,0,0,.2),
        0 30px 70px -12px rgba(0,0,0,.55),
        0 8px 24px -8px rgba(0,0,0,.35);
}

#tab-helpcenter .helpcenter-contact {
    margin-top: clamp(18px, 1.6vw, 26px);
}

/* The gold-and-red stripe across the contact card is not part of this theme. */
#tab-helpcenter .notif-card::before {
    display: none;
}

/* Red where the dashboards use gold. */
#tab-helpcenter .profile-card-head-icon {
    color: #d0001b;
}

#tab-helpcenter .helpcenter-contact-actions {
    margin-bottom: 0;
}

#tab-helpcenter .helpcenter-contact-actions .notif-btn-buy {
    background: linear-gradient(180deg, #e0192f, #c2001a);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 8px 16px -4px rgba(208,0,27,.32);
}

#tab-helpcenter .helpcenter-contact-actions .notif-btn-buy:hover {
    background: linear-gradient(180deg, #ec1f36, #a8001a);
}

#tab-helpcenter .courier-help-search {
    border: 1.5px solid transparent;
    border-radius: 12px;
    box-shadow: 0 12px 28px -10px rgba(0,0,0,.5);
    transition: border-color .15s, box-shadow .15s;
}

#tab-helpcenter .courier-help-search:focus-within {
    border-color: #d0001b;
    box-shadow: 0 0 0 4px rgba(208,0,27,.10);
}

#tab-helpcenter .courier-help-search i {
    color: #d0001b;
}