/* King Cinema app-like public web theme. Keep admin scoped out. */
:root {
    --kc-bg: #050507;
    --kc-bg-soft: #0b0b10;
    --kc-surface: #121218;
    --kc-surface-2: #191922;
    --kc-border: rgba(255, 255, 255, 0.09);
    --kc-text: #f8f8f8;
    --kc-muted: #a6a6ad;
    --kc-dim: #73737d;
    --kc-red: #e50914;
    --kc-red-2: #b40710;
    --kc-gold: #f8d471;
    --kc-radius: 14px;
    --kc-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
    --kc-font-ar: "Cairo", "Tajawal", system-ui, sans-serif;
    --kc-font-en: "Inter", "Cairo", system-ui, sans-serif;
}

html {
    background: var(--kc-bg);
}

body.kc-app-web {
    background:
        radial-gradient(circle at 76% -8%, rgba(229, 9, 20, 0.18), transparent 34rem),
        radial-gradient(circle at 7% 8%, rgba(248, 212, 113, 0.08), transparent 24rem),
        linear-gradient(180deg, #07070a 0%, var(--kc-bg) 44%, #030304 100%) !important;
    color: var(--kc-text) !important;
    font-family: var(--kc-font-ar);
    min-height: 100vh;
}

body.kc-app-web.home-store-light {
    background: #ffffff !important;
    color: #202124 !important;
}

body.kc-app-web.profile-social-light {
    background: #f0f2f5 !important;
    color: #111827 !important;
}

body.kc-app-web.profile-social-light #main-content,
body.kc-app-web.profile-social-light #page-content {
    background: #f0f2f5 !important;
    color: #111827 !important;
}

body.kc-app-web.profile-social-light #bottom-navigation-bar {
    background: rgba(255, 255, 255, 0.96) !important;
    border-top: 1px solid #e5e7eb !important;
    box-shadow: 0 -4px 14px rgba(17, 24, 39, 0.08) !important;
    backdrop-filter: blur(14px);
}

body.kc-app-web.profile-social-light #bottom-navigation-bar .nav-btn,
body.kc-app-web.profile-social-light #bottom-navigation-bar .nav-btn span,
body.kc-app-web.profile-social-light #bottom-navigation-bar .nav-btn svg {
    color: #6b7280 !important;
}

body.kc-app-web.profile-social-light #bottom-navigation-bar .nav-btn.active,
body.kc-app-web.profile-social-light #bottom-navigation-bar .nav-btn.active span,
body.kc-app-web.profile-social-light #bottom-navigation-bar .nav-btn.active svg {
    color: #0866ff !important;
}

body.kc-app-web.home-store-light #main-content,
body.kc-app-web.home-store-light #page-content,
body.kc-app-web.home-store-light .play-store-page,
body.kc-app-web.home-store-light .play-section,
body.kc-app-web.home-store-light .app-details-section {
    background: #ffffff !important;
    color: #202124 !important;
}

body.kc-app-web.home-store-light .play-store-page {
    min-height: 100vh;
}

body.kc-app-web.home-store-light .play-hero-grid {
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

body.kc-app-web.home-store-light .header-stats-wrapper {
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

body.kc-app-web.home-store-light .text-gray-900,
body.kc-app-web.home-store-light .text-gray-800,
body.kc-app-web.home-store-light .stat-value,
body.kc-app-web.home-store-light h1,
body.kc-app-web.home-store-light h2,
body.kc-app-web.home-store-light h3 {
    color: #202124 !important;
}

body.kc-app-web.home-store-light .text-gray-700,
body.kc-app-web.home-store-light .text-gray-600,
body.kc-app-web.home-store-light .text-gray-500,
body.kc-app-web.home-store-light .text-gray-400,
body.kc-app-web.home-store-light .stat-text {
    color: #5f6368 !important;
}

body.kc-app-web.home-store-light .border-gray-100,
body.kc-app-web.home-store-light .border-gray-200,
body.kc-app-web.home-store-light .border-gray-300 {
    border-color: #e5e9ec !important;
}

body.kc-app-web.home-store-light img,
body.kc-app-web.home-store-light video {
    background-color: #f6f8f9;
}

body.kc-app-web.home-store-light #bottom-navigation-bar {
    background: rgba(255, 255, 255, 0.96) !important;
    border-top: 1px solid #e5e9ec !important;
    box-shadow: 0 -4px 14px rgba(60, 64, 67, 0.08) !important;
    backdrop-filter: blur(14px);
}

body.kc-app-web.home-store-light #bottom-navigation-bar .nav-btn,
body.kc-app-web.home-store-light #bottom-navigation-bar .nav-btn span,
body.kc-app-web.home-store-light #bottom-navigation-bar .nav-btn svg {
    color: #6b7280 !important;
}

