/* kai-mbrowse.css: phone/tablet parity with the reference site (listing pages, filters, footer, modals), loaded last.
   the reference site sets html{font-size:13px} below 1300px, so every rem value below is written as px = rem x 13.
   Nothing here applies at >= 1300px, except the harmless wrapper rules in the first block. */

/* ---- wrappers added around the filter controls (match the reference site markup) ---- */
#filters .kai-fc { min-width: 0; }
#filters .dropdown-wrap,
#filters .submit-more-btn { display: contents; }
#az-filters li a { text-transform: none; }
#filters .kai-fc > .reset { display: flex; width: 100%; }
#filters .more-filters .kai-fc-reset { grid-column: 4; }

@media (max-width: 1299.98px) {
	/* ---------- page offset and container ---------- */
	#main-wrapper.kai-browse { padding-bottom: 0; margin-top: calc(182px - var(--kai-header-h) - var(--kai-header-top) * 2); }
	.kai-browse > .container { max-width: 1400px; padding: 0 24.7px; }

	/* ---------- title row ---------- */
	.browse-title-row { align-items: center; gap: 0; margin: 0; padding: 26px 0 15.6px; }
	.browse-title-row h1 { font-size: 19.5px; line-height: 23.4px; letter-spacing: .78px; }
	.browse-title-row .count { font-size: 11.7px; line-height: 17.55px; color: #fff; opacity: .6; }

	/* ---------- A-Z letter strip ---------- */
	#az-filters { display: block; margin: 0 0 10px; }
	#az-filters::after { content: ""; display: block; clear: both; }
	#az-filters li { float: left; width: 3.57143%; padding: 3px; }
	#az-filters li a { padding: 5px 0; border-radius: 7.8px; font-size: 13px; line-height: 19.5px; background: #0c1116; }
	#az-filters li a:hover { background: #36cb68; }
	#az-filters li a.active { background: #e45f3a; }

	/* ---------- filter form ---------- */
	#filters { position: relative; margin: 0 -5.2px 15.6px; font-size: 13px; line-height: 19.5px; }
	#filters::after { content: ""; display: block; clear: both; }
	#filters .main-filters,
	#filters .more-filters .dropdown-wrap { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0; width: 100%; }
	#filters .main-filters > .kai-fc { width: 16.6667%; }
	#filters .main-filters > .kai-fc,
	#filters .dropdown-wrap > .kai-fc { box-sizing: border-box; padding: 3.714px 5.2px; }
	#filters .search { position: relative; }
	#filters .search .form-control,
	#filters .kai-dd > .btn,
	#filters .more-toggle,
	#filters .submit,
	#filters .reset {
		box-sizing: border-box;
		height: 32.5px;
		padding: 7.8px 13px;
		border: 0;
		border-radius: 7.8px;
		font-size: 13px;
		font-weight: 300;
		line-height: 19.5px;
		box-shadow: none;
	}
	#filters .search .form-control { width: 100%; padding-right: 26px; background: #11161b; color: #fff; }
	#filters .search .form-control::placeholder { color: rgba(255, 255, 255, .3); opacity: 1; }
	#filters .search i {
		right: 10.4px; width: 13px; height: 13px; font-size: 0; transform: translateY(-50%);
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='38' stroke-linecap='round' d='M208 48a160 160 0 1 0 0 320 160 160 0 1 0 0-320zM330 330l150 150'/%3E%3C/svg%3E") center / contain no-repeat;
	}
	#filters .kai-dd > .btn { background: #11161b; color: rgba(255, 255, 255, .7); transition: background .15s, color .15s; }
	#filters .kai-dd > .btn:hover { background: #181d22; color: #fff; }
	#filters .kai-dd > .btn .value.has { color: inherit; }
	#filters .kai-dd > .btn::after { margin-left: 4.056px; font-size: 10.14px; line-height: 15.2px; color: inherit; transition: transform .2s; }
	#filters .kai-dd.show > .btn { background: #181d22; color: #fff; }
	#filters .kai-dd.show > .btn::after { transform: rotate(180deg); }
	#filters .submit-more-btn { display: flex; gap: 10.4px; }
	#filters .more-toggle { flex: 0 0 auto; width: 39px; background: #11161b; font-size: 13px; }
	#filters .more-toggle i { font-size: 13px; line-height: 13px; }
	#filters .more-toggle:hover { background: #181d22; }
	#filters .more-toggle.active, #filters .more-toggle:hover { color: #fff; }
	#filters .submit { gap: 0; flex: 1 1 auto; width: 100%; min-width: 0; padding: 7.8px 13px; background: #e45f3a; color: #fff; transition: background .2s; }
	#filters .submit:hover { background: #b83c19; }
	#filters .submit i { margin: 0; font-size: 13px; line-height: 13px; }
	#filters .submit span { margin-left: 2.6px; font-weight: 500; }

	/* advanced panel */
	#filters .more-filters { display: block; margin: 13px 5.2px; padding: 19.5px; border-radius: 15.6px; background: rgba(255, 255, 255, .05); }
	#filters .more-filters[hidden] { display: none; }
	#filters .more-filters .dropdown-wrap > .kai-fc { width: 33.3333%; }
	#filters .more-filters .kai-dd > .btn { background: rgba(0, 0, 0, .2); }
	#filters .more-filters .kai-dd > .btn:hover { background: rgba(0, 0, 0, .35); }
	#filters .more-filters .kai-dd.show > .btn { background: rgba(0, 0, 0, .35); }
	#filters .reset { justify-content: center; align-items: center; gap: 6px; background: rgba(0, 0, 0, .2); color: rgba(255, 255, 255, .7); }
	#filters .reset:hover { color: #fff; background: rgba(0, 0, 0, .35); }

	/* dropdown menus */
	#filters .kai-dd .dropdown-menu {
		top: 100%; left: 0; margin: 2.5px 0 0; padding: 13px; min-width: 100px; max-height: none; overflow: hidden;
		border: 0; border-radius: 7.8px; background: #1c2228; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); z-index: 1000;
	}
	#filters .kai-dd .dropdown-menu.lg { width: 500px; max-width: none; }
	#filters .more-filters .kai-dd .dropdown-menu.lg { width: 350px; }
	#filters .kai-dd .dropdown-menu:not(.lg) { min-width: 100%; }
	#filters .kai-dd .dropdown-menu ul { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; }
	#filters .kai-dd .dropdown-menu::after { content: ""; display: block; clear: both; }
	#filters .kai-dd li { position: static; flex: 0 0 100%; width: 100%; padding: 2px; font-size: 11.7px; line-height: 17.55px; overflow: hidden; }
	#filters .kai-dd .dropdown-menu.lg li { flex-basis: 25%; width: 25%; }
	#filters .more-filters .kai-dd .dropdown-menu.lg li { flex-basis: 33.3333%; width: 33.3333%; }
	#filters .kai-dd li input { display: none; }
	#filters .kai-dd li label {
		display: block; width: 100%; margin: 0; padding: 3.9px 7.8px; gap: 0; border-radius: 3.9px;
		color: rgba(255, 255, 255, .8); font-size: 11.7px; font-weight: 300; line-height: 17.55px;
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}
	#filters .kai-dd li label::before {
		content: "\f0c8"; display: inline; flex: none; width: auto; height: auto; margin-right: 5.2px; border: 0; border-radius: 0; background: none; box-shadow: none;
		font-family: "Font Awesome 5 Free"; font-size: 11.7px; font-weight: 900; line-height: 17.55px; vertical-align: top; color: rgba(255, 255, 255, .8);
	}
	#filters .kai-dd li input[type="radio"] + label::before { content: "\f111"; border-radius: 0; }
	#filters .kai-dd li label:hover { background: #11161b; color: rgba(255, 255, 255, .8); transition: background .2s, color .2s; }
	#filters .kai-dd li input:checked + label { background: #36cb68; color: #fff; }
	#filters .kai-dd li input:checked + label::before { content: "\f0fe"; border: 0; background: none; box-shadow: none; color: #fff; }
	#filters .kai-dd li input[type="radio"]:checked + label { background: #e45f3a; }
	#filters .kai-dd li input[type="radio"]:checked + label::before { content: "\f192"; }

	/* ---------- result grid ---------- */
	#main-wrapper.kai-browse .film_list-wrap,
	#main-wrapper.kai-browse .aitem-wrapper.regular { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 0 -10.4px; }
	#main-wrapper.kai-browse .aitem { margin: 0 0 13px; }
	#main-wrapper.kai-browse .aitem .inner { padding: 10.4px; }
	#main-wrapper.kai-browse .aitem .poster > div { padding-bottom: 144%; border-radius: 15.6px; }
	#main-wrapper.kai-browse .aitem .inner > .title { height: 33.8px; margin: 7.8px 0; font-size: 13px; line-height: 16.9px; }
	#main-wrapper.kai-browse .aitem .inner > .info { gap: 0; margin-top: 0; }
	#main-wrapper.kai-browse .aitem .inner > .info > span { gap: 0; font-size: 11.7px; line-height: 17.55px; }
	#main-wrapper.kai-browse .aitem .inner > .info > span + span { margin-left: 6.5px; }
	#main-wrapper.kai-browse .aitem .inner > .info > span:last-child { margin-left: auto; }
	#main-wrapper.kai-browse .aitem .inner > .info > .sub,
	#main-wrapper.kai-browse .aitem .inner > .info > .dub { box-sizing: border-box; height: 15.6px; padding: 0 2.6px; border-radius: 5.2px; font-size: 10.4px; line-height: 13.6px; }
	#main-wrapper.kai-browse .aitem .inner > .info > .sub i,
	#main-wrapper.kai-browse .aitem .inner > .info > .dub i { display: inline-block; width: 14.3px; margin-right: 2.6px; font-size: 10.4px; text-align: center; }
	#main-wrapper.kai-browse .aitem .inner > .info > .dub i { width: 10.4px; }
}

