/*
 Theme Name:   GP Software Pro
 Theme URI:    https://wplitetheme.com/gp-software-pro/
 Description:  GeneratePress Child Theme for Mobile Responsive software Downloading Website. Using this child theme you can easily create any type of software download website website. This GeneratePress Child theme design by wplitetheme.com
 Author:       WPLiteTheme.com
 Author URI:   https://wplitetheme.com
 Template:     generatepress
 Version:      1.1
*/

/*Search Box*/
#wp-block-search__input-1 {
	border-radius: 120px;
	border: 0px;
}
:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
	border-radius: 40px;
}
input[type="search"] {
	border-color: var(--contrast-3);
	border-radius: 50PX;
}
.wp-block-search__button.has-icon {
	border-radius: 50px;
}
.main-navigation {
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
/*Post Headline*/
.single h2 {
	background-color: #F7F7F4;
  border-left: 8px solid var(--color-background);
  padding: 10px 5px 10px 16px;
}
/*Categories Hedline*/
.inb-hp-heading:before {
    border-top: 2px solid var(--text-1);
    content: "";
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: -1;
}
.inb-home-heading:before {
    border-top: 1px solid var(--border-color);
    content: "";
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: -1;
}
.wplite-banner-ads {
	margin-bottom: 15px;
}
/* WP Image*/
.size-auto, .size-full, .size-large, .size-medium, .size-thumbnail {
	margin-bottom: 20px;
}
.gb-container .wp-block-image img {
	border-radius: 5px;
	margin-bottom: 5px;
}
/* Sticky widgets */ 
.auto-width.gb-query-loop-wrapper {
    flex: 1;
}
@media (min-width: 768px) {
.sticky-container > .gb-inside-container,.sticky-container {
    position: sticky;
    top: 80px;
}
#right-sidebar .inside-right-sidebar {
    height: 100%;
}
}
select#wp-block-categories-1 {
    width: 100%;
}
/* Rank MathCSS */
.rank-math-breadcrumb p {
	background: #e5e8ec;
	color: #000000;
	padding: 5px 10px;
	border-radius: 4px;
    font-size: 11px;
	font-weight: 700;
}
@media (max-width: 768px){
	.rank-math-breadcrumb p {
		margin: 0px 10px;
	}
}
/*Table of contents*/
#toc_container li a {
    display: block;
    width: 100%;
    color: var(--link-text);
    padding: 10px 1em;
    border-top: 1px solid #aaa;
}
#toc_container {
    background: #f9f9f900;
    border: 1px solid #aaa;
    padding: 0px;
}
#toc_container span.toc_toggle {
    font-weight: 400;
    background: #fff;
    padding: 3px 20px;
    font-size: 18px;
    text-transform: capitalize;
    text-align: center;
    display: block;
}
/*Post Date*/
.post-dates {
    font-size: 12px;
	font-weight: 400;
    color: var(--text-1);
}
/* social-sharing-icon */ 
.sticky-social-icons {
     position: fixed!important;
     right:0!important;
     top: 45%!important;
}
/*WhatsApp Highlight*/
.whatsapphighlight {
	animation: WPLiteTheme-GreenBorderAnimation 1s infinite;
}
@keyframes WPLiteTheme-GreenBorderAnimation {
	0% {
		border-color: transparent;
	}
	50% {
		border-color: #25d366;
	}
	100% {
		border-color: transparent;
	}
}
/*Tag Cloud*/
.widget_epcl_tag_cloud a, .widget_tag_cloud a, .wp-block-tag-cloud a {
    font-size: 12px!important;
    margin-bottom: 8px;
    margin-right: 8px;
}
.widget_epcl_tag_cloud a, .widget_tag_cloud a, .wp-block-tag-cloud a,  div.tags a{
    color: #333333;
    display: inline-block;
    padding: 4px 15px;
    line-height: 1.2;
    margin-right: 10px;
    background: #fff;
    border: 1px solid #333333;
    border-radius: 25px;
}
/*Softer Download Link*/
.software-download-button a {
    display: inline-block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: var(--color-background);
    color: #fff;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.software-download-button a:hover {
    background-color: var(--color-background-hover);
}

