/**
 * EventON Moon Styles
 * @version 1.0
 *
 * @author Ashan Jay <info@myeventon.com>
 * @package EventON_Event_Moon
 * @license PROPRIETARY - EventON CSS Asset
 * @link https://www.myeventon.com/addons/moon-data
 * @copyright 2011-2026 AshanJay Designs LLC. All Rights Reserved.
 * 
 * PROPRIETARY LICENSE - All Rights Reserved
 *
 *  Permission is hereby granted, free of charge, to any person obtaining a copy
 *  of these CSS files (the "Assets") solely for personal use in conjunction with
 *  a valid EventON license, subject to the following conditions:
 * 
 * 1. You may use these Assets on websites you own or manage.
 * 2. You may NOT redistribute, resell, sublicense, or publish these Assets
 *     in whole or in part, including in plugin/theme bundles, marketplaces,
 *     or GPL download sites.
 *  3. You may NOT remove or modify this copyright notice.
 *  4. These Assets are provided "AS IS" WITHOUT WARRANTY OF ANY KIND.
 *  5. Violation of these terms may result in license revocation and legal action.
 * 
 * Trademark: "EventON" is a trademark of AshanJay Designs LLC.
 * Contact:   info@myeventon.com
 */

:root{
	--evomo_base_color: #878787;
}
.evomoon_content{
	display:flex;justify-content:space-between;flex-wrap:wrap;
}
.evomoon_info .evomoon_moon_bg{
	height: 120px;width: 120px;
    background-color: #fff;		    
    border-radius: 50%;
    box-shadow: 0 0 12px 8px #0000000d, 0 0 0 3px #878787;
    position: relative;margin-bottom:10px;
    overflow: hidden;
    transform:translateZ(0);

}

.moon_craters{pointer-events:none;opacity: .4;}
.moon_craters i{
	position:absolute;
    display:block;
    border-radius:50%;
    background:rgba(180,180,180,1);
    opacity:1;}

/* major basins */
.moon_craters i:nth-child(1){ width:30px; height:30px; top:60%; left:2%;  }
.moon_craters i:nth-child(2){ width:32px; height:32px; top:40%; left:-10%;  }
.moon_craters i:nth-child(3){ width:40px; height:40px; top:30%; left:10%;  }

/* medium craters */
.moon_craters i:nth-child(4){ width:25px; height:25px; top:70%; left:20%; }
.moon_craters i:nth-child(5){ width:22px; height:22px; top:61%; left:45%; }
.moon_craters i:nth-child(6){ width:20px; height:20px; top:21%; left:51%; }
.moon_craters i:nth-child(7){ width:20px; height:20px; top:14%; left:69%; }
.moon_craters i:nth-child(8){ width:9px; height:9px; top:60%; left:30%; }

/* small impacts */
.moon_craters i:nth-child(9){ width:10px; height:10px; top:8%; left:65%; }
.moon_craters i:nth-child(10){ width:9px; height:9px; top:33%; left:70%; }
.moon_craters i:nth-child(11){ width:10px; height:10px; top:50%; left:40%; }
.moon_craters i:nth-child(12){ width:6px; height:6px; top:35%; left:52%; }
.moon_craters i:nth-child(13){ width:9px; height:9px; top:28%; left:42%; }
.moon_craters i:nth-child(14){ width:7px; height:7px; top:40%; left:48%; }
.moon_craters i:nth-child(15){ width:8px; height:8px; top:56%; left:47%; }
.moon_craters i:nth-child(16){ width:8px; height:8px; top:10%; left:48%; }
.moon_craters i:nth-child(17){ width:8px; height:8px; top:18%; left:64%; }
.moon_craters i:nth-child(18){ width:7px; height:7px; top:65%; left:40%; }
.moon_craters i:nth-child(19){ width:8px; height:8px; top:23%; left:84%; }
.moon_craters i:nth-child(20){ width:19px; height:19px; top:15%; left:38%; }
.moon_craters i:nth-child(21){ width:19px; height:19px; top:75%; left:40%; }
.moon_craters i:nth-child(22){ background:rgb(232 232 232);width:25px; height:25px; top:70%; left:60%; }


/* range */
	.evomo_curve{
		width:165px;
  height:50px;
  position:relative;
  overflow:hidden;
	}
	.evomo_curve:before{
		content:"";
  position:absolute;
  left:0;
  bottom:-25px;              /* pulls the arc down */
  width:165px;
  height:80px;
  border-top:2px solid #000; /* 👈 thin curved line */
  border-radius:100% 100% 0 0;
	}


.evomoon_info .evomoon_moon_bg::before{
	content:'';
	display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgb(119 117 117 / 38%);
    width: 50%;
    height: 100%;
}
.evomoon_info .evomoon_moon_bg.waning::before{right:0;left:auto;}

.evomoon_info .evomoon_moon_bg .moon_light{
	-webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    width: 100%; height: 100%; display:block;
}

.evomoon_info .evomoon_moon_bg .moon_light::before{
	background-color: #d9d9d9;		 
}
.evomoon_info .evomoon_moon_bg .moon_light::after{
	    background-color: #fff;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.evomoon_info .evomoon_moon_bg .moon_light::before,
.evomoon_info .evomoon_moon_bg .moon_light::after{
	content:'';
    display: block;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: -webkit-transform 4s;
    transition: transform 4s;
    transition: transform 4s, -webkit-transform 4s;
    position: absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.evomo_moon_age{background-color: #d9d9d9; padding: 8px;border-radius: 10px;}

.evomoon_box{margin-right:15px; margin-bottom:15px;position: relative;max-width: 40%;}
.evomoon_age_sm{
	background-color: var(--evo_color_1);
    border-radius: 15px;
    padding: 2px 10px;
    margin-left: 5px;
    color: #fff;
    font-size: 12px;
}
.evomo_fullm{
	    background-color: var(--evo_color_white);
    height: 20px;
    width: 20px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 10px;
        box-shadow: 0 0 0 2px #bdbdbd;
}
.evomo_fulln{
	background-color: var(--evomo_base_color);
    height: 20px;
    width: 10px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 20px;
}
.evomoon_box .dfx{display:flex!important;}

@media (max-width: 800px){
    .evomoon_box{max-width: none;}
}