/* ==========================================================================
   MOBILE MENU — modern redesign (2026-07-26)
   --------------------------------------------------------------------------
   The full-screen mobile nav panel (`.vk-mobile`, markup in the header's own
   Elementor HTML widget — see w9-content-hubs.php memory note on how that
   template works) has been through several prior redesign generations
   already: base rules in wickets-home.css (~line 1086), a full rewrite
   (~9865), ANOTHER full rewrite (~12686), then header-v3-dark-yellow.css's
   own override layer on top of all three. Rather than untangle four layers
   of competing `!important` to edit in place, this file is a single
   decisive top coat: every rule below matches or exceeds the specificity of
   the existing layers AND loads last (enqueue dependency chain terminates
   here), so it wins outright rather than fighting for partial control.

   No markup changes needed — every visual addition (icons, chip circles,
   WhatsApp glyph) is pure CSS (`content`/pseudo-elements/data-URI
   backgrounds), same technique already used site-wide for icon-less raw
   `<li>`/`<i>` markup (see e.g. the ul-checklist `::before` icons in
   9w-blog.php's article body CSS). Reason: editing the header's raw HTML
   blob in the DB is a real (if now well-understood) risk — see
   content_hub_pages_status memory note — worth avoiding when a pure-CSS
   route fully covers the ask.

   Palette matches every other pass this session: bg gradient
   #0B0906->#15110A->#17150F, gold #FFC72C, heading #FBF6EC, muted #C9BFA6.
   ========================================================================== */

/* ---------- search panel close button -> red (direct request, 2026-07-26) ----------
   Unrelated to the mobile-menu redesign above — riding along in this file
   purely because it's the one guaranteed to load last in the header's CSS
   dependency chain (header-v3-dark-yellow.css sets
   `body.vk .vk-search-panel__close{ color:var(--hdx-text) !important;
   background:rgba(255,199,44,.1) !important; }`, which this must beat).
   Applies at every width — the search panel isn't mobile-only. */
body.vk .vk-search-panel__close {
	color: #DC5B4B !important;
	background: rgba(220, 91, 75, .12) !important;
	border-color: rgba(220, 91, 75, .35) !important;
}
body.vk .vk-search-panel__close:hover {
	background: rgba(220, 91, 75, .24) !important;
	color: #E4796B !important;
}

