/* Page-scoped styles extracted from resources/views/pages/faq.blade.php */

.faq-page .faq-hub-hero,
.faq-page .faq-categories-section,
.faq-page .faq-sections,
.faq-page .faq-support-cta-wrap {
    padding: 72px 0;
}

.faq-page .faq-hub-hero {
    background: transparent;
    color: var(--text);
    text-align: center;
}

.faq-page .faq-hub-hero::before,
.faq-page .faq-hub-hero::after {
    display: none;
}

.faq-page .faq-categories-section { padding-top: 0; }
.faq-page .faq-hub-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 16px; }
.faq-page .faq-hub-hero p { max-width: 740px; color: var(--text-muted); line-height: 1.7; margin: 0 auto 32px; }
.faq-page .faq-search-card { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 16px; border: 1px solid rgba(15, 23, 42, .08); box-shadow: 0 10px 40px rgba(15, 23, 42, .06); width: 100%; max-width: 880px; margin-inline: auto; }
.faq-page .faq-search-card i { color: var(--text-muted); }
.faq-page .faq-search-card input { width: 100%; border: 0; font-size: 1rem; background: transparent; outline: none; padding: 2px; }
.faq-page .faq-categories-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.faq-page .faq-category-tile { text-decoration: none; color: inherit; padding: 20px; border-radius: 16px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; border: 1px solid rgba(15, 23, 42, .08); display: grid; gap: 12px; }
.faq-page .faq-category-tile:hover,
.faq-page .faq-category-tile:focus-visible { transform: translateY(-3px); border-color: rgba(79, 70, 229, .35); box-shadow: 0 14px 36px rgba(79, 70, 229, .12); }
.faq-page .faq-category-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(79, 70, 229, .1); color: #4f46e5; }
.faq-page .faq-category-tile h2 { font-size: 1.05rem; margin: 0; }
.faq-page .faq-category-tile p { color: var(--text-muted); margin: 0; line-height: 1.5; }
.faq-page .faq-section + .faq-section { margin-top: 54px; }
.faq-page .faq-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.faq-page .faq-accordion { display: grid; gap: 12px; }
.faq-page .faq-item { border-radius: 14px; border: 1px solid rgba(15, 23, 42, .09); box-shadow: 0 6px 24px rgba(15, 23, 42, .05); overflow: hidden; }
.faq-page .faq-item summary { list-style: none; cursor: pointer; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: background .2s ease; }
.faq-page .faq-item summary:hover,
.faq-page .faq-item summary:focus-visible { background: rgba(79, 70, 229, .04); }
.faq-page .faq-item summary::-webkit-details-marker { display: none; }
.faq-page .faq-item[open] summary i { transform: rotate(180deg); }
.faq-page .faq-item summary i { transition: transform .2s ease; color: var(--text-muted); }
.faq-page .faq-answer { padding: 0 20px 18px; color: var(--text-muted); line-height: 1.7; }
.faq-page .faq-answer ul { padding-left: 18px; margin: 0 0 14px; display: grid; gap: 6px; }
.faq-page .faq-answer .btn { margin-top: 8px; }
.faq-page .faq-item mark { background: rgba(250, 204, 21, .28); color: inherit; border-radius: 4px; padding: 0 .1em; }
.faq-page .faq-support-cta-wrap { padding-top: 0; }
.faq-page .faq-support-cta { border-radius: 18px; border: 1px solid rgba(15, 23, 42, .08); box-shadow: 0 12px 34px rgba(15, 23, 42, .07); padding: 28px; display: flex; justify-content: space-between; gap: 24px; align-items: center; }
.faq-page .faq-support-cta h2 { margin-bottom: 10px; }
.faq-page .faq-support-cta p { color: var(--text-muted); margin: 0; }

@media (max-width: 1100px) {
    .faq-page .faq-categories-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .faq-page .faq-hub-hero,
    .faq-page .faq-categories-section,
    .faq-page .faq-sections,
    .faq-page .faq-support-cta-wrap { padding: 58px 0; }

    .faq-page .faq-categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .faq-page .faq-support-cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
    .faq-page .faq-categories-grid { grid-template-columns: 1fr; }
    .faq-page .faq-section-heading { flex-direction: column; align-items: flex-start; }
    .faq-page .faq-search-card { padding: 14px 16px; }
    .faq-page .faq-item summary,
    .faq-page .faq-answer { padding-left: 16px; padding-right: 16px; }
}