/*
Theme Name: HashtagIntro
Theme URI: https://hashtagintro.com
Author: HashtagIntro Team
Description: Opera News-style Hindi news theme with category sidebar, card feed, mobile bottom nav, PWA-ready.
Version: 2.4.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hashtagintro
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+Devanagari:wght@400;500;600;700&display=swap');

:root{
/* === Brand palette (from the #HashtagIntro logo) ===
   --hi-accent  = brand BLUE  (primary: links, buttons, active states)
   --hi-red     = brand RED   (live / breaking elements)
   --hi-orange  = brand ORANGE (highlights)
   To use a COLOURED header instead of white, set --hi-header-bg to
   var(--hi-accent) or var(--hi-red) — but note the bundled logo has a
   white background, so a coloured header needs a transparent-PNG logo. */
--hi-accent:#1B53C0;--hi-accent-dark:#143F95;--hi-accent-light:rgba(27,83,192,.08);
--hi-red:#E12B26;--hi-orange:#F7941E;--hi-navy:#16335F;
--hi-bg:#F0F2F5;--hi-bg-card:#FFF;--hi-bg-hover:#EEF3FB;
--hi-text:#16223A;--hi-text2:#555;--hi-text3:#999;
--hi-border:#E5E8EE;--hi-border2:#F0F0F0;
--hi-header-bg:#FFFFFF;--hi-header-h:56px;--hi-sidebar-top:56px;
--hi-sidebar-w:220px;--hi-font:'Inter','Noto Sans Devanagari',sans-serif;
--hi-ease:.18s ease;--hi-radius:8px;--hi-bottom-nav-h:56px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
body{font-family:var(--hi-font);background:var(--hi-bg);color:var(--hi-text);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
button,input,select,textarea{font-family:inherit;font-size:inherit}
.screen-reader-text{clip:rect(1px,1px,1px,1px);position:absolute!important;height:1px;width:1px;overflow:hidden}

/* === HEADER === */
.hi-header{position:sticky;top:0;z-index:1000;background:var(--hi-header-bg);height:var(--hi-header-h);color:var(--hi-text);border-bottom:1px solid var(--hi-border);box-shadow:0 1px 3px rgba(0,0,0,.04)}
.hi-header-inner{max-width:1260px;margin:0 auto;padding:0 16px;display:flex;align-items:center;height:100%;gap:12px}
.hi-header-left{display:flex;align-items:center;gap:10px}
.hi-hamburger{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--hi-text2);border-radius:6px}
.hi-hamburger:hover{background:var(--hi-bg-hover)}
.hi-hamburger svg{width:22px;height:22px}
.hi-logo{display:flex;align-items:center;gap:6px;font-size:1.05rem;font-weight:700;color:var(--hi-text)}
.hi-logo-img,.hi-header .custom-logo{height:40px;width:auto;display:block}
.hi-header .custom-logo-link{display:flex;align-items:center;line-height:0}
.hi-logo-icon{width:26px;height:26px;background:var(--hi-accent);color:#fff;border-radius:4px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px}
.hi-header-search{flex:1;max-width:400px;margin:0 auto}
.hi-header-search form{display:flex}
.hi-header-search input{width:100%;padding:8px 14px;border:1px solid var(--hi-border);border-radius:6px;font-size:.85rem;background:var(--hi-bg);color:var(--hi-text);outline:none}
.hi-header-search input::placeholder{color:var(--hi-text3)}
.hi-header-search input:focus{border-color:var(--hi-accent);background:#fff}
.hi-header-right{display:flex;align-items:center;gap:4px;margin-left:auto}
.hi-hdr-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--hi-text2);cursor:pointer;border-radius:50%}
.hi-hdr-btn:hover{background:var(--hi-bg-hover)}
.hi-hdr-btn svg{width:18px;height:18px}
.hi-hdr-btn svg.hi-lang-ico{width:28px;height:18.3px}   /* the two-bubble language icon is wider than tall */

