/* ===========================================================
   apkxy.net — dark skin
   Custom restyle layered on top of the base Appyn stylesheet.
   Safe to edit: none of this touches core theme files.
=========================================================== */

/* ---------- palette ----------
   bg base      : #0c1020
   bg raised    : #151a2c
   bg card      : #171d31
   border       : #262d47
   text main    : #e8ebf5
   text muted   : #8b93ad
   accent teal  : #2be3c1
   accent violet: #8b5cf6
   accent pink  : #ff5f7e (NEW ribbon)
   accent gold  : #ffb92e (stars)
--------------------------------- */

html, body, .wrapper-page, .wrapper-inside, main#main-site {
	background-color: #0c1020 !important;
	color: #e8ebf5 !important;
}

/* Header */
#header {
	background: rgba(12, 16, 32, 0.92) !important;
	backdrop-filter: blur(10px);
	border-bottom: 1px solid #262d47 !important;
	box-shadow: 0 2px 18px rgba(0,0,0,.35) !important;
}

#header .logo a {
	color: #fff !important;
	font-weight: 800;
	letter-spacing: .5px;
}

#header nav a {
	color: #c7cbe0 !important;
}

#header nav .menu>li>a::before {
	background: linear-gradient(90deg,#2be3c1,#8b5cf6) !important;
}

#header nav ul li.current-menu-item a,
#header nav a:hover {
	color: #2be3c1 !important;
}

/* Search bar */
.searchBox form,
#subheader.np .searchBox form {
	background: #151a2c !important;
	border: 1px solid #2a3150 !important;
	border-radius: 999px !important;
	overflow: hidden;
}

.searchBox .sb_search[type=text] {
	background: transparent !important;
	color: #e8ebf5 !important;
}

.searchBox .sb_search[type=text]::placeholder {
	color: #8b93ad !important;
}

.searchBox .sb_submit[type=submit] {
	background: linear-gradient(135deg,#8b5cf6,#2be3c1) !important;
	border: none !important;
	color: #0c1020 !important;
}

.searchBox ul {
	background: #151a2c !important;
	border: 1px solid #2a3150 !important;
}

.searchBox ul li a {
	color: #e8ebf5 !important;
	border-bottom: 1px solid #262d47 !important;
}

.searchBox ul li a:hover {
	background: #1c2338 !important;
}

/* Hero / subheader */
#subheader {
	background: radial-gradient(120% 140% at 50% -10%, #241a4a 0%, #0c1020 60%) !important;
	border-bottom: 1px solid #262d47;
}

#subheader h1 {
	color: #fff !important;
	font-weight: 800;
	text-shadow: 0 0 30px rgba(139,92,246,.35);
}

#subheader h2 {
	color: #b6bcd6 !important;
	font-weight: 400;
}

/* Section titles, e.g. "TOP RATED APPS" */
.section .title-section {
	color: #fff !important;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 800;
	position: relative;
	padding-bottom: 12px;
}

.section .title-section::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 46px;
	height: 4px;
	border-radius: 4px;
	background: linear-gradient(90deg,#2be3c1,#8b5cf6);
}

.section a.more {
	color: #2be3c1 !important;
}