body.kc-app-web.home-store-light #bottom-navigation-bar .nav-btn:hover,
body.kc-app-web.home-store-light #bottom-navigation-bar .nav-btn:hover span,
body.kc-app-web.home-store-light #bottom-navigation-bar .nav-btn:hover svg,
body.kc-app-web.home-store-light #bottom-navigation-bar .nav-btn.active,
body.kc-app-web.home-store-light #bottom-navigation-bar .nav-btn.active span,
body.kc-app-web.home-store-light #bottom-navigation-bar .nav-btn.active svg {
    color: #01875f !important;
}

body.kc-app-web.home-store-light #bottom-navigation-bar .nav-indicator,
body.kc-app-web.home-store-light #discover-btn {
    background: #01875f !important;
    box-shadow: 0 8px 20px rgba(1, 135, 95, 0.28) !important;
}

body.kc-app-web.home-store-light #discover-btn {
    border-color: #ffffff !important;
    color: #ffffff !important;
}

body.kc-app-web:not(.admin-body) #main-content,
body.kc-app-web:not(.admin-body) #page-content {
    background: transparent !important;
    color: var(--kc-text) !important;
}

body.kc-app-web:not(.admin-body) #main-content {
    padding-bottom: 82px;
}

body.kc-app-web:not(.admin-body) ::selection {
    background: rgba(229, 9, 20, 0.45);
    color: #fff;
}

body.kc-app-web:not(.admin-body) .bg-white,
body.kc-app-web:not(.admin-body) .bg-gray-50,
body.kc-app-web:not(.admin-body) .bg-gray-100,
body.kc-app-web:not(.admin-body) .bg-\[\#f9f9f9\] {
    background-color: var(--kc-surface) !important;
}

body.kc-app-web:not(.admin-body) .text-gray-900,
body.kc-app-web:not(.admin-body) .text-gray-800,
body.kc-app-web:not(.admin-body) .text-\[\#0f0f0f\] {
    color: var(--kc-text) !important;
}

body.kc-app-web:not(.admin-body) .text-gray-700,
body.kc-app-web:not(.admin-body) .text-gray-600,
body.kc-app-web:not(.admin-body) .text-\[\#606060\] {
    color: var(--kc-muted) !important;
}

body.kc-app-web:not(.admin-body) .text-gray-500,
body.kc-app-web:not(.admin-body) .text-gray-400 {
    color: var(--kc-dim) !important;
}

body.kc-app-web:not(.admin-body) .border-gray-100,
body.kc-app-web:not(.admin-body) .border-gray-200,
body.kc-app-web:not(.admin-body) .border-gray-300,
body.kc-app-web:not(.admin-body) .border-white\/10 {
    border-color: var(--kc-border) !important;
}

body.kc-app-web:not(.admin-body) .shadow-sm,
body.kc-app-web:not(.admin-body) .shadow-lg,
body.kc-app-web:not(.admin-body) .shadow-2xl {
    box-shadow: var(--kc-shadow) !important;
}