@media (max-width: 1059.9px) {
	#main-wrapper.kai-browse .film_list-wrap,
	#main-wrapper.kai-browse .aitem-wrapper.regular { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
	#main-wrapper.kai-browse { margin-top: calc(104px - var(--kai-header-h) - var(--kai-header-top) * 2); }
	#az-filters li { width: 7.14286%; }
	#filters .main-filters > .kai-fc { width: 33.3333%; }
	#main-wrapper.kai-browse .film_list-wrap,
	#main-wrapper.kai-browse .aitem-wrapper.regular { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 800px) and (max-width: 1299.98px) {
	#filters .more-filters { position: absolute; right: 5.2px; z-index: 50; width: 429px; max-width: 520px; margin: 13px 0; background: #232a31; }
}

@media (max-width: 767.98px) {
	#main-wrapper.kai-browse .film_list-wrap,
	#main-wrapper.kai-browse .aitem-wrapper.regular { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* dropdowns become a centred sheet over a dimmed page */
	#filters .kai-dd.show::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 49; background: rgba(0, 0, 0, .4); }
	#filters .kai-dd .dropdown-menu {
		position: fixed !important; top: 20vh !important; left: 15vw !important; right: auto !important; bottom: auto !important;
		width: 70vw !important; min-width: 0 !important; max-width: none; height: auto !important; max-height: 55vh !important;
		margin: 0; padding: 13px; overflow: auto; overscroll-behavior: contain; transform: none !important; z-index: 50;
	}
	#filters .kai-dd .dropdown-menu.show { border: 5px solid rgba(255, 255, 255, .4); box-shadow: 0 0 60px 20px #000; }
	#filters .kai-dd li, #filters .kai-dd .dropdown-menu.lg li, #filters .more-filters .kai-dd .dropdown-menu.lg li { flex-basis: 100%; width: 100%; }
	#filters .kai-dd li label { font-size: 13px; line-height: 19.5px; }
}

