/**
 * Zukro FAQ & Help Center Stylesheet
 * Standardized Apple Liquid Glass 2026 & Baymard International UX
 */

.zk-skip-link{position:absolute;left:-9999px;top:4px;z-index:10000;background:#123D2A;color:#fff;padding:8px 18px;border-radius:0 0 6px 6px;font-size:14px;font-weight:700;text-decoration:none}
        .zk-skip-link:focus{left:4px}

        :root{
            --zgreen:#123D2A; --zgreend:#123D2A; --gold:#e8a92e; --gold-d:#E8A92E;
            --cream:#F3EEE3; --ink:#1a1a1a; --muted:#5f6b60; --line:#e7e3d8;
            --s-top:80px;
        }
        *{ margin:0; padding:0; box-sizing:border-box; }
        body{ background:var(--cream); color:var(--ink); line-height:1.7; padding-top:72px; overflow-x:hidden; }
        img{ max-width:100%; display:block; }
        .container{ width:90%; max-width:1080px; margin:0 auto; }
        .narrow{ max-width:840px; }
        section{ padding:var(--s-top) 0; }
        .eyebrow{ display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-d); margin-bottom:14px; }
        h2.sec-title{ font-size:clamp(1.5rem,2.8vw,2rem); color:var(--zgreend); line-height:1.14; margin-bottom:16px; }
        .lead{ font-size:clamp(1.05rem,1.7vw,1.25rem); color:#1a1a1a; }
        p{ color:#444; }

        .btn-gold{ background:var(--gold); color:#123D2A; font-weight:700; padding:14px 30px; border-radius:8px; text-decoration:none; transition:.25s; display:inline-block; }
        .btn-gold:hover{ background:var(--gold-d); transform:translateY(-3px); }
        .btn-green{ background:var(--zgreen); color:#fff; font-weight:600; padding:13px 28px; border-radius:8px; text-decoration:none; display:inline-block; transition:.25s; }
        .btn-green:hover{ background:var(--zgreend); }

        /* HERO + SEARCH */
        .f-hero{ background:var(--zgreend); color:#fff; text-align:center; padding:62px 0 56px; }
        .f-hero .eyebrow{ color:var(--gold); }
        .f-hero h1{ font-size:clamp(2rem,4.2vw,3.1rem); line-height:1.1; color:#fff; margin-bottom:12px; }
        .f-hero p{ color:rgba(255,255,255,.9); font-size:1.12rem; max-width:54ch; margin:0 auto 26px; }
        .searchbox{ max-width:560px; margin:0 auto; position:relative; }
        .searchbox i{ position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--muted); }
        .searchbox input{ width:100%; padding:16px 18px 16px 46px; border:none; border-radius:10px; font:inherit; font-size:1rem; }
        .pop{ margin-top:16px; font-size:13.5px; color:rgba(255,255,255,.82); }
        .pop a{ color:var(--gold); text-decoration:none; border-bottom:1px dotted rgba(232,169,46,.5); margin:0 6px; }

        /* QUICK CATEGORIES */
        .cats{ background:#fff; }
        .cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
        .cat{ display:flex; gap:14px; align-items:flex-start; background:var(--cream); border:1px solid var(--line); border-radius:10px; padding:18px 20px; text-decoration:none; color:inherit; transition:.25s; }
        .cat:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(16,24,40,.08); border-color:#d8e2d6; }
        .cat .ic{ flex:0 0 auto; width:42px; height:42px; border-radius:10px; background:#F3EEE3; color:var(--zgreen); display:flex; align-items:center; justify-content:center; font-size:18px; }
        .cat h3{ color:var(--zgreend); font-size:1rem; margin-bottom:2px; }
        .cat p{ font-size:.85rem; color:#666; }

        /* FAQ SECTIONS */
        .faqsec h2{ display:flex; align-items:center; gap:12px; color:var(--zgreend); font-size:1.35rem; margin-bottom:6px; padding-top:8px; }
        .faqsec h2 i{ color:var(--gold-d); font-size:1.1rem; }
        .faqsec .sd{ color:var(--muted); font-size:.95rem; margin-bottom:18px; }
        .faq details{ background:#fff; border:1px solid var(--line); border-radius:10px; margin-bottom:10px; overflow:hidden; }
        .faq summary{ cursor:pointer; font-weight:600; color:var(--zgreend); font-size:1.02rem; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center; padding:18px 22px; }
        .faq summary::-webkit-details-marker{ display:none; }
        .faq summary::after{ content:"\002B"; color:var(--gold-d); font-weight:700; font-size:1.25rem; flex:0 0 auto; }
        .faq details[open] summary::after{ content:"\2212"; }
        .faq details .a{ padding:0 22px 20px; color:#555; font-size:.97rem; }
        .faq details .a a{ color:var(--zgreen); font-weight:600; }
        .noresult{ display:none; text-align:center; color:var(--muted); padding:30px; }
        .secblock{ margin-bottom:30px; }

        /* TRUST STRIP */
        .trust{ background:var(--zgreend); color:#fff; }
        .trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
        .ti{ display:flex; gap:12px; align-items:flex-start; }
        .ti i{ color:var(--gold); font-size:20px; margin-top:3px; }
        .ti b{ display:block; } .ti span{ font-size:.88rem; color:rgba(255,255,255,.8); }

        /* SUPPORT */
        .support{ background:#fff; }
        .sup-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:8px; }
        .sup{ background:var(--cream); border:1px solid var(--line); border-radius:10px; padding:24px 20px; text-align:center; }
        .sup i{ font-size:22px; color:var(--zgreen); margin-bottom:10px; }
        .sup h3{ color:var(--zgreend); font-size:1rem; margin-bottom:5px; }
        .sup p{ font-size:.88rem; color:#555; }
        .sup a{ color:var(--zgreen); font-weight:600; text-decoration:none; }
        .sup-note{ text-align:center; margin-top:24px; color:var(--muted); font-size:.9rem; }

        @media(max-width:820px){ .cat-grid,.trust-grid{ grid-template-columns:1fr 1fr; } .sup-grid{ grid-template-columns:1fr 1fr; } }
        @media(max-width:520px){ :root{ --s-top:56px; } .cat-grid,.trust-grid,.sup-grid{ grid-template-columns:1fr; } }