/* === LEFT SIDEBAR === */
.hi-sidebar-overlay{display:none;position:fixed;top:var(--hi-sidebar-top);right:0;bottom:0;left:0;background:rgba(0,0,0,.4);z-index:899}
.hi-sidebar-overlay.active{display:block}
.hi-left-sidebar{position:fixed;top:var(--hi-sidebar-top);left:0;bottom:0;width:var(--hi-sidebar-w);background:#fff;border-right:1px solid var(--hi-border);overflow-y:auto;z-index:900;transform:translateX(-100%);transition:transform .25s ease}
.hi-left-sidebar.open{transform:translateX(0)}

/* Desktop: sidebar visible by default. The hamburger collapses it (class set on
   <html> by main.js and, before first paint, by a tiny script in header.php), and
   content + footer slide to full width. The footer sits OUTSIDE .hi-page-wrap so it
   needs its own offset — without one the fixed menu covered its left side. */
@media(min-width:1024px){
.hi-left-sidebar{transform:translateX(0);position:fixed}
.hi-sidebar-overlay{display:none!important}
.hi-page-wrap{margin-left:var(--hi-sidebar-w)}
.hi-footer{margin-left:var(--hi-sidebar-w);transition:margin .25s ease}
html.hi-sb-collapsed .hi-left-sidebar{transform:translateX(-100%)}
html.hi-sb-collapsed .hi-page-wrap,
html.hi-sb-collapsed .hi-footer{margin-left:0}
/* the login page has no menu at all, so its footer shouldn't leave room for one */
body:has(.hi-login-page) .hi-footer{margin-left:0}
}

.hi-cat-nav{padding:14px 12px}
.hi-cat-nav a,.hi-cat-nav .menu-item a{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:2px;font-size:.88rem;font-weight:500;color:var(--hi-text2);border-radius:10px;border-left:none;transition:background var(--hi-ease),color var(--hi-ease)}
.hi-cat-nav a:hover,.hi-cat-nav .menu-item a:hover{background:var(--hi-bg-hover);color:var(--hi-text)}
.hi-cat-nav a.active,.hi-cat-nav .current-menu-item a,.hi-cat-nav .current-cat a{color:var(--hi-accent);font-weight:700;background:var(--hi-accent-light)}
.hi-cat-nav a.active .hi-cat-icon,.hi-cat-nav .current-menu-item a .hi-cat-icon{color:var(--hi-accent)}
.hi-cat-icon{width:18px;height:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--hi-text3)}
.hi-cat-icon svg{width:18px;height:18px}
.hi-cat-icon-txt{font-size:1.05rem;font-weight:700;line-height:1;font-family:'Noto Sans Devanagari',sans-serif}
.hi-cat-heading{font-size:.68rem;font-weight:700;color:var(--hi-text3);text-transform:uppercase;letter-spacing:.8px;padding:14px 12px 6px}
.hi-cat-heading-intro{border-top:1px solid var(--hi-border2);margin:10px 0 8px;padding:0}
.hi-cat-intro{color:var(--hi-accent)!important;font-weight:700}
.hi-cat-intro .hi-cat-icon{color:var(--hi-accent)}
.hi-cat-intro.active,.hi-cat-intro:hover{background:var(--hi-accent-light)}
.hi-cat-nav .menu{display:flex;flex-direction:column}
.hi-cat-nav .sub-menu{display:none}
.hi-sidebar-links{padding:12px 20px;border-top:1px solid var(--hi-border2);margin-top:8px}
.hi-sidebar-links h4{font-size:.75rem;font-weight:700;color:var(--hi-text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.hi-sidebar-links a{display:block;padding:6px 0;font-size:.82rem;color:var(--hi-text2)}
.hi-sidebar-links a:hover{color:var(--hi-accent)}

/* === MAIN LAYOUT === */
.hi-page-wrap{transition:margin .25s ease}
.hi-page{max-width:900px;margin:0 auto;padding:12px 16px}

/* === NEWS CARD === */
.hi-card{background:var(--hi-bg-card);border-radius:var(--hi-radius);margin-bottom:10px;transition:box-shadow var(--hi-ease);overflow:hidden}

/* === AD SLOTS (Google AdSense, in-feed + below article) === */
.hi-ad-slot{background:var(--hi-bg-card);border:1px solid var(--hi-border);border-radius:var(--hi-radius);margin-bottom:10px;padding:12px;text-align:center;overflow:hidden}
.hi-ad-label{display:block;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--hi-text3);margin-bottom:8px}
.hi-ad-slot ins.adsbygoogle{margin:0 auto}
.hi-ad-slot-empty{border-style:dashed;padding:26px 16px}
.hi-ad-slot-empty p{font-size:.78rem;line-height:1.7;color:var(--hi-text3);margin:0}
.hi-ad-slot-empty strong{color:var(--hi-text2)}
.hi-ad-slot-article{margin:16px 0}
.hi-card:hover{box-shadow:0 2px 12px rgba(0,0,0,.06)}
.hi-card a{display:flex;align-items:flex-start;padding:16px;gap:14px;width:100%}
.hi-card-body{flex:1;min-width:0}
.hi-card-title{font-size:.95rem;font-weight:600;line-height:1.45;color:var(--hi-text);margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hi-card-meta{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--hi-text3);flex-wrap:wrap}
.hi-card-meta .hi-source{max-width:60%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hi-dot::before{content:"·";margin:0 2px}
.hi-card-img{width:120px;height:90px;flex-shrink:0;border-radius:6px;overflow:hidden;background:#eee}
.hi-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.hi-card:hover .hi-card-img img{transform:scale(1.03)}
.hi-card-img.no-img{display:flex;align-items:center;justify-content:center;color:var(--hi-text3);font-size:.7rem}

/* Big hero card */
.hi-card.hi-card-big a{flex-direction:column;padding:0}
.hi-card.hi-card-big .hi-card-img{width:100%;height:220px;border-radius:0}
.hi-card.hi-card-big .hi-card-body{padding:14px 16px 16px}
.hi-card.hi-card-big .hi-card-title{font-size:1.1rem;font-weight:700;-webkit-line-clamp:2;margin-bottom:8px}

/* === CATEGORY HEADER (archive pages) === */
.hi-archive-header{background:var(--hi-bg-card);border-radius:var(--hi-radius);padding:20px;margin-bottom:12px}
.hi-archive-title{font-size:1.1rem;font-weight:700;color:var(--hi-text)}
.hi-archive-desc{font-size:.85rem;color:var(--hi-text2);margin-top:4px}

/* === LOAD MORE / INFINITE SCROLL === */
.hi-load-more{text-align:center;padding:20px 16px}
.hi-load-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 28px;background:var(--hi-bg-card);color:var(--hi-text2);border:1px solid var(--hi-border);border-radius:20px;font-weight:600;font-size:.85rem;cursor:pointer;transition:all var(--hi-ease)}
.hi-load-btn:hover{border-color:var(--hi-accent);color:var(--hi-accent)}
.hi-load-btn .hi-spinner{display:none;width:14px;height:14px;border:2px solid var(--hi-border);border-top-color:var(--hi-accent);border-radius:50%;animation:hi-spin .5s linear infinite}
.hi-load-btn.loading .hi-spinner{display:block}
.hi-load-btn.loading .hi-btn-text{display:none}
@keyframes hi-spin{to{transform:rotate(360deg)}}

/* === SINGLE POST === */
.hi-article{background:var(--hi-bg-card);border-radius:var(--hi-radius);padding:24px;margin-bottom:12px}
.hi-article-title{font-size:1.4rem;font-weight:700;line-height:1.35;color:var(--hi-text);margin-bottom:12px}
.hi-article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.8rem;color:var(--hi-text3);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--hi-border2)}
.hi-article-meta .hi-src-link{color:var(--hi-accent);font-weight:600}
.hi-article-summary{background:var(--hi-accent-light);border-radius:6px;padding:14px 16px;margin-bottom:16px;font-size:.88rem;color:var(--hi-text2);line-height:1.6;border-left:3px solid var(--hi-accent)}
.hi-article-summary strong{color:var(--hi-text);display:block;margin-bottom:6px;font-size:.82rem}
.hi-article-feature{margin-bottom:16px;border-radius:var(--hi-radius);overflow:hidden}
.hi-article-feature img{width:100%;aspect-ratio:16/9;object-fit:cover}
.hi-article-body{font-size:.95rem;line-height:1.75;color:var(--hi-text);overflow-wrap:break-word;word-wrap:break-word}
.hi-article-body p{margin-bottom:1.2em}
.hi-article-body h2{font-size:1.2rem;font-weight:700;margin:1.5em 0 .5em}
.hi-article-body h3{font-size:1.05rem;font-weight:700;margin:1.3em 0 .4em}
.hi-article-body blockquote{border-left:3px solid var(--hi-accent);padding:10px 16px;margin:1.2em 0;background:var(--hi-accent-light);color:var(--hi-text2);font-style:italic}
.hi-article-body ul,.hi-article-body ol{padding-left:1.5em;margin-bottom:1.2em}
.hi-article-body ul{list-style:disc}
.hi-article-body ol{list-style:decimal}
.hi-article-body li{margin-bottom:.4em}
.hi-article-body img{border-radius:6px;margin:1.2em 0}
.hi-article-body a{color:var(--hi-accent)}
.hi-article-body a:hover{text-decoration:underline}
.hi-share-link{display:inline-flex;align-items:center;gap:5px;padding:8px 16px;background:none;border:1px solid var(--hi-border);border-radius:20px;font-size:.8rem;color:var(--hi-text2);cursor:pointer;margin-top:16px;margin-right:8px;transition:all var(--hi-ease)}
.hi-share-link:hover{border-color:var(--hi-accent);color:var(--hi-accent)}

/* "Read full article" — the main action on an article page, so it is a solid, full-width
   button rather than a small outlined chip like Share / Save. */
