/*
Theme Name: Spinoko Child
Theme URI: https://dinomatic.com/spinoko
Author: DinoMatic
Author URI: https://dinomatic.com
Template: spinoko
Description: Spinoko: Child Theme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: spinoko-child
*/

.custom-logo-link {
	padding-left: rem;
	
	& img {
		border-radius: 8px;
	}
}

.main-navigation {
	padding-right: 10px
}

.menu-item{
	font-weight: 650;
}

/* Fixes background of "All Games" hover in toplist and cards */
.tippy-box {
    background-color: #ffffff !important;
	color: #012169 !important;
	border: 2px dashed #012169; 
}

/*  reduce font size of game names on small screens*/
@media (max-width:1300px){
	.sp-pr-2{
		font-size: 0.7em; 
	}
}
.add-column-space {
	margin-left: 0.2rem;
	margin-right: 0.75rem;
}

.add-space-right-pros-and-cons {
	margin-right: 1rem;
}

ul.custom-bullet-pro {
    list-style: none !important; /* Force removal of default bullets */
    padding-left: 0 !important; /* Remove padding */
    margin-left: 0; /* Ensure no extra margin */
}

ul.custom-bullet-pro li {
    position: relative;
    padding-left: 1.5rem; /* Space for the icon; adjust as needed */
    margin-left: 1rem; /* Add left margin to the list items */
    line-height: 1.2; /* Adjust line height if needed */
	    margin-right: 1rem; /* Add left margin to the list items */
}

ul.custom-bullet-pro li::before {
    content: '';
    display: inline-block;
    position: absolute;
    left: 0;
    width: 1rem; /* Set width to 1rem */
    height: 1rem; /* Set height to 1rem */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2386efac'%3E%3Cpath d='M0 11l2-2 5 5L18 3l2 2L7 18z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain; /* Ensure the SVG fits properly */
    top: 0.1rem; /* Adjust top positioning if needed for vertical alignment */
    padding-right: 0.5rem; /* Add space to the right of the icon */
}

ul.custom-bullet-con {
    list-style: none !important; /* Force removal of default bullets */
    padding-left: 0 !important; /* Remove padding */
    margin-left: 0; /* Ensure no extra margin */
}

ul.custom-bullet-con li {
    position: relative;
    padding-left: 1.5rem; /* Space for the icon; adjust as needed */
    margin-left: 1rem; /* Add left margin to the list items */
    line-height: 1.2; /* Adjust line height if needed */
		    margin-right: 1rem; /* Add left margin to the list items */
}

ul.custom-bullet-con li::before {
    content: '';
    display: inline-block;
    position: absolute;
    left: 0;
    width: 1rem; /* Set width to 1rem */
    height: 1rem; /* Set height to 1rem */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' stroke='%23fca5a5' stroke-width='2'%3E%3Cpath d='M2 30 L30 2 M30 30 L2 2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain; /* Ensure the SVG fits properly */
    top: 0.1rem; /* Adjust top positioning if needed for vertical alignment */
    padding-right: 0.5rem; /* Add space to the right of the icon */
}

/* Additional CSS for Payment Tables */
/* Table Container */
.wp-table-builder-custom-payments-container {
  width: 100%;
  overflow-x: hidden;
  border-radius: 12px;
  box-shadow: var(--spinoko-box-shadow); /* This could be adding the extra shadow */
  border-color: var(--color-info);
  border-bottom: 2px solid var(--color-info) !important;
}

/* Table Styling */
.wp-table-builder-custom-payments {
  width: 100%;
  border-radius: 12px;
  overflow: auto;
  border-width: 2px;
  border-color: #5DADE2;
}

/* First Row Styling in the Body */
.wp-table-builder-custom-payments tbody tr:first-child td {
  border-bottom: none !important;
  background-color: #5DADE2;
  border-color: #5DADE2;
  font-weight: bold;
  font-size: 1em;
  text-align: left;
}

/* Emoji in First Row Only */
.wp-table-builder-custom-payments tbody tr:first-child td:nth-child(1)::before {
  content: "💳 ";
}

.wp-table-builder-custom-payments tbody tr:first-child td:nth-child(2)::before {
  content: "🔍 ";
}

.wp-table-builder-custom-payments tbody tr:first-child td:nth-child(3)::before {
  content: "⏱ ";
}

.wp-table-builder-custom-payments tbody tr:first-child td:nth-child(4)::before {
  content: "💸 ";
}

.wp-table-builder-custom-payments tbody tr:first-child td:nth-child(5)::before {
  content: "💰 ";
}

/* Responsive Styling */
@media (max-width: 768px) {
 
  .wp-table-builder-custom-payments-container {
    width: 100%;
    overflow-x: hidden;
    border-radius: 10px;
    border: none !important;
    box-shadow: none !important; /* Corrected syntax to properly remove shadow */
    border-color: transparent !important; /* Ensures no border color is applied */
    border-bottom: none !important;
  }
	
  .wp-table-builder-custom-payments {
    display: block;
    border: none !important;
  }

  .wp-table-builder-custom-payments tbody tr:first-child td {
    display: none !important; /* Hide table headers on mobile */	
  }
		
  .wp-table-builder-custom-payments tbody tr:nth-child(n + 2) {
    display: block;
    margin-bottom: 1rem;
    border: 2px solid #5DADE2;
    border-radius: 12px;
    background-color: white !important;		
		text-align: right;
		box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2) !important;
      }
	
  .wp-table-builder-custom-payments td {
    display: flex;
    justify-content: space-between;
    padding: 5px;
		

		
  }

  .wp-table-builder-custom-payments td::before {
    color: #012169;
		text-align: left;
		
		
		
  }
	
	/* Make the first column bold for rows above the second row */
.wp-table-builder-custom-payments tbody tr:nth-child(n + 2) td:first-child {
    font-weight: bold;
	text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2) !important;
	   
}
	
  /* Custom Labels for Mobile */
  .wp-table-builder-custom-payments td:nth-child(1)::before {
    content: "💳 Payment Provider:";
		  
		
  }
  .wp-table-builder-custom-payments td:nth-child(2)::before {
    content: "🔍 Type:";
  }
  .wp-table-builder-custom-payments td:nth-child(3)::before {
    content: "⏱ Deposit Time:";
  }
  .wp-table-builder-custom-payments td:nth-child(4)::before {
    content: "💸 AVG Withdrawal Time:";
  }
  .wp-table-builder-custom-payments td:nth-child(5)::before {
    content: "💰 Fees:";
  }
}