@media (max-width: 900px) {

/* ---------- panel shell ---------- */
body.vk .vk-mobile {
	background:
		radial-gradient(60% 40% at 12% 0%, rgba(255, 199, 44, .16), transparent 62%),
		radial-gradient(55% 45% at 88% 100%, rgba(200, 134, 11, .14), transparent 65%),
		linear-gradient(180deg, #0B0906 0%, #15110A 55%, #17150F 100%) !important;
}
body.vk .vk-mobile__inner {
	display: flex !important;
	flex-direction: column !important;
	min-height: 100%;
	padding: 20px 18px 28px !important;
}
body.vk .vk-mobile__inner > ul {
	/* !important throughout: wickets-home.css already forces
	   `body.vk .vk-mobile ul{ display:flex !important; flex-direction:column
	   !important; gap:2px !important; margin:0 0 auto !important; ...}` on
	   this exact element — display/flex-direction happen to already match
	   what's wanted here, but gap does NOT (2px, not the 10px meant to
	   separate the item cards), and without !important on my own side
	   there's nothing to win that specific property with regardless of
	   selector specificity (same class of bug as the icon-chip opacity/
	   display fix earlier in this file). */
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	gap: 10px !important;
	max-width: 480px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 0 !important;
	list-style: none !important;
}

/* ---------- top-level rows -> premium cards ---------- */
body.vk .vk-mobile li.vk-mobile__item {
	list-style: none !important;
}
body.vk .vk-mobile li.vk-mobile__item > a {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	width: 100% !important;
	padding: 15px 16px 15px 60px !important;
	border-radius: 18px !important;
	background: linear-gradient(135deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .02) 100%) !important;
	border: 1px solid rgba(255, 199, 44, .14) !important;
	font-family: var(--s5-en, 'Poppins', sans-serif) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	transition: background .25s ease, border-color .25s ease, transform .25s ease !important;
}
body.vk .vk-mobile li.vk-mobile__item > a:hover,
body.vk .vk-mobile li.vk-mobile__item > a:focus-visible,
body.vk .vk-mobile li.vk-mobile__item > a.is-current,
body.vk .vk-mobile li.vk-mobile__item.is-open > a {
	background: linear-gradient(135deg, rgba(255, 199, 44, .14) 0%, rgba(255, 199, 44, .05) 100%) !important;
	border-color: rgba(255, 199, 44, .38) !important;
	transform: translateX(2px) !important;
}
body.vk .vk-mobile li a .lms-mobile__label {
	color: #F3ECDD !important;
	transition: color .25s ease !important;
}
body.vk .vk-mobile li.vk-mobile__item > a:hover .lms-mobile__label,
body.vk .vk-mobile li.vk-mobile__item > a.is-current .lms-mobile__label,
body.vk .vk-mobile li.vk-mobile__item.is-open > a .lms-mobile__label {
	color: #FFE066 !important;
}

/* icon chip — gold gradient circle, icon glyph via ::before content (no
   markup change needed). Positioned absolutely so it doesn't disturb the
   label/caret flex row; matched to each of the 5 fixed top-level items by
   position, same technique as targeting any other fixed, known nav order. */
/* !important throughout: wickets-home.css already forces
   `body.vk .vk-mobile li a::before{ display:none !important; content:none
   !important }` site-wide (a blanket "no decorative pseudo-elements in this
   menu" reset from an earlier pass) — any non-!important declaration here
   loses to that regardless of selector specificity, since !important always
   beats non-!important first, before specificity is ever compared. */
body.vk .vk-mobile li.vk-mobile__item > a::before {
	/* opacity: legacy wickets-home.css reuses this exact ::before slot for an
	   unrelated hover-only 3px accent bar, base state opacity:0 (no
	   !important there, but since THIS rule never set opacity at all, there
	   was nothing to win the cascade with — opacity:0 applied by default). */
	opacity: 1 !important;
	content: '' !important;
	position: absolute !important;
	left: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 34px !important;
	height: 34px !important;
	border-radius: 11px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: linear-gradient(150deg, #FFD34D 0%, #C8860B 100%) !important;
	color: #1A0F02 !important;
	font: normal 900 15px/34px "Font Awesome 5 Free" !important;
	text-align: center !important;
}
body.vk .vk-mobile li.vk-mobile__item:nth-child(1) > a::before { content: "\f508" !important; } /* এজেন্টস — user-tie */
body.vk .vk-mobile li.vk-mobile__item:nth-child(2) > a::before { content: "\f590" !important; } /* হেল্প ডেস্ক — headset */
body.vk .vk-mobile li.vk-mobile__item:nth-child(3) > a::before { content: "\f06b" !important; } /* গেমস ও বোনাস — gift */
body.vk .vk-mobile li.vk-mobile__item:nth-child(4) > a::before { content: "\f059" !important; } /* প্রশ্নোত্তর — question-circle */
body.vk .vk-mobile li.vk-mobile__item:nth-child(5) > a::before { content: "\f1ea" !important; } /* ব্লগ — newspaper */

/* caret */
body.vk .vk-mobile__inner .lms-mobile__caret {
	margin-left: auto !important;
	flex: none !important;
	color: rgba(255, 199, 44, .7) !important;
	transition: transform .3s cubic-bezier(.2, .7, .15, 1) !important;
}
body.vk .vk-mobile__inner .vk-mobile__item.has-children.is-open > a .lms-mobile__caret {
	transform: rotate(180deg) !important;
}

/* ---------- submenu rows ---------- */
body.vk .vk-mobile .lms-mobile__sub {
	list-style: none !important;
	/* margin/padding default to 0 — collapsed state (max-height:0 +
	   overflow:hidden, set elsewhere) clips CONTENT but not margin, so a
	   nonzero margin here was adding dead space to every dropdown item
	   even while closed, making it taller than the plain (no-submenu)
	   items and throwing off row-to-row rhythm in the list above. Applied
	   only once actually open, below. */
	margin: 0 !important;
	padding: 0 0 0 20px !important;
	border-left: 2px solid rgba(255, 199, 44, .20) !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
}
body.vk .vk-mobile li.vk-mobile__item.is-open > .lms-mobile__sub {
	margin: 6px 0 4px !important;
	padding: 2px 0 2px 20px !important;
}
body.vk .vk-mobile .lms-mobile__sub-item > a {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	padding: 11px 14px !important;
	border-radius: 12px !important;
	font-family: var(--s5-bn, 'Noto Sans Bengali', sans-serif) !important;
	font-size: 14.5px !important;
	font-weight: 500 !important;
	color: #C9BFA6 !important;
	background: transparent !important;
	transition: background .2s ease, color .2s ease, padding-left .2s ease !important;
}
body.vk .vk-mobile .lms-mobile__sub-item > a::before {
	content: '' !important;
	width: 5px !important;
	height: 5px !important;
	border-radius: 50% !important;
	background: rgba(255, 199, 44, .45) !important;
	margin-right: 10px !important;
	flex: none !important;
	position: static !important;
	inset: auto !important;
}
body.vk .vk-mobile .lms-mobile__sub-item > a:hover,
body.vk .vk-mobile .lms-mobile__sub-item > a:focus-visible,
body.vk .vk-mobile .lms-mobile__sub-item > a.is-current {
	background: rgba(255, 199, 44, .08) !important;
	color: #FFE066 !important;
	padding-left: 18px !important;
}
body.vk .vk-mobile .lms-mobile__sub-item > a:hover::before,
body.vk .vk-mobile .lms-mobile__sub-item > a.is-current::before {
	background: #FFC72C !important;
}

/* ---------- CTA row ---------- */
body.vk .vk-mobile li.vk-mobile__cta {
	list-style: none !important;
	margin-top: 8px !important;
}
body.vk .vk-mobile li.vk-mobile__cta a {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	padding: 16px 20px 16px 44px !important;
	border-radius: 999px !important;
	background: linear-gradient(150deg, #FFD34D 0%, #C8860B 100%) !important;
	color: #1A0F02 !important;
	font-family: var(--s5-en, 'Poppins', sans-serif) !important;
	font-size: 15.5px !important;
	font-weight: 700 !important;
	box-shadow: 0 14px 30px -10px rgba(200, 134, 11, .55) !important;
	transition: transform .3s ease, box-shadow .3s ease !important;
}
body.vk .vk-mobile li.vk-mobile__cta a:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 18px 36px -10px rgba(200, 134, 11, .65) !important;
	padding-left: 44px !important;
}
/* WhatsApp glyph — same icon path as the desktop header CTA, embedded as a
   data-URI background on ::before (content can't render an inline <svg>,
   but CAN size/position a background image on a generated box). */
body.vk .vk-mobile li.vk-mobile__cta a::before {
	/* display/opacity/top+transform all !important and explicit: same two
	   gotchas as the nav-item icon chip above — a same-slot legacy rule
	   forces display:none !important here specifically for the CTA button
	   (body.vk .vk-mobile__cta a::before{ display:none !important; ... }),
	   and nothing here competed with it unless every property that legacy
	   rule touches is explicitly re-declared. */
	display: block !important;
	opacity: 1 !important;
	content: '' !important;
	position: absolute !important;
	left: 18px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 18px !important;
	height: 18px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231A0F02' d='M20 3.5A11.7 11.7 0 0 0 3.5 20l-1 4 4.1-1A11.7 11.7 0 1 0 20 3.5Zm-2.5 14.6c-.3.7-1.5 1.3-2 1.4-.6.1-1.3.1-1.9-.1-.4-.1-1-.3-1.7-.6-3-1.3-5-4.4-5.2-4.6s-1.2-1.6-1.2-3 .8-2.2 1-2.5a1.1 1.1 0 0 1 .8-.4h.6c.2 0 .5-.1.7.4l1 2.3c.1.1.1.3 0 .5s-.2.4-.3.5l-.4.5c-.2.2-.3.4-.1.7a8.8 8.8 0 0 0 1.7 2.1c1.1 1 2.1 1.4 2.4 1.5.3.1.5.1.7-.1l1-1.2c.2-.2.5-.2.7-.1l2 1c.3.2.5.3.6.4.1.1.1.7-.2 1.4Z'/%3E%3C/svg%3E") !important;
	background-size: 18px 18px !important;
	background-repeat: no-repeat !important;
}

/* ---------- footer ---------- */
body.vk .vk-mobile__foot {
	flex: none;
	margin-top: 22px !important;
	padding: 18px 16px 4px !important;
	border-top: 1px solid rgba(255, 199, 44, .14) !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 4px !important;
	text-align: center !important;
}
body.vk .vk-mobile__foot span {
	font-family: var(--s5-en, 'Poppins', sans-serif) !important;
	font-size: 12px !important;
}
body.vk .vk-mobile__foot span:first-child {
	color: #FFC72C !important;
	font-weight: 700 !important;
	letter-spacing: .02em !important;
}
body.vk .vk-mobile__foot span:last-child {
	color: #8A8270 !important;
}

@media (prefers-reduced-motion: reduce) {
	body.vk .vk-mobile li.vk-mobile__item > a,
	body.vk .vk-mobile .lms-mobile__sub-item > a,
	body.vk .vk-mobile li.vk-mobile__cta a { transition: none !important; }
}

} /* /max-width:900px */