@media (max-width: 639.98px) {
	.kai-browse > .container { padding: 0 13px; }
}

@media (max-width: 575.98px) {
	#az-filters li { width: 14.2857%; }
	#main-wrapper.kai-browse .film_list-wrap,
	#main-wrapper.kai-browse .aitem-wrapper.regular { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 470px) {
	#filters .main-filters > .kai-fc,
	#filters .more-filters .dropdown-wrap > .kai-fc { width: 50%; }
}

/* ---------- footer (all pages) ---------- */
@media (max-width: 1299.98px) {
	#footer.kai-footer { margin-top: 39px; padding: 39px 0; background: #000; font-size: 13px; line-height: 19.5px; }
	.kai-footer .container { padding-left: 24.7px; padding-right: 24.7px; }
	.kai-footer .top-footer { padding: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
	.kai-footer .wrapper { display: flex; flex-wrap: nowrap; gap: 0; justify-content: space-between; align-items: flex-end; padding: 26px 0; }
	.kai-footer .top-footer .wrapper { flex-direction: column; align-items: flex-start; }
	.kai-footer .azlist { display: block; margin-bottom: 13px; }
	.kai-footer .azlist > div { display: flex; flex-wrap: nowrap; gap: 0; align-items: flex-end; margin-bottom: 13px; }
	.kai-footer .azlist > div > div { margin-right: 13px; font-size: 23.4px; font-weight: 500; line-height: 29.9px; }
	.kai-footer .azlist > div > span { color: #fff; opacity: .4; font-size: 14.95px; line-height: 1.5; }
	.kai-footer .az-list { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; }
	.kai-footer .az-list li { margin: 0 6.5px 9.1px 0; }
	.kai-footer .az-list li:nth-child(2) { display: none; }
	.kai-footer .az-list a { display: block; min-width: 0; height: auto; padding: 3.9px 10.4px; border-radius: 5px; background: rgba(255, 255, 255, .1); font-size: 16.9px; font-weight: 500; line-height: 25.35px; }
	.kai-footer .az-list a:hover { background: #e45f3a; }
	.kai-footer .menu-footer ul { gap: 0; flex-wrap: nowrap; }
	.kai-footer .menu-footer li + li { margin-left: 13px; }
	.kai-footer .menu-footer a { font-size: 14.3px; font-weight: 500; }
	.kai-footer .bot-footer { padding: 0; background: transparent; }
	.kai-footer .bot-footer .wrapper > div { font-size: 14.3px; }
	.kai-footer .bot-footer .wrapper > div > div { font-size: inherit; font-weight: 300; }
	.kai-footer .bot-footer .wrapper > div > span { display: inline; margin: 0; color: #fff; opacity: .5; font-size: inherit; }
	#footer.kai-footer .logo-footer img { height: 36.4px; width: auto; }
	body #footer.kai-footer a:not(.sc-social-button):not(.btn) { color: #fff !important; }
	body #footer.kai-footer .logo-footer { margin: 0; }
	#footer.kai-footer .menu-footer a { line-height: 1.5; }
	#footer.kai-footer .bot-footer .wrapper > div { line-height: 1.5; }
}
@media (max-width: 1059.9px) {
	.kai-footer .bot-footer .wrapper { flex-direction: column-reverse; align-items: center; text-align: center; }
	.kai-footer .bot-footer .wrapper > div { font-size: 13px; }
	body #footer.kai-footer .logo-footer { margin-bottom: 26px; }
	.kai-footer .azlist > div { flex-direction: column; align-items: center; text-align: center; }
	.kai-footer .az-list { justify-content: center; }
	.kai-footer .menu-footer { margin: 0 auto; }
}
@media (max-width: 639.98px) {
	.kai-footer .container { padding-left: 13px; padding-right: 13px; }
}

/* ---------- login / register / forgot modal ---------- */
@media (max-width: 1299.98px) {
	#modallogin .modal-dialog { max-width: 364px; margin: 22.75px auto; }
	#modallogin .modal-dialog.modal-dialog-centered { min-height: calc(100% - 45.5px); }
	#modallogin .modal-content { border-radius: 15.6px; font-size: 13px; line-height: 19.5px; }
	#modallogin .modal-content::before { height: 156px; transform: translateY(-78px); }
	#modallogin .modal-body { padding: 104px 39px 39px; }
	#modallogin .modal-body h5 { margin: 0 0 5.2px; font-size: 19.5px; line-height: 23.4px; }
	#modallogin form.mt-4 { margin-top: 19.5px !important; }
	#modallogin .form-group { margin-bottom: 15.6px; }
	#modallogin .form-control { padding: 9.1px 13px; border-radius: 6.5px; font-size: 13px; line-height: 19.5px; }
	#modallogin .modal-btn { margin: 13px 0 !important; padding: 6.5px 19.5px; border-radius: 6.5px; font-size: 15.6px; line-height: 23.4px; }
	#modallogin .modal-body > .mt-3 { margin-top: 13px !important; }
	#modallogin .alert { padding: 7.8px 11.7px; border-radius: 6.5px; font-size: 12.35px; }
	#modallogin .km-close { top: 39px; right: 39px; width: 26px; height: 26px; border-radius: 15.6px; opacity: .5; transform: translate(6.5px, -6.5px); }
	#modallogin .km-close i { display: none; }
	#modallogin .km-close { background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 13px auto no-repeat; }
	#modallogin .km-close:hover { opacity: .75; }
}
@media (max-width: 575.98px) {
	#modallogin .modal-dialog { margin: 0 auto; }
	#modallogin .modal-dialog.modal-dialog-centered { min-height: calc(100% - 13px); }
}

/* ---------- 404 page ---------- */
body.error404 #wrapper { display: flex; flex-direction: column; }
body.error404 #main-wrapper.layout-page-404 { flex: 1 1 auto; padding-bottom: 0; margin-top: calc(392px - var(--kai-header-h) - var(--kai-header-top) * 2); }
.layout-page-404 > .container { display: block; padding: 0 26.6px; }
.layout-page-404 section { margin: 0 0 42px; }
.layout-page-404 section img { display: inline; width: 284px; max-width: none; height: 366px; vertical-align: middle; }
.layout-page-404 section h2 { margin: 0 0 7px; color: #fff; font-size: 28px; font-weight: 500; line-height: 1.2; }
.layout-page-404 section p { margin: 0 0 14px; color: #fff; font-size: 14px; line-height: 21px; }
.layout-page-404 section .btn { display: inline-block; padding: 7px 21px; border: 0; border-radius: 7px; background: #e45f3a; color: #fff; font-size: 14px; font-weight: 300; line-height: 21px; }
.layout-page-404 section .btn:hover { background: #b83c19; }
@media (max-width: 1299.98px) {
	body.error404 #main-wrapper.layout-page-404 { margin-top: calc(364px - var(--kai-header-h) - var(--kai-header-top) * 2); }
	.layout-page-404 > .container { padding: 0 24.7px; }
	.layout-page-404 section { margin-bottom: 39px; }
	.layout-page-404 section h2 { margin-bottom: 6.5px; font-size: 26px; }
	.layout-page-404 section p { margin-bottom: 13px; font-size: 13px; line-height: 19.5px; }
	.layout-page-404 section .btn { padding: 6.5px 19.5px; border-radius: 6.5px; font-size: 13px; line-height: 19.5px; }
}
@media (max-width: 1199.98px) {
	.layout-page-404 section h2 { font-size: calc(17.225px + .9vw); }
}
@media (max-width: 991.98px) {
	body.error404 #main-wrapper.layout-page-404 { margin-top: calc(208px - var(--kai-header-h) - var(--kai-header-top) * 2); }
}
@media (max-width: 639.98px) {
	.layout-page-404 > .container { padding: 0 13px; }
}

/* ---------- header search box: the reference has no green focus ring ---------- */
@media (max-width: 1299.98px) {
	#header.kai-header #search .inner, #header.kai-header #search .inner:focus-within, #header.kai-header #search.active .inner { box-shadow: none; }
}

/* ---------- logged-in header dropdowns (rem values rescaled to the 13px root) ---------- */
@media (max-width: 1299.98px) {
	.km-dd > .km-menu { margin-top: 15.6px; border-radius: 15.6px; }
	#user-slot .nav-btn { margin-right: 26px; }
	#user-slot .nav-btn i { font-size: 19.5px; }
	#user-slot .nav-btn.new::after { right: -2.6px; width: 4.55px; height: 4.55px; border-radius: 13px; }
	#user-slot .km-ava-btn { width: 28.6px; height: 28.6px; }
	.km-user-menu { padding-bottom: 2.6px; }
	.km-user-menu .head { margin-bottom: 10.4px; padding: 18.2px 22.1px; }
	.km-user-menu .head > div { margin-right: 13px; }
	.km-user-menu .head > div div { font-size: 14.3px; }
	.km-user-menu .head > .btn { width: 29.9px; height: 29.9px; }
	.km-user-menu .head > .btn i { font-size: 15.6px; }
	.km-user-menu .dropdown-item { font-size: 14.3px; }
	.km-user-menu .dropdown-item span { margin: 0 10.4px; padding: 7.15px 13px; }
	.km-user-menu .dropdown-item i { width: 23.4px; }
	.km-noti-menu { padding: 2.6px 0; }
	.km-noti-menu .shead { padding: 10.4px 18.2px 13px; }
	.km-noti-menu .shead .stitle { font-size: 15.6px; }
	.km-noti-menu .more-btn.mark { font-size: 13px; }
	.km-noti-menu .noti-tab { gap: 7.8px; padding: 0 18.2px 18.2px; }
	.km-noti-menu .noti-tab span, .km-noti-menu .noti-tab a { padding: 6.5px 0; border-radius: 7.8px; }
	.km-noti-menu .noti-item { gap: 9.75px; padding: 7.8px 18.2px; }
	.km-noti-menu .noti-item img { width: 36.4px; height: 36.4px; border-radius: 5.2px; }
	.km-noti-menu .noti-body { font-size: 11.05px; }
	.km-noti-menu .noti-time { gap: 5.2px; font-size: 9.75px; }
	.km-noti-menu .noti-empty { padding: 26px 18.2px 33.8px; }
	.km-noti-all { padding: 9.1px; font-size: 11.7px; }
}
@media (max-width: 575.98px) {
	#user-slot .nav-btn { margin-right: 16.25px; }
}

/* ---------- empty result ---------- */
@media (max-width: 1299.98px) {
	#main-wrapper.kai-browse .anime-empty-state { padding: 39px; border-radius: 0; background: transparent; color: rgba(255, 255, 255, .4); font-size: 13px; line-height: 19.5px; }
	#main-wrapper.kai-browse .anime-empty-state p { margin: 0; }
}