/* ApkBlitz Store - Custom Static Compiled Styles (Tailwind Utilities & Responsive System) */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');

:root {
  --color-darkbg: #281d38;
  --color-cardbg: #342649;
  --color-inputbg: #1d1428;
  --color-brand: #ff7a55;
  --color-brand-hover: #e06542;
  --color-accent: #fec107;
  --color-slate-100: #f1f5f9;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
}

*, ::before, ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e2e8f0;
  word-break: break-word;
  overflow-wrap: break-word;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  font-family: 'Tajawal', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
  background-color: var(--color-darkbg);
  color: var(--color-slate-100);
}

body {
  margin: 0;
  line-height: inherit;
  font-family: 'Tajawal', sans-serif;
  background-color: var(--color-darkbg);
  color: var(--color-slate-100);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Base Utility Classes */
.bg-darkbg { background-color: var(--color-darkbg); }
.bg-cardbg { background-color: var(--color-cardbg); }
.bg-cardbg\/90 { background-color: rgba(52, 38, 73, 0.9); }
.bg-cardbg\/80 { background-color: rgba(52, 38, 73, 0.8); }
.bg-cardbg\/50 { background-color: rgba(52, 38, 73, 0.5); }
.bg-inputbg { background-color: var(--color-inputbg); }
.bg-brand { background-color: var(--color-brand); }
.bg-brand\/10 { background-color: rgba(255, 122, 85, 0.1); }
.bg-brand\/20 { background-color: rgba(255, 122, 85, 0.2); }
.bg-brand\/90 { background-color: rgba(255, 122, 85, 0.9); }
.bg-accent { background-color: var(--color-accent); }
.bg-accent\/10 { background-color: rgba(254, 193, 7, 0.1); }
.bg-accent\/20 { background-color: rgba(254, 193, 7, 0.2); }

.hover\:bg-brand:hover { background-color: var(--color-brand); }
.hover\:bg-brand-hover:hover { background-color: var(--color-brand-hover); }

.text-brand { color: var(--color-brand); }
.text-accent { color: var(--color-accent); }
.text-darkbg { color: var(--color-darkbg); }
.text-cardbg { color: var(--color-cardbg); }

.border-brand { border-color: var(--color-brand); }
.border-accent { border-color: var(--color-accent); }
.border-purple-950\/30 { border-color: rgba(59, 7, 100, 0.3); }
.border-purple-950\/40 { border-color: rgba(59, 7, 100, 0.4); }
.border-purple-950\/50 { border-color: rgba(59, 7, 100, 0.5); }

/* Typography & Layout Utilities */
.font-tajawal { font-family: 'Tajawal', sans-serif; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* RTL Ticker Animation: Right to Left */
@keyframes tickerSlideRTL {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
.animate-ticker {
  display: inline-block;
  white-space: nowrap;
  animation: tickerSlideRTL 24s linear infinite;
}
.animate-ticker:hover { animation-play-state: paused; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fadeInUp 0.4s ease-out forwards; }

/* Article Auto Formatting Support */
.prose-custom h1 { font-size: 1.5rem; font-weight: 800; color: #ffffff; margin-top: 1.5rem; margin-bottom: 0.75rem; border-right: 4px solid #ff7a55; padding-right: 0.75rem; }
.prose-custom h2 { font-size: 1.25rem; font-weight: 700; color: #fec107; margin-top: 1.25rem; margin-bottom: 0.5rem; border-right: 3px solid #fec107; padding-right: 0.5rem; }
.prose-custom h3 { font-size: 1.1rem; font-weight: 700; color: #ffffff; margin-top: 1rem; margin-bottom: 0.5rem; }
.prose-custom p { margin-bottom: 1rem; line-height: 1.8; color: #cbd5e1; }
.prose-custom ul { list-style-type: disc; margin-right: 1.5rem; margin-bottom: 1rem; }
.prose-custom ol { list-style-type: decimal; margin-right: 1.5rem; margin-bottom: 1rem; }
.prose-custom li { margin-bottom: 0.35rem; }
.prose-custom a { color: #ff7a55; text-decoration: underline; font-weight: 600; }
.prose-custom blockquote { border-right: 4px solid #ff7a55; padding-right: 1rem; margin: 1rem 0; font-style: italic; background-color: rgba(52, 38, 73, 0.4); padding-top: 0.5rem; padding-bottom: 0.5rem; border-radius: 0.5rem; }

/* Ad Slot Container Stability (CLS Prevention) */
.ad-slot-container {
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(29, 20, 40, 0.4);
  border: 1px dashed rgba(255, 122, 85, 0.3);
  border-radius: 0.75rem;
  margin: 1.5rem 0;
  overflow: hidden;
}

/* Touch Targets & Minimum Clickable Sizes (Mobile-First Fix) */
button, a.btn, input[type="submit"] {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Image Aspect Ratio & Size Protection */
img.app-icon {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 1rem;
  aspect-ratio: 1 / 1;
}

img.app-icon-lg {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 1.25rem;
  aspect-ratio: 1 / 1;
}