html, body{
	background-color: #4c4c4c;
	margin: 0px;
	padding: 0px;
	font-family: cairo;
}

div#content{
	background-color: white; 
	color:black;
	max-width: 100%;
	width:1200px;
	text-align: center;
	margin: 0 auto;
}
div#logoContainer{
	display: inline-block;
	vertical-align:middle;
}
div#titleAndFlagsContainer{
	display: inline-block;
	vertical-align:middle;
	width: calc(100%-100px)
}
div#locales{
	display: inline-block;
	
}
div#locales a{
	text-decoration: none;
}

div#locales img{
	max-width: 35px;
	margin-left: 5px;
	vertical-align: middle;
}

div#mainHeader{
	height: 120px;
	background-color: black;
	color:white;
	height: fit-content;
	background-image: url('/media/pubgBackGroundSmall.jpg'); 
    
    /* Repeats the image both horizontally and vertically */
    background-repeat: repeat;
	border:2px solid gold;
	/*
	position: sticky;
    
    top: 0;
    
    z-index: 1000;
	*/

}
footer.mainFooter{
	margin-top: 10px;
	min-height: 35px;
	background-color: black;
	color:white;
}
p#title{
	margin: 0px;
	padding: 0px;
	display: inline-block;
	vertical-align:middle;
	font-size: clamp(30px, 7vw, 60px);
	font-weight: bold;
	font-family: "Times New Roman",Times, serif;
}
p#motto{
	margin: 0px;
	padding: 0px;
	font-size: 20px;
	font-family: Cairo;
	display: inline-block;
	color:gold;
	font-weight: bold;
}
img#mainLogo{
	height: 120px;
	width: 120px;
	vertical-align:middle;

}

body {
    /* Set the path to your image */
    background-image: url('/media/pubgBackGround.jpg'); 
    
    /* Repeats the image both horizontally and vertically */
    background-repeat: repeat; 
}



div.formContainer{
	display: inline-block;
	width: 500px;
	max-width: calc(100% - 22px);
	text-align: left;
	padding: 10px;
	border: 1px solid gold;
	background-color: #fffef1;
}
.lbl1{
	width: 170px;
	display: inline-block;
}
.inp1{
	width: calc(100% - 190px);
	height: 30px;
}
textarea.inp1{
	height: unset;
}
textarea.inp1{
	resize: vertical;
}
.required:after{
	content: "*";
	color: rgb(255, 0, 0);
	
  
}
div.formGroup{
	margin-bottom: 7px;
	background-color: #f0f0f0;
	border-radius: 5px;
	min-height: 35px;
	line-height: 35px;
	padding: 5px;
}
div.formGroup:hover{
	background-color: #e0e0e0;
}
.btnSubmit{
	background-color: black;
	color:white;
	margin: 10px auto;
	padding: 10px;
	border: none;
	height: 55px;
	line-height: 35px;
	text-align: center;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
}
.btnSubmit:HOVER{
	background-color: white;
	color:black;
	transform: translateY(-2px);
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
#discriptionCharCount{
	color: grey;
	margin-left: 10px;
	font-size: 14px;
}
.error-message {
	color: red;
	font-size: 0.85em;
	margin-left: 10px;
	display: none; /* مخفية في البداية */
}
div.bigAnnounce{
	border:1px solid red; 
	background-color:pink; 
	padding:5px;
	margin:7px;
}
div.joinUs{
	border:1px solid blue; 
	background-color:#d1e7ff; 
	padding:5px;
	margin:7px;
}
div.cp{
	border:1px solid black; 
	padding:5px;
	margin:7px;
	text-align: center;
	position: relative;
}
div.bigAnnounce *, div.joinUs *, div.cp *{
	vertical-align: middle;
}

div.ad{
	width:320px;
	max-width: 300px;
	height: 330px;
	border-radius: 12px;
	display: inline-block;
	
	margin: 10px 5px;
	vertical-align: top;
	text-align: left;
	padding: 5px;
	line-height: 20px;
    font-size: 16px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.9);
    overflow: hidden;
	background-color: white;
}
div.ad.expanded{
	height: auto;
	/*min-height: 330px;*/

}
.card-content{
	min-height: 330px;
	padding: 0px 5px;
}
div.ad *{
	vertical-align: middle;
}