/*Social Share*/
.wpjankari-social-wrapper {
    margin: 5px;
    font-size: 0;
    text-align: center;
	display: flex;
    flex-wrap: wrap;
}
.wpjankari-social-sharing {
	padding: 8px;
	margin: 4px;
	border-radius: 3px;
    flex: 1;
    transition: background-color 0.3s, transform 0.3s, color 0.3s;
}
.wpjankari-social-sharing:hover {
	transform: translateY(-3px);
	border: none;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}
@media only screen and (max-width: 600px) {
    .wpjankari-social-sharing {
		display: inline-block;
    }
}
.wpjankari-social-sharing svg {
    position: relative;
    top: 0.15em;
    display: inline-block;
}
.wpjankari-social-facebook {
    fill: #fff;
    background-color: rgba(59, 89, 152, 1);
}
.wpjankari-social-twitter {
    fill: #fff;
    background-color: rgba(0, 0, 0);
}
.wpjankari-social-whatsapp {
    fill: #fff;
    background-color: rgba(37, 211, 102, 1);
}
.wpjankari-social-telegram {
    fill: #fff;
    background-color: rgb(2, 126, 189);
}
.wpjankari-social-more {
    fill: #fff;
    background-color: rgba(0, 0, 0);
}



/* Plyr.io Radio Player Styling */
.radio-player {
    margin: 20px 0;
    padding: 15px;
    background-color: #f7f7f4;
    border-radius: 5px;
    text-align: center;
}

.radio-player h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #333;
}

.plyr {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    border-radius: 5px;
}

/* Hide progress bar and time-related elements */
.plyr__progress {
    display: none;
}

.plyr__time {
    display: none;
}

/* Reduce spacing between controls */
:root {
    --plyr-control-spacing: 5px; /* Keep reduced spacing */
    --plyr-control-icon-size: 28px; /* Default for other controls */
    --plyr-color-main: #1ac266; /* Theme base green */
    --plyr-audio-control-color: #4a5464;
    --plyr-audio-control-color-hover: #ffffff;
    --plyr-audio-control-background-hover: #1ac266;
}

/* Style the play/pause button with a deeper green */
.plyr__control[data-plyr="play"],
.plyr__control[data-plyr="pause"] {
    padding: 18px; /* Keep larger clickable area */
    border-radius: 50%;
    background: #168c4d; /* Deeper green than #1ac266 */
    color: #fff; /* Keep icon color consistent */
    transition: background 0.3s ease; /* Smooth transition for hover */
}

/* Override icon size specifically for play/pause */
.plyr__control[data-plyr="play"] svg,
.plyr__control[data-plyr="pause"] svg {
    width: 42px; /* Keep increased size */
    height: 42px; /* Match width for consistency */
}

/* Hover state for play/pause button */
.plyr__control[data-plyr="play"]:hover,
.plyr__control[data-plyr="pause"]:hover {
    background: #145f38; /* Even deeper green for hover */
}

/* Style the mute/unmute button with a lighter green */
.plyr__control[data-plyr="mute"] {
    padding: 2px; /* Keep smaller size */
    background: #2fe67d; /* Lighter green than #1ac266 */
    color: #fff; /* Match play/pause icon color */
    transition: background 0.3s ease; /* Smooth transition for hover */
}

/* Hover state for mute/unmute button */
.plyr__control[data-plyr="mute"]:hover {
    background: #33ff89; /* Slightly lighter green for hover */
}

/* Keep volume bar styling unchanged */
.plyr__volume {
    width: 120px !important;
    max-width: none !important;
}

.plyr__volume input[type="range"] {
    height: 8px !important;
    cursor: pointer;
}

/* Customize Plyr.io controls container */
.plyr--audio .plyr__controls {
    background: #fff;
    border-radius: 5px;
    padding: 8px;
}

.plyr__control {
    color: #333;
}

/* Update overlaid styles for consistency */
.plyr__control--overlaid {
    background: #168c4d; /* Match play/pause default */
    color: #fff;
}

.plyr__control--overlaid:hover {
    background: #145f38; /* Match play/pause hover */
}


/* Style for the "No audio?" help link */
.no-audio-link {
    margin: 5px 0 0 0;
    font-size: 12px;
    text-align: center;
    color: #333;
}

.no-audio-link a {
    text-decoration: none;
    color: #333;
}

.no-audio-link a:hover {
    color: #1ac266; /* Match theme's base green for hover */
}