body.kc-app-web:not(.admin-body) .play-section,
body.kc-app-web:not(.admin-body) .app-details-section,
body.kc-app-web:not(.admin-body) .comments-sheet-content,
body.kc-app-web:not(.admin-body) #download-app-modal .sticky,
body.kc-app-web:not(.admin-body) #download-app-modal {
    background: linear-gradient(180deg, rgba(24, 24, 32, 0.96), rgba(13, 13, 18, 0.98)) !important;
    color: var(--kc-text) !important;
    border-color: var(--kc-border) !important;
}

body.kc-app-web:not(.admin-body) .play-section {
    border-block: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 18px;
    padding-bottom: 18px;
}

body.kc-app-web:not(.admin-body) img,
body.kc-app-web:not(.admin-body) video {
    background-color: #101016;
}

body.kc-app-web:not(.admin-body) .app-store-screenshot img,
body.kc-app-web:not(.admin-body) .video-carousel-item video,
body.kc-app-web:not(.admin-body) [class*="rounded-xl"] img,
body.kc-app-web:not(.admin-body) [class*="rounded-2xl"] img {
    border-color: var(--kc-border) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.36);
}

body.kc-app-web:not(.admin-body) .tag-item,
body.kc-app-web:not(.admin-body) button,
body.kc-app-web:not(.admin-body) a[class*="rounded-full"],
body.kc-app-web:not(.admin-body) a[class*="rounded-lg"] {
    border-color: var(--kc-border) !important;
}

body.kc-app-web:not(.admin-body) .text-\[\#01875f\],
body.kc-app-web:not(.admin-body) .hover\:text-\[\#01875f\]:hover,
body.kc-app-web:not(.admin-body) .filter-green {
    color: var(--kc-red) !important;
    filter: none !important;
}

body.kc-app-web:not(.admin-body) .bg-\[\#01875f\],
body.kc-app-web:not(.admin-body) .bg-orange-500,
body.kc-app-web:not(.admin-body) .bg-blue-600,
body.kc-app-web:not(.admin-body) .bg-red-500,
body.kc-app-web:not(.admin-body) .bg-red-600 {
    background: linear-gradient(135deg, var(--kc-red), var(--kc-red-2)) !important;
    color: #fff !important;
}

body.kc-app-web:not(.admin-body) input,
body.kc-app-web:not(.admin-body) textarea,
body.kc-app-web:not(.admin-body) select {
    background: rgba(255, 255, 255, 0.07) !important;
    color: var(--kc-text) !important;
    border-color: var(--kc-border) !important;
}

body.kc-app-web:not(.admin-body) input::placeholder,
body.kc-app-web:not(.admin-body) textarea::placeholder {
    color: rgba(255, 255, 255, 0.43) !important;
}

/* App bottom navigation */
body.kc-app-web:not(.admin-body) #bottom-navigation-bar {
    background: rgba(9, 9, 13, 0.92) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.42) !important;
    backdrop-filter: blur(18px);
}

body.kc-app-web:not(.admin-body) #bottom-navigation-bar > div {
    height: 66px !important;
    padding-bottom: 8px !important;
}

body.kc-app-web:not(.admin-body) #bottom-navigation-bar .nav-btn,
body.kc-app-web:not(.admin-body) #bottom-navigation-bar .nav-btn span,
body.kc-app-web:not(.admin-body) #bottom-navigation-bar .nav-btn svg {
    color: rgba(255, 255, 255, 0.54) !important;
}

body.kc-app-web:not(.admin-body) #bottom-navigation-bar .nav-btn:hover,
body.kc-app-web:not(.admin-body) #bottom-navigation-bar .nav-btn:hover span,
body.kc-app-web:not(.admin-body) #bottom-navigation-bar .nav-btn:hover svg,
body.kc-app-web:not(.admin-body) #bottom-navigation-bar .nav-btn.active,
body.kc-app-web:not(.admin-body) #bottom-navigation-bar .nav-btn.active span,
body.kc-app-web:not(.admin-body) #bottom-navigation-bar .nav-btn.active svg {
    color: #fff !important;
}