div#adsContainer{
	/*display: flex; /* Converts the container into a flexible layout box */
    /*flex-wrap: wrap; /* Allows cards to wrap into a new row instead of squeezing */
    /*justify-content: center; /* Centers the cards horizontally on the screen */
    width: 100%;
}
/* ========================== gold + silver styles start ==========================*/
div.ad.gold{
	/* A premium blend of 4 luxury gold shades to simulate light reflection */
    background: linear-gradient(135deg, #bf953f 0%, #fcf6ba 25%, #b38728 50%, #fbf5b7 100%);
	color: #862b2b; /* Deep dark brown for smooth readability without looking harsh */
    font-weight: 600;
    font-size: 0.95rem;
}
div.ad.gold span.publishTime{
	color: black;
}
div.ad.silver{
	background: linear-gradient(135deg, #e6e6e6 0%, #ffffff 25%, #cccccc 50%, #f2f2f2 75%, #b3b3b3 100%);
	color: #3a3a3a; /* Dark slate grey for readable body text */
    font-weight: 600;
    font-size: 0.95rem;
}
/* 1. The parent container (The base card) */
.ad.gold, .ad.silver{
    position: relative;
    border-radius: 12px;
    overflow: hidden; /* Clips the rotating glowing elements inside the card boundaries */
    /*display: flex;*/
	display: inline-block;
    justify-content: center;
    align-items: center;
}

/* 2. The neon layer behind the card creating the rotating border using Conic Gradient */
.ad.gold::before, .ad.silver::before {
    content: '';
    position: absolute;
    width: 150%; /* Larger than the card to fully cover corners during rotation */
    height: 150%;
    /* Gradient colors - Customize these to match your website theme (e.g., Gold or Silver) */
    background: conic-gradient(transparent, #ff007f, #00f0ff, transparent 30%);
    /* Triggers the 360-degree rotation animation */
    animation: rotateGlow 4s linear infinite;
}

/* 3. The blur layer that creates the outer glowing/neon spreading effect */
.ad.gold::after, .ad.silver::after {
    content: '';
    position: absolute;
    inset: 0;
    background: conic-gradient(transparent, #ff007f, #00f0ff, transparent 30%);
    animation: rotateGlow 4s linear infinite;
    filter: blur(25px); /* The magic line that softens the light into a neon glow */
    opacity: 0.7; /* Subdues the brightness to ensure readability and comfort */
	/* Using a huge percentage or aspect-ratio ensures the rotating gradient */
    /* always covers the entire card even when it stretches vertically */
    width: 200%; 
    height: 200%;
}
.ad.gold::after, .ad.gold::before {
	background: linear-gradient(135deg, #bf953f 0%, #fcf6ba 25%, #b38728 50%, #fbf5b7 100%);
}
.ad.silver::after, .ad.silver::before {
	background: linear-gradient(135deg, #e6e6e6 0%, #ffffff 25%, #cccccc 50%, #f2f2f2 75%, #b3b3b3 100%);
}
/* 4. The child container (The actual content box that hides the center gradient) */
.card-content.gold, .card-content.silver {
    /*margin: 3px; /* This defines the border thickness (3px). Decrease for a thinner border */
    border-radius: 10px;
    z-index: 2; /* Ensures content stays strictly on top of all glowing layers */
	height:inherit;
	position: relative;
}
.card-content.gold {
	background: linear-gradient(135deg, #bf953f 0%, #fcf6ba 25%, #b38728 50%, #fbf5b7 100%); /* Match this with your website background color to blend perfectly */
	box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.2); /* Subtle inner glow to enhance the metallic feel */
	text-shadow: 0 1px 0px rgba(255, 255, 255, 0.5); /* Soft light shadow under text to make it pop */
}
.card-content.silver {
	/* A luxury blend of 5 silver and platinum shades to simulate realistic metal reflection */
    background: linear-gradient(135deg, #e6e6e6 0%, #ffffff 25%, #cccccc 50%, #f2f2f2 75%, #b3b3b3 100%);
	 /* Match this with your website background color to blend perfectly */
	/* Subtle inner shadow for 3D metallic depth */
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.1);
	text-shadow: 0 1px 0px rgba(255, 255, 255, 0.5);
	
}

/* 5. Animation keyframes to rotate the light 360 degrees endlessly */
@keyframes rotateGlow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ========================== gold + silver styles end ==========================*/

/* ========================== promoted ads styles start ==========================*/
ul#promoteInfo{
	list-style-position: inside;
	width:400px;
	max-width: calc(100% - 34px);
	border: 2px solid blue;
	border-radius: 5px;
	background-color: #d1e7ff;
	padding:10px;
	text-align: left;
	display: inline-block;
	margin:0px auto;
	margin-top: 10px;
	list-style-type: "🔥 ";
}
ul#promoteInfo div#crownContainer{
	width: 100%;
	text-align: center;
}
ul#promoteInfo div#crownContainer img{
	max-width: 70px;
}
ul#promoteInfo #headerContainer{
	text-align: center;
}
ul#promoteInfo h2{
	margin: 0px;
	display: inline-block;
	color: #f49a04; 
}
#adId, #accountOrItem{
	width: 120px;
	height: 30px;
	margin: 10px auto;
}
#alreadyPromoted{
	color: #5f3b00;
	width:400px;
	max-width: calc(100% - 34px);
	border: 2px solid blue;
	border-radius: 5px;
	background-color: #d1e7ff;
	padding:10px;
	text-align: left;
	display: none;
	margin:20px auto;
}
div#payContainer{
	display: none;
}
#priceContainer{
	font-weight:bolder;
}
.priceBefore{
	font-weight:normal;
	color:red;
	font-size:18px;
}
.priceAfter{
	font-weight: bold;
	font-size:24px;
	color:green
}
div#discountBanner{
	width:296px;
	max-width: calc(100% - 24px);
	border: 2px solid blue;
	border-radius: 5px;
	background-color: #d1e7ff;
	padding:10px;
	text-align: left;
	display: inline-block;
	margin:0px auto;
}


