/*
 * faq.css — FAQ page (resources/views/pages/faq.blade.php).
 * Prototype reference: docs/frontend/FAQ.dc.html (look & feel only).
 */

/* ------------------------------------------------------------------- hero */
.dpd-faq-hero { padding-block:56px; }
.dpd-faq-hero__title { color:#fff; font-size:clamp(1.75rem, 4vw, 2.9rem); margin-bottom:.9rem; }
.dpd-faq-hero__text { color:rgba(255,255,255,.6); font-size:.95rem; margin:0 0 1.75rem; }
.dpd-faq-hero__text a { color:var(--dpd-cyan); font-weight:600; }

.dpd-faq-search { position:relative; max-width:520px; margin:0 auto; }
.dpd-faq-search .dpd-i { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--dpd-label); pointer-events:none; }
.dpd-faq-search .form-control { padding:14px 16px 14px 44px; border:0; border-radius:10px; font-size:1rem; box-shadow:0 4px 16px rgba(0,0,0,.2); }
.dpd-faq-search__count { display:block; min-height:1.2em; margin-top:.6rem; font-size:.8rem; color:rgba(255,255,255,.6); }

/* ------------------------------------------------------------------- body */
.dpd-faq { background:var(--dpd-offwhite); padding-block:48px 80px; }

.dpd-faq-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:32px; }
.dpd-faq-tab {
    min-height:44px; padding:10px 20px; border-radius:999px; border:2px solid var(--dpd-border); background:#fff;
    color:var(--dpd-navy); font-size:.82rem; font-weight:700; line-height:1.2;
}
.dpd-faq-tab:hover { border-color:var(--dpd-navy); }
.dpd-faq-tab.active { background:var(--dpd-navy); border-color:var(--dpd-navy); color:#fff; }
@media (max-width:600px) { .dpd-faq-tabs { gap:6px; } .dpd-faq-tab { font-size:.75rem; padding:8px 14px; } }

.dpd-faq-list { background:#fff; border-radius:14px; box-shadow:var(--dpd-shadow-sm); overflow:hidden; }
.dpd-faq-set-title { display:none; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--dpd-magenta); margin:0 0 10px; }

.dpd-faq-item { border-bottom:1px solid var(--dpd-border-2); padding:0 28px; }
.dpd-faq-item:last-child { border-bottom:0; }
@media (max-width:575.98px) { .dpd-faq-item { padding:0 18px; } }

.dpd-faq-q {
    width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px;
    padding:18px 0; border:0; background:none; text-align:left;
    font-size:.95rem; font-weight:600; color:var(--dpd-navy);
}
.dpd-faq-q:hover { color:var(--dpd-magenta); }
.dpd-faq-q .dpd-i { flex:none; color:var(--dpd-label); transition:transform .2s; }
.dpd-faq-q:not(.collapsed) .dpd-i { transform:rotate(180deg); color:var(--dpd-magenta); }

/* Answer body (admin content) */
.dpd-faq-a { font-size:.88rem; color:var(--dpd-muted); line-height:1.7; padding-bottom:18px; }
.dpd-faq-a > :last-child { margin-bottom:0; }
.dpd-faq-a p { margin:0 0 12px; }
.dpd-faq-a a { font-weight:600; }
.dpd-faq-a strong { color:var(--dpd-navy); }
.dpd-faq-a ul, .dpd-faq-a ol { padding-left:1.25rem; margin:0 0 12px; }
.dpd-faq-a table { width:100%; border-collapse:collapse; background:var(--dpd-offwhite); border-radius:8px; overflow:hidden; font-size:.82rem; margin:0 0 12px; }
.dpd-faq-a th, .dpd-faq-a td { padding:8px 12px; border-bottom:1px solid var(--dpd-border-2); text-align:left; }
.dpd-faq-a th { color:var(--dpd-label); font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.dpd-faq-a td { color:var(--dpd-navy); }
.dpd-faq-a tr:last-child td { border-bottom:0; }

/* Search mode: hide tabs, show every set that has a match, with its title */
.dpd-faq.is-searching .dpd-faq-tabs { display:none; }
.dpd-faq.is-searching .tab-content > .tab-pane { display:none; }
.dpd-faq.is-searching .tab-content > .tab-pane.has-results { display:block; opacity:1; margin-bottom:24px; }
.dpd-faq.is-searching .dpd-faq-set-title { display:block; }

.dpd-faq-empty { background:#fff; border-radius:14px; box-shadow:var(--dpd-shadow-sm); padding:32px; text-align:center; color:var(--dpd-muted); }
.dpd-faq-empty__title { font-size:1.05rem; margin-bottom:6px; }

/* -------------------------------------------------------------------- cta */
.dpd-faq-cta { margin-top:32px; background:var(--dpd-navy); border-radius:14px; padding:32px; text-align:center; }
.dpd-faq-cta__title { color:#fff; font-size:1.25rem; margin-bottom:10px; }
.dpd-faq-cta__text { color:rgba(255,255,255,.65); font-size:.88rem; margin:0 0 20px; }