.hi-readmore-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;margin:18px 0 4px;padding:13px 20px;background:var(--hi-accent);color:#fff;border-radius:28px;font-size:.92rem;font-weight:700;line-height:1.3;text-align:center;text-decoration:none;transition:background var(--hi-ease)}
.hi-readmore-btn:hover,.hi-readmore-btn:focus{background:var(--hi-accent-dark);color:#fff}
/* The RSS plugin adds its own small "Source: …" line to the end of every imported article.
   When the button above is showing, that line says the same thing — hide the duplicate. */
.hi-has-src-btn .rfap-source{display:none}
.hi-save-btn.active{border-color:#F7941E;color:#F7941E;background:rgba(247,148,30,.08)}
.hi-article-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;padding-top:14px;border-top:1px solid var(--hi-border2)}
.hi-article-tags a{padding:4px 12px;background:var(--hi-bg-hover);border-radius:14px;font-size:.75rem;font-weight:600;color:var(--hi-text2)}
.hi-article-tags a:hover{background:var(--hi-accent-light);color:var(--hi-accent)}
.hi-related{margin-top:24px;padding-top:16px;border-top:1px solid var(--hi-border2)}
.hi-related-title{font-size:.95rem;font-weight:700;margin-bottom:12px;color:var(--hi-text)}

/* === SEARCH OVERLAY === */
.hi-search-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.5);z-index:2000;backdrop-filter:blur(4px)}
.hi-search-overlay.active{display:flex;align-items:flex-start;justify-content:center;padding-top:80px}
.hi-search-box{width:92%;max-width:520px;background:#fff;border-radius:12px;padding:20px;box-shadow:0 8px 30px rgba(0,0,0,.2);animation:hi-slide .2s ease}
.hi-search-box form{display:flex;gap:8px}
.hi-search-box input[type="search"]{flex:1;padding:11px 14px;border:2px solid var(--hi-border);border-radius:8px;background:#fff;color:var(--hi-text);font-size:.95rem;outline:none}
.hi-search-box input:focus{border-color:var(--hi-accent)}
.hi-search-box button[type="submit"]{padding:11px 20px;background:var(--hi-accent);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer}

/* === GENERIC MODAL SYSTEM (language picker + all Me-page modals) === */
body.hi-modal-lock{overflow:hidden}
.hi-modal-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.5);z-index:2100;align-items:flex-end;justify-content:center}
.hi-modal-overlay.active{display:flex}
.hi-modal{background:#fff;width:100%;max-width:480px;border-radius:16px 16px 0 0;max-height:82vh;overflow-y:auto;animation:hiModalUp .22s ease}
@media(min-width:640px){.hi-modal-overlay{align-items:center}.hi-modal{border-radius:16px;margin:20px}}
@keyframes hiModalUp{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
.hi-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--hi-border2);position:sticky;top:0;background:#fff}
.hi-modal-head h3{font-size:1rem;font-weight:700;color:var(--hi-text);margin:0}
.hi-modal-close{background:var(--hi-bg-hover);border:none;width:30px;height:30px;border-radius:50%;font-size:1.2rem;color:var(--hi-text2);cursor:pointer;line-height:1;flex-shrink:0}
.hi-modal-body{padding:14px 18px 22px}
.hi-modal-empty{padding:36px 20px;text-align:center;color:var(--hi-text3);font-size:.85rem;line-height:1.6}

.hi-lang-list{padding:8px}
.hi-lang-item{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;background:none;border:none;padding:12px 12px;font-size:.92rem;font-weight:600;color:var(--hi-text);border-radius:10px;cursor:pointer}
.hi-lang-item:hover{background:var(--hi-bg-hover)}
.hi-lang-item.active{color:var(--hi-accent);background:var(--hi-accent-light)}
.hi-lang-item span{font-size:.75rem;font-weight:500;color:var(--hi-text3)}

@keyframes hi-slide{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}

/* === PAGINATION === */
.hi-pagination{display:flex;justify-content:center;gap:4px;padding:20px 16px}
.hi-pagination .page-numbers{min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;padding:0 8px;background:#fff;border:1px solid var(--hi-border);border-radius:6px;font-weight:600;font-size:.83rem;color:var(--hi-text2)}
.hi-pagination .page-numbers:hover{border-color:var(--hi-accent);color:var(--hi-accent)}
.hi-pagination .page-numbers.current{background:var(--hi-accent);color:#fff;border-color:var(--hi-accent)}

/* === COMMENTS === */
.hi-comments{background:var(--hi-bg-card);border-radius:var(--hi-radius);padding:20px;margin-top:12px}

/* Comment form — WordPress's default comment_form() markup wraps each
   field in <p class="comment-form-*">, with no classes on the inputs
   themselves, so these target them by type/parent rather than a
   custom class. Without this, the Name/Email fields render as bare
   unstyled browser inputs right next to the styled textarea/button. */
.hi-comments #commentform{display:flex;flex-direction:column;gap:14px}
.hi-comments #commentform p{margin:0}
.hi-comments #commentform label{display:block;font-size:.78rem;font-weight:600;color:var(--hi-text2);margin-bottom:6px}
.hi-comments #commentform input[type="text"],
.hi-comments #commentform input[type="email"],
.hi-comments #commentform input[type="url"],
.hi-comments #commentform textarea{
    width:100%;padding:10px 14px;border:1px solid var(--hi-border);border-radius:8px;
    background:#fff;color:var(--hi-text);font-family:inherit;font-size:.9rem;
    box-sizing:border-box;transition:border-color var(--hi-ease)
}
.hi-comments #commentform textarea{resize:vertical;min-height:100px;line-height:1.5}
.hi-comments #commentform input[type="text"]:focus,
.hi-comments #commentform input[type="email"]:focus,
.hi-comments #commentform input[type="url"]:focus,
.hi-comments #commentform textarea:focus{border-color:var(--hi-accent);outline:none;box-shadow:0 0 0 3px var(--hi-accent-light)}
.hi-comments #commentform .comment-form-cookies-consent{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--hi-text3)}
.hi-comments #commentform .comment-form-cookies-consent input{width:auto}
.hi-comments #commentform .comment-notes,
.hi-comments #commentform .logged-in-as{font-size:.78rem;color:var(--hi-text3);margin:0 0 2px}
.hi-comments #commentform .comment-notes a,
.hi-comments #commentform .logged-in-as a{color:var(--hi-accent)}
@media(min-width:520px){
    .hi-comments #commentform{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .hi-comments #commentform .comment-notes,
    .hi-comments #commentform .logged-in-as,
    .hi-comments #commentform .comment-form-comment,
    .hi-comments #commentform .comment-form-cookies-consent,
    .hi-comments #commentform .form-submit{grid-column:1/-1}
}
.hi-comments input[type="submit"]{padding:10px 24px;background:var(--hi-accent);color:#fff;border:none;border-radius:20px;font-weight:600;font-size:.88rem;cursor:pointer;transition:background var(--hi-ease)}
.hi-comments input[type="submit"]:hover{background:var(--hi-accent-dark)}

/* Comment list */
.hi-comments .comment-list{list-style:none;padding:0;margin:0 0 20px}
.hi-comments .comment{padding:14px 0;border-bottom:1px solid var(--hi-border2)}
.hi-comments li.comment:first-child{padding-top:0}
.hi-comments .comment-author{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.hi-comments .comment-author img{border-radius:50%;width:36px;height:36px;flex-shrink:0}
.hi-comments .comment-author .fn{font-size:.88rem;font-weight:700;color:var(--hi-text);font-style:normal}
.hi-comments .comment-metadata{font-size:.72rem;color:var(--hi-text3);margin-left:46px;margin-bottom:4px}
.hi-comments .comment-metadata a{color:inherit}
.hi-comments .comment-content p{font-size:.88rem;color:var(--hi-text2);line-height:1.6;margin:0 0 6px 46px}
.hi-comments .reply{margin-left:46px}
.hi-comments .comment-reply-link{font-size:.76rem;font-weight:600;color:var(--hi-accent);cursor:pointer}
.hi-comments .children{list-style:none;margin:10px 0 0;padding-left:24px;border-left:2px solid var(--hi-border2)}
.hi-comments .no-comments{font-size:.85rem;color:var(--hi-text3);padding:8px 0}

/* === FOOTER === */
.hi-footer{background:var(--hi-bg-card);border-top:1px solid var(--hi-border);padding:24px 16px;color:var(--hi-text3);font-size:.82rem;margin-top:20px}
.hi-footer-inner{max-width:900px;margin:0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:40px;flex-wrap:wrap}
.hi-footer h4{font-size:.82rem;font-weight:700;color:var(--hi-text);margin-bottom:10px}
.hi-footer ul li{margin-bottom:6px}
.hi-footer ul li a{color:var(--hi-text2);font-size:.82rem}
.hi-footer ul li a:hover{color:var(--hi-accent)}
.hi-footer-copy{margin-top:16px;padding-top:12px;border-top:1px solid var(--hi-border2);font-size:.75rem;color:var(--hi-text3)}
.hi-footer-contact li a{word-break:break-all}
.hi-footer-social{gap:12px;padding-top:14px;margin-top:14px;border-top:1px solid var(--hi-border2)}
.hi-footer-social a{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--hi-bg);color:var(--hi-text2)}
.hi-footer-social a:hover{color:var(--hi-accent);background:var(--hi-accent-light)}
.hi-footer-social svg{width:16px;height:16px}

/* === MOBILE BOTTOM NAV === */
.hi-bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:1000;background:#fff;border-top:1px solid var(--hi-border);height:var(--hi-bottom-nav-h);padding:0;box-shadow:0 -1px 8px rgba(0,0,0,.06)}
.hi-bottom-nav-inner{display:flex;align-items:center;justify-content:space-around;height:100%;max-width:500px;margin:0 auto}
.hi-bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.65rem;font-weight:500;color:var(--hi-text3);padding:6px 8px;text-decoration:none;transition:color var(--hi-ease)}
.hi-bottom-nav a.active{color:var(--hi-accent)}
.hi-bottom-nav a svg{width:22px;height:22px}
@media(max-width:360px){
.hi-bottom-nav a{padding:6px 4px;font-size:.6rem}
.hi-bottom-nav a svg{width:20px;height:20px}
}

/* === 404 === */
.hi-404{text-align:center;padding:60px 16px;background:var(--hi-bg-card);border-radius:var(--hi-radius)}
.hi-404 h1{font-size:3.5rem;font-weight:800;color:var(--hi-accent);margin-bottom:10px}
.hi-404 p{font-size:1rem;color:var(--hi-text2);margin-bottom:20px}
.hi-404 a{display:inline-flex;padding:10px 24px;background:var(--hi-accent);color:#fff;border-radius:20px;font-weight:600}

/* === WP BLOCKS === */
.alignwide{max-width:960px;margin:0 auto}
.alignfull{width:100vw;margin-left:calc(-50vw + 50%)}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:.8rem;color:var(--hi-text3);padding:6px 0}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}


/* =========================================================
 * ME PAGE POPUPS — Shortcuts, Watch history, Saved, Offline reading, Inbox, Rate us
 * These classes were used by the page but never styled, so the browser fell back to its
 * defaults: a full-screen house icon, grey default buttons, collapsed star ratings, and
 * a time glued onto the end of each headline.
 * ========================================================= */
.hi-modal-hint{font-size:.84rem;color:var(--hi-text2);line-height:1.55;margin:0 0 14px;padding:10px 12px;background:var(--hi-accent-light);border-radius:10px}

/* Shortcuts */
/* margins, not CSS gap/grid: older Android WebViews (the planned app) can't do flex-gap, and this way it can be checked in any engine */
.hi-modal-body.hi-widget-grid{display:flex;flex-wrap:wrap;padding:9px 13px 17px}
.hi-widget-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 calc(50% - 10px);box-sizing:border-box;margin:5px;padding:16px 6px;background:var(--hi-bg);border:1px solid var(--hi-border2);border-radius:12px;color:var(--hi-text);font-size:.78rem;font-weight:600;text-align:center;line-height:1.2;transition:background var(--hi-ease),border-color var(--hi-ease),color var(--hi-ease)}
.hi-widget-tile:hover,.hi-widget-tile:active{background:var(--hi-accent-light);border-color:var(--hi-accent);color:var(--hi-accent)}
.hi-widget-tile svg{width:26px;height:26px;flex-shrink:0;margin-bottom:8px}