/*============================== promoted ads styles end ==========================*/
/* ========================== AJAX LOADING SPINNER starts ==========================*/
/* 1. The local 200x200 container that centers the spinner where the ads should appear */
.ajax-loader-container {
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto; /* Centers the whole 200x200 box horizontally */
    
    /* Dynamic control: toggled via JS (hidden by default) */
    
}


/* 2. The Heavy Crimson Red Spinner */
.ajax-loader-container .custom-spinner {
    width: 45px;
    height: 45px;
    border: 10px solid #cc9629;/*rgba(139, 0, 0, 0.15); /* Light dark-red base */
    border-top: 10px solid black;/*#8b0000;          /* Heavy Crimson Red top arc */
    border-right: 10px solid black;/*#8b0000;        /* Extra arc for a premium gaming feel */
    border-radius: 50%;
	border-bottom: 10px ;/*#8b0000;        /* Extra arc for a premium gaming feel */
    
    /* Smooth exponential spinning animation */
    animation: spinLoader 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

/* 3. Animation Keyframes */
@keyframes spinLoader {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ========================== AJAX LOADING SPINNER end ==========================*/
div#paginationContainer *{
	vertical-align: middle;
}
span.paginationButton{
	cursor: pointer;
	margin: 2px;
	display: inline-block;
	height: 30px;
	min-width: 30px;
	text-align: center;
	background-color: #f0f0f0;
	border-radius: 5px;
	border: 1px solid #cc9629;
}
span.paginationButton.currentPage{
	background-color: #000000;
	color: white;
	border: 1px solid #cc9629;
}
span.paginationButton:hover{
	transform: translateY(-2px);
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);	
}
span.paginationButton.active{
	transform: translateY(-2px);
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);	
	background-color: #000000;
	color: white;
}
div#noResults{
	text-align: center;
}
div#noResults img {
	width: 320px;
	max-width: 100%;
}
div#noResults span {
	font-size: 20px;
}
div#noResults span{
	font-size: 20px;
}
.priceTip{
	border: rgb(226, 226, 0) solid 1px;
	padding: 10px;
	border-radius: 5px;
	background-color: #faf5c5;
}
.margin20LeftRight{
	margin-left: 20px;
	margin-right: 20px;
}
span.accountId{
	display: inline-block;
}
span.accountName{
	display: inline-block;
}
img.copyIcon{
	width: 25px;
	cursor: pointer;
}
img.copyIcon:hover{
	transform: translateY(-2px);
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
span.infoPiece{
	margin-right: 10px;
}
span.goldSquare{
	display: inline-block;
	width: 13px;
	height: 13px;
	background-color: #cc9629;
}
span.mythicSquare{
	display: inline-block;
	width: 13px;
	height: 13px;
	background-color: #f3363a;
}

img.xsuit, img.supercar{
	vertical-align: middle;
	height: 13px;
}
img.arms{
	vertical-align: middle;
	height: 30px;
}
div.collectionContainer{
	display: inline-block;
	position: relative;
	width: 55px;
}
img.collectionImg{
	width: 100%
}
div.collectionText{
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	transform: translate(-50%,-50%);
  	font-weight: bold;
  	font-size: 14px;
}
div.collectionDetails{
	display: inline-block;
	width: calc(100% - 60px);
}

#adTypeImageContainer, .adTypeImageContainer{
	display: inline-block;
	vertical-align: top;
	margin: 10px auto;
	text-align: center;
	width: calc(100% - 20px);
}
#adTypeImageContainer img, .adTypeImageContainer img{
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 5px;
	width: 100px;
	height: 100px;
}
div.adTypeImageContainer.card {
	text-align: left;
}
div.adTypeImageContainer.card img{
	width: 70px;
	height: 70px;
	vertical-align: top;
}
div.adTypeImageContainer.card span{
	margin-left: 10px;
}
div.ad div.quantity{
	font-weight: bold;
	text-align: center;
	margin: 10px auto;
}