/* App cards */
.bav {
	background: #171d31 !important;
	border: 1px solid #262d47 !important;
	border-radius: 14px !important;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.bav:hover {
	transform: translateY(-4px);
	border-color: #8b5cf6 !important;
	box-shadow: 0 12px 30px rgba(43,227,193,.12) !important;
}

.bav .title,
.bav1 a .title,
.bap-c .title {
	color: #fff !important;
	font-weight: 700;
}

.bav .version,
.bav .developer,
.bav .app-date,
.bap-c .version,
.bap-c .developer,
.bap-c .app-date {
	color: #8b93ad !important;
}

/* Star rating */
.bav .box-rating .rating,
.box-rating .rating {
	filter: hue-rotate(0deg);
}

.box-rating .rating span,
.box-rating .rating i {
	color: #ffb92e !important;
}

/* Ribbon badges (NEW / UPDATED) — added via apkxy_card_ribbon()
   Corner pill instead of a rotated banner: never overflows the card,
   never overlaps the title/rating, and scales fine at any width. */
.bav {
	position: relative;
}

.bav .ribbon {
	position: absolute;
	top: 8px;
	left: 8px;
	max-width: calc(100% - 16px);
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 10px;
	line-height: 1.6;
	font-weight: 800;
	letter-spacing: .4px;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #0c1020;
	z-index: 5;
	box-shadow: 0 2px 8px rgba(0,0,0,.4);
}

.bav .ribbon-new {
	background: linear-gradient(90deg,#ff5f7e,#ff8a5f);
}

.bav .ribbon-updated {
	background: linear-gradient(90deg,#2be3c1,#37c8ff);
}

/* Pagination */
.pagination .current,
.pagination .page-numbers {
	background: #171d31 !important;
	color: #c7cbe0 !important;
	border: 1px solid #262d47 !important;
}

.pagination .page-numbers.current,
.pagination a:hover {
	background: linear-gradient(135deg,#8b5cf6,#2be3c1) !important;
	color: #0c1020 !important;
	border-color: transparent !important;
}

/* "View more" style buttons */
.section a.more,
input[type=submit],
.buttond:not(.t):not(.yt) {
	background: linear-gradient(135deg,#8b5cf6,#2be3c1) !important;
	color: #0c1020 !important;
	border: none !important;
	font-weight: 700 !important;
}

.buttond:not(.danv):not(.t):not(.yt):hover {
	filter: brightness(1.08);
}

/* Single app page — download / telegram / youtube buttons */
.buttond.downloadAPK {
	background: linear-gradient(135deg,#8b5cf6,#2be3c1) !important;
	color: #0c1020 !important;
}

.buttond.t {
	background: #229ed9 !important;
	color: #fff !important;
}

.buttond.yt {
	background: #ff0033 !important;
	color: #fff !important;
}

.app-icb, .box-data-app, .app-spe {
	background: #151a2c !important;
	border: 1px solid #262d47 !important;
	border-radius: 14px !important;
}

.table td, .table th {
	color: #c7cbe0 !important;
	border-color: #262d47 !important;
}

/* Footer */
#footer {
	background: #0a0d18 !important;
	border-top: 1px solid #262d47 !important;
}

#footer .widget .widget-title {
	color: #fff !important;
}

#footer .widget ul li a,
#footer a {
	color: #8b93ad !important;
}

#footer a:hover {
	color: #2be3c1 !important;
}

.footer-bottom, .footer-bottom .copy {
	color: #626a86 !important;
}

/* Scrollbar accent (optional, cosmetic) */
::selection {
	background: #8b5cf6;
	color: #fff;
}

/* ===========================================================
   v2 — unified post pages, sticky header, progress bar,
   card grid, buttons, typography, mobile pass
=========================================================== */

/* ---- 1 & 11 & 12 — base scaling, fluid type, spacing ---- */
html { -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }

#subheader h1 { font-size: clamp(26px, 6vw, 44px) !important; }
#subheader h2 { font-size: clamp(14px, 2.6vw, 18px) !important; }
.section .title-section { font-size: clamp(16px, 3.4vw, 22px) !important; margin: 20px 10px 14px !important; }
.bav .title, .bap-c .title { font-size: clamp(13px, 2.6vw, 15px) !important; line-height: 1.35; }

.section { padding: 6px 0 22px; }
.container { padding-left: 14px; padding-right: 14px; }

/* ---- 2 — unify post/single page background, no white gaps ---- */
body.single, body.single-versions,
.app-s, .app-s .box, .app-p .box,
.app-s .box-content, .app-s .entry, .entry,
.app-s .box.rlat, .rlat, .pxtd,
.app-icb, .box-data-app, .app-spe,
.entry table, .entry table td, .entry table th,
.entry blockquote {
	background: #0c1020 !important;
	color: #d7dbea !important;
	border-color: #262d47 !important;
}

.entry a { color: #2be3c1 !important; }

/* Table of Contents plugins (Easy TOC / generic) */
.ez-toc-container, #ez-toc-container, .ez-toc-v2_0_3,
.entry .toc, .entry .table-of-contents {
	background: #151a2c !important;
	border: 1px solid #262d47 !important;
	color: #d7dbea !important;
	box-shadow: none !important;
}
.ez-toc-container a, .entry .toc a { color: #2be3c1 !important; }
.ez-toc-title, .ez-toc-title-toggle { color: #fff !important; }

/* ---- 3 — smooth sticky header (class toggled by JS) ---- */
#header {
	position: sticky;
	top: 0;
	z-index: 999;
	transition: box-shadow .25s ease, padding .25s ease, background-color .25s ease;
	will-change: box-shadow, padding;
}

#header.is-sticky {
	box-shadow: 0 6px 24px rgba(0,0,0,.45) !important;
}

#header .container { transition: padding .25s ease; }
#header.is-sticky .container { padding-top: 6px; padding-bottom: 6px; }

/* ---- 4 — top scroll progress bar ---- */
#apkxy-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: transparent;
	z-index: 1001;
	pointer-events: none;
}

#apkxy-progress-bar {
	display: block;
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg,#2be3c1,#8b5cf6,#ff5f7e);
	transition: width .12s linear;
}

/* ---- 6 — Read more button ---- */
.app-s .readmore,
.section.blog .bloques li .excerpt .readmore a {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	background: linear-gradient(135deg,#8b5cf6,#2be3c1) !important;
	color: #0c1020 !important;
	font-weight: 800 !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 10px 22px !important;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
	box-shadow: 0 6px 18px rgba(139,92,246,.25);
}

.app-s .readmore:hover,
.section.blog .bloques li .excerpt .readmore a:hover {
	transform: translateY(-2px);
	filter: brightness(1.08);
	box-shadow: 0 10px 24px rgba(139,92,246,.35);
}

/* ---- 7 — post hero alignment ---- */
.app-icb {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}

.app-icb .buttond {
	width: 100%;
	text-align: center;
	justify-content: center;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ---- 8 — card grid: equal height/spacing/consistency ---- */
.section .baps {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
	padding: 4px 6px;
}

.section .baps .bav,
.section .baps .bav1,
.section .baps .bav2 {
	width: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.section .baps .bav a { display: flex; flex-direction: column; height: 100%; }
.bap-c { display: flex; flex-direction: column; flex: 1; padding: 10px 12px 14px; }

/* Carousel row (Top Rated) keeps native scroll/peek behavior, just tidy gutters */
.px-carousel-wrapper { padding: 4px 2px; }
.px-carousel-item { padding: 6px; }

/* ---- 9 — mobile menu polish ---- */
#menu-mobile ul li a {
	display: flex;
	align-items: center;
	min-height: 46px;
	padding: 0 18px !important;
	color: #d7dbea !important;
}

#menu-mobile { background: #0c1020 !important; }
#menu-mobile ul li { border-bottom: 1px solid #1e2438; }
#header nav .menu-open { color: #fff; }

/* Hide the built-in light/dark toggle — this skin is dark-only */
#button_light_dark { display: none !important; }

/* ---- 10 — search box full responsiveness ---- */
.searchBox, #subheader .searchBox, #subheader.np .searchBox {
	width: 100%;
	max-width: 620px;
	margin: 0 auto;
}

.searchBox form { width: 100%; display: flex; }
.searchBox .sb_search[type=text] { flex: 1; min-width: 0; }

/* ---- 13 — floating widgets never cover buttons/content ---- */
.app-icb .buttond,
.app-icb .box-rating,
#subheader .searchBox {
	position: relative;
	z-index: 2;
}

/* generic safe-zone for third-party floating chat/ad widgets */
body[class] iframe[style*="position: fixed"],
div[id*="chat-widget"],
div[class*="floating-ad"],
div[class*="fixed-ad"] {
	max-width: 56px;
	max-height: 56px;
}

/* ===========================================================
   Responsive breakpoints — 1920 down to 320
=========================================================== */

@media (max-width: 1024px) {
	.section .baps { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
}

@media (max-width: 768px) {
	#header .container { flex-wrap: wrap; row-gap: 8px; }
	.section .baps { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
	.app-icb { padding: 14px !important; }
	.container { padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 480px) {
	.section .baps { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	#subheader h1 { font-size: 28px !important; }
	.searchBox form { border-radius: 14px !important; }
	.buttond { font-size: 13px !important; padding: 12px 16px !important; }
}

@media (max-width: 360px) {
	.section .baps { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.container { padding-left: 10px; padding-right: 10px; }
	.section .title-section { font-size: 15px !important; }
}