/*
Theme Name: Madara-Child-1stkmgv2
Description:  A child theme for Madara - WordPress Theme for Manga, Novel sites. Custom work for Lo Phan
Author:       Madara
Author URI:   https://mangabooth.com/
Template: madara
Tags: one-column, two-columns, right-sidebar, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Version: 1.3.3.1
*/

#madara-comments.comments-area #respond.comment-respond .comment-form > *:not(.comment-form-comment):not(.form-submit):not(.comment-notes):not(.logged-in-as).comment-form-wrapper{width: 100%; position: relative; height: 200px; overflow-y: auto; border: 1px solid #CCC; padding: 15px; border-radius: 10px}
.emoticons-toolbar{position: relative; width: 100%}
#madara-comments.comments-area #respond.comment-respond .comment-form > .emoticons-toolbar:not(.comment-form-comment):not(.form-submit):not(.comment-notes):not(.logged-in-as){ width: 100%}
#madara-comments.comments-area #respond.comment-respond .comment-form > #comment{display:none !important}.emoticons-toolbar .emoticon-cat{display:inline-block}
.emoticons-toolbar .emoticon-cat .emoticon{display: inline-block; width:50px; height: 50px}
.emoticons-toolbar .emoticon-cat .emoticon-list{display: none}
.emoticons-toolbar .emoticon-cat .emoticon-cat-thumb{border:1px solid #CCC; width:50px; height: 50px; cursor: pointer;}
.emoticons-toolbar .emoticon-cat.selected .emoticon-list{display: block; border: 1px solid #CCC; border-radius: 5px; 
    position: absolute;
    width: 600px;
    height: 350px;
    background: #FFF;
    padding: 5px;
    top: 60px;
    z-index: 1;
    overflow-y: auto;
}
.emoticons-toolbar .emoticon{cursor: pointer;}
.listing-chapters_wrap .pagination{border:none}
.pagination_wrapper{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
  }
.pagination ul{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: 4px;
	border-radius: 50px;
	justify-content: center;
  }
  .pagination ul li{
	color: #666;
	list-style: none;
	line-height: 40px;
	text-align: center;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	user-select: none;
	transition: all 0.3s ease;
  }
  .pagination ul li.numb, .pagination ul li.number{
	list-style: none;
	height: 40px;
	width: 30px;
	margin: 0 3px;
	line-height: 40px;
	border-radius: 50%;
  }
  .pagination ul li.numb.first{
	margin: 0px 3px 0 -5px;
  }
  .pagination ul li.numb.last{
	margin: 0px -5px 0 3px;
  }
  .pagination ul li.dots{
	font-size: 22px;
	cursor: default;
  }
  .pagination ul li.btn{
	padding: 0;
	border-radius: 50px;
  }
  .pagination li.active,
  .pagination ul li.numb:hover,
  .pagination ul li:first-child:hover,
  .pagination ul li:last-child:hover{
	color: #000;
	background: #fff;
  }



.chapters_search{margin-bottom:30px}
.wp-manga-chapter.hidden,  .pagination ul.hidden{display: none !important}
@media (max-width: 768px){
	.page-content-listing.single-page .cols-3 ul.version-chap.no-volumn li.hidden, .page-content-listing.single-page .cols-3 ul.version-chap.volumns .sub-chap .sub-chap-list li.hidden {
		display: none !important;
	}

	.emoticons-toolbar .emoticon-cat.selected .emoticon-list{
		width:calc(100% - 20px);
		left: 10px;
		right: 10px;
	}
}

.manga_content .wp-pagenavi{width:100%;text-align:center;}
.c-blog-listing .wp-pagenavi a,.c-blog-listing .wp-pagenavi span{border:none; width:30px; height:40px; padding: 10px 5px}
.wp-pagenavi span.pages,.wp-pagenavi a.last{width: auto}

table:not(#wp-calendar):not(.shop_table) > tbody > tr.nohover:hover{background: transparent;}

body.page .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail .item-summary .list-chapter .chapter-item span{float:none}

body.reading-manga .entry-header{margin-bottom:20px}
#server-selectors{margin: 10px 0}
#server-selectors .server-selector{display: inline-block; padding:5px 20px; margin: 0 5px; border-radius: 5px; background-color: var(--madara-main-color); color:#FFF}
#server-selectors .server-selector.selected{background-color: var(--secondary-color);}

body.archive .wp-pagenavi{width:100%; text-align: center;}

.c-blog__heading a.btn-reverse-order-2 i{    -webkit-transform: rotate(45deg);    -moz-transform: rotate(90deg);    -ms-transform: rotate(90deg);    -o-transform: rotate(90deg);    transform: rotate(90deg);    background: none;    color: #000;font-size: 22px; margin: 0 20px}
.text-ui-light .c-blog__heading a.btn-reverse-order-2 i{color:#FFF}
.c-blog__heading a.btn-reverse-order-2 i:after{display: none}

@media (max-width: 480px) {
    body.reading-manga .entry-header .entry-header_wrap, body.reading-manga .c-select-bottom .entry-header_wrap {
        margin-right: 10px;
    }
	.c-breadcrumb .breadcrumb{
		text-align: left;
	}

	.c-breadcrumb .breadcrumb li{
		display: inline;
	}
}

@media (max-width: 768px) {
    body.reading-manga .entry-header .entry-header_wrap, body.reading-manga .c-select-bottom .entry-header_wrap {
        margin-right: 10px;
    }
	.c-breadcrumb .breadcrumb{
		text-align: left;
	}

	.c-breadcrumb .breadcrumb li{
		display: inline;
	}
}

/* Login, Register, Forgot Password Forms Styling */
#madara-login-form,
#madara-register-form,
#madara-forgot-password-form {
	max-width: 500px;
	margin: 30px auto;
	padding: 30px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

#madara-login-form p,
#madara-register-form p,
#madara-forgot-password-form p {
	margin-bottom: 20px;
}

#madara-login-form label,
#madara-register-form label,
#madara-forgot-password-form label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
	color: #333;
	font-size: 14px;
}

#madara-login-form .input,
#madara-register-form .input,
#madara-forgot-password-form .input {
	width: 100%;
	padding: 12px 15px;
	border: 2px solid #e0e0e0;
	border-radius: 8px;
	font-size: 15px;
	transition: all 0.3s ease;
	box-sizing: border-box;
	background-color: #fafafa;
}

#madara-login-form .input:focus,
#madara-register-form .input:focus,
#madara-forgot-password-form .input:focus {
	outline: none;
	border-color: var(--madara-main-color, #0073aa);
	background-color: #fff;
	box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}

#madara-login-form .input[type="checkbox"],
#madara-register-form .input[type="checkbox"],
#madara-forgot-password-form .input[type="checkbox"] {
	width: auto;
	margin-right: 8px;
	cursor: pointer;
}

