/* Location: /www/wwwroot/payorget.com/app/Modules/Frontend/StaticPages/Assets/css/faq-category.css */
.faq-category-wrapper{min-height:60vh;padding:20px 0;overflow:visible;}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0;box-sizing:border-box;overflow:visible;}
.faq-top-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding:20px 24px;background:#fff;border-radius:16px;box-shadow:0 4px 16px var(--cat-shadow);gap:20px;}
.back-button{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;background:#f9fafb;color:#4b5563;text-decoration:none;border-radius:10px;font-size:14px;font-weight:500;transition:all 0.2s;}
.back-button:hover{background:var(--cat-start);color:#fff;}
.back-button i{font-size:12px;}
.category-title{display:flex;align-items:center;gap:12px;flex:1;}
.category-icon-colored{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--cat-start),var(--cat-end));display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;box-shadow:0 4px 12px var(--cat-shadow);}
.category-title h1{font-size:24px;font-weight:600;color:#1f2937;margin:0;}
.question-count{font-size:14px;color:#6b7280;font-weight:400;}
.language-switcher{display:flex;gap:6px;}
.language-switcher .lang-btn{padding:8px 16px;background:#f9fafb;color:#4b5563;text-decoration:none;border-radius:8px;font-size:13px;font-weight:600;transition:all 0.2s;border:1px solid #e5e7eb;}
.language-switcher .lang-btn:hover{background:#f3f4f6;border-color:var(--cat-start);}
.language-switcher .lang-btn.active{background:var(--cat-start);color:#fff;border-color:var(--cat-start);}
.faq-layout{display:flex;gap:20px;margin-bottom:0;align-items:flex-start;position:relative;}
.faq-sidebar-spacer{width:280px;flex-shrink:0;}
.faq-sidebar{width:280px;flex-shrink:0;position:absolute;top:0;left:0;background:#fff;border-radius:16px;padding:0;box-shadow:0 4px 16px var(--cat-shadow);height:fit-content;max-height:calc(100vh - 120px);overflow-y:auto;display:flex;flex-direction:column;z-index:900;}
.sidebar-header{padding:20px 20px 16px 20px;border-bottom:2px solid #f3f4f6;}
.sidebar-header h3{font-size:16px;font-weight:600;color:#1f2937;margin:0;}
.faq-list{overflow-y:auto;padding:12px;}
.faq-list-item{display:flex;align-items:center;gap:12px;padding:14px 12px;border-radius:10px;text-decoration:none;color:#4b5563;transition:all 0.2s;margin-bottom:6px;position:relative;}
.faq-list-item:hover{background:#f9fafb;color:#1f2937;}
.faq-list-item.active{background:linear-gradient(135deg,var(--cat-start),var(--cat-end));color:#fff;box-shadow:0 4px 12px var(--cat-shadow);}
.faq-number{width:28px;height:28px;border-radius:8px;background:#f3f4f6;color:#6b7280;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0;}
.faq-list-item.active .faq-number{background:rgba(255,255,255,0.2);color:#fff;}
.faq-main{flex:1;min-width:0;}
.faq-title{flex:1;font-size:13px;font-weight:500;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
.faq-meta-small{display:flex;gap:8px;margin-top:4px;font-size:10px;color:#9ca3af;}
.faq-meta-small i{font-size:9px;}
.faq-list-item.active .faq-meta-small{color:rgba(255,255,255,0.8);}
.faq-arrow{font-size:10px;color:#9ca3af;opacity:0;transition:all 0.2s;}
.faq-list-item:hover .faq-arrow{opacity:1;transform:translateX(3px);}
.faq-list-item.active .faq-arrow{opacity:1;color:#fff;}
.faq-content{width:calc(100% - 300px);margin-left:auto;background:#fff;border-radius:16px;padding:32px;box-shadow:0 4px 16px var(--cat-shadow);min-height:400px;}
.mobile-back-button{display:none;}
.faq-answer-box h2{font-size:22px;font-weight:600;color:#1f2937;margin:0 0 20px 0;line-height:1.4;}
.faq-answer-meta-top{display:flex;gap:20px;padding:12px 16px;background:#f9fafb;border-radius:8px;margin-bottom:20px;font-size:13px;color:#6b7280;}
.faq-answer-meta-top .meta-item{display:flex;align-items:center;gap:6px;}
.faq-answer-meta-top .meta-item i{color:var(--cat-start);}
.answer-content{font-size:15px;line-height:1.8;color:#4b5563;margin-bottom:24px;}
.answer-content p{margin:0 0 16px 0;}
.answer-content p:last-child{margin-bottom:0;}
.answer-content ul,.answer-content ol{margin:16px 0;padding-left:24px;}
.answer-content li{margin-bottom:8px;}
.answer-content strong{color:#1f2937;font-weight:600;}
.answer-content a{color:var(--cat-start);text-decoration:none;}
.answer-content a:hover{text-decoration:underline;}
.answer-meta{display:flex;align-items:center;gap:16px;padding-top:20px;border-top:2px solid #f3f4f6;font-size:13px;color:#6b7280;}
.meta-item{display:flex;align-items:center;gap:6px;}
.meta-item i{font-size:12px;color:var(--cat-start);}
@media(max-width:1199px){
.container{padding:0 16px !important;}
.faq-category-wrapper{padding:20px 0;}
}
@media(max-width:1024px){
.faq-top-bar{padding:16px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:12px;align-items:center;}
.category-title{grid-column:1;grid-row:1;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:0 12px;align-items:flex-start;}
.category-title .category-icon-colored{grid-column:1;grid-row:1 / 3;align-self:center;width:40px;height:40px;font-size:20px;}
.category-title h1{grid-column:2;grid-row:1;font-size:20px;margin:0;line-height:1.3;}
.category-title .question-count{grid-column:2;grid-row:2;font-size:13px;margin:0;display:block;}
.language-switcher{grid-column:2;grid-row:1;margin:0;}
.back-button{grid-column:1 / 3;grid-row:2;width:100%;justify-content:center;margin:0;}
.faq-layout{display:block;}
.faq-sidebar{width:100%;position:static;display:block;margin-bottom:0;}
.faq-content{width:100%;padding:20px;display:none;margin-left:0;}
.faq-content.mobile-active{display:block;}
.faq-sidebar.mobile-hidden{display:none;}
.mobile-back-button{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#f9fafb;color:#4b5563;border:none;border-radius:10px;font-size:14px;font-weight:500;margin-bottom:16px;cursor:pointer;transition:all 0.2s;}
.mobile-back-button:hover{background:var(--cat-start);color:#fff;}
.mobile-back-button i{font-size:12px;}
.faq-answer-box h2{font-size:18px;}
.answer-content{font-size:14px;}
body.faq-content-active .faq-top-bar .back-button{display:none !important;}
}