body.kc-app-web:not(.admin-body) #bottom-navigation-bar .nav-indicator {
    background: var(--kc-red) !important;
    box-shadow: 0 0 18px rgba(229, 9, 20, 0.7);
}

body.kc-app-web:not(.admin-body) #discover-btn {
    background: linear-gradient(135deg, #f01822, #9b050d) !important;
    border-color: #08080b !important;
    box-shadow: 0 12px 30px rgba(229, 9, 20, 0.36) !important;
}

body.kc-app-web:not(.admin-body) #nav-profile-pic {
    border-color: rgba(255, 255, 255, 0.16) !important;
}

/* Home hero/app install surface */
body.kc-app-web:not(.admin-body) .header-stats-wrapper {
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid var(--kc-border);
    border-radius: 16px;
    padding: 14px 6px;
}

body.kc-app-web:not(.admin-body) .stat-value {
    color: #fff !important;
}

body.kc-app-web:not(.admin-body) .stat-text {
    color: var(--kc-muted) !important;
}

body.kc-app-web:not(.admin-body) .play-store-page {
    background:
        radial-gradient(circle at 85% 0%, rgba(229, 9, 20, 0.22), transparent 26rem),
        linear-gradient(180deg, #07070a 0%, #050507 48%, #030304 100%) !important;
    color: var(--kc-text) !important;
}

body.kc-app-web:not(.admin-body) .play-store-content {
    max-width: 1180px;
    margin-inline: auto;
}

body.kc-app-web:not(.admin-body) .play-hero-grid {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018));
    border: 1px solid var(--kc-border);
    border-radius: 22px;
    padding: clamp(18px, 3vw, 34px);
    box-shadow: var(--kc-shadow);
}

body.kc-app-web:not(.admin-body) .play-hero-head img {
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

body.kc-app-web:not(.admin-body) .play-title-wrap,
body.kc-app-web:not(.admin-body) .play-title-wrap h1,
body.kc-app-web:not(.admin-body) .play-title-wrap [class*="text-"],
body.kc-app-web:not(.admin-body) .play-install-column,
body.kc-app-web:not(.admin-body) .play-install-bar {
    background: transparent !important;
    color: var(--kc-text) !important;
}

body.kc-app-web:not(.admin-body) .play-install-bar p,
body.kc-app-web:not(.admin-body) .play-install-column p {
    background: transparent !important;
    color: var(--kc-muted) !important;
}

body.kc-app-web:not(.admin-body) .arrow-btn,
body.kc-app-web:not(.admin-body) .rounded-lg.border-dashed {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--kc-muted) !important;
    border-color: var(--kc-border) !important;
}

body.kc-app-web:not(.admin-body) .section-title,
body.kc-app-web:not(.admin-body) h1,
body.kc-app-web:not(.admin-body) h2,
body.kc-app-web:not(.admin-body) h3 {
    letter-spacing: 0 !important;
}

body.kc-app-web:not(.admin-body) [dir="ltr"],
body.kc-app-web:not(.admin-body) .direction-ltr,
body.kc-app-web:not(.admin-body) .font-en {
    font-family: var(--kc-font-en);
}

/* Watch/details pages: dark YouTube-like surface, app-colored CTAs. */
body.kc-app-web:not(.admin-body) #details-video-title {
    color: #fff !important;
}

body.kc-app-web:not(.admin-body) .web-preview-gate,
body.kc-app-web:not(.admin-body) .download-app-gate {
    background: linear-gradient(180deg, rgba(229, 9, 20, 0.16), rgba(13, 13, 18, 0.96)) !important;
    border: 1px solid rgba(229, 9, 20, 0.28) !important;
    border-radius: 18px !important;
}

/* Reels/discover/native ad cards blend into the app instead of white web cards. */
body.kc-app-web:not(.admin-body) .discover-card,
body.kc-app-web:not(.admin-body) .reel-card,
body.kc-app-web:not(.admin-body) .native-ad-card,
body.kc-app-web:not(.admin-body) [data-ad-card] {
    background: #09090d !important;
    border: 1px solid var(--kc-border) !important;
    border-radius: 12px !important;
    color: #fff !important;
    overflow: hidden;
}