img.contactIcon{
	width: 30px;
	vertical-align: middle;
}	
span.publishTime{
	color:grey;
	font-size: 15px;
}	
span.price{
	color:blue;
}
div.discription{
	overflow: hidden;
}
img.wrongIcon, img.rightIcon, img.likeIcon, img.shareIcon {
	width:25px;
}
img.likeIcon{
	vertical-align: bottom;
}
span.likeIconContainer{
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
}
span.likeIconContainer:hover{
	transform: translateY(-2px);
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
span.likeIconContainer.liked{
	transform: translateY(-2px);
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
span.likeIconContainer:active{
	transform: translateY(0);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

img.shareIcon{
	margin-left: 20px;
	cursor: pointer;
}
img.premium{
	width:25px;
	margin-left: 20px;
	margin-top: -5px;
}

.myBtn{
	display: inline-block;
	background-color: black;
	color:white;
	padding: 10px;
	border: none;
	height: 25px;
	line-height: 25px;
	text-align: center;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;

}

.myBtn:HOVER{
	background-color: white;
	color:black;
	transform: translateY(-2px);
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
.myBtn:ACTIVE{

	transform: translateY(0);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}
span.cpTitle{
	display: inline-block;
	width: 80px;
}
span.cpTitle.small{
	width: 50px;
}
select.cpSelect, input.cpInput{
	display: inline-block;
	width: 130px;
	height: 35px;
	margin: 5px 0px;
}

div.cpContainer{
	display: inline-block;
	max-width: 300px; /* 320 - 20 margin */
	text-align: left;
	margin: 0px 10px;
}
div.searchContainer div{
	display: inline-block;
}
div.newAdButtonContainer{
	margin-right: 50px;
}
div.searchContainer{
	margin-left: 50px;
}
div.btnContainer{
	display: inline-block;
}
label.cpLabel{
	display: inline-block;
	width:100%;
}


div.buttonContainer{padding: 20px;text-align: center;}
button#claculatePrice, button#sendServiceRequest{
	padding: 10px;
	font-size: large;
	font-weight: bold;
}

div.discription{
	cursor:pointer;
}


@keyframes backgroundColor {
  0% {
    background-color: grey;
  }
  100% {
    background-color: transparent;
  }
}
.copied{
	animation: backgroundColor 1s ease-out;
}
/* Floating tooltip near the mouse cursor */
.tooltip {
    position: absolute; /* Positioned relative to the viewport based on mouse coordinates */
    background-color: #333;
    color: #fff;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
    pointer-events: none; /* Prevents the tooltip from blocking mouse clicks */
    z-index: 9999; /* Ensures it stays on top of all other elements */
    opacity: 1;
    transition: opacity 0.4s ease; /* Smooth fade-out effect */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Class triggered to handle the gradual fade-out */
.tooltip.fade-out {
    opacity: 0;
}


.red{color:red}
.green{color:green}

img.maxWidth100{max-width: 100%}
.verticalAlignMid{vertical-align: middle;}



@media screen and (max-width: 700px) {
	
	div.newAdButtonContainer, div.searchContainer{
		margin: 10px;
	}
	
}

@media screen and (max-width: 420px) {
	
	div.cpContainer{
		width: calc(100% - 20px);
	}
	
}

@media screen and (max-width: 360px) {
	
	div.cp div.btnContainer{
		display: block;
		text-align: center;
	}
}