#madara-login-form .button,
#madara-register-form .button,
#madara-forgot-password-form .button {
	width: 100%;
	padding: 14px 20px;
	background: var(--madara-main-color, #0073aa);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

#madara-login-form .button:hover,
#madara-register-form .button:hover,
#madara-forgot-password-form .button:hover {
	background: var(--secondary-color, #005a87);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 115, 170, 0.3);
}

#madara-login-form .button:active,
#madara-register-form .button:active,
#madara-forgot-password-form .button:active {
	transform: translateY(0);
}

#madara-login-form .text-center,
#madara-register-form .text-center,
#madara-forgot-password-form .text-center {
	text-align: center;
	margin-top: 15px;
}

#madara-login-form .text-center a,
#madara-register-form .text-center a,
#madara-forgot-password-form .text-center a {
	color: var(--madara-main-color, #0073aa);
	text-decoration: none;
	font-size: 14px;
	transition: color 0.3s ease;
}

#madara-login-form .text-center a:hover,
#madara-register-form .text-center a:hover,
#madara-forgot-password-form .text-center a:hover {
	color: var(--secondary-color, #005a87);
	text-decoration: underline;
}

/* Message Boxes */
.madara-login-message,
.madara-registration-message,
.madara-forgot-password-message {
	padding: 15px 20px;
	margin-bottom: 25px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.6;
	animation: slideDown 0.3s ease;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.madara-login-error,
.madara-registration-error,
.madara-forgot-password-error {
	border: 2px solid #dc3232;
	background-color: #fbeaea;
	color: #dc3232;
}

.madara-login-success,
.madara-registration-success,
.madara-forgot-password-success {
	border: 2px solid #46b450;
	background-color: #ecf7ed;
	color: #2c7e2e;
}

/* Password Error Message */
.password-error-message {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	color: #dc3232;
	font-weight: 500;
}

#madara-register-form .input[style*="border-color: rgb(220, 50, 50)"] {
	border-color: #dc3232 !important;
	background-color: #fff5f5;
}

/* Remember Me Checkbox Styling */
#madara-login-form label[for="rememberme"] {
	display: flex;
	align-items: center;
	font-weight: 400;
	cursor: pointer;
}

#madara-login-form label[for="rememberme"] input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-right: 8px;
	cursor: pointer;
}

/* Responsive Design */
@media (max-width: 768px) {
	#madara-login-form,
	#madara-register-form,
	#madara-forgot-password-form {
		margin: 20px 15px;
		padding: 25px 20px;
	}
}

@media (max-width: 480px) {
	#madara-login-form,
	#madara-register-form,
	#madara-forgot-password-form {
		margin: 15px 10px;
		padding: 20px 15px;
	}
	
	#madara-login-form .input,
	#madara-register-form .input,
	#madara-forgot-password-form .input {
		padding: 10px 12px;
		font-size: 14px;
	}
	
	#madara-login-form .button,
	#madara-register-form .button,
	#madara-forgot-password-form .button {
		padding: 12px 15px;
		font-size: 14px;
	}
}

/* Field Error Messages */
.field-error-message {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	color: #dc3232;
	font-weight: 500;
	animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

#madara-login-form .input[style*="border-color: rgb(220, 50, 50)"],
#madara-register-form .input[style*="border-color: rgb(220, 50, 50)"],
#madara-forgot-password-form .input[style*="border-color: rgb(220, 50, 50)"] {
	border-color: #dc3232 !important;
	background-color: #fff5f5 !important;
}

@media (max-width: 480px) {
    body.reading-manga .entry-header .entry-header_wrap .c-breadcrumb {
        text-align: left;
    }
}

@media (max-width: 768px) {
    body.reading-manga .entry-header .entry-header_wrap .c-breadcrumb {
        text-align: left;
    }
}