body.kc-app-web:not(.admin-body) .comments-sheet-content {
    border-top: 1px solid var(--kc-border);
    border-radius: 22px 22px 0 0 !important;
}

body.kc-app-web:not(.admin-body) #comments-sheet-modal .sticky,
body.kc-app-web:not(.admin-body) #reel-comment-form-wrapper {
    background: rgba(18, 18, 24, 0.98) !important;
    border-color: var(--kc-border) !important;
}

body.kc-app-web:not(.admin-body) #reel-comments-list-container {
    background: #0b0b10 !important;
}

/* Initial skeletons should feel like the app while data loads. */
body.kc-app-web:not(.admin-body) .animate-pulse .bg-gray-200,
body.kc-app-web:not(.admin-body) .animate-pulse .bg-gray-300,
body.kc-app-web:not(.admin-body) .animate-pulse .bg-gray-100 {
    background-color: #202029 !important;
}

@media (min-width: 768px) {
    body.kc-app-web:not(.admin-body) #main-content {
        padding-bottom: 96px;
    }

    body.kc-app-web:not(.admin-body) #bottom-navigation-bar > div {
        max-width: 720px !important;
    }
}

/* Final light-store override for the homepage only. */
body.kc-app-web.home-store-light:not(.admin-body),
body.kc-app-web.home-store-light:not(.admin-body) #main-content,
body.kc-app-web.home-store-light:not(.admin-body) #page-content,
body.kc-app-web.home-store-light:not(.admin-body) .play-store-page,
body.kc-app-web.home-store-light:not(.admin-body) .play-section,
body.kc-app-web.home-store-light:not(.admin-body) .app-details-section,
body.kc-app-web.home-store-light:not(.admin-body) .bg-white,
body.kc-app-web.home-store-light:not(.admin-body) .bg-gray-50,
body.kc-app-web.home-store-light:not(.admin-body) .bg-gray-100 {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #202124 !important;
}

body.kc-app-web.home-store-light:not(.admin-body) .play-hero-grid,
body.kc-app-web.home-store-light:not(.admin-body) .header-stats-wrapper,
body.kc-app-web.home-store-light:not(.admin-body) .play-title-wrap,
body.kc-app-web.home-store-light:not(.admin-body) .play-install-column,
body.kc-app-web.home-store-light:not(.admin-body) .play-install-bar {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #202124 !important;
}