/* Watch history + Favorites: a thumbnail, the headline, and when */
.hi-me-list-item{display:flex;align-items:center;padding:10px 0;border-bottom:1px solid var(--hi-border2);color:var(--hi-text)}
.hi-me-list-item:last-child{border-bottom:none}
.hi-me-list-item img{width:84px;height:64px;object-fit:cover;border-radius:8px;flex-shrink:0;margin-right:12px;background:var(--hi-bg-hover)}
.hi-me-list-noimg{display:flex;align-items:center;justify-content:center;width:84px;height:64px;border-radius:8px;background:var(--hi-bg-hover);color:var(--hi-text3);font-size:1.3rem;font-weight:700;flex-shrink:0;margin-right:12px}
.hi-me-list-body{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.hi-me-list-title{display:block;font-size:.9rem;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hi-me-list-time{display:block;margin-top:4px;font-size:.74rem;color:var(--hi-text3)}
.hi-modal-clear{display:block;width:100%;margin-top:14px;padding:11px;background:none;border:1px solid var(--hi-border);border-radius:24px;color:#C62828;font-size:.85rem;font-weight:600;cursor:pointer;transition:background var(--hi-ease),border-color var(--hi-ease)}
.hi-modal-clear:hover{background:rgba(198,40,40,.06);border-color:#C62828}
.hi-modal-clear[hidden]{display:none}

/* Offline reading: tap a title to open its saved text */
.hi-offline-item{background:var(--hi-bg-card);border:1px solid var(--hi-border2);border-radius:12px;margin-bottom:10px;overflow:hidden}
.hi-offline-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 14px;background:transparent;border:none;text-align:left;font-size:.92rem;font-weight:600;line-height:1.4;color:var(--hi-text);cursor:pointer}
.hi-offline-chev{flex-shrink:0;margin-left:10px;font-size:1.3rem;line-height:1;color:var(--hi-text3);transition:transform .2s ease}
.hi-offline-toggle.open .hi-offline-chev{transform:rotate(90deg)}
.hi-offline-text{display:none;padding:0 14px 14px;font-size:.88rem;line-height:1.7;color:var(--hi-text2);white-space:pre-line}
.hi-offline-text.open{display:block}

/* Inbox */
.hi-inbox-list{display:flex;flex-direction:column}
.hi-inbox-item{display:flex;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--hi-border2);color:var(--hi-text)}
.hi-inbox-item:last-child{border-bottom:none}
.hi-inbox-dot{width:8px;height:8px;margin:7px 12px 0 0;border-radius:50%;background:var(--hi-accent);flex-shrink:0}
.hi-inbox-body{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.hi-inbox-title{display:block;font-size:.9rem;font-weight:600;line-height:1.4}
.hi-inbox-time{display:block;margin-top:3px;font-size:.74rem;color:var(--hi-text3)}

/* Rate us */
.hi-rate-stars{display:flex;justify-content:center;margin:4px 0 16px}
.hi-rate-star{margin:0 3px;padding:4px;background:none;border:none;color:var(--hi-border);line-height:0;cursor:pointer;transition:transform .12s ease,color .12s ease}
.hi-rate-star svg{width:38px;height:38px}
.hi-rate-star.active{color:#F5A623}
.hi-rate-star.active svg{fill:#F5A623}
.hi-rate-star:active{transform:scale(.9)}
.hi-rate-comment{display:block;width:100%;box-sizing:border-box;min-height:84px;padding:11px 14px;background:#fff;border:1px solid var(--hi-border);border-radius:10px;font-family:inherit;font-size:16px;line-height:1.5;color:var(--hi-text);resize:vertical}
.hi-rate-comment:focus{outline:none;border-color:var(--hi-accent);box-shadow:0 0 0 3px var(--hi-accent-light)}
.hi-modal-submit{display:block;width:100%;margin-top:14px;padding:13px;background:var(--hi-accent);color:#fff;border:none;border-radius:26px;font-size:.95rem;font-weight:700;cursor:pointer;transition:background var(--hi-ease)}
.hi-modal-submit:hover{background:var(--hi-accent-dark)}
.hi-modal-submit:disabled{opacity:.6;cursor:default}

/* Dark mode for the popups (the sheet itself had no dark style, so it stayed bright white) */
html.hi-dark .hi-modal,html.hi-dark .hi-modal-head{background:#121212}
html.hi-dark .hi-modal-head{border-bottom-color:#222}
html.hi-dark .hi-modal-head h3{color:#fff}
html.hi-dark .hi-modal-close{background:#222;color:#ccc}
html.hi-dark .hi-modal-empty{color:#888}
html.hi-dark .hi-modal-hint{background:rgba(255,255,255,.06);color:#bbb}
html.hi-dark .hi-widget-tile{background:#1a1a1a;border-color:#2a2a2a;color:#eee}
html.hi-dark .hi-widget-tile:hover,html.hi-dark .hi-widget-tile:active{background:rgba(27,83,192,.25);border-color:var(--hi-accent);color:#fff}
html.hi-dark .hi-me-list-item,html.hi-dark .hi-inbox-item{color:#eee;border-bottom-color:#222}
html.hi-dark .hi-me-list-noimg{background:#1a1a1a}
html.hi-dark .hi-offline-item{background:#161616;border-color:#2a2a2a}
html.hi-dark .hi-offline-toggle{color:#eee}
html.hi-dark .hi-offline-text{color:#bbb}
html.hi-dark .hi-rate-comment{background:#1a1a1a;border-color:#2a2a2a;color:#eee}
html.hi-dark .hi-rate-star{color:#444}
html.hi-dark .hi-rate-star.active{color:#F5A623}
html.hi-dark .hi-modal-clear{border-color:#333;color:#EF5350}

/* =========================================================
 * PROFILE (Me page header + the "Edit profile" popup)
 * Spacing uses margins, not flex `gap` (older Android WebViews). Text fields are 16px
 * so iPhones don't zoom the page when one is tapped.
 * ========================================================= */
.hi-me-avatar-btn{position:relative;display:block;margin:0 auto 12px;padding:0;background:none;border:none;border-radius:50%;line-height:0;cursor:pointer}
.hi-me-profile img.hi-me-avatar{display:block;width:96px;height:96px;margin:0;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.14)}
.hi-me-avatar-edit{position:absolute;right:0;bottom:2px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--hi-accent);color:#fff;border:2px solid #fff}
.hi-me-avatar-edit svg{width:15px;height:15px}
.hi-me-sub{word-break:break-all}
.hi-me-bio{max-width:320px;margin:0 auto 12px;color:var(--hi-text2);font-size:.9rem;line-height:1.5}
.hi-me-bio[hidden]{display:none}
.hi-me-chips{display:flex;flex-wrap:wrap;justify-content:center;margin:0 -3px 12px}
.hi-me-chips:empty{display:none}
.hi-chip{display:inline-flex;align-items:center;margin:3px;padding:5px 11px;background:var(--hi-bg-hover);border-radius:16px;font-size:.78rem;line-height:1.2;color:var(--hi-text2)}
.hi-chip svg{width:13px;height:13px;margin-right:5px;flex-shrink:0}
.hi-chip-link{background:var(--hi-accent-light);color:var(--hi-accent);font-weight:600}
.hi-me-actions{display:flex;align-items:center;justify-content:center;margin-top:4px}
.hi-me-edit-btn{margin-right:18px;padding:9px 22px;background:var(--hi-accent);color:#fff;border:none;border-radius:22px;font-size:.85rem;font-weight:700;cursor:pointer;transition:background var(--hi-ease)}
.hi-me-edit-btn:hover{background:var(--hi-accent-dark)}

.hi-pf{display:block}
.hi-pf-photo{display:flex;align-items:center;margin-bottom:6px}
.hi-pf-avatar{flex-shrink:0;margin-right:16px;line-height:0}
.hi-pf-avatar img,.hi-pf-avatar-img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:1px solid var(--hi-border)}
.hi-pf-photo-actions{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.hi-pf-btn{display:inline-block;padding:8px 16px;border:1px solid var(--hi-accent);border-radius:20px;color:var(--hi-accent);font-size:.84rem;font-weight:600;cursor:pointer;transition:background var(--hi-ease)}
.hi-pf-btn:hover{background:var(--hi-accent-light)}
.hi-pf-link{margin-top:8px;padding:0;background:none;border:none;color:#C62828;font-size:.8rem;font-weight:600;cursor:pointer}
.hi-pf-link[hidden]{display:none}
.hi-pf-hint{display:block;margin-top:6px;font-size:.74rem;line-height:1.4;color:var(--hi-text3)}
.hi-pf-msg,.hi-pf-status{min-height:1.3em;margin:4px 0 10px;font-size:.82rem;line-height:1.4}
.hi-pf-msg.is-ok,.hi-pf-status.is-ok{color:#2E7D32}
.hi-pf-msg.is-error,.hi-pf-status.is-error{color:#C62828}
.hi-pf-field{margin-bottom:14px}
.hi-pf-field label{display:flex;justify-content:space-between;margin-bottom:5px;font-size:.8rem;font-weight:600;color:var(--hi-text2)}
.hi-pf-count{font-weight:400;color:var(--hi-text3)}
.hi-pf-field input,.hi-pf-field textarea{display:block;width:100%;box-sizing:border-box;padding:11px 13px;background:#fff;border:1px solid var(--hi-border);border-radius:10px;font-family:inherit;font-size:16px;line-height:1.4;color:var(--hi-text)}
.hi-pf-field textarea{min-height:80px;line-height:1.5;resize:vertical}
.hi-pf-field input:focus,.hi-pf-field textarea:focus{outline:none;border-color:var(--hi-accent);box-shadow:0 0 0 3px var(--hi-accent-light)}
.hi-pf-field.has-error input,.hi-pf-field.has-error textarea{border-color:#C62828}
.hi-pf-field .hi-pf-hint{margin-top:4px}
.hi-pf-error{margin-top:4px;font-size:.78rem;line-height:1.4;color:#C62828}
.hi-pf-error:empty{display:none}
.hi-pf-heading{margin:20px 0 12px;padding-top:14px;border-top:1px solid var(--hi-border2);font-size:.72rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--hi-text3)}
.hi-pf-note{margin:6px 0 4px;font-size:.78rem;line-height:1.5;color:var(--hi-text3)}

html.hi-dark .hi-me-profile img.hi-me-avatar{border-color:#0a0a0a}
html.hi-dark .hi-me-avatar-edit{border-color:#0a0a0a}
html.hi-dark .hi-me-bio{color:#bbb}
html.hi-dark .hi-chip{background:#1a1a1a;color:#ccc}
html.hi-dark .hi-chip-link{background:rgba(27,83,192,.28);color:#8fb4ff}
html.hi-dark .hi-pf-avatar img,html.hi-dark .hi-pf-avatar-img{border-color:#333}
html.hi-dark .hi-pf-btn{border-color:#5d8bf0;color:#8fb4ff}
html.hi-dark .hi-pf-btn:hover{background:rgba(27,83,192,.25)}
html.hi-dark .hi-pf-field label{color:#bbb}
html.hi-dark .hi-pf-field input,html.hi-dark .hi-pf-field textarea{background:#1a1a1a;border-color:#2a2a2a;color:#eee}
html.hi-dark .hi-pf-heading{border-top-color:#222}
html.hi-dark .hi-pf-msg.is-ok,html.hi-dark .hi-pf-status.is-ok{color:#66BB6A}
html.hi-dark .hi-pf-msg.is-error,html.hi-dark .hi-pf-status.is-error,html.hi-dark .hi-pf-error{color:#EF5350}

/* === RESPONSIVE === */
@media(max-width:1023px){
.hi-left-sidebar{transform:translateX(-100%)}
.hi-page-wrap{margin-left:0}
.hi-header-search{display:none}
}
@media(max-width:768px){
.hi-bottom-nav{display:block}
/* The slide-in menu must stop ABOVE the bottom bar — otherwise the bar covers the last 56px of it,
   and the Links section (Privacy, About, Disclaimer, Contact) can never be scrolled into view. */
.hi-left-sidebar{bottom:var(--hi-bottom-nav-h)}
.hi-sidebar-links{padding-bottom:20px}
body{padding-bottom:60px}
.hi-footer{display:none}
.hi-card a{padding:12px}
.hi-card-img{width:100px;height:75px}
.hi-card-title{font-size:.88rem}
.hi-card.hi-card-big .hi-card-img{height:180px}
.hi-card.hi-card-big .hi-card-title{font-size:1rem}
.hi-article{padding:16px;border-radius:0;margin-bottom:0}
.hi-article-title{font-size:1.15rem}
.hi-page{padding:8px}
}

/* =========================================================
   VIDEO PAGE (Opera News /video/ feed)
   ========================================================= */
.hi-video-page{padding:0;background:var(--hi-bg)}
.hi-video-tabs{display:flex;gap:20px;padding:14px 16px 10px;background:#fff;border-bottom:1px solid var(--hi-border2);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hi-video-tabs::-webkit-scrollbar{display:none}
.hi-video-tabs .hi-vtab{flex-shrink:0;font-size:1rem;font-weight:600;color:var(--hi-text3);padding:4px 0;position:relative;white-space:nowrap}
.hi-video-tabs .hi-vtab.active{color:var(--hi-text)}
.hi-video-tabs .hi-vtab.active::after{content:"";position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);width:24px;height:3px;background:var(--hi-accent);border-radius:2px}
.hi-video-feed{padding:0;background:#f5f5f5}
.hi-vcard{background:#fff;margin-bottom:8px;border-radius:0}
.hi-vcard-media{display:block;position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden}
.hi-vcard-media img{width:100%;height:100%;object-fit:cover;display:block}
.hi-vcard-noimg{width:100%;height:100%;background:linear-gradient(135deg,#444,#222)}
.hi-vcard-title-overlay{position:absolute;top:0;left:0;right:0;padding:14px 14px 24px;color:#fff;font-size:1.05rem;font-weight:600;line-height:1.3;background:linear-gradient(to bottom,rgba(0,0,0,.75),transparent);text-shadow:0 1px 2px rgba(0,0,0,.5)}
.hi-vcard-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;display:flex;align-items:center;justify-content:center}
.hi-vcard-play svg{width:54px;height:54px}
.hi-vcard-dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.7);color:#fff;font-size:.78rem;padding:3px 8px;border-radius:3px;font-weight:600}
.hi-vcard-foot{display:flex;align-items:center;justify-content:space-between;padding:10px 14px}
.hi-vcard-meta{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.hi-vcard-avatar{width:30px;height:30px;border-radius:50%;background:var(--hi-accent);color:#fff;flex-shrink:0;object-fit:cover}
.hi-vcard-author{display:flex;align-items:center;gap:10px;min-width:0}
.hi-vcard-name{font-size:.92rem;font-weight:600;color:var(--hi-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hi-vcard-follow{background:none;border:none;color:var(--hi-accent);font-weight:700;font-size:.85rem;cursor:pointer;padding:0}
.hi-vcard-actions{display:flex;align-items:center;gap:14px;color:var(--hi-text3);flex-shrink:0}
.hi-vact{background:none;border:none;color:var(--hi-text3);display:flex;align-items:center;gap:4px;font-size:.8rem;cursor:pointer;padding:4px}
.hi-vact svg{width:18px;height:18px}
.hi-empty{padding:60px 20px;text-align:center;color:var(--hi-text3);background:#fff}

/* =========================================================
   ME PAGE
   ========================================================= */
.hi-me-page{padding:0;background:#fff;min-height:calc(100vh - 56px)}
.hi-me-head{position:relative;padding:50px 20px 20px;text-align:center}
.hi-me-settings{position:absolute;top:14px;right:16px;width:32px;height:32px;background:none;border:none;color:var(--hi-text3);cursor:pointer;display:flex;align-items:center;justify-content:center}
.hi-me-settings svg{width:22px;height:22px}
.hi-me-login-btn{display:inline-block;background:var(--hi-accent);color:#fff;padding:14px 70px;border-radius:30px;font-weight:700;font-size:1.05rem;text-decoration:none;margin-top:10px}
.hi-me-profile img{width:80px;height:80px;border-radius:50%;margin:0 auto 12px;display:block}
.hi-me-profile h3{font-size:1.15rem;font-weight:700;margin-bottom:4px}
.hi-me-profile p{color:var(--hi-text3);font-size:.88rem;margin-bottom:10px}
.hi-me-logout{display:inline-block;color:var(--hi-accent);font-size:.85rem;font-weight:600}
.hi-me-menu{list-style:none;padding:0;margin:0}
.hi-me-menu li{border-bottom:0}
.hi-me-menu a{display:flex;align-items:center;padding:16px 20px;color:var(--hi-text);text-decoration:none;gap:14px}
.hi-me-menu a:hover{background:var(--hi-bg-hover)}
.hi-me-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--hi-text2);flex-shrink:0}
.hi-me-icon svg{width:22px;height:22px}
.hi-me-icon svg.hi-lang-ico{width:26px;height:17px}
.hi-lang-ico-sm{width:20px;height:13px;flex-shrink:0}
.hi-me-label{flex:1;font-size:1rem;font-weight:500;display:flex;flex-direction:column}
.hi-me-label small{font-weight:400;font-size:.78rem;color:var(--hi-text3);margin-top:2px}
.hi-me-meta{color:var(--hi-text3);font-size:.88rem;margin-right:6px}
.hi-me-badge{background:var(--hi-accent);color:#fff;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:12px;min-width:22px;text-align:center}
.hi-me-dot{width:8px;height:8px;background:var(--hi-accent);border-radius:50%;margin-right:4px}
.hi-me-chev{color:var(--hi-text3);font-size:1.3rem;font-weight:300;line-height:1}
.hi-me-divider{border:none;border-top:8px solid var(--hi-bg);margin:0}

/* Dark mode (applied via class on <html>) */
html.hi-dark{background:#000}
html.hi-dark body{background:#000;color:#fff}
html.hi-dark .hi-me-page{background:#0a0a0a}
html.hi-dark .hi-me-menu a{color:#fff}
html.hi-dark .hi-me-icon{color:#aaa}
html.hi-dark .hi-me-label small,html.hi-dark .hi-me-meta,html.hi-dark .hi-me-chev,html.hi-dark .hi-me-profile p{color:#888}
html.hi-dark .hi-me-divider{border-top-color:#1a1a1a}
html.hi-dark .hi-me-menu a:hover{background:#1a1a1a}
html.hi-dark .hi-bottom-nav{background:#000;border-top-color:#222}
html.hi-dark .hi-bottom-nav a{color:#888}

/* =========================================================
   LOGIN PAGE
   ========================================================= */
.hi-login-page{padding:0;background:#fff;min-height:100vh;position:relative}
.hi-login-back{position:absolute;top:14px;left:14px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;color:var(--hi-text);background:none;border:none;cursor:pointer;z-index:5}
.hi-login-back svg{width:22px;height:22px}
.hi-login-step{display:none;padding:70px 24px 24px;animation:hi-fadein .25s ease}
.hi-login-step.active{display:block}
.hi-login-step h1{font-size:1.6rem;font-weight:700;margin-bottom:14px;line-height:1.3}
.hi-login-sub{color:var(--hi-text3);font-size:.92rem;margin-bottom:36px;line-height:1.5}
.hi-login-sub a{color:var(--hi-accent);font-weight:600}
.hi-login-field{margin-bottom:24px}
.hi-login-field label{display:block;font-size:.78rem;color:var(--hi-text3);margin-bottom:10px}
.hi-login-phone-row{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--hi-border);padding:6px 0}
.hi-login-phone-row:focus-within{border-bottom-color:var(--hi-text)}
.hi-cc-select{border:none;background:none;font-size:1.4rem;font-weight:500;color:var(--hi-text);padding:4px 6px 4px 0;cursor:pointer;outline:none}
#hi-phone{flex:1;border:none;outline:none;font-size:1.4rem;font-weight:500;color:var(--hi-text);background:none;padding:4px 0}
.hi-phone-clear{background:rgba(0,0,0,.08);border:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#666}
.hi-phone-clear svg{width:18px;height:18px}
#hi-otp{width:100%;border:none;outline:none;font-size:2rem;font-weight:600;letter-spacing:.6rem;color:var(--hi-text);background:none;padding:10px 0;border-bottom:1px solid var(--hi-border);text-align:center}
#hi-otp:focus{border-bottom-color:var(--hi-text)}
#hi-email{width:100%;border:none;outline:none;font-size:1.15rem;font-weight:500;color:var(--hi-text);background:none;padding:6px 0;border-bottom:1px solid var(--hi-border)}
#hi-email:focus{border-bottom-color:var(--hi-text)}
.hi-login-tabs{display:flex;gap:8px;margin-bottom:26px;background:var(--hi-bg-hover);padding:4px;border-radius:30px}
.hi-login-tab{flex:1;padding:10px 12px;border:none;background:none;border-radius:26px;font-size:.85rem;font-weight:600;color:var(--hi-text3);cursor:pointer;transition:all var(--hi-ease)}
.hi-login-tab.active{background:#fff;color:var(--hi-accent);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.hi-login-note{font-size:.76rem;color:var(--hi-text3);margin-top:10px;line-height:1.5}
.hi-login-error{color:#e53935;font-size:.85rem;margin-top:8px;min-height:1.2em}
.hi-otp-resend{margin-top:18px;font-size:.85rem;color:var(--hi-text3);text-align:center}
.hi-otp-resend a{color:var(--hi-accent);font-weight:600;text-decoration:none}
.hi-login-next{display:block;width:100%;padding:16px;background:var(--hi-accent);color:#fff;border:none;border-radius:30px;font-size:1rem;font-weight:600;cursor:pointer;margin-top:40px;transition:opacity var(--hi-ease)}
.hi-login-next:disabled{background:#dcdcdc;color:#fff;cursor:not-allowed}
@keyframes hi-fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Hide header & sidebar on login page for a cleaner feel */
.hi-login-page ~ .hi-bottom-nav{display:none!important}
body:has(.hi-login-page) .hi-header,
body:has(.hi-login-page) .hi-left-sidebar,
body:has(.hi-login-page) .hi-sidebar-overlay{display:none!important}
body:has(.hi-login-page){padding-bottom:0!important}

/* =========================================================
   TOP AD BAR + HOMEPAGE NEWS SLIDER (v2.4.0)
   ========================================================= */
.hi-topad{width:100%;background:#fff;text-align:center;line-height:0;border-bottom:1px solid var(--hi-border)}
.hi-topad-link{display:block}
.hi-topad img{width:100%;max-width:1000px;height:auto;margin:0 auto;display:block}
body:has(.hi-login-page) .hi-topad{display:none!important}
@media(min-width:1024px){.hi-topad{display:none!important}}

.hi-section-head{display:flex;align-items:center;justify-content:space-between;padding:14px 4px 8px}
.hi-section-title{font-size:1.05rem;font-weight:700;color:var(--hi-text)}
.hi-section-more{font-size:.8rem;font-weight:600;color:var(--hi-accent)}

.hi-slider-wrap{margin-bottom:10px}
.hi-slider{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:var(--hi-radius)}
.hi-slider::-webkit-scrollbar{display:none}
.hi-slide{position:relative;flex:0 0 100%;scroll-snap-align:center;height:220px;display:block;background-size:cover;background-position:center;background-color:#0b2a5b;overflow:hidden}
.hi-slide.no-img{background:linear-gradient(135deg,var(--hi-accent),var(--hi-accent-dark))}
.hi-slide-shade{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.05) 60%,transparent)}
.hi-slide-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;color:#fff;z-index:2}
.hi-slide-badge{display:inline-block;background:var(--hi-red);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:3px 8px;border-radius:4px;margin-bottom:8px}
.hi-slide-title{font-size:1.05rem;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.hi-slide-meta{font-size:.75rem;opacity:.92;margin-top:6px}
.hi-slider-dots{display:flex;justify-content:center;gap:7px;padding:10px 0 4px}
.hi-dot-btn{width:7px;height:7px;border-radius:50%;border:none;background:var(--hi-border);padding:0;cursor:pointer;transition:all var(--hi-ease)}
.hi-dot-btn.active{background:var(--hi-accent);width:20px;border-radius:4px}
@media(min-width:1024px){.hi-slide{height:340px}.hi-slide-title{font-size:1.3rem}}

/* =========================================================
   GOVERNMENT HELPLINE & CITIZEN SERVICES (v3.10.0)
   ========================================================= */
.hi-gov-hero{background:linear-gradient(135deg,var(--hi-accent),var(--hi-accent-dark));border-radius:var(--hi-radius);padding:22px 18px;margin-bottom:16px;color:#fff}
.hi-gov-hero-title{font-size:1.25rem;font-weight:700;margin-bottom:6px}
.hi-gov-hero-sub{font-size:.82rem;opacity:.9;margin-bottom:14px}
.hi-gov-search-wrap{position:relative;background:#fff;border-radius:999px;padding:10px 14px 10px 40px}
.hi-gov-search-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--hi-text3)}
.hi-gov-search-input{width:100%;border:none;outline:none;font-size:.88rem;color:var(--hi-text);background:transparent}
.hi-gov-search-empty{margin-top:10px;font-size:.8rem;color:#fff;opacity:.9}

.hi-gov-section{margin-bottom:22px}
.hi-gov-section-title{font-size:1rem;font-weight:700;color:var(--hi-text);margin-bottom:8px}
.hi-gov-section-note{font-size:.78rem;color:var(--hi-text2);line-height:1.6;margin-bottom:10px}

.hi-gov-row{display:flex;flex-wrap:wrap;margin:0 -5px}
.hi-gov-row>.hi-gov-card{flex:0 0 calc(50% - 10px);margin:0 5px 10px}

.hi-gov-card{background:var(--hi-bg-card);border:1px solid var(--hi-border);border-radius:var(--hi-radius);padding:14px}
.hi-gov-card-top{display:flex;align-items:flex-start;margin-bottom:8px}
.hi-gov-card-iconwrap{flex:0 0 32px;width:32px;height:32px;border-radius:8px;background:var(--hi-accent-light);color:var(--hi-accent);display:flex;align-items:center;justify-content:center;margin-right:10px}
.hi-gov-card-icon{width:18px;height:18px}
.hi-gov-card-headtext{flex:1;min-width:0}
.hi-gov-card-name{font-size:.86rem;font-weight:700;color:var(--hi-text);line-height:1.3;margin-bottom:5px}
.hi-gov-badge{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.2px;text-transform:uppercase;color:var(--hi-accent);background:var(--hi-accent-light);padding:2px 7px;border-radius:999px;margin-right:4px;margin-bottom:2px}
.hi-gov-badge-state{color:var(--hi-text2);background:var(--hi-border2)}
.hi-gov-card-desc{font-size:.76rem;color:var(--hi-text2);line-height:1.55;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hi-gov-card-phone{font-size:.92rem;font-weight:700;color:var(--hi-navy);margin-bottom:8px}

.hi-gov-card-actions{display:flex;flex-wrap:wrap;margin:0 -3px}
.hi-gov-btn{flex:0 0 auto;margin:0 3px 6px;font-size:.72rem;font-weight:600;padding:6px 10px;border-radius:6px;border:1px solid var(--hi-border);color:var(--hi-text2);text-decoration:none;white-space:nowrap}
.hi-gov-btn-primary{background:var(--hi-accent);border-color:var(--hi-accent);color:#fff}
.hi-gov-btn-call{background:var(--hi-red);border-color:var(--hi-red);color:#fff}

.hi-gov-state-select{width:100%;padding:10px 12px;border:1px solid var(--hi-border);border-radius:var(--hi-radius);font-size:.85rem;color:var(--hi-text);background:var(--hi-bg-card);margin-bottom:12px}

html.hi-dark .hi-gov-card{background:#171717;border-color:#2a2a2a}
html.hi-dark .hi-gov-card-name,html.hi-dark .hi-gov-section-title{color:#f0f0f0}
html.hi-dark .hi-gov-card-desc,html.hi-dark .hi-gov-section-note{color:#aaa}
html.hi-dark .hi-gov-card-phone{color:#fff}
html.hi-dark .hi-gov-card-iconwrap{background:rgba(27,83,192,.22)}
html.hi-dark .hi-gov-badge-state{background:#242424;color:#bbb}
html.hi-dark .hi-gov-btn{border-color:#2a2a2a;color:#ccc;background:#1e1e1e}
html.hi-dark .hi-gov-state-select{background:#171717;border-color:#2a2a2a;color:#f0f0f0}
html.hi-dark .hi-gov-search-wrap{background:#171717}
html.hi-dark .hi-gov-search-input{color:#f0f0f0}

@media(max-width:480px){
.hi-gov-row>.hi-gov-card{flex:0 0 100%;margin:0 0 10px}
}

/* =========================================================
   OUR TEAM (v3.11.0)
   ========================================================= */
.hi-team-hero{text-align:center;padding:22px 16px 6px}
.hi-team-hero-title{font-size:1.25rem;font-weight:700;color:var(--hi-text)}
.hi-team-hero-sub{font-size:.82rem;color:var(--hi-text2);margin-top:4px}

.hi-team-grid{display:flex;flex-wrap:wrap;margin:12px -6px 0}
.hi-team-card{flex:0 0 calc(50% - 12px);margin:0 6px 16px;background:var(--hi-bg-card);border:1px solid var(--hi-border);border-radius:var(--hi-radius);padding:16px;text-align:center}
.hi-team-photo{width:76px;height:76px;border-radius:50%;overflow:hidden;margin:0 auto 10px;background:var(--hi-accent-light);display:flex;align-items:center;justify-content:center}
.hi-team-photo img{width:100%;height:100%;object-fit:cover}
.hi-team-photo-fallback{font-size:1.6rem;font-weight:700;color:var(--hi-accent)}
.hi-team-name{font-size:.9rem;font-weight:700;color:var(--hi-text);margin-bottom:2px}
.hi-team-role{font-size:.74rem;font-weight:600;color:var(--hi-accent);margin-bottom:8px}
.hi-team-bio{font-size:.78rem;line-height:1.6;color:var(--hi-text2);text-align:left}
.hi-team-bio p{margin:0 0 8px}
.hi-team-bio p:last-child{margin-bottom:0}
.hi-team-empty{text-align:center;padding:40px 16px;color:var(--hi-text3);font-size:.85rem}

html.hi-dark .hi-team-card{background:#171717;border-color:#2a2a2a}
html.hi-dark .hi-team-hero-title,html.hi-dark .hi-team-name{color:#f0f0f0}
html.hi-dark .hi-team-hero-sub,html.hi-dark .hi-team-bio{color:#aaa}
html.hi-dark .hi-team-photo{background:rgba(27,83,192,.22)}

@media(max-width:480px){
.hi-team-card{flex:0 0 100%;margin:0 0 12px}
.hi-team-photo{width:88px;height:88px}
}

/* =========================================================
   ABOUT US (v3.14.0)
   ========================================================= */
.hi-about-hero{text-align:center;padding:30px 16px 20px;background:linear-gradient(135deg,var(--hi-accent),var(--hi-accent-dark));color:#fff;border-radius:var(--hi-radius);margin-bottom:18px}
.hi-about-hero-logo{height:40px;width:auto;margin:0 auto 14px;display:block;filter:brightness(0) invert(1)}
.hi-about-hero-title{font-size:1.3rem;font-weight:700;margin-bottom:8px}
.hi-about-hero-tagline{font-size:.86rem;opacity:.92;max-width:480px;margin:0 auto;line-height:1.6}

.hi-about-section{margin-bottom:26px}
.hi-about-section-title{font-size:1.05rem;font-weight:700;color:var(--hi-text);margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--hi-accent-light)}
.hi-about-section-note{font-size:.82rem;color:var(--hi-text2)}
.hi-about-story p{font-size:.86rem;line-height:1.75;color:var(--hi-text2);margin-bottom:12px}
.hi-about-story p:last-child{margin-bottom:0}

.hi-about-feat-grid{display:flex;flex-wrap:wrap;margin:0 -6px}
.hi-about-feat-card{flex:0 0 calc(50% - 12px);margin:0 6px 12px;background:var(--hi-bg-card);border:1px solid var(--hi-border);border-radius:var(--hi-radius);padding:16px}
.hi-about-feat-iconwrap{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9px;background:var(--hi-accent-light);color:var(--hi-accent);margin-bottom:10px}
.hi-about-feat-icon{width:20px;height:20px}
.hi-about-feat-title{font-size:.84rem;font-weight:700;color:var(--hi-text);margin-bottom:4px;line-height:1.3}
.hi-about-feat-desc{font-size:.76rem;line-height:1.55;color:var(--hi-text2)}

.hi-about-team-grid{display:flex;flex-wrap:wrap;margin:0 -6px}
.hi-about-team-card{flex:0 0 calc(50% - 12px);margin:0 6px 14px;text-align:center;background:var(--hi-bg-card);border:1px solid var(--hi-border);border-radius:var(--hi-radius);padding:14px}
.hi-about-team-photo{width:60px;height:60px;border-radius:50%;overflow:hidden;margin:0 auto 8px;background:var(--hi-accent-light);display:flex;align-items:center;justify-content:center}
.hi-about-team-photo img{width:100%;height:100%;object-fit:cover}
.hi-about-team-fallback{font-size:1.3rem;font-weight:700;color:var(--hi-accent)}
.hi-about-team-name{font-size:.8rem;font-weight:700;color:var(--hi-text)}
.hi-about-team-role{font-size:.7rem;color:var(--hi-accent);font-weight:600;margin-top:2px}
.hi-about-team-more{text-align:center;font-size:.8rem}
.hi-about-team-more a{color:var(--hi-accent);font-weight:600;text-decoration:none}

.hi-about-cta{text-align:center;background:var(--hi-bg-card);border:1px solid var(--hi-border);border-radius:var(--hi-radius);padding:26px 16px}
.hi-about-cta-title{font-size:1.05rem;font-weight:700;color:var(--hi-text);margin-bottom:6px}
.hi-about-cta-sub{font-size:.82rem;color:var(--hi-text2);margin-bottom:16px}
.hi-about-cta-actions{display:flex;flex-wrap:wrap;justify-content:center;margin:0 -4px 16px}
.hi-about-cta-btn{flex:0 0 auto;margin:0 4px 8px;font-size:.78rem;font-weight:600;padding:9px 14px;border-radius:999px;border:1px solid var(--hi-border);color:var(--hi-text2);text-decoration:none}
.hi-about-cta-btn-primary{background:var(--hi-accent);border-color:var(--hi-accent);color:#fff}
.hi-about-cta-social{display:flex;justify-content:center;margin:0 -6px}
.hi-about-cta-social a{width:34px;height:34px;margin:0 6px;border-radius:50%;background:var(--hi-accent-light);color:var(--hi-accent);display:flex;align-items:center;justify-content:center}
.hi-about-cta-social svg{width:16px;height:16px}

html.hi-dark .hi-about-feat-card,html.hi-dark .hi-about-team-card,html.hi-dark .hi-about-cta{background:#171717;border-color:#2a2a2a}
html.hi-dark .hi-about-section-title,html.hi-dark .hi-about-feat-title,html.hi-dark .hi-about-team-name,html.hi-dark .hi-about-cta-title{color:#f0f0f0}
html.hi-dark .hi-about-story p,html.hi-dark .hi-about-feat-desc,html.hi-dark .hi-about-cta-sub,html.hi-dark .hi-about-section-note{color:#aaa}
html.hi-dark .hi-about-feat-iconwrap,html.hi-dark .hi-about-team-photo,html.hi-dark .hi-about-cta-social a{background:rgba(27,83,192,.22)}
html.hi-dark .hi-about-cta-btn{border-color:#2a2a2a;color:#ccc;background:#1e1e1e}
html.hi-dark .hi-about-section-title{border-bottom-color:#2a2a2a}

@media(max-width:480px){
.hi-about-feat-card,.hi-about-team-card{flex:0 0 100%;margin:0 0 12px}
}