body.kc-app-web.home-store-light:not(.admin-body) .text-gray-900,
body.kc-app-web.home-store-light:not(.admin-body) .text-gray-800,
body.kc-app-web.home-store-light:not(.admin-body) .text-\[\#0f0f0f\],
body.kc-app-web.home-store-light:not(.admin-body) .stat-value,
body.kc-app-web.home-store-light:not(.admin-body) h1,
body.kc-app-web.home-store-light:not(.admin-body) h2,
body.kc-app-web.home-store-light:not(.admin-body) h3 {
    color: #202124 !important;
}

body.kc-app-web.home-store-light:not(.admin-body) .text-gray-700,
body.kc-app-web.home-store-light:not(.admin-body) .text-gray-600,
body.kc-app-web.home-store-light:not(.admin-body) .text-\[\#606060\],
body.kc-app-web.home-store-light:not(.admin-body) .text-gray-500,
body.kc-app-web.home-store-light:not(.admin-body) .text-gray-400,
body.kc-app-web.home-store-light:not(.admin-body) .stat-text,
body.kc-app-web.home-store-light:not(.admin-body) .play-install-bar p,
body.kc-app-web.home-store-light:not(.admin-body) .play-install-column p {
    color: #5f6368 !important;
}

body.kc-app-web.home-store-light:not(.admin-body) .border-gray-100,
body.kc-app-web.home-store-light:not(.admin-body) .border-gray-200,
body.kc-app-web.home-store-light:not(.admin-body) .border-gray-300,
body.kc-app-web.home-store-light:not(.admin-body) .border-white\/10 {
    border-color: #e5e9ec !important;
}

body.kc-app-web.home-store-light:not(.admin-body) .text-\[\#01875f\],
body.kc-app-web.home-store-light:not(.admin-body) .hover\:text-\[\#01875f\]:hover {
    color: #01875f !important;
}

body.kc-app-web.home-store-light:not(.admin-body) .bg-\[\#01875f\] {
    background: #01875f !important;
    color: #ffffff !important;
}

body.kc-app-web.home-store-light:not(.admin-body) #bottom-navigation-bar {
    background: rgba(255, 255, 255, 0.96) !important;
    border-top: 1px solid #e5e9ec !important;
    box-shadow: 0 -4px 14px rgba(60, 64, 67, 0.08) !important;
    backdrop-filter: blur(14px);
}

body.kc-app-web.home-store-light:not(.admin-body) #bottom-navigation-bar .nav-btn,
body.kc-app-web.home-store-light:not(.admin-body) #bottom-navigation-bar .nav-btn span,
body.kc-app-web.home-store-light:not(.admin-body) #bottom-navigation-bar .nav-btn svg {
    color: #6b7280 !important;
}

body.kc-app-web.home-store-light:not(.admin-body) #bottom-navigation-bar .nav-btn:hover,
body.kc-app-web.home-store-light:not(.admin-body) #bottom-navigation-bar .nav-btn:hover span,
body.kc-app-web.home-store-light:not(.admin-body) #bottom-navigation-bar .nav-btn:hover svg,
body.kc-app-web.home-store-light:not(.admin-body) #bottom-navigation-bar .nav-btn.active,
body.kc-app-web.home-store-light:not(.admin-body) #bottom-navigation-bar .nav-btn.active span,
body.kc-app-web.home-store-light:not(.admin-body) #bottom-navigation-bar .nav-btn.active svg {
    color: #01875f !important;
}

body.kc-app-web.home-store-light:not(.admin-body) #bottom-navigation-bar .nav-indicator,
body.kc-app-web.home-store-light:not(.admin-body) #discover-btn {
    background: #01875f !important;
    box-shadow: 0 8px 20px rgba(1, 135, 95, 0.28) !important;
}

body.kc-app-web.home-store-light:not(.admin-body) #discover-btn {
    border-color: #ffffff !important;
    color: #ffffff !important;
}

body.kc-app-web.home-store-light:not(.admin-body) .play-store-content {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 12px !important;
}

body.kc-app-web.home-store-light:not(.admin-body) .px-5 {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

body.kc-app-web.home-store-light:not(.admin-body) .play-section {
    margin-top: 18px !important;
    padding-top: 18px !important;
}

body.kc-app-web.home-store-light:not(.admin-body) #screenshots-carousel,
body.kc-app-web.home-store-light:not(.admin-body) #home-videos-carousel {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

body.kc-app-web.home-store-light:not(.admin-body) #bottom-navigation-bar > div {
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 430px) {
    body.kc-app-web.home-store-light:not(.admin-body) .play-store-content {
        padding-inline: 10px !important;
    }

    body.kc-app-web.home-store-light:not(.admin-body) .px-5 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    body.kc-app-web.home-store-light:not(.admin-body) .play-hero-head {
        gap: 10px !important;
        padding-bottom: 12px !important;
    }

    body.kc-app-web.home-store-light:not(.admin-body) .play-app-icon {
        width: 68px !important;
        height: 68px !important;
        border-radius: 16px !important;
    }

    body.kc-app-web.home-store-light:not(.admin-body) .play-title-wrap h1 {
        font-size: 21px !important;
        line-height: 1.22 !important;
    }

    body.kc-app-web.home-store-light:not(.admin-body) .header-stats-wrapper {
        width: 100